新驾驶舱调整

src/components/Viewer/smViewer.vue

@@ -132,11 +132,11 @@ export default {
       // viewer.scene.globe.enableLighting = true;
 
       if (window.baseImgLayer) {
-        viewer.imageryLayers.addImageryProvider(
-          new Cesium.SuperMapImageryProvider({
-            url: window.baseImgLayer,
-          })
-        );
+        // viewer.imageryLayers.addImageryProvider(
+        //   new Cesium.SuperMapImageryProvider({
+        //     url: window.baseImgLayer,
+        //   })
+        // );
       }
       viewer.scene.fog.enabled = false;
       viewer.scene.debugShowFramesPerSecond = false;

src/router/index.js

@@ -48,9 +48,9 @@ export const constantRoutes = [{
             import('@/views/viewer.vue'),
         hidden: true
     }, {
-        path: '/overview1',
+        path: '/viewer1',
         component: () =>
-            import('@/views/overview1.vue'),
+            import('@/views/viewer1.vue'),
         hidden: true
     },
     {

src/views/cockpit/bjxm.vue

@@ -0,0 +1,379 @@
+<template>
+  <div class="bjxm">
+    <div class="title">
+      <div class="icon"></div>
+      <span>报建项目</span>
+    </div>
+    <div class="content">
+      <div class="item">
+        <div class="icon">
+          <div class="icon_zxkg"></div>
+        </div>
+        <div class="text">
+          <p>报建数量</p>
+          <span>66</span>个
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon_zxkg"></div>
+        </div>
+        <div class="text">
+          <p>用地面积</p>
+          <span>6666</span>平方千米
+        </div>
+      </div>
+
+      <div id="bjxm_echart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+  components: {},
+  data() {
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    init_bjxm_echart() {
+      var myChart = echarts.init(document.getElementById("bjxm_echart"));
+
+      var dataList = [
+        {
+          value: 31,
+          name: "城市报建",
+        },
+        {
+          value: 43,
+          name: "私宅报建",
+        },
+      ];
+      var color2 = [
+        {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#FC8053",
+              },
+              {
+                offset: 1,
+                color: "#F2CAA4",
+              },
+            ],
+            global: false,
+          },
+        },
+        {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#5583e7",
+              },
+              {
+                offset: 1,
+                color: "#36dddb",
+              },
+            ],
+            global: false,
+          },
+        },
+        {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#f888b1",
+              },
+              {
+                offset: 1,
+                color: "#fbe6ee",
+              },
+            ],
+            global: false,
+          },
+        },
+      ];
+      var dataAll = 0;
+      dataList.forEach((item, index) => {
+        item.itemStyle = color2[index];
+        dataAll += item.value;
+      });
+
+      let option = {
+        backgroundColor: "rgba(0,0,0,0)",
+        title: {
+          text: "报建数量",
+          x: "20%",
+          textStyle: {
+            //  rich: {
+            fontSize: 14,
+            color: "#fff",
+            fontWeight: "bold",
+            // align: "35%"
+
+            //        a: {
+            //           color: "#fff",
+            //           fontSize: 42,
+            //           align: "35%",
+            //        },
+            //        b: {
+            //           fontSize: 20,
+            //           color: "#fff",
+            //           fontWeight: "bold",
+            //           align: "35%",
+            //        }
+            //  },
+          },
+          x: "20%",
+          y: "45%",
+        },
+        legend: {
+          orient: "vertical",
+          right: "10%",
+          top: "center",
+          data: ["城市报建", "私宅报建"],
+          icon: "rect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
+          itemWidth: 10, // 设置宽度
+          itemHeight: 10, // 设置高度
+
+          itemGap: 10, // 设置间距
+          textStyle: {
+            //图例文字的样式
+            color: "#fff",
+            fontSize: 16,
+          },
+        },
+        graphic: [
+          {
+            type: "group",
+            top: "middle",
+            left: "center",
+            id: "data",
+            children: [
+              // {
+              //   type: "text",
+              //   id: "current",
+              //   top: 40,
+              //   style: {
+              //     text: dataAll,
+              //     font: 'bolder 36px "Microsoft YaHei", sans-serif',
+              //     fill: "#fff",
+              //     textAlign: "center"
+              //   }
+              // },
+              // {
+              //   type: "text",
+              //   id: "all",
+              //   top: 80,
+              //   left:'10%',
+              //   style: {
+              //     text: "报建数量",
+              //     font: 'bolder 14px "Microsoft YaHei", sans-serif',
+              //     fill: "#fff",
+              //     // textAlign: "center"
+              //   }
+              // }
+            ],
+          },
+        ],
+        series: [
+          {
+            name: "轮次",
+            type: "pie",
+            radius: ["45%", "80%"],
+            center: ["30%", "50%"],
+            avoidLabelOverlap: false,
+            label: {
+              normal: {
+                show: false,
+                position: "inner", // 数值显示在内部
+                formatter: (params) => {
+                  console.log(params);
+                  return `${params.name}` + ":" + +params.value + "个";
+                },
+              },
+              textStyle: {
+                //图例文字的样式
+                color: "#fff",
+                fontSize: 16,
+              },
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: "16",
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: false,
+              length: 48,
+            },
+            data: dataList,
+          },
+        ],
+        grid: {
+          left: "20%",
+          // right: "40%",
+          // bottom: "10%",
+          top: "16%",
+          containLabel: true,
+        },
+      };
+
+      myChart.setOption(option);
+    },
+  },
+  beforeCreate() { }, //生命周期 - 创建之前
+  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+  beforeMount() { }, //生命周期 - 挂载之前
+  mounted() {
+    this.init_bjxm_echart();
+  }, //生命周期 - 挂在完成
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroy() { }, //生命周期 - 销毁完成
+  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+  deactivated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style lang="scss" scoped>
+.bjxm {
+  border-width: 0px;
+  position: absolute;
+  width: 385px;
+  height: 310px;
+  top: 68%;
+  left: 29rem;
+  background: inherit;
+  border: none;
+  border-radius: 0px;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  z-index: 100;
+}
+
+.title {
+  border-width: 0px;
+  width: 100%;
+  height: 40px;
+  // font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  // font-weight: 700;
+  // font-style: normal;
+  // color: #fff;
+  // padding: 2%;
+  background: no-repeat;
+  background-image: url("/static/images/overview/标题框.png");
+
+  .icon {
+    background: no-repeat;
+
+    background-image: url("/static/images/overview/icon_标题框装饰.png");
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background-position: 14px 7px;
+  }
+
+  span {
+    color: #fff;
+    font-size: 14px;
+    font-weight: bold;
+    position: relative;
+    bottom: 0.5rem;
+  }
+}
+
+.content {
+  position: absolute;
+  left: 5%;
+  width: 400px;
+  height: 220px;
+  top: 13%;
+}
+
+.item {
+  width: 45%;
+  height: 30%;
+  display: inline-block;
+}
+
+.icon {
+  width: 50px;
+  padding: 1.5%;
+  border-radius: 8px;
+  display: inline-block;
+  height: 50px;
+}
+
+.icon_zxkg {
+  background: no-repeat 50%;
+  background-image: url("/static/images/overview/icongdbh0.png");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+}
+
+.text {
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+  width: 100px;
+
+  p {
+    font-kerning: normal;
+    font-family: "Arial Negreta", "Arial Normal", "Arial";
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    color: #ffffff;
+  }
+
+  span {
+    font-family: "Arial Negreta", "Arial Normal", "Arial";
+    font-weight: 700;
+    font-style: normal;
+    color: #68f4fb;
+  }
+}
+
+.value {
+  display: inline-block;
+
+  // border: #00FFFF 1px solid;
+  width: 50px;
+}
+
+#bjxm_echart {
+  position: relative;
+  top: 0;
+  width: 20.5rem;
+  height: 10rem;
+}
+</style>

src/views/cockpit/borderTemplate.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="borderTemplate">
+    <div class="title">
+      <div>
+        <div class="icon"></div>
+        <span>{{ titleName }}</span>
+      </div>
+      <slot name="title"></slot>
+    </div>
+    <div class="borderContent">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "borderTemplate",
+  props: {
+    titleName: "",
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.borderTemplate {
+  border-width: 0px;
+  position: absolute;
+  right: 10px;
+  top: 68%;
+  width: 21.6%; //416px
+  height: calc((100% - 52px) / 3);
+  display: -ms-flexbox;
+  display: flex;
+  z-index: 100;
+
+  .title {
+    border-width: 0px;
+    width: 100%;
+    height: 40px;
+    background: no-repeat;
+    background-image: url("/static/images/overview/标题框.png");
+    // background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .icon {
+      background: no-repeat;
+      background-image: url("/static/images/overview/icon_标题框装饰.png");
+      display: inline-block;
+      width: 30px;
+      height: 30px;
+      background-position: 14px 7px;
+    }
+
+    span {
+      color: #fff;
+      font-size: 14px;
+      font-weight: bold;
+      position: relative;
+      bottom: 0.5rem;
+    }
+    .selectTab {
+      /deep/ .el-input__inner {
+        // padding-right: 30px;
+        width: 128px !important;
+        height: 24px !important;
+        line-height: 24px;
+        padding-left: 22px;
+        padding-right: 0px;
+        font-size: 12px;
+        color: #bcd3e5;
+        border: none;
+        background: url("/static/images/overview/selectBg.png") no-repeat !important;
+        background-size: 100% 100%;
+      }
+      /deep/ .el-input__icon {
+        line-height: 1;
+      }
+      /deep/ .el-input__suffix {
+        right: -2px;
+      }
+      /deep/ .el-select-dropdown__list {
+        color: #bcd3e5 !important;
+        background: linear-gradient(
+          180deg,
+          rgba(3, 115, 177, 0) 11%,
+          rgba(3, 115, 177, 0.48) 100%
+        );
+        border-image: linear-gradient(
+            360deg,
+            rgba(75, 185, 250, 0.2),
+            rgba(75, 185, 250, 0.05)
+          )
+          1 1 !important;
+        border: none;
+      }
+      /deep/ .el-select-dropdown__item.hover,
+      .el-select-dropdown__item:hover {
+        background-color: rgba(87, 163, 226, 0.5);
+      }
+      /deep/ .el-select-dropdown__item {
+        color: #ecf6ff;
+      }
+    }
+    /deep/ {
+      .el-select-dropdown__item.selected {
+        color: #409eff;
+      }
+    }
+  }
+}
+
+/deep/ .el-popper[x-placement^="bottom"] {
+  margin-top: 12px;
+  background: #163253;
+}
+/deep/ .el-select-dropdown {
+  border: none;
+}
+/deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
+  border-bottom-color: #163253;
+  top: 0;
+}
+.borderContent {
+  // border: #00FFFF 1px solid;
+  position: absolute;
+  left: 2%;
+  width: 95%;
+  height: calc(100% - 40px);
+  top: 40px;
+}
+</style>

src/views/cockpit/datePicker.vue

@@ -0,0 +1,197 @@
+<template>
+  <!-- value-format="yyyy-MM-dd" -->
+  <el-date-picker
+    v-model="dateValue"
+    class="timePicker"
+    type="daterange"
+    :picker-options="pickerOptions"
+    value-format="yyyyMMdd"
+    range-separator="~"
+    start-placeholder="开始日期"
+    end-placeholder="结束日期"
+    :clearable="false"
+    align="left"
+    @change="dateChange"
+  >
+  </el-date-picker>
+</template>
+
+<script>
+const nowYear = new Date().getFullYear();
+const nowMonth = new Date().getMonth() + 1;
+const nowDay = new Date().getDate();
+export default {
+  data() {
+    return {
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "今年",
+            onClick(picker) {
+              const start = new Date(`${nowYear}-01-01`);
+              const end = new Date();
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "去年",
+            onClick(picker) {
+              const start = new Date(`${nowYear - 1}-01-01`);
+              const end = new Date(`${nowYear - 1}-12-31`);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "近三年",
+            onClick(picker) {
+              const start = new Date(`${nowYear - 3}-${nowMonth}-${nowDay}`);
+              const end = new Date();
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "近五年",
+            onClick(picker) {
+              const start = new Date(`${nowYear - 5}-${nowMonth}-${nowDay}`);
+              const end = new Date();
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      // dateValue: [`${nowYear}-01-01`, `${nowYear}-${nowMonth}-${nowDay}`]
+      dateValue: [`${nowYear}0101`, `${nowYear}${nowMonth}${nowDay}`],
+    };
+  },
+  mounted() {
+    this.dateChange();
+  },
+  methods: {
+    dateChange() {
+      this.$emit("dateChange", this.dateValue);
+      store.setCockpitDate(this.dateValue);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped></style>
+<style lang="scss">
+// 日期按选择器样式修改
+.timePicker {
+  position: absolute;
+  top: 40px; //top: 10%;
+  left: 23%;
+  z-index: 100;
+  font-size: 14px;
+  padding: 0;
+  width: 180px !important;
+}
+
+.el-date-editor .el-range__close-icon {
+  display: none;
+}
+
+.el-picker-panel__sidebar {
+  background: #002446;
+  border-color: rgba(37, 103, 141, 0.46);
+  border-radius: 6px 0 0 6px;
+
+  .el-picker-panel__shortcut {
+    color: rgba(255, 255, 255, 1);
+  }
+}
+
+//// 时间选择器  通用样式
+.el-date-editor--daterange.el-input__inner {
+  width: 200px;
+  background: #002446;
+}
+
+.el-date-editor .el-range-separator {
+  padding: 0;
+  height: 78%;
+}
+
+.el-date-editor .el-range__close-icon {
+  line-height: 23px;
+}
+
+.el-date-editor .el-range__icon {
+  line-height: 22px;
+}
+
+.el-date-picker__header-label {
+  color: #fff;
+}
+
+.el-range-input {
+  background: #002446;
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+}
+
+.el-range-separator {
+  line-height: 20px !important;
+  color: rgba(255, 255, 255, 1) !important;
+}
+
+.el-date-editor .el-range-input {
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+}
+
+.el-picker-panel,
+.el-time-panel {
+  background: #002446 !important;
+  border: 1px solid rgba(37, 103, 141, 0.46);
+  color: #fff;
+  border-radius: 6px;
+}
+
+.el-time-spinner__item {
+  color: #fff;
+
+  &.active:not(.disabled) {
+    color: #fff;
+  }
+
+  &:hover {
+    background: transparent !important;
+    color: rgb(64, 158, 255); //#3B5064
+  }
+}
+
+.el-date-range-picker__content.is-left {
+  border-right: 1px solid rgba(37, 103, 141, 0.46);
+  color: #fff;
+}
+
+.el-date-table td.in-range div,
+.el-date-table td.in-range div:hover,
+.el-date-table.is-week-mode .el-date-table__row.current div,
+.el-date-table.is-week-mode .el-date-table__row:hover div {
+  background: rgba(23, 94, 165, 0.31) !important;
+}
+
+.el-date-table th {
+  color: #fff;
+}
+
+.el-date-table td.next-month,
+.el-date-table td.prev-month {
+  color: #747985;
+}
+
+// 选择器箭头方向
+.el-input__suffix-inner .el-icon-arrow-down:before {
+  content: " ";
+  border-top: 8px solid #64daff !important;
+  border-bottom: 8px solid transparent !important;
+  border-left: 5.5px solid transparent !important;
+  border-right: 5.5px solid transparent !important;
+  position: relative;
+  top: 12px;
+}
+</style>

src/views/cockpit/gdbh.vue

@@ -0,0 +1,211 @@
+<template>
+  <borderTemplate titleName="耕地保护" class="gdbh">
+    <div class="content">
+      <div class="item" v-for="(sd, i) in sdlist" :key="i">
+        <div class="icon" :class="`icongdbh${i}`"></div>
+        <div class="text">
+          <p>{{ sd.name }}</p>
+          <span class="sdvalue">{{ sdata[sd.prop] || 0 }}</span>
+          <!-- <span class="unit">{{ sd.unit }}</span> -->
+          <span class="unit">平分千米</span>
+
+        </div>
+      </div>
+    </div>
+    <pie3d id="gdbh_echart" unit="km²" ref="echartRef"></pie3d>
+  </borderTemplate>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import borderTemplate from "./borderTemplate.vue";
+// import highPie from "../../components/echartsTemplate/highPie.vue";
+import pie3d from "../../components/echartsTemplate/3dPie.vue";
+import { QueryOne, QueryList } from "../../api/cockpitNew";
+export default {
+  components: { borderTemplate, pie3d },
+  data() {
+    return {
+      sdata: {},
+      sdlist: [
+        { name: "高标准农田", prop: "gzl_yjjbntmj", unit: "km²" }, //耕地保有量
+        { name: "补充耕地项目", prop: "xzqhdm_number", unit: "个" },
+        { name: "永久基本农田", prop: "yjjbntmj", unit: "km²" },
+        { name: "补充耕地面积", prop: "mj", unit: "km²" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+
+  methods: {
+    setData(datas) {
+      this.GetQueryOne_nt(datas);
+      this.GetQueryOne_bh(datas);
+      this.GetQueryList(datas);
+    },
+    GetQueryOne_nt(datas) {
+      let params = {
+        ...datas,
+        jscType: "jsc_gdbh_ztgh_nt",
+      };
+      QueryOne(params).then((res) => {
+        this.sdata = { ...this.sdata, ...res.data };
+      });
+    },
+    GetQueryOne_bh(datas) {
+      let params = {
+        ...datas,
+        jscType: "jsc_gdbh_ztgh_bc",
+      };
+      QueryOne(params).then((res) => {
+        this.sdata = { ...this.sdata, ...res.data };
+      });
+    },
+    GetQueryList(datas) {
+      let optionsData = [];
+      let params = {
+        ...datas,
+        jscType: "jsc_gdbh_yelx_nt",
+      };
+      QueryList(params).then((res) => {
+        if (res.data.length) {
+          res.data.forEach((edata) => {
+            optionsData.push({ name: edata.dlbmmc, value: edata.yjjbntmj });
+          });
+        } else {
+          optionsData = [
+            { name: "水田", value: 0 },
+            { name: "水浇地", value: 0 },
+            { name: "旱地", value: 0 },
+          ];
+        }
+
+        this.$nextTick(() => {
+          this.$refs.echartRef.setOptions(optionsData, 1 / 100000);
+        });
+      });
+    },
+  },
+  mounted() {
+    // const optionsData = [
+    //   { name: "水田", value: 50 },
+    //   { name: "水浇地", value: 20 },
+    //   { name: "旱地", value: 30 },
+    // ];
+    // this.$nextTick(() => {
+    //   this.$refs.echartRef.setOptions(optionsData);
+    // });
+  },
+};
+</script>
+<style lang="scss" scoped>
+.gdbh {
+  top: 10px !important;
+
+  .content {
+    // border: #00FFFF 1px solid;
+    // position: absolute;
+    // left: 2%;
+    // top: 10px;
+    width: 98%;
+    height: 100px;
+  }
+
+  .item {
+    width: 50%;
+    height: 45px;
+    display: inline-block;
+    // border: #00FFFF 1px solid;
+  }
+
+  .icon {
+    width: 45px;
+    height: 45px;
+    padding: 2%;
+    border-radius: 8px;
+    display: inline-block;
+    background: no-repeat 50%;
+  }
+
+  .icongdbh0 {
+    background-image: url("/static/images/overview/icongdbh0.png");
+  }
+
+  .icongdbh1 {
+    background-image: url("/static/images/overview/icongdbh1.png");
+  }
+
+  .icongdbh2 {
+    background-image: url("/static/images/overview/icongdbh2.png");
+  }
+
+  .icongdbh3 {
+    background-image: url("/static/images/overview/icongdbh3.png");
+  }
+
+  .text {
+    display: inline-block;
+    // border: #00FFFF 1px solid;
+    width: calc(100% - 50px);
+    margin-bottom: 4px;
+
+    p {
+      // font-kerning: normal;
+      // font-family: "Arial Negreta", "Arial Normal", "Arial";
+      // font-weight: bold;
+      // font-size: 14px;
+      // color: #bcd3e5;
+      // line-height: 24px;
+
+
+      font-kerning: normal;
+      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+      font-weight: 700;
+      font-style: normal;
+      font-size: 14px;
+      color: #FFFFFF;
+    }
+
+    .sdvalue {
+      // font-family: "Arial Negreta", "Arial Normal", "Arial";
+      // font-weight: 700;
+      // font-style: normal;
+      // font-size: 18px;
+      // color: #68F4FB;
+      // line-height: 16px;
+
+
+      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+      font-weight: 700;
+      font-style: normal;
+      color: #68F4FB;
+    }
+
+    .unit {
+      font-family: "Arial Negreta", "Arial Normal", "Arial";
+      font-weight: 400;
+      font-size: 12px;
+      color: #ecf6ff;
+      line-height: 12px;
+    }
+  }
+
+  .value {
+    display: inline-block;
+
+    // border: #00FFFF 1px solid;
+    width: 50px;
+  }
+
+  #gdbh_echart {
+    width: 100%;
+    height: calc(100% - 100px);
+    // position: relative;
+    // top: 110px;
+  }
+}
+</style>

src/views/cockpit/gkzb.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="jsyd">
+    <div class="title">
+      <div class="icon"></div>
+      <span>管控指标</span>
+    </div>
+    <div class="content">
+      <div class="item">
+        <div class="icon">
+          <div class="icon_zxkg">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>耕地保护目标</p>
+          <span>{{ store.state.cockpit_gkzb.tbmj_ys }}</span>平方干米
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon_yrkkg">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>永久基本农田保护</p>
+          <span>{{ store.state.cockpit_gkzb.yjjbntmj }}</span>平方干米
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon_jsydzzb">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>生态保护红线</p>
+          <span>
+            {{ store.state.cockpit_gkzb.mj }}
+          </span>平方干米
+
+        </div>
+      </div>
+      <div class="item">
+        <div class="icon">
+          <div class="icon_jsydzzb">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>城市开发边界</p>
+          <span>{{ store.state.cockpit_gkzb.kfbjmj }}</span>平方干米
+
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="icon">
+          <div class="icon_yrk">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>己入库控规范围
+
+          </p>
+          <span>{{ store.state.cockpit_gkzb.ghdkmj }}</span>平方干米
+
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="icon">
+          <div class="icon_fgczkfbj">
+
+          </div>
+        </div>
+        <div class="text">
+          <p>覆盖城镇开发边界
+
+          </p>
+          <span>{{ store.state.cockpit_gkzb.bfb }}</span>%
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import { cockpitInfo } from '@/api/cockpit'
+
+export default {
+  components: {},
+  data() {
+    return {
+      yjjbntmj: 0,
+      kfbjmj: 0,
+      bfb: 0,
+      mj: 0,
+      ly_mj: 0,
+      hy_mj: 0,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    async initData() {
+      const that = this;
+      let obj = {
+        // beginTime: store.state.cockpit_date[0],
+        // endTime: store.state.cockpit_date[1],
+        jscType: 'jsc_gkzb_ztgu_stbh',
+        id: '4602'
+      };
+      let data = await cockpitInfo(obj);
+
+
+      let obj_yjjbntmj = {
+        jscType: 'jsc_gdbh_ztgh_nt',
+        id: '4602'
+      };
+      let obj_yjjbntmj_data = await cockpitInfo(obj_yjjbntmj);
+
+      let obj_kfbjmj = {
+        jscType: 'jsc_gkzb_ztgh_kfbj',
+        id: '4602'
+      };
+      let obj_kfbjmj_data = await cockpitInfo(obj_kfbjmj);
+
+      let obj_gdbhmb = {
+        jscType: 'jsc_gkzb_ztgu_gdbhmb',
+        id: '4602'
+      };
+      let obj_gdbhmb_data = await cockpitInfo(obj_gdbhmb);
+      store.setCockpitGkzb({
+        mj: data.data[0].mj,// 生态保护红线面积
+        ly_mj: data.data[0].ly_mj,// 路域生态保护红线
+        hy_mj: data.data[0].hy_mj,//近海岸面积
+        yjjbntmj: obj_yjjbntmj_data.data[0].yjjbntmj,// 永久基本农田保护面积
+        kfbjmj: obj_kfbjmj_data.data[0].kfbjmj,// 城市开发边界
+        bfb: obj_kfbjmj_data.data[0].bfb * 100,// 覆盖城镇开发边界
+        tbmj_ys: obj_gdbhmb_data.data[0].tbmj_ys,//耕地保护目标
+        ghdkmj: obj_kfbjmj_data.data[0].ghdkmj//已入库管控范围
+      });
+    }
+  },
+  beforeCreate() { }, //生命周期 - 创建之前
+  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+  beforeMount() { }, //生命周期 - 挂载之前
+  mounted() {
+    this.initData();
+
+  }, //生命周期 - 挂在完成
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroy() { },//生命周期 - 销毁完成
+  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style  lang="scss"  scoped>
+.jsyd {
+  border-width: 0px;
+  position: fixed;
+  left: 1rem;
+  top: 4rem;
+  z-index: 1;
+  width: 416px;
+  height: 310px;
+  background: inherit;
+  border: none;
+  border-radius: 0px;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  z-index: 100;
+}
+
+.title {
+  border-width: 0px;
+  width: 100%;
+  height: 40px;
+  // font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  // font-weight: 700;
+  // font-style: normal;
+  // color: #fff;
+  // padding: 2%;
+  background: no-repeat;
+  background-image: url("/static/images/overview/标题框.png");
+
+  .icon {
+    background: no-repeat;
+
+    background-image: url("/static/images/overview/icon_标题框装饰.png");
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background-position: 14px 7px;
+  }
+
+  span {
+    color: #fff;
+    font-size: 14px;
+    font-weight: bold;
+    position: relative;
+    bottom: 0.5rem;
+  }
+}
+
+.content {
+  position: absolute;
+  left: 1%;
+  width: 500px;
+  top: 18%;
+}
+
+.item {
+  width: 45%;
+  height: 30%;
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+
+}
+
+.icon {
+  width: 50px;
+  padding: 1.5%;
+  border-radius: 8px;
+  display: inline-block;
+  height: 50px
+}
+
+.icon_zxkg {
+  background: no-repeat 50%;
+  background-image: url("/static/images/overview/icon_zxkg.png");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+.icon_yrkkg {
+  background: no-repeat 50%;
+  background-image: url("/static/images/overview/icon_yrkkg.png");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+.icon_jsydzzb {
+  background: no-repeat 50%;
+  background-image: url("/static/images/overview/icon_jsydzzb.png");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+.icon_xzjsyd {
+  background: no-repeat 50%;
+  background-image: url("/static/images/overview/icon_xzjsyd.png");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+.icon_ysyzb {
+  background: no-repeat 50%;
+  background-image: url("/static/images/overview/icon_jsydzzb.png");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+.icon_syzb {
+  background: no-repeat 50%;
+  background-image: url("/static/images/overview/icon_jsydzzb.png");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+.icon_syzb {
+  background: no-repeat 50%;
+  background-image: url("/static/images/overview/gkzb_syzb.png");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+.icon_fgczkfbj {
+  background: no-repeat 50%;
+  background-image: url("/static/images/overview/gkzb_fgczkfbj.png");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+.icon_yrk {
+  background: no-repeat 50%;
+  background-image: url("/static/images/overview/icongdbh2.png");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+.text {
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+  width: 170px;
+
+  p {
+    font-kerning: normal;
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    color: #FFFFFF;
+  }
+
+  span {
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    color: #68F4FB;
+  }
+}
+
+.value {
+  display: inline-block;
+
+  // border: #00FFFF 1px solid;
+  width: 50px;
+
+}
+</style>

src/views/cockpit/hysy.vue

@@ -0,0 +1,541 @@
+<template>
+    <div class="hysy">
+        <div class="box">
+            <div class="title">
+                <div class="icon"></div>
+                <span>海域使用权出让</span>
+            </div>
+            <div class="content">
+                <div class="icon_info">
+
+                </div>
+                <div class="info_left">
+
+                </div>
+                <div class="info_main">
+
+                </div>
+                <div class="text">
+                    <span>海域使用权
+                        <br>
+                        出让项目</span>
+                    <div class="text_item">
+                        <span class="count1">{{ store.state.cockpit_hysy.text.xzqhdm_number }}</span>
+                        <span class="unit">个</span>
+                    </div>
+
+                    <div class="text_item1">
+                        <span>用海总面积</span>
+                        <span class="count2">{{ store.state.cockpit_hysy.text.zhmj }}</span>
+                        <span class="unit">公顷</span>
+                    </div>
+                </div>
+            </div>
+            <div id="hysyEchart">
+
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import { cockpitInfo } from '@/api/cockpit'
+
+export default {
+    components: {},
+    data() {
+        return {
+            label_text: {
+                xzqhdm_number: 0,
+                zhmj: 0,
+
+            },
+            label_echart: {
+                x: [],
+                bar: [],
+
+            }
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() {
+
+    }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    methods: {
+        getRenKou() {
+            const that = this;
+            var dom = document.getElementById('hysyEchart');
+
+            var myChart = window.echarts.init(dom);
+
+            // 柱状图的宽度，y是x的一半
+            const offsetX = 10
+            const offsetY = 5
+            let colorList = ["RGBA(30, 111, 181, 0.8)", "RGBA(149, 101, 24, 0.8)", "RGBA(29, 128, 64, 0.8)", "RGBA(133, 48, 52, 0.8)", "RGBA(121, 62, 147, 0.8)"]
+
+            // 绘制左侧面
+            const CubeLeft = echarts.graphic.extendShape({
+                shape: {
+                    x: 0,
+                    y: 0
+                },
+                buildPath: function (ctx, shape) {
+                    // 会canvas的应该都能看得懂，shape是从custom传入的
+                    const xAxisPoint = shape.xAxisPoint
+                    const c0 = [shape.x, shape.y]
+                    const c1 = [shape.x - offsetX, shape.y - offsetY]
+                    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
+                    const c3 = [xAxisPoint[0], xAxisPoint[1]]
+                    ctx
+                        .moveTo(c0[0], c0[1])
+                        .lineTo(c1[0], c1[1])
+                        .lineTo(c2[0], c2[1])
+                        .lineTo(c3[0], c3[1])
+                        .closePath()
+                }
+            })
+            // 绘制右侧面
+            const CubeRight = echarts.graphic.extendShape({
+                shape: {
+                    x: 0,
+                    y: 0
+                },
+                buildPath: function (ctx, shape) {
+                    const xAxisPoint = shape.xAxisPoint
+                    const c1 = [shape.x, shape.y]
+                    const c2 = [xAxisPoint[0], xAxisPoint[1]]
+                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
+                    const c4 = [shape.x + offsetX, shape.y - offsetY]
+                    ctx
+                        .moveTo(c1[0], c1[1])
+                        .lineTo(c2[0], c2[1])
+                        .lineTo(c3[0], c3[1])
+                        .lineTo(c4[0], c4[1])
+                        .closePath()
+                }
+            })
+            // 绘制顶面
+            const CubeTop = echarts.graphic.extendShape({
+                shape: {
+                    x: 0,
+                    y: 0
+                },
+                buildPath: function (ctx, shape) {
+                    const c1 = [shape.x, shape.y]
+                    const c2 = [shape.x + offsetX, shape.y - offsetY] // 右点
+                    const c3 = [shape.x, shape.y - offsetX]
+                    const c4 = [shape.x - offsetX, shape.y - offsetY]
+                    ctx
+                        .moveTo(c1[0], c1[1])
+                        .lineTo(c2[0], c2[1])
+                        .lineTo(c3[0], c3[1])
+                        .lineTo(c4[0], c4[1])
+                        .closePath()
+                }
+            })
+            // // 绘制底面
+            const CubeBottom = echarts.graphic.extendShape({
+                shape: {
+                    x: 10,
+                    y: 10
+                },
+                buildPath: function (ctx, shape) {
+                    const xAxisPoint = shape.xAxisPoint
+                    const c1 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
+                    const c2 = [xAxisPoint[0], xAxisPoint[1]] // 右点
+                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
+                    const c4 = [xAxisPoint[0], xAxisPoint[1] - offsetX]
+                    ctx
+                        .moveTo(c1[0], c1[1])
+                        .lineTo(c2[0], c2[1])
+                        .lineTo(c3[0], c3[1])
+                        .lineTo(c4[0], c4[1])
+                        .closePath()
+                }
+            })
+
+            // 注册图形
+            echarts.graphic.registerShape('CubeLeft', CubeLeft)
+            echarts.graphic.registerShape('CubeRight', CubeRight)
+            echarts.graphic.registerShape('CubeTop', CubeTop)
+            echarts.graphic.registerShape('CubeBottom', CubeBottom)
+            const dataX = store.state.cockpit_hysy.echart.x;
+            const barData = store.state.cockpit_hysy.echart.bar;
+
+            let option = {
+                //你的代码
+                backgroundColor: 'rgba(0,0,0,0)',
+                legend: {
+                    show: false,
+                    right: 30,
+                    top: 10,
+                    itemGap: 30,
+                    itemWidth: 20,
+                    itemHeight: 10,
+                    data: ['时长', '百分比'],
+                    textStyle: {
+                        fontSize: 18,
+                        color: '#ffffff'
+                    }
+                },
+                color: ['#097dc0', '#26D6D7'],
+                tooltip: {
+                    show: false,
+                    trigger: 'axis',
+                    textStyle: {
+                        fontSize: 18 // 字体大小
+                    },
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                grid: {
+                    top: '30%',
+                    // left: '3%',
+                    right: '3%',
+                    bottom: '5%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: dataX,
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: true,
+
+                        lineStyle: {
+                            width: 1,
+                            color: 'rgba(239, 247, 253, .7)'
+                        }
+                    },
+                    axisLabel: {
+                        show: true,
+                        rotate: 0, //35度角倾斜显示
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 12,
+                        },
+                        formatter: function (value) {
+                            let fast = "";
+                            if (value.length >= 5) {
+                                fast = value.slice(0, 5);
+                                fast += "...";
+                            } else {
+                                fast = value;
+                            }
+                            return fast;
+                        },
+                    },
+                },
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '面积/公顷',
+                        nameGap: 30,
+                        nameTextStyle: {
+                            color: '#ffffff',
+                            fontWeight: 100,
+                            fontSize: 12
+                        },
+                        axisLine: {
+                            show: false,
+                            lineStyle: {
+                                width: 1,
+                                color: 'rgba(239, 247, 253, .1)'
+                            }
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: 'rgba(239, 247, 253, .1)'
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            fontSize: 12,
+                            color: '#E7FCFF'
+                        },
+                        min: 0,
+                        // max: Math.ceil(Math.max.apply(null, dataX) / 5) * 5,
+                        // interval: Math.ceil(Math.max.apply(null, dataX) / 5)
+                    },
+                ],
+                series: [
+                    {
+                        name: '时长',
+                        type: 'custom',
+                        renderItem: (params, api) => {
+                            const location = api.coord([api.value(0), api.value(1)])
+                            return {
+                                type: 'group',
+                                x: 0,
+                                children: [
+                                    {
+                                        type: 'CubeLeft',
+                                        shape: {
+                                            api,
+                                            xValue: api.value(0),
+                                            yValue: api.value(1),
+                                            x: location[0],
+                                            y: location[1],
+                                            xAxisPoint: api.coord([api.value(0), 0])
+                                        },
+                                        style: {
+                                            fill: colorList[params.dataIndex % colorList.length]
+
+                                        }
+                                    },
+                                    {
+                                        type: 'CubeRight',
+                                        shape: {
+                                            api,
+                                            xValue: api.value(0),
+                                            yValue: api.value(1),
+                                            x: location[0],
+                                            y: location[1],
+                                            xAxisPoint: api.coord([api.value(0), 0])
+                                        },
+                                        style: {
+                                            fill: colorList[params.dataIndex % colorList.length],
+
+                                        }
+                                    },
+                                    {
+                                        type: 'CubeTop',
+                                        shape: {
+                                            api,
+                                            xValue: api.value(0),
+                                            yValue: api.value(1),
+                                            x: location[0],
+                                            y: location[1],
+                                            xAxisPoint: api.coord([api.value(0), 0])
+                                        },
+                                        style: {
+                                            fill: colorList[params.dataIndex % colorList.length],
+
+                                        }
+                                    }
+                                ]
+                            }
+                        },
+                        data: barData
+                    },
+                ]
+            }
+
+            myChart.setOption(option);
+        },
+        async label_data() {
+            const that = this;
+
+            let obj = {
+                beginTime: store.state.cockpit_date[0],
+                endTime: store.state.cockpit_date[1],
+                jscType: 'jsc_hysyq_ztsh',
+                id: '4602'
+            };
+            let data = await cockpitInfo(obj);
+
+
+            that.label_text.xzqhdm_number = data.data[0].xzqhdm_number
+            that.label_text.zhmj = data.data[0].zhmj
+            store.setCockpitHysyText(that.label_text);
+
+        },
+        async echart_data() {
+            const that = this;
+            let obj = {
+                beginTime: store.state.cockpit_date[0],
+                endTime: store.state.cockpit_date[1],
+                jscType: 'jsc_hysyq_yelx',
+                id: '4602'
+            }
+
+            let data = await cockpitInfo(obj);
+
+
+            const xArray = data.data.map(item => item.yhlx_name);
+            const barArray = data.data.map(item => item.zhmj);
+
+            that.label_echart = {
+                x: xArray,
+                bar: barArray
+            }
+
+            store.setCockpitHysyEchart(that.label_echart);
+
+            // console.log(that.label_echart, "label_echartlabel_echart");
+            this.getRenKou();
+        }
+    },
+    mounted() {
+        const that = this;
+        this.$nextTick((res) => {
+            that.label_data();
+            that.echart_data();
+        })
+    },
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+
+
+
+<style lang="scss"  scoped>
+.hysy {
+    border-width: 0px;
+    position: absolute;
+    left: 67rem;
+    top: 35.7rem;
+    width: 416px;
+    height: 310px;
+    display: flex;
+    z-index: 100;
+}
+
+
+
+.title {
+    border-width: 0px;
+    width: 100%;
+    height: 40px;
+    // font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    // font-weight: 700;
+    // font-style: normal;
+    // color: #fff;
+    // padding: 2%;
+    background: no-repeat;
+    background-image: url("/static/images/overview/标题框.png");
+
+    .icon {
+        background: no-repeat;
+
+        background-image: url("/static/images/overview/icon_标题框装饰.png");
+        display: inline-block;
+        width: 30px;
+        height: 30px;
+        background-position: 14px 7px;
+    }
+
+    span {
+        color: #fff;
+        font-size: 14px;
+        font-weight: bold;
+        position: relative;
+        bottom: 0.5rem;
+    }
+}
+
+.content {
+    background: no-repeat;
+    width: 100%;
+    height: 44px;
+    position: relative;
+    right: 1rem;
+    // background-image: url("/static/images/overview/info_all.png");
+    // background-size: 98% 87%;
+
+    .text {
+        position: relative;
+        left: 3.5rem;
+        top: 0.2rem;
+        font-size: 12px;
+        font-weight: 600;
+
+        .unit {
+            margin-right: 3rem;
+        }
+
+        .count1 {
+            color: RGBA(250, 160, 18, 1);
+        }
+
+        .count2 {
+            color: RGBA(100, 218, 255, 1);
+        }
+
+        .text_item {
+            position: relative;
+            left: 5rem;
+            bottom: 1.7rem;
+        }
+
+        .text_item1 {
+            position: relative;
+            left: 10rem;
+            bottom: 3rem;
+        }
+    }
+}
+
+.icon_info {
+    background: no-repeat;
+
+    // background-image: url("/static/images/overview/icon_info.png");
+    background-image: url("/static/images/overview/icon信息.png");
+
+    display: inline-block;
+    width: 2rem;
+    height: 3rem;
+    position: absolute;
+    left: 1.23rem;
+    top: 0.5rem;
+}
+
+.info_left {
+    background: no-repeat;
+
+    background-image: url("/static/images/overview/info_left.png");
+    // background-image: url("/static/images/overview/左侧主信息.png");
+
+    display: inline-block;
+    width: 10rem;
+    height: 2.5rem;
+    background-size: 100%;
+    position: absolute;
+    left: 2rem;
+}
+
+.info_main {
+    background: no-repeat;
+
+    background-image: url("/static/images/overview/info_main.png");
+    // background-image: url("/static/images/overview/右侧附属信息.png");
+
+    display: inline-block;
+    width: 13rem;
+    height: 2.5rem;
+    background-size: 100%;
+    position: absolute;
+    left: 12rem;
+}
+
+#hysyEchart {
+    left: -2rem;
+    top: 0.5rem;
+    width: 28rem;
+    height: 11.5rem;
+}
+
+.box {
+    width: 416px;
+}
+</style>

src/views/cockpit/jcbd.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="jcbd" style="border: 1px solid red;">
+        基础本地
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+    components: {},
+    data() {
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {},
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    mounted() { }, //生命周期 - 挂在完成
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style  scoped>
+.jcbd {
+    border-width: 0px;
+    position: absolute;
+    left: 1rem;
+    top: 14rem;
+    width: 416px;
+    height: 150px;
+    border-width: 0px;
+    background: inherit;
+    border: none;
+    border-radius: 0px;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    z-index: 100;
+}
+</style>

src/views/cockpit/serCenter.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="content">
+    <div class="item" v-for="(sd, i) in sdlist" :key="i">
+      <!-- <div class="icon" :class="`icongdbh${i}`"></div> -->
+      <div class="text">
+        <p>{{ sd.name }}</p>
+        <span class="sdvalue">{{ sdata[sd.props] || 0 }}</span>
+        <span class="unit">{{ sd.unit }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 增加资源本底指标：
+
+export default {
+  components: {},
+  data() {
+    return {
+      sdlist: [
+        { name: "陆域", props: "ly", unit: "km²" },
+        { name: "海域", props: "hy", unit: "km²" },
+        { name: "海岸线", props: "hax", unit: "km²" },
+        { name: "耕地", props: "gd", unit: "公顷" },
+        { name: "林地", props: "ld", unit: "公顷" },
+        { name: "森林覆盖率", props: "slfgl", unit: "%" },
+      ],
+      sdata: {
+        ly: 1921,
+        hy: 3226,
+        hax: 263.29,
+        gd: 15905.85,
+        ld: 79737.15,
+        slfgl: 21.4,
+      },
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+
+  methods: {},
+  mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+.content {
+  // border: #00FFFF 1px solid;
+  position: absolute;
+  left: calc(50% - 400px);
+  width: 800px;
+  height: 60px;
+  top: 10%;
+  z-index: 100;
+  padding: 10px;
+  box-sizing: border-box;
+  border: 1px solid;
+  border-image: linear-gradient(
+    to top,
+    rgba(0, 210, 255, 1),
+    rgba(10, 36, 61, 0.1)
+  );
+  border-image-slice: 1;
+  background-color: rgba(10, 36, 61, 0.4);
+  background-color: linear-gradient(
+    to top,
+    rgba(6, 135, 220, 0.25),
+    rgba(26, 28, 53, 0)
+  );
+}
+
+.item {
+  width: calc(100% / 6);
+  height: 45px;
+  display: inline-block;
+  text-align: center;
+  // border: #00FFFF 1px solid;
+}
+
+// .icon {
+//   width: 45px;
+//   height: 45px;
+//   padding: 2%;
+//   border-radius: 8px;
+//   display: inline-block;
+//   background: no-repeat 50%;
+// }
+
+// .icongdbh0 {
+//   background-image: url("/static/images/overview/icongdbh0.png");
+// }
+// .icongdbh1 {
+//   background-image: url("/static/images/overview/icongdbh1.png");
+// }
+// .icongdbh2 {
+//   background-image: url("/static/images/overview/icongdbh2.png");
+// }
+// .icongdbh3 {
+//   background-image: url("/static/images/overview/icongdbh3.png");
+// }
+
+.text {
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+  width: 100%;
+  margin-bottom: 4px;
+  text-align: center;
+
+  p {
+    font-kerning: normal;
+    font-family: "Arial Negreta", "Arial Normal", "Arial";
+    font-weight: bold;
+    font-size: 14px;
+    color: #bcd3e5;
+    line-height: 24px;
+  }
+
+  .sdvalue {
+    font-family: "Arial Negreta", "Arial Normal", "Arial";
+    font-weight: 700;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 18px;
+    color: #64daff;
+    line-height: 16px;
+  }
+  .unit {
+    font-family: "Arial Negreta", "Arial Normal", "Arial";
+    font-weight: 400;
+    font-size: 12px;
+    color: #ecf6ff;
+    line-height: 12px;
+  }
+}
+
+.value {
+  display: inline-block;
+
+  // border: #00FFFF 1px solid;
+  width: 50px;
+}
+</style>

src/views/cockpit/stxf.vue

@@ -0,0 +1,194 @@
+<template>
+  <borderTemplate titleName="生态修复" class="stxf">
+    <template v-slot:title>
+      <!-- #content="row" -->
+      <div class="selectTab">
+        <el-select
+          v-model="tab"
+          placeholder="请选择"
+          :popper-append-to-body="false"
+          @change="changeCharts"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </template>
+    <div class="time1" v-if="tab == 'ssxf'">2023-2025年</div>
+    <div class="stacontent">
+      <div class="item" v-for="(sd, index) in sdlist[tab]" :key="index">
+        <div class="itembg"></div>
+        <div class="text">{{ sd.name }}</div>
+        <span>{{ sdata[tab][sd.prop] || 0 }}</span>
+        {{ sd.unit }}
+      </div>
+    </div>
+    <div class="time2" v-if="tab == 'ssxf'">截止2024年5月</div>
+    <Bar3d id="stxf_echart" ref="echartRef"></Bar3d>
+  </borderTemplate>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import borderTemplate from "./borderTemplate.vue";
+import Bar3d from "../../components/echartsTemplate/3dBar.vue";
+import { QueryOne, QueryList } from "../../api/cockpitNew";
+
+export default {
+  components: { borderTemplate, Bar3d },
+  data() {
+    return {
+      options: [
+        { value: "tdxf", label: "土地综合整治" },
+        { value: "ssxf", label: "山水工程" },
+        { value: "haxf", label: "海岸线保护" },
+      ],
+      tab: "ssxf",
+      paramdatas: {},
+      sdlist: {
+        tdxf: [
+          { name: "综合整治项目", prop: "xzqhdm_number", unit: "个" },
+          { name: "土地整治面积", prop: "zlmj", unit: "公顷" },
+          { name: "总投资", prop: "tzje", unit: "万元" },
+        ],
+        ssxf: [
+          { name: "山水项目", prop: "xzqhdm_number", unit: "个" },
+          { name: "整治面积", prop: "zlmj", unit: "公顷" },
+          { name: "总投资", prop: "tzje", unit: "万元" },
+        ],
+        haxf: [
+          { name: "海岸线长度", prop: "xzqhdm_number", unit: "千米" },
+          { name: "自然岸线保有率", prop: "zlmj", unit: "%" },
+          { name: "海岸线整治修复项目", prop: "tzje", unit: "个" },
+        ],
+      },
+      sdata: { tdxf: {}, ssxf: {}, haxf: {} },
+      eData: {
+        xData: ["农用地", "建设用地", "生态修复", "历史文化保护"],
+        yData: [
+          [10, 10, 10, 10],
+          [10, 10, 30, 10],
+          [10, 10, 10, 40],
+        ],
+        legend: [""],
+      },
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  methods: {
+    changeCharts() {
+      this.setData(this.paramdatas);
+    },
+    // //第二个图表
+    setData(datas) {
+      this.paramdatas = datas;
+      if (this.tab == "ssxf") {
+        this.GetQueryOne(datas);
+        this.GetQueryList(datas);
+      } else {
+        this.sdata.tdxf = { xzqhdm_number: 100, zlmj: 0, tzje: 20 };
+        this.sdata.haxf = { xzqhdm_number: 40, zlmj: 30, tzje: 3 };
+        this.eData.gridbottom = "10%";
+        this.eData.xData = ["农用地", "建设用地", "生态修复", "历史文化保护"];
+        this.eData.yData = [
+          [10, 10, 10],
+          [10, 10, 30],
+          [10, 10, 10],
+        ];
+        this.$nextTick(() => {
+          this.$refs.echartRef.setOptions(this.eData);
+        });
+      }
+    },
+    GetQueryOne(datas) {
+      let params = {
+        ...datas,
+        jscType: `jsc_stxf_ztgh_${this.tab}`, //"jsc_stxf_ztgh_ssxf"
+      };
+      QueryOne(params).then((res) => {
+        this.sdata[this.tab] = res.data || {};
+      });
+    },
+    GetQueryList(datas) {
+      this.eData.xData = [];
+      this.eData.yData = [];
+      this.eData.gridbottom = "40%";
+      let params = {
+        ...datas,
+        jscType: `jsc_stxf_ywlx_${this.tab}`, // "jsc_stxf_ywlx_ssxf"
+      };
+      QueryList(params).then((res) => {
+        res.data.forEach((edata) => {
+          this.eData.xData.push(edata.jd_type);
+          this.eData.yData.push([edata.xzqhdm_number, edata.zlmj, edata.tzje]);
+        });
+        this.$nextTick(() => {
+          this.$refs.echartRef.setOptions(this.eData);
+        });
+      });
+    },
+  },
+  mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+.stxf {
+  top: 33.3%  !important;
+  .stacontent {
+    width: 100%;
+    height: 44px;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.item {
+  width: calc(100% / 3); //112px;
+  height: 44px;
+  position: relative;
+  text-align: center;
+  .itembg {
+    width: 112px;
+    height: 34px;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: no-repeat;
+    background-image: url("/static/images/overview/Tab.png");
+  }
+  .text {
+    font-weight: bold;
+    font-size: 14px;
+    color: #bcd3e5;
+    line-height: 24px;
+  }
+
+  span {
+    font-size: 18px;
+    color: #64daff;
+    line-height: 18px;
+  }
+}
+#stxf_echart {
+  width: 100%;
+  height: calc(100% - 44px);
+  position: relative;
+  //   left: -28%;
+  //   top: 7%;
+}
+.time1,
+.time2 {
+  font-weight: bold;
+  font-size: 14px;
+  color: #bcd3e5;
+  margin-top: 10px;
+}
+</style>

src/views/cockpit/tdsc.vue

@@ -0,0 +1,765 @@
+<template>
+  <div class="tdsc">
+    <div class="title">
+      <div class="icon"></div>
+      <span>土地收储</span>
+    </div>
+    <div v-show="store.state.cockpit_tdsc.flag">
+
+      <!-- <div class="content">
+        <div class="icon_info">
+
+        </div>
+        <div class="info_left">
+
+        </div>
+        <div class="info_main">
+
+        </div>
+        <div class="text">
+          <span>收储项目</span>
+          <span class="count1">33</span>
+          <span class="unit">个</span>
+
+          <span>收储总面积</span>
+          <span class="count2">213124.45</span>
+          <span class="unit">公顷</span>
+        </div>
+      </div> -->
+      <div id="tdsc_echart">
+
+      </div>
+    </div>
+
+    <div v-show="!store.state.cockpit_tdsc.flag">
+      <!-- <div class="content">
+        <div class="icon_info">
+
+        </div>
+        <div class="info_left">
+
+        </div>
+        <div class="info_main">
+
+        </div>
+        <div class="text">
+          <span>收储项目</span>
+          <span class="count1">33</span>
+          <span class="unit">个</span>
+
+          <span>收储总面积</span>
+          <span class="count2">213124.45</span>
+          <span class="unit">公顷</span>
+        </div>
+      </div> -->
+      <!--
+      <div id="tdsc_echart_xzqh">
+
+      </div> -->
+      <pie3d id="tdsc_echart" unit="公顷" ref="echartRefTdsc"></pie3d>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import pie3d from "../../components/echartsTemplate/3dPie.vue";
+
+export default {
+  components: { pie3d },
+  data() {
+    return {
+      is_xzqh: false,
+
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  beforeCreate() { }, //生命周期 - 创建之前
+  created() {
+  }, //生命周期 - 创建完成（可以访问当前this实例）
+  beforeMount() { }, //生命周期 - 挂载之前
+  methods: {
+    initEchart() {
+      var tdsc_my_chart = window.echarts.init(document.getElementById('tdsc_echart'));
+
+
+      tdsc_my_chart.getZr().on('click', (params) => {
+        // 这个部分照抄，你想通过点击拿到的当前柱条的数据，都可以在下面这些属性中拿到，如果我注释没有你想要的，需要console一下charts.getOption()查找对应的属性名
+        // let pointInPixel = [params.offsetX, params.offsetY]
+        // if (tdsc_my_chart.containPixel('grid', pointInPixel)) {
+        //   let xIndex = tdsc_my_chart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
+        //   console.log(xIndex)
+        // }
+
+
+        const actionObj = params.topTarget
+        console.log('actionObj', actionObj)
+        const myKey = Object.keys(actionObj).sort().filter(_ => _.indexOf('ec_inner') !== -1)[0]
+        console.log('myKey', myKey)
+        const res = actionObj[myKey]
+        console.log(`当前点击了第${res.dataIndex}组数据中的第${res.seriesIndex}个柱子`)
+        var pointInPixel = [params.offsetX, params.offsetY];
+        if (tdsc_my_chart.containPixel('grid', pointInPixel)) {
+          /*此处添加具体执行代码*/
+          var pointInGrid = tdsc_my_chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
+          //X轴序号
+          var xIndex = pointInGrid[0];
+          console.log('点击了横纵坐标', pointInPixel)
+          console.log('【点击了第几组数据，纵坐标】', pointInGrid)
+          //获取当前图表的option
+          var op = tdsc_my_chart.getOption();
+          console.log('数据信息', op)
+          //获得图表中我们想要的数据---下面就不简写了，默认说我们的折现有2条吧
+          var xValue = op.xAxis[0].data[xIndex];
+          console.log('x轴所对应的名字', xValue)
+
+        }
+      });
+      const legendType = 'center'
+      let option = {
+        backgroundColor: 'rgba(0,0,0,0)',
+        grid: {
+          containLabel: true,
+          bottom: '1%',
+          top: '40%',
+          left: '5%',
+          right: legendType === 'center' ? '5%' : '25%',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          orient: legendType === 'center' ? '' : 'vertical',
+          bottom: "80%",
+          right: legendType === 'center' ? 'center' : '2%',
+          data: ['征收', '回收', '收购'],
+
+          itemWidth: 12,
+          itemHeight: 12,
+          itemGap: 40,
+          icon: "rect",
+          textStyle: {
+            fontSize: 12,
+            color: '#fff',
+            padding: [5, 0, 0, 2],
+            rich: {
+              a: {
+                verticalAlign: 'middle',
+              },
+            },
+          },
+
+        },
+        xAxis: {
+          triggerEvent: true,
+          data: ['崖州区', '天崖区', '吉阳区', '海棠区'],
+          axisLabel: {
+            show: true,
+            fontSize: 12,
+            color: '#fff',
+            align: 'center',
+            verticalAlign: 'top',
+          },
+          axisLine: {
+            show: true,
+
+            lineStyle: {
+              width: 1,
+              color: 'rgba(239, 247, 253, .7)'
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: [
+          {
+            name: "面积/公顷",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: 12,
+              padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
+            },
+            axisLabel: {
+              interval: 0,
+              show: true,
+              fontSize: 10,
+              color: '#fff',
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(239, 247, 253, .1)'
+              }
+            },
+          },
+        ],
+        series: [
+          {
+            name: '征收',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  let colorItem = ['#3b93e3', '#186bb8'];
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
+                    [
+                      {
+                        offset: 0,
+                        color: colorItem[0]
+                      },
+                      {
+                        offset: 1,
+                        color: colorItem[1]
+                      }
+                    ],
+                    false
+                  );
+                }
+              }
+            },
+            data: [120, 75, 90, 100],
+          },
+          {
+            name: '回收',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+
+                  let colorItem = ['#efc943', '#ec9a1b'];
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
+                    [
+                      {
+                        offset: 0,
+                        color: colorItem[0]
+                      },
+                      {
+                        offset: 1,
+                        color: colorItem[1]
+                      }
+                    ],
+                    false
+                  );
+                }
+              }
+            },
+            data: [120, 75, 90, 100],
+          },
+          {
+            name: '收购',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  let colorItem = ['#4ee1ac', '#12a972'];
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
+                    [
+                      {
+                        offset: 0,
+                        color: colorItem[0]
+                      },
+                      {
+                        offset: 1,
+                        color: colorItem[1]
+                      }
+                    ],
+                    false
+                  );
+                }
+              }
+            },
+            data: [102, 130, 80, 100],
+          },
+        ],
+      }
+
+
+      tdsc_my_chart.setOption(option);
+    },
+    initEchartXzqh() {
+
+      var my_chart_xzqh = window.echarts.init(document.getElementById('tdsc_echart_xzqh'));
+
+      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+      function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
+
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== 'undefined' ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20
+          },
+
+          x: function (u, v) {
+            if (u < startRadian) {
+              return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+              return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y: function (u, v) {
+            if (u < startRadian) {
+              return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+              return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          }
+        };
+      };
+
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+
+          sumValue += pieData[i].value;
+
+          let seriesItem = {
+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+            type: 'surface',
+
+
+            parametric: true,
+            wireframe: {
+              show: false
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != 'undefined') {
+
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
+            typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+
+
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+
+        return series;
+      }
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: '回收',
+          value: 50,
+          itemStyle: {
+            opacity: 0.8,
+            color: 'RGBA(235, 184, 86, 1)',
+          },
+        }, {
+          name: '征收',
+          value: 20,
+          itemStyle: {
+            opacity: 0.8,
+            color: 'RGBA(100, 184, 255, 1)',
+          },
+        },
+
+        {
+          name: '收购',
+          value: 30,
+          itemStyle: {
+            opacity: 0.8,
+            color: 'RGBA(71, 203, 129, 1)',
+          },
+        },
+
+      ];
+
+      const series = getPie3D(optionsData, 0.6);
+
+      series.push({
+        name: 'pie2d',
+        type: 'pie',
+
+        label: {
+          normal: {
+            show: false,              //设为false
+            position: 'center'       //center表示文本显示位置为内部
+          },
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+          textStyle: {
+            fontSize: 22,
+          },
+        },
+        labelLine: {
+          length: 20,
+          length2: 40,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['30%', '55%'],
+        center: ['52%', '38%'],
+        // 没啥用
+        data: [{
+          name: '征收',
+          value: 20,
+          itemStyle: {
+            //						 opacity: 0.8,
+            color: '#3b8584',
+          },
+        },
+
+        {
+          name: '收购',
+          value: 50,
+          itemStyle: {
+            //						 opacity: 0.8,
+            color: '#64d9e0',
+          },
+        },
+        {
+          name: '回收',
+          value: 30,
+          itemStyle: {
+            //						 opacity: 0.8,
+            color: '#dac254',
+          },
+        },
+        ],
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+
+      let total = optionsData.reduce(function (prev, cur, index, arr) {
+
+        return prev + cur.value;
+      }, 0); //数据总和
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          orient: "vertical",
+
+          itemWidth: 12, // 设置宽度
+          itemHeight: 12, // 设置高度
+          data: ['征收', '收购', '回收'],
+          bottom: '40%',
+          right: '40%',
+
+          itemGap: 10,
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+          },
+          formatter: function (name) {
+            console.log(name)
+
+            return name;
+          },
+        },
+        animation: true,
+
+        backgroundColor: 'rgba(0,0,0,0)',
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: '#7BC0CB',
+          },
+        },
+        label: {
+          show: false,
+          position: 'outside',
+          formatter: '{d}%',
+          color: 'inherit'
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 1,
+          top: '-5%',
+          left: '-25%',
+          // bottom: '-80%',
+          //					environment: '#021041',
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 20,
+            // autoRotate: true, // 自动旋转
+          },
+
+        },
+
+        series: series,
+      };
+
+
+
+      my_chart_xzqh.setOption(option);
+    },
+  },
+  mounted() {
+    this.$nextTick((res) => {
+      this.initEchart();
+      // this.initEchartXzqh();
+
+      const optionsData = [
+        { name: "征收", value: 15.33 },
+        { name: "收购", value: 4.6 },
+        { name: "回收", value: 39 },
+      ];
+      this.$nextTick(() => {
+        this.$refs.echartRefTdsc.setOptions(optionsData);
+      });
+    })
+
+  },
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroy() { },//生命周期 - 销毁完成
+  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style  lang="scss"  scoped>
+.tdsc {
+  border-width: 0px;
+  position: absolute;
+  left: 1rem;
+  top: 23.5rem;
+  width: 416px;
+  height: 190px;
+  border-width: 0px;
+  background: inherit;
+  border: none;
+  border-radius: 0px;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  z-index: 100;
+}
+
+.title {
+  border-width: 0px;
+  width: 100%;
+  height: 40px;
+  // font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  // font-weight: 700;
+  // font-style: normal;
+  // color: #fff;
+  // padding: 2%;
+  background: no-repeat;
+  background-image: url("/static/images/overview/标题框.png");
+
+  .icon {
+    background: no-repeat;
+
+    background-image: url("/static/images/overview/icon_标题框装饰.png");
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background-position: 14px 7px;
+  }
+
+  span {
+    color: #fff;
+    font-size: 14px;
+    font-weight: bold;
+    position: relative;
+    bottom: 0.5rem;
+  }
+}
+
+.content {
+  background: no-repeat;
+  width: 100%;
+  height: 44px;
+  position: relative;
+  right: 1rem;
+  // background-image: url("/static/images/overview/info_all.png");
+  // background-size: 98% 87%;
+
+  .text {
+    position: relative;
+    left: 3.5rem;
+    top: 0.5rem;
+    font-size: 12px;
+    font-weight: 600;
+
+    .unit {
+      margin-right: 5rem;
+    }
+
+    .count1 {
+      color: RGBA(250, 160, 18, 1);
+    }
+
+    .count2 {
+      color: RGBA(100, 218, 255, 1);
+    }
+  }
+}
+
+#tdsc_echart {
+  left: -1rem;
+  top: 0rem;
+  width: 23rem;
+  height: 160px;
+}
+
+
+#tdsc_echart_xzqh {
+  left: 1rem;
+  top: 2rem;
+  width: 32rem;
+  height: 160px;
+}
+
+.icon_info {
+  background: no-repeat;
+
+  // background-image: url("/static/images/overview/icon_info.png");
+  background-image: url("/static/images/overview/icon信息.png");
+
+  display: inline-block;
+  width: 2rem;
+  height: 3rem;
+  position: absolute;
+  left: 1.23rem;
+  top: 0.5rem;
+}
+
+.info_left {
+  background: no-repeat;
+
+  background-image: url("/static/images/overview/info_left.png");
+  // background-image: url("/static/images/overview/左侧主信息.png");
+
+  display: inline-block;
+  width: 10rem;
+  height: 2.5rem;
+  background-size: 100%;
+  position: absolute;
+  left: 2rem;
+}
+
+.info_main {
+  background: no-repeat;
+
+  background-image: url("/static/images/overview/info_main.png");
+  // background-image: url("/static/images/overview/右侧附属信息.png");
+
+  display: inline-block;
+  width: 13rem;
+  height: 2.5rem;
+  background-size: 100%;
+  position: absolute;
+  left: 12rem;
+}
+</style>

src/views/cockpit/tdsy.vue

@@ -0,0 +1,1459 @@
+<template>
+  <div class="tdsy">
+    <div class="box1">
+      <div class="title">
+        <div>
+          <div class="icon"></div>
+          <span>土地供应</span>
+        </div>
+
+        <div class="selectTab">
+          <el-select v-model="value" placeholder="请选择" :popper-append-to-body="false" @change="changeCharts">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+    </div>
+    <div v-show="stateOwnedOrcollective">
+      <div class="content">
+        <div id="rsyt_echart"></div>
+        <div class="content1">
+          <div class="icon_info"></div>
+          <div class="info_left">
+            <span>计划入市面积</span>
+            <span class="count">{{ jhNumber }}
+              <i style="font-style: normal">公顷</i>
+            </span>
+          </div>
+          <div class="info_main">
+            <span>已入市面积</span>
+            <span class="count">{{ sjNumber }}
+              <i style="font-style: normal">公顷</i>
+            </span>
+          </div>
+        </div>
+        <div class="content2">
+          <div class="search">
+            <el-input v-model="input" placeholder="请输入内容">
+              <i slot="suffix" class="el-input__icon el-icon-search"></i></el-input>
+          </div>
+          <div class="infoLIst" v-if="jiDataInfo.length">
+            <div class="infoItem" v-for="(item, index) in jiDataInfo" :key="index">
+              <div class="itemIcon"></div>
+              <div class="itemCon">
+                <p>{{ item.xmmc }}</p>
+                <p>
+                  <span>{{ item.yelx }}</span>
+                  <span>{{ item.tdyt }}</span>
+                  <span>{{ item.crnj }}公顷</span>
+                </p>
+              </div>
+              <div :class="item.yelx == '已出让' ? 'itemStatus1' : 'itemStatus2'"></div>
+            </div>
+          </div>
+          <div class="infoLIst1" v-else>暂无数据</div>
+        </div>
+      </div>
+      <div class="list"></div>
+    </div>
+    <div v-show="!stateOwnedOrcollective">
+      <div id="across_echart"></div>
+      <div id="vertical_echart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 定义myCharts用于统计图自适应
+import { QueryOne, QueryList } from "../../api/cockpitNew";
+let myCharts;
+
+import { mapState } from "vuex";
+export default {
+  components: {},
+  data() {
+    return {
+      stateOwnedOrcollective: false,
+      options: [
+        {
+          value: "国有建设用地",
+          label: "国有建设用地",
+        },
+        {
+          value: "集体供应性土地",
+          label: "集体供应性土地",
+        },
+      ],
+      value: "国有建设用地",
+      input: "区",
+      jiDataInfo: [], //集体信息列表
+      option: {},
+      setInterValAl: null,
+      jhNumber: 0, //计划入市面积总数
+      sjNumber: 0, //实际入市面积总数
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {
+    // // 映射 Vuex 中的状态到当前组件的计算属性
+    // ...mapState({
+    //   id:state => state.regional_information.id,
+    // })
+  },
+  //监控data中的数据变化
+  watch: {
+    "store.state.regional_information.id": {
+      //深度监听，可监听到对象、数组的变化
+      handler(val, oldVal) {
+        if (val !== oldVal) {
+          this.init_across_echart();//国有饼图
+          this.init_vertical_echart();//国有柱状统计图
+          this.init_rsyt_echart();//集体立体饼图
+          this.getInfo();//集体列表数据
+        }
+      },
+      deep: true, //true 深度监听
+    },
+  },
+
+  //方法集合
+  beforeCreate() { }, //生命周期 - 创建之前
+  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+  beforeMount() { }, //生命周期 - 挂载之前
+  methods: {
+    async getInfo() {
+      let res = await QueryList({
+        val0: this.input,
+        jscType: "jsc_tdgy_jt_xx",
+        id: store.state.regional_information.id,
+      });
+      this.jiDataInfo = res.data
+    },
+    changeCharts(evt) {
+      this.value = evt;
+      this.stateOwnedOrcollective = !this.stateOwnedOrcollective;
+      if (this.stateOwnedOrcollective) {
+        this.init_rsyt_echart();
+        this.getInfo();
+        // 清楚定时器
+        clearInterval(this.setInterValAl);
+      }
+    },
+    switchStateOwnedButton() {
+      this.stateOwnedOrcollective = !this.stateOwnedOrcollective;
+    },
+
+    async init_across_echart() {
+      var dom = document.getElementById("across_echart");
+      var myChart = window.echarts.init(dom);
+      let gyInfo = await QueryList({
+        jscType: "jsc_tdgy_gy_ztsh",
+        id: store.state.regional_information.id,
+      });
+      var dataList = [
+        {
+          value: gyInfo.data[0]["sj_cr_crmj"],
+          name: "已出让",
+        },
+        {
+          value: gyInfo.data[0]["sj_hb_crmj"],
+          name: "已划拨",
+        },
+        {
+          value: gyInfo.data[0]["ce_crmj"],
+          name: "未供应",
+        },
+      ];
+      var color2 = [
+        {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#FC8053",
+              },
+              {
+                offset: 1,
+                color: "#F2CAA4",
+              },
+            ],
+            global: false,
+          },
+        },
+        {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#6EDC8D ",
+              },
+              {
+                offset: 1,
+                color: "#5BBD88",
+              },
+            ],
+            global: false,
+          },
+        },
+        {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 1,
+            colorStops: [
+              // {
+              //   offset: 0,
+              //   color: "#f888b1",
+              // },
+              // {
+              //   offset: 1,
+              //   color: "#fbe6ee",
+              // },
+              {
+                offset: 0,
+                color: "#5583e7",
+              },
+              {
+                offset: 1,
+                color: "#36dddb",
+              },
+            ],
+            global: false,
+          },
+        },
+      ];
+      var dataAll = 0;
+      dataList.forEach((item, index) => {
+        item.itemStyle = color2[index];
+        dataAll += item.value;
+      });
+
+      let option = {
+        backgroundColor: "rgba(0,0,0,0)",
+        legend: {
+          orient: "horizontal",
+          left: "center",
+          bottom: "1%",
+          // selectedMode: 'multiple',
+          padding: [0, 0, 0, 0], //调节legend的位置
+          data: ["类型", "已出让", "已划拨", "未供应"],
+          icon: "rect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
+          itemWidth: 12, // 设置宽度
+          itemHeight: 12, // 设置高度
+          itemGap: 10, // 设置间距
+          textStyle: {
+            //图例文字的样式
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+        graphic: [
+          {
+            type: "group",
+            top: "middle",
+            left: "center",
+            id: "data",
+            children: [
+              {
+                type: "text",
+                id: "current",
+                top: 100,
+                style: {
+                  text: dataAll || 0,
+                  font: 'bolder 18px "Microsoft YaHei", sans-serif',
+                  fill: "#64DAFF ",
+                  textAlign: "center",
+                },
+              },
+              {
+                type: "text",
+                id: "all",
+                top: 80,
+                style: {
+                  text: "计划供应",
+                  font: 'bolder 14px "Microsoft YaHei", sans-serif',
+                  fill: "#ECF6FF",
+                  textAlign: "center",
+                },
+              },
+              {
+                type: "text",
+                id: "gq",
+                top: 120,
+                style: {
+                  text: "公顷",
+                  font: 'bolder 12px "Microsoft YaHei", sans-serif',
+                  fill: "#4FABCF",
+                  textAlign: "center",
+                },
+              },
+            ],
+          },
+        ],
+        series: [
+          {
+            name: "公顷",
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            label: {
+              normal: {
+                show: false, //是否展示数据
+                position: "inner", // 数值显示在内部
+                color: "#fff",
+                fontSize: 16,
+                fontWeight: 400,
+                formatter: (params) => {
+                  return params.percent + "%";
+                },
+                rich: {},
+              },
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: "16",
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: false,
+              // length: 48,
+            },
+            data: dataList,
+          },
+        ],
+      };
+
+      myChart.setOption(option);
+    },
+    async init_vertical_echart() {
+      var dom = document.getElementById("vertical_echart");
+      myCharts = window.echarts.init(dom);
+      if (this.setInterValAl) {
+        // 清楚定时器
+        clearInterval(this.setInterValAl);
+      }
+      var jhgymj = []; //计划供应面积
+      var ygimj = []; //已供应面积
+      var jhgyxm = []; //计划供应项目
+      var wcgyxm = []; //完成供应项目
+      var allType = []; //所有统计类型名称
+      let gyPlan = await QueryList({
+        jscType: "jsc_tdgy_gy_yelx",
+        id: store.state.regional_information.id,
+      });
+      gyPlan.data.forEach((item) => {
+        allType.push(item.tdyt);
+        jhgymj.push(item.jh_crmj);
+        ygimj.push(item.sj_crmj);
+        jhgyxm.push(item.jh_xzqhdm_number);
+        wcgyxm.push(item.sj_xzqhdm_number);
+      });
+      // 统计图的滚动属性
+      const dataZoom = [
+        {
+          show: false,
+          height: 12,
+          xAxisIndex: [0],
+          bottom: "5%",
+          start: 0,
+          end: 30,
+          handleIcon:
+            "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
+          handleSize: "110%",
+          handleStyle: {
+            color: "#d3dee5",
+          },
+          textStyle: {
+            color: "#fff",
+          },
+          borderColor: "#90979c",
+        },
+      ];
+
+      this.option = {
+        backgroundColor: "rgba(0,0,0,0)",
+        // backgroundColor: transparent,
+        color: ["rgba(81, 151, 214, 1)", "rgba(16, 67, 118, 1)"],
+        title: {},
+        legend: {
+          orient: "horizontal",
+          data: [
+            {
+              name: "计划供应面积",
+            },
+            {
+              name: "已供应面积",
+            },
+            {
+              name: "计划供应项目",
+            },
+            {
+              name: "完成供应项目",
+            },
+          ],
+          left: "17%",
+          top: "1%",
+          itemGap: 5, // 设置间距
+          textStyle: {
+            color: "#BCD3E5",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          // left: "2%",
+          // right: "4%",
+          // bottom: "10%",
+          // top: "16%",
+          // containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          textStyle: {
+            align: "left",
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            // data: [
+            //   "居住用地",
+            //   "公共管理与公共服务用地",
+            //   "商业服务业用地",
+            //   "工矿用地",
+            //   "仓储用地",
+            //   // "工矿用地仓储用地",
+            //   "交通运输用地",
+            //   "公用设施用地",
+            //   // "绿地与开敞空间用地特殊用地",
+            //   "绿地与开敞空间用地",
+            //   "特殊用地",
+            //   "留白用地"
+            // ],
+            data: allType,
+            axisTick: {
+              show: true,
+            },
+            axisLine: {
+              show: true, //是否显示轴线
+              lineStyle: {
+                color: "#D9D9D9", //刻度线的颜色
+              },
+            },
+
+            axisLabel: {
+              show: true,
+              rotate: 35, //35度角倾斜显示
+              textStyle: {
+                color: "#BCD3E5",
+                fontSize: 14,
+              },
+              formatter: function (value) {
+                let fast = "";
+                if (value.length >= 4) {
+                  fast = value.slice(0, 4);
+                  fast += "...";
+                } else {
+                  fast = value;
+                }
+                return fast;
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "面积/公顷",
+            type: "value",
+            max: "200",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: "#BCD3E5",
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#BCD3E5",
+                fontSize: 14,
+              },
+            },
+
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#bcd3e59e",
+              },
+            },
+          },
+          {
+            type: "value",
+            name: "项目数/个",
+            max: "45",
+            nameTextStyle: {
+              color: "#BCD3E5",
+            },
+            position: "right",
+            axisLine: {
+              lineStyle: {
+                color: "#cdd5e2",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              formatter: "{value}", //右侧Y轴文字显示
+              textStyle: {
+                color: "#BCD3E5",
+                fontSize: 14,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "计划供应面积",
+            type: "bar",
+            stack: "总量",
+            barWidth: "40%",
+            // data: ["33", "34", "36", "39", "44", "49", "65", "69", "75", "3"],
+            data: jhgymj,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false, //开启显示
+                  textStyle: {
+                    //数值样式
+                    color: "#333",
+                    fontSize: 14,
+                  },
+                },
+              },
+            },
+          },
+          {
+            name: "已供应面积",
+            type: "bar",
+            stack: "总量",
+            // barWidth: "40%",
+            barWidth: 39,
+            // data: ["10", "10", "10", "10", "11", "11", "11", "10", "10", "3"],
+            data: ygimj,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false, //开启显示
+                  //      position: 'top', //在上方显示
+                  textStyle: {
+                    //数值样式
+                    color: "#BCD3E5",
+                    fontSize: 14,
+                  },
+                },
+              },
+            },
+          },
+          {
+            name: "计划供应项目",
+            type: "line",
+            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+            smooth: false, //平滑曲线显示
+            symbol: "circle", //标记的图形为实心圆
+            symbolSize: 8, //标记的大小
+            itemStyle: {
+              normal: {
+                color: "rgba(255,255,255, 1)",
+                borderColor: "rgba(70, 138, 115,1)", //圆点透明 边框
+                borderWidth: 3,
+              },
+            },
+            lineStyle: {
+              color: "rgba(70, 138, 115, 1)",
+            },
+            // data: ["23", "24", "26", "28", "29", "31", "32", "31", "33", "34"]
+            data: jhgyxm,
+          },
+          {
+            name: "完成供应项目",
+            type: "line",
+            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+            smooth: false, //平滑曲线显示
+            symbol: "circle", //标记的图形为实心圆
+            symbolSize: 8, //标记的大小
+            itemStyle: {
+              normal: {
+                color: "rgba(255,255,255, 1)",
+
+                borderColor: "rgba(144, 60, 80, 1)", //圆点透明 边框
+                borderWidth: 3,
+              },
+            },
+            lineStyle: {
+              color: "rgba(144, 60, 80, 1)",
+            },
+            // data: ["30", "32", "34", "39", "41", "32", "30", "25", "28", "34"]
+            data: wcgyxm,
+          },
+        ],
+        dataZoom,
+      };
+
+      myCharts.on("click", function (params) {
+        console.log("点击了柱状图:", params.name, params.data);
+      });
+
+      myCharts.setOption(this.option);
+      this.setIntervalAll();
+    },
+
+    async init_rsyt_echart() {
+      var myChart = echarts.init(document.getElementById("rsyt_echart"));
+      let colors = [
+        "#57A6E9",
+        "#5EBC85",
+        "#37a2da",
+        "#ffdb5c",
+        "#ff9f7f",
+        "#9fe6b8",
+        "#67e0e3",
+        "#32c5e9",
+        "#fb7293",
+        "#9A60B4",
+        "#ea7ccc",
+      ];
+
+      let res = await QueryList({
+        jscType: "jsc_tdgy_jt_yelx",
+        id: 46,
+      });
+      // 传入数据生成 option
+      let optionsData = [];
+      let lengedList = []; //图例数据
+      this.jhNumber = 0; //计划入市面积总数
+      this.sjNumber = 0; //实际入市面积总数
+      res.data.forEach((item) => {
+        optionsData.push({
+          name: item.tdyt,
+          value: item.jh_crmj,
+        });
+        lengedList.push(item.tdyt);
+        this.jhNumber += item.jh_crmj;
+        this.sjNumber += item.sj_crmj;
+      });
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height,
+        i
+      ) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+        let offsetZ = i == 1 ? 2 : 0;
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            itemStyle: {
+              color: colors[i], // 自定义颜色
+              opacity: "0.7",
+            },
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            // 调整扇形高度
+            i === 0 ? 10 : 10,
+            i,
+            series[i].pieData.value
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+        return series;
+      }
+
+      const series = getPie3D(optionsData, 0.6); // 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 14,
+          lineHeight: 20,
+          textStyle: {
+            fontSize: 14,
+            color: "#fff",
+          },
+        },
+        labelLine: {
+          length: 10,
+          length2: 10,
+        },
+        startAngle: 2, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["50%", "60%"],
+        center: ["62%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+        labelLine: {
+          show: false,
+        },
+        label: {
+          show: false,
+          position: "center",
+        },
+      });
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      var option = {
+        legend: {
+          show: true,
+          tooltip: {
+            show: true,
+          },
+          orient: "vertical",
+          // data: ["商服用地", "工业用地"],
+          data: lengedList,
+          top: "center",
+          itemGap: 14,
+          itemHeight: 14,
+          itemWidth: 14,
+          itemRadius: 20,
+          right: "2%",
+          textStyle: {
+            color: "#BCD3E5 ",
+            fontSize: 14,
+            padding: [15, 5, 0, 0], //上，右，下，左
+            rich: {
+              name: {
+                // width: '45%',
+                fontSize: 14,
+                color: "#BCD3E5 ",
+                padding: [6, 0, 6, 0],
+              },
+              value: {
+                fontSize: 14,
+                padding: [0, 0, 0, 5],
+                color: "#64DAFF",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = optionsData.filter((v) => v.name === name);
+            res = res[0] || {};
+            const p = res.value;
+            return "{name|" + name + "}" + "\n" + "{value|" + p + "}公顷";
+            // return "{name|" + name + "}";
+          },
+        },
+        animation: true,
+        tooltip: {
+          show: false,
+          textStyle: {
+            fontSize: 14,
+          },
+        },
+        title: {
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: 22,
+          },
+        },
+        backgroundColor: "rgba(0,0,0,0)",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+          normal: {
+            show: false,
+            length: 10,
+            length2: 10,
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          // formatter: "{b} {d}%",
+          formatter: function (optionsData) {
+            return (
+              "{name|" +
+              optionsData.name +
+              "}" +
+              " {value|" +
+              optionsData.percent.toFixed(0) +
+              "%}"
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 14,
+              color: "#ffffff",
+            },
+            value: {
+              fontSize: 14,
+              color: "#ffffff",
+            },
+          },
+          textStyle: {
+            color: "#fff",
+            fontSize: "14px",
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 3,
+          //top: '30%',
+          left: "-20%",
+          bottom: "50%",
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 145,
+            alpha: 35,
+            beta: 15,
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      myChart.setOption(option);
+    },
+    /**
+     * @return {*}
+     * @author: liukeke
+     * @description: 设置定时器保证统计图的轮播
+     */
+    setIntervalAll() {
+      // 重设this指向
+      const that = this;
+      // 定时器
+      this.setInterValAl = setInterval(function () {
+        // 每次向后滚动一个，最后一个从头开始。
+        if (that.option.dataZoom[0].start == 30) {
+          that.option.dataZoom[0].end = 30;
+          that.option.dataZoom[0].start = 0;
+        } else {
+          that.option.dataZoom[0].end = that.option.dataZoom[0].end + 5;
+          that.option.dataZoom[0].start = that.option.dataZoom[0].start + 5;
+          // console.log(that.option_sevenWG.dataZoom[0].end);
+          // console.log(that.option_sevenWG.dataZoom[0].start);
+        }
+        myCharts.setOption(that.option);
+      }, 5000);
+    },
+  },
+  mounted() {
+    this.init_across_echart();
+    this.init_rsyt_echart();
+    this.$nextTick(() => {
+      this.init_vertical_echart();
+    });
+  },
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() {
+    // 清楚定时器
+    clearInterval(this.setInterValAl);
+  }, //生命周期 - 销毁之前
+  destroy() { }, //生命周期 - 销毁完成
+  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+  deactivated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+
+<style lang="scss" scoped>
+.tdsy {
+  border-width: 0px;
+  position: absolute;
+  left: 1rem;
+  top: 66%;
+  width: 640px;
+  z-index: 100;
+
+  .box1 {
+    border-width: 0px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    // width: 800px;
+    // height: 260px;
+    width: 40rem;
+    height: 18rem;
+    background: inherit;
+    // background-color: rgba(3, 25, 67, 0.698039215686274);
+    border: none;
+    border-radius: 0px;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+
+    .title {
+      border-width: 0px;
+      width: 100%;
+      height: 36px;
+      background: no-repeat;
+      background-image: url("/static/images/overview/标题框.png");
+      // background-size: 100% 100%;
+      display: flex;
+      justify-content: space-between;
+
+      .icon {
+        background: no-repeat;
+        background-image: url("/static/images/overview/icon_标题框装饰.png");
+        display: inline-block;
+        width: 30px;
+        height: 30px;
+        background-position: 14px 7px;
+      }
+
+      span {
+        color: #fff;
+        font-size: 14px;
+        font-weight: bold;
+        position: relative;
+        bottom: 0.5rem;
+      }
+    }
+
+    .selectTab {
+      /deep/ .el-input__inner {
+        // padding-right: 30px;
+        width: 128px !important;
+        height: 24px !important;
+        line-height: 24px;
+        padding-left: 22px;
+        padding-right: 0px;
+        font-size: 12px;
+        color: #bcd3e5;
+        border: none;
+        background: url("/static/images/overview/selectBg.png") no-repeat !important;
+        background-size: 100% 100%;
+      }
+
+      /deep/ .el-input__icon {
+        line-height: 1;
+      }
+
+      /deep/ .el-input__suffix {
+        right: -2px;
+      }
+
+      /deep/ .el-select-dropdown__list {
+        color: #bcd3e5 !important;
+        background: linear-gradient(180deg,
+            rgba(3, 115, 177, 0) 11%,
+            rgba(3, 115, 177, 0.48) 100%);
+        border-image: linear-gradient(360deg,
+            rgba(75, 185, 250, 0.2),
+            rgba(75, 185, 250, 0.05)) 1 1 !important;
+        border: none;
+      }
+
+      /deep/ .el-select-dropdown__item.hover,
+      .el-select-dropdown__item:hover {
+        background-color: rgba(87, 163, 226, 0.5);
+      }
+
+      /deep/ .el-select-dropdown__item {
+        color: #ecf6ff;
+      }
+    }
+
+    /deep/ {
+      .el-select-dropdown__item.selected {
+        color: #409eff;
+      }
+    }
+
+    /deep/ .el-popper[x-placement^="bottom"] {
+      margin-top: 12px;
+      background: #163253;
+    }
+
+    /deep/ .el-select-dropdown {
+      border: none;
+    }
+
+    /deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
+      border-bottom-color: #163253;
+      top: 0;
+    }
+  }
+}
+
+.content {
+  position: absolute;
+  left: 0%;
+  width: 20.5rem;
+  height: 18rem;
+  top: 18%;
+}
+
+#tdsyEchart {
+  width: 280px;
+  height: 230px;
+  position: relative;
+  left: -35px;
+  top: 95px;
+}
+
+.list {
+  position: absolute;
+  left: 137%;
+  top: 25%;
+}
+
+#across_echart {
+  position: relative;
+  // left: -6rem;
+  top: 2.1rem;
+  width: 15rem;
+  height: 15rem;
+}
+
+#vertical_echart {
+  left: 14rem;
+  top: -12.9rem;
+  width: 26rem;
+  height: 15rem;
+}
+
+#rsyt_echart {
+  position: relative;
+  top: 2.1rem;
+  width: 20.5rem;
+  height: 10rem;
+}
+
+.deficiency_echart {
+  width: 9rem;
+  height: 9rem;
+  border: 20px solid #104375;
+  position: absolute;
+  top: 4rem;
+  left: 2rem;
+  border-radius: 80rem;
+}
+
+.content1 {
+  background: no-repeat;
+  width: 100%;
+  height: 44px;
+  position: absolute;
+  bottom: 1.8rem;
+}
+
+.icon_info {
+  background: no-repeat;
+
+  // background-image: url("/static/images/overview/icon_info.png");
+  background-image: url("/static/images/overview/icon信息.png");
+
+  display: inline-block;
+  width: 2rem;
+  height: 3rem;
+  position: absolute;
+  left: 0rem;
+  top: 0.5rem;
+}
+
+.info_left {
+  background: no-repeat;
+  background-image: url("/static/images/overview/info_left.png");
+  display: inline-block;
+  width: 10rem;
+  height: 3rem;
+  background-size: 100%;
+  position: absolute;
+  left: 0.65rem;
+  display: flex;
+  justify-content: space-between;
+
+  .count {
+    color: #faa012;
+    font-size: 16px;
+    font-weight: bold;
+
+    // line-height: 3rem;
+    // text-align: end;
+    i {
+      font-style: normal;
+      color: #ecf6ff;
+      font-size: 12px;
+      font-weight: normal;
+      margin: 0 5px;
+    }
+  }
+
+  span:first-child {
+    width: 4rem;
+    height: 2.5rem;
+    display: block;
+    margin-left: 1rem;
+    color: #bcd3e5;
+    font-weight: bold;
+    font-size: 14px;
+  }
+
+  span:nth-child(2) {
+    display: inline-block;
+    width: 5rem;
+    height: 2.5rem;
+    text-align: end;
+    line-height: 2.5rem;
+  }
+}
+
+.info_main {
+  background: no-repeat;
+  background: linear-gradient(270deg,
+      rgba(29, 96, 156, 0.8) 0%,
+      rgba(29, 96, 156, 0.2) 100%);
+  display: inline-block;
+  width: 10rem;
+  height: 2.5rem;
+  background-size: 100%;
+  position: absolute;
+  left: 10.5rem;
+  display: flex;
+  justify-content: space-between;
+
+  .count {
+    color: #64daff;
+    font-size: 16px;
+    font-weight: bold;
+
+    // line-height: 3rem;
+    // text-align: end;
+    i {
+      font-style: normal;
+      color: #ecf6ff;
+      font-size: 12px;
+      font-weight: normal;
+      margin: 0 5px;
+    }
+  }
+
+  span:first-child {
+    width: 3rem;
+    height: 2.5rem;
+    display: block;
+    margin-left: 1rem;
+    color: #bcd3e5;
+    font-weight: bold;
+    font-size: 14px;
+  }
+
+  span:nth-child(2) {
+    display: inline-block;
+    width: 6rem;
+    height: 2.5rem;
+    text-align: end;
+    line-height: 2.5rem;
+  }
+}
+
+.content2 {
+  position: absolute;
+  left: 100%;
+  width: 19.5rem;
+  height: 15rem;
+  top: 12%;
+
+  .search {
+    height: 14%;
+    padding-top: 2%;
+
+    /deep/ .el-input {
+      width: 54%;
+    }
+
+    /deep/ .el-input__inner {
+      color: #bcd3e5;
+      height: 24px;
+      background: linear-gradient(180deg,
+          rgba(3, 115, 177, 0) 11%,
+          rgba(3, 115, 177, 0.48) 100%);
+      border-radius: 2px 16px 2px 22px;
+      border: 1px solid;
+      border-image: linear-gradient(360deg,
+          rgba(75, 185, 250, 0.2),
+          rgba(75, 185, 250, 0.05)) 1 1;
+      border: none;
+    }
+
+    /deep/.el-input__suffix {
+      color: #64daff;
+    }
+
+    .el-input__icon {
+      line-height: 24px;
+    }
+  }
+
+  .infoLIst {
+    width: 100%;
+    height: 12rem;
+    overflow: hidden;
+    overflow-y: auto;
+    margin-right: 10px;
+    padding-top: 5px;
+
+    .infoItem {
+      width: 100%;
+      height: 3.3rem;
+      background-color: #64daff;
+      background: url("/static/images/overview/list_bg.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      margin-bottom: 10px;
+
+      .itemIcon {
+        width: 1.5rem;
+        height: 1.7rem;
+        background: url("/static/images/overview/iconDW.png") no-repeat;
+        background-size: 100% 100%;
+        margin: 0.5rem;
+      }
+
+      .itemCon {
+
+        // width: 13.5rem;
+        // height: 1.55rem;
+        // background-color: #faa012;
+        // line-height: 1.55rem;
+        p {
+          height: 41%;
+          line-height: 1.55rem;
+          color: #ecf6ff;
+        }
+
+        p:first-child {
+          width: 177px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          color: #ecf6ff;
+        }
+
+        p:nth-child(2) {
+          span {
+            padding: 0 0.4rem;
+            display: inline-block;
+            background: rgba(100, 218, 255, 0.1);
+            border-radius: 2px 14px 2px 14px;
+            color: #64daff;
+            font-size: 12px;
+          }
+        }
+      }
+
+      .itemStatus1 {
+        background: url("/static/images/overview/yrsIcon.png") no-repeat;
+        background-size: 100% 100%;
+        width: 62px;
+        height: 18px;
+        position: relative;
+        right: -30px;
+      }
+
+      .itemStatus2 {
+        background: url("/static/images/overview/wrsIcon.png") no-repeat;
+        background-size: 100% 100%;
+        width: 62px;
+        height: 18px;
+        position: relative;
+        right: -30px;
+      }
+    }
+  }
+
+  .infoLIst1 {
+    width: 100%;
+    height: 12rem;
+    overflow: hidden;
+    overflow-y: auto;
+    margin-right: 10px;
+    padding-top: 5px;
+    line-height: 12rem;
+    text-align: center;
+  }
+}
+
+::v-deep .el-scrollbar {
+  color: #faa012;
+}
+</style>

src/views/cockpit/wpjg.vue

@@ -0,0 +1,139 @@
+<template>
+  <borderTemplate titleName="卫片监管" class="wpjg">
+    <template v-slot:title>
+      <!-- #content="row" -->
+    </template>
+    <div class="stacontent">
+      <div class="item">
+        <span class="dlabel">图斑变化数量：</span>
+        <span class="dvalue">{{ sdata.xzqdm_num || 0 }}个</span>
+      </div>
+      <div class="item">
+        <span class="dlabel"> 图斑变化面积：</span>
+        <span class="dvalue">{{ sdata.jcmj || 0 }}亩</span>
+      </div>
+    </div>
+    <sankey id="wpjp_echart" ref="echartRef"></sankey>
+  </borderTemplate>
+</template>
+
+<script>
+import borderTemplate from "./borderTemplate.vue";
+import sankey from "../../components/echartsTemplate/sankey.vue";
+import { QueryList } from "../../api/cockpitNew";
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+let colors = [
+  "#1677CA",
+  "#5BB57A",
+  "#B1651F",
+  "#62ADED",
+  "#F26094",
+  "#FCED66",
+  "#75FF93",
+  "#E375FF",
+  "#62ECEC",
+  "#FF7F48",
+  "#1E803A",
+  "#D4E0FF",
+];
+export default {
+  components: { borderTemplate, sankey },
+  data() {
+    return {
+      sdata: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+
+  methods: {
+    setData(datas) {
+      this.GetQueryListztsh(datas);
+      this.getQueryListyelx(datas);
+    },
+    getQueryListyelx(datas) {
+      let data = [];
+      let links = [];
+      let params = {
+        ...datas,
+        jscType: "jsc_wpjc_yelx",
+      };
+      QueryList(params).then((res) => {
+        res.data.forEach((edata) => {
+          if (edata.qlx_type_name && edata.hlx_type_name) {
+            links.push({
+              source: edata.qlx_type_name,
+              target: edata.hlx_type_name,
+              value: edata.xzqdm_num,
+            });
+            if (data.findIndex((a) => a.name == edata.qlx_type_name) < 0)
+              data.push({
+                name: edata.qlx_type_name,
+                itemStyle: { color: colors[Math.floor(Math.random() * 12)] },
+              });
+            if (data.findIndex((a) => a.name == edata.hlx_type_name) < 0)
+              data.push({
+                name: edata.hlx_type_name,
+                itemStyle: { color: colors[Math.floor(Math.random() * 12)] },
+              });
+            this.$nextTick(() => {
+              this.$refs.echartRef.setOptions(data, links);
+            });
+          }
+        });
+      });
+    },
+    GetQueryListztsh(datas) {
+      let params = {
+        ...datas,
+        jscType: "jsc_wpjc_ztsh",
+      };
+      QueryList(params).then((res) => {
+        this.sdata = res.data && res.data.length > 0 ? res.data[0] : {};
+      });
+    },
+  },
+  mounted() {},
+};
+</script>
+<style lang="scss" scoped>
+.wpjg {
+  top: calc(66.6% + 10px) !important;
+  .stacontent {
+    width: 100%;
+    height: 24px;
+  }
+
+  .item {
+    width: 45%;
+    height: 30%;
+    display: inline-block;
+    // border: #00FFFF 1px solid;
+  }
+
+  .dlabel {
+    font-family: HarmonyOS Sans Naskh Arabic UI, HarmonyOS Sans Naskh Arabic UI;
+    font-weight: 400;
+    font-size: 14px;
+    color: #bcd3e5;
+    line-height: 24px;
+    text-align: left;
+  }
+
+  .dvalue {
+    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
+    font-weight: bold;
+    color: #64daff;
+    line-height: 16px;
+    text-align: left;
+  }
+
+  #wpjp_echart {
+    width: 100%;
+    height: calc(100% - 24px);
+    position: relative;
+  }
+}
+</style>

src/views/viewer1.vue

@@ -0,0 +1,548 @@
+<template>
+    <div>
+        <i class="cesiumbtn" :class="store.state.viewer_flag ? 'el-icon-aim' : 'el-icon-rank'" :title="isbig ? '缩小' : '放大'"
+            @click="bigViewerChange"></i>
+        <div v-show="store.state.viewer_flag" class="viewer">
+            <div class="bg">
+
+                <div class="bg_left"></div>
+                <div class="bg_right"></div>
+                <div class="bg_bottom"></div>
+            </div>
+            <datePicker @dateChange="dateChange"></datePicker>
+            <!-- <ser-center></ser-center> -->
+            <GKZB ref="gkzb_ref" />
+            <JCBD />
+            <BJXM />
+            <TDSC />
+            <HYSY ref="hysy_ref" />
+            <TDSY />
+            <GDBH ref="gdbh_ref" />
+            <STXF ref="stxf_ref" />
+            <WPJG ref="wpjg_ref" />
+        </div>
+    </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import GKZB from './cockpit/gkzb';
+import TDSC from './cockpit/tdsc';
+import HYSY from './cockpit/hysy';
+import TDSY from './cockpit/tdsy';
+import BJXM from './cockpit/bjxm';
+import GDBH from './cockpit/gdbh';
+import STXF from './cockpit/stxf';
+import WPJG from './cockpit/wpjg';
+import JCBD from './cockpit/jcbd';
+
+import datePicker from './cockpit/datePicker.vue';
+import xzqh from "../../static/data/460200_full.json";
+import hyqy from "../../static/data/460200_hyqy.json";
+
+
+import { cockpitInfo } from '@/api/cockpit'
+let manager = {};
+export default {
+    components: { GKZB, BJXM, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker, JCBD },
+    data() {
+        return {
+            params: {
+                beginTime: '',
+                endTime: '',
+                id: 4602,
+            },
+            flag: true,
+            xzqh_color_click: "rgba(46, 177, 251, 0.6)",
+            xzqh_color: "rgba(10, 95, 152, 0.5)",
+            primitivesL: [],
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {
+        hidden_xzqh(flag) {
+
+            for (let index = 0; index < manager._primitives.length; index++) {
+                const element = manager._primitives[index];
+                element.show = flag;
+            }
+
+        }, hidden_wall(flag) {
+            viewer.entities.values.forEach((res) => {
+                if (res.name == "立体墙效果" || res.name == "海域") {
+                    res.show = flag;
+                }
+            })
+        },
+        bigViewerChange() {
+            store.setViewerFlagb(!store.state.viewer_flag);
+            store.setToolBarShow(!store.state.viewer_flag);
+            // store.setToolBarShow(true);
+
+            // 隐藏行政区划
+            this.hidden_xzqh(store.state.viewer_flag);
+            // 隐藏墙体
+            this.hidden_wall(store.state.viewer_flag);
+        },
+        switch() {
+            this.flag = !this.flag;
+        },
+        setDatas() {
+            this.$refs.gdbh_ref.setData({ id: this.params.id });
+            this.$refs.stxf_ref.setData({ id: this.params.id });
+            this.$refs.wpjg_ref.setData(this.params);
+        },
+        dateChange(date) {
+            this.params.beginTime = date[0]
+            this.params.endTime = date[1]
+            this.setDatas()
+        },
+        async hysyq(address) {
+            // 选中xzqh查询
+            let obj = {
+                beginTime: store.state.cockpit_date[0],
+                endTime: store.state.cockpit_date[1],
+                jscType: 'jsc_hysyq_ztsh',
+                id: address
+            };
+            let data = await cockpitInfo(obj);
+            console.log('data: ', data);
+
+            let obg_text = {
+                xzqhdm_number: data.data[0].xzqhdm_number,
+                zhmj: data.data[0].zhmj == undefined ? 0 : data.data[0].zhmj,
+
+            }
+            obg_text.zhmj == null ? 0 : obg_text.zhmj;
+            store.setCockpitHysyText(obg_text);
+
+            // 图表数据
+            let obj_echart = {
+                beginTime: store.state.cockpit_date[0],
+                endTime: store.state.cockpit_date[1],
+                jscType: 'jsc_hysyq_yelx',
+                id: address
+            };
+            let data_echart = await cockpitInfo(obj_echart);
+
+            let obg_echart = {
+                x: data_echart.data.map(item => item.yhlx_name),
+                bar: data_echart.data.map(item => item.zhmj)
+
+            }
+
+            obg_echart.x.length == 0 ? obg_echart.x = ['渔业基础设施用海', '开放式养殖用海', '旅游基础设施用海', '浴场用海',
+                '游乐场用海'] : obg_echart.x = obg_echart.x;
+
+            obg_echart.bar.length == 0 ? obg_echart.bar = [0, 0, 0, 0, 0,] : obg_echart.bar = obg_echart.bar;
+
+            store.setCockpitHysyEchart(obg_echart);
+
+
+            this.$refs.hysy_ref["getRenKou"]();
+
+            // getRenKou();
+
+        },
+        hysyq_xzqh() {
+            const that = this;
+            that.$refs.hysy_ref["label_data"]();
+            that.$refs.hysy_ref["echart_data"]();
+        },
+        async gkzb_xzqh(address) {
+            let obj = {
+                // beginTime: store.state.cockpit_date[0],
+                // endTime: store.state.cockpit_date[1],
+                jscType: 'jsc_gkzb_ztgu_stbh',
+                id: address
+            };
+            let data = await cockpitInfo(obj);
+
+            let obj_yjjbntmj = {
+                jscType: 'jsc_gdbh_ztgh_nt',
+                id: address
+            };
+            let obj_yjjbntmj_data = await cockpitInfo(obj_yjjbntmj);
+
+            let obj_kfbjmj = {
+                jscType: 'jsc_gkzb_ztgh_kfbj',
+                id: address
+            };
+            let obj_kfbjmj_data = await cockpitInfo(obj_kfbjmj);
+
+            let obj_gdbhmb = {
+                jscType: 'jsc_gkzb_ztgu_gdbhmb',
+                id: address
+            };
+            let obj_gdbhmb_data = await cockpitInfo(obj_gdbhmb);
+
+            store.setCockpitGkzb({
+                mj: data.data[0].mj,// 生态保护红线面积
+                ly_mj: data.data[0].ly_mj,// 路域生态保护红线
+                hy_mj: data.data[0].hy_mj,//近海岸面积
+                yjjbntmj: obj_yjjbntmj_data.data[0].yjjbntmj,// 永久基本农田保护面积
+                kfbjmj: obj_kfbjmj_data.data[0].kfbjmj,// 城市开发边界
+                bfb: obj_kfbjmj_data.data[0].bfb * 100,// 覆盖城镇开发边界
+                tbmj_ys: obj_gdbhmb_data.data[0].tbmj_ys,//耕地保护目标
+                ghdkmj: obj_kfbjmj_data.data[0].ghdkmj//已入库管控范围
+
+            });
+
+        },
+        async gkzb() {
+            const that = this;
+            that.$refs.gkzb_ref["initData"]();
+        },
+        async pick_xzqh() {
+            const that = this;
+            const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+            handler.setInputAction(async event => {
+                let pickObj = viewer.scene.pick(event.position);
+                var position = viewer.scene.pickPosition(event.position);
+
+                if (!position)//点击到地球之外
+                    return false;
+                var cartographic = Cesium.Cartographic.fromCartesian(position);
+
+
+                let longitude = Cesium.Math.toDegrees(cartographic.longitude);
+                let latitude = Cesium.Math.toDegrees(cartographic.latitude);
+                let height = cartographic.height;
+                let heading = viewer.scene.camera.heading;
+                let pitch = viewer.scene.camera.pitch;
+                // that.addSceneFun()
+
+                if (!position) {
+                    position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
+                }
+
+                if (Cesium.defined(pickObj)) {
+
+                    if (pickObj.primitive instanceof Cesium.Primitive) {//点击primitive
+                        //primitive相关操作
+
+                        let obj = JSON.parse(pickObj.id);
+
+                        let pri_name = obj.name;
+                        // console.log('pickObj: ', pickObj.primitive.show = false);
+                        let adcode = obj.adcode
+                        that.params.id = adcode
+                        that.setDatas()
+                        // 驾驶舱海域使用权
+                        that.hysyq(adcode);
+                        // 驾驶舱土地收储
+                        that.tdsc_xzqh(adcode);
+                        // 管控指标
+                        that.gkzb_xzqh(adcode);
+                        viewer.entities.values.forEach((res) => {
+                            if (res.properties.name._value == pri_name) {//选中
+                                res.billboard.show._value = true;
+                                store.state.regional_information = {
+                                    id: adcode,
+                                    name: pri_name,
+                                }
+                            } else {
+                                if (res.billboard != undefined)
+                                    res.billboard.show._value = false
+
+
+                            }
+                        })
+                    }
+
+
+                } else {
+                    // 暂时点击周围数据显示三亚市
+                    // 清除所有xzqh状态
+                    viewer.entities.values.forEach((res) => {
+                        if (res.billboard != undefined)
+                            res.billboard.show._value = false
+                    })
+                    // 海域使用
+                    that.hysyq_xzqh();
+                    // 土地收储
+                    that.tdsc();
+                    // 管控指标
+                    that.gkzb();
+
+
+                }
+
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        },
+        tdsc() {
+            const that = this;
+            that.store.setCockpitTdsc(true);
+
+        },
+        tdsc_xzqh() {
+            const that = this;
+            that.store.setCockpitTdsc(false);
+        },
+        colorFun(color) {
+
+
+            //             * `czm_material czm_getMaterial(czm_materialInput materialInput) {...}`: 这是一个名为 `czm_getMaterial` 的函数，它接受一个 `czm_materialInput` 类型的参数并返回一个 `czm_material` 类型的对象。这是 Cesium 中的一个约定，允许你通过编写自定义的 GLSL 代码来定义材质。  
+            // * `czm_material material = czm_getDefaultMaterial(materialInput);`: 获取默认的材质设置。  
+            // * `vec2 st = materialInput.st;`: 从输入中获取纹理坐标（texture coordinates）。  
+            // * `float dis = distance(st, vec2(0.5));`: 计算纹理坐标与中心 `(0.5, 0.5)` 的距离。  
+            // * `material.diffuse = color.rgb;`: 设置材质的漫反射颜色为你提供的 `color` 的 RGB 部分。  
+            // * `material.alpha = clamp(dis * 2.0, 0.1, 0.7);`: 根据与中心的距离设置材质的透明度（alpha）。使用 `clamp` 函数确保透明度值在 0.1 和 0.7 之间。
+            const fs = `czm_material  czm_getMaterial(czm_materialInput materialInput)
+            
+            {
+                czm_material material = czm_getDefaultMaterial(materialInput);
+                vec2 st = materialInput.st; 
+                float dis = distance(st,vec2(0.5));
+                material.diffuse = color.rgb;
+                material.alpha = clamp( dis * 2.0, 0.1, 0.3);
+                return material;
+            }
+            `
+
+            const material = new Cesium.Material({
+                fabric: {
+                    uniforms: {
+                        color: color
+                    },
+                    source: fs,
+
+                }
+            })
+
+            const aper = new Cesium.MaterialAppearance({
+                material,
+                source: fs,
+
+            })
+
+            return aper;
+        },
+        init_xzqh() {
+            const that = this;
+            xzqh.features.forEach((res) => {
+
+                let obj = {
+                    'type': "cockpit",
+                    'name': res.properties.name,
+                    'centroid': res.properties.centroid,
+                    'adcode': res.properties.adcode,
+                }
+                res.geometry.coordinates.forEach((item) => {
+
+                    const twoDArray = item[0];
+                    const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+                    that.primitivesL.push(JSON.stringify(obj));
+                    // 行政区划
+                    let polygon = new Cesium.GeometryInstance({
+                        id: JSON.stringify(obj),
+                        geometry: new Cesium.PolygonGeometry({
+                            minimum: new Cesium.Cartesian3(0, 0, 0),
+                            maximum: new Cesium.Cartesian3(100000, 100000, 100000),
+                            polygonHierarchy: new Cesium.PolygonHierarchy(
+                                Cesium.Cartesian3.fromDegreesArray(oneDArray)
+                            ),
+                            height: 100,
+                            extrudedHeight: res.properties.extrudedHeight,
+                        })
+                    })
+
+                    let addPolygonGeometry = new Cesium.Primitive({
+                        geometryInstances: polygon,
+                        appearance: that.colorFun(Cesium.Color.fromCssColorString('#139FF0')),
+                        show: true,
+
+                    })
+                    manager.add(addPolygonGeometry)
+                    viewer.scene.primitives.add(addPolygonGeometry)
+
+                    // 墙体流动效果
+                    var positions = Cesium.Cartesian3.fromDegreesArray(oneDArray);
+                    viewer.entities.add({
+                        name: "立体墙效果",
+                        position: Cesium.Cartesian3.fromDegrees(obj.centroid[0], res.properties.centroid[1], 5000),
+                        text: obj.name,
+                        properties: obj,
+                        label: {
+                            font: "bolder 18px sans-serif",
+                            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                            text: res.properties.name,//图标名称
+                            fillColor: Cesium.Color.fromCssColorString("#ffffff"),
+                            pixelOffset: new Cesium.Cartesian2(5, -15),
+                            zIndex: 3,
+                        },
+                        billboard: {
+                            // 图像地址，URI或Canvas的属性
+                            image: "./static/images/overview/htq-f.png",
+                            height: 60,
+                            width: 150,
+                            scale: 1.0,
+                            zIndex: 2,
+                            show: false
+                        },
+                        wall: {
+                            positions: positions,
+                            // 设置高度
+                            maximumHeights: new Array(positions.length).fill(res.properties.extrudedHeight),
+                            minimumHeights: new Array(positions.length).fill(0),
+                            material: new Cesium.DynamicWallMaterialProperty({
+                                color: Cesium.Color.fromBytes(19, 159, 240).withAlpha(0.7),
+                                duration: 3000
+                            }),
+                        }
+                    })
+                })
+            })
+        },
+        init_hyqy() {
+            const that = this;
+
+            hyqy.features.forEach((res) => {
+
+                let obj = {
+                    'type': "cockpit",
+                    'name': res.properties.name,
+                    'centroid': res.properties.centroid,
+                    'adcode': res.properties.adcode,
+                }
+                const twoDArray = res.geometry.coordinates[0];
+                const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+
+                viewer.entities.add({
+                    position: Cesium.Cartesian3.fromDegrees(res.properties.centroid[0], res.properties.centroid[1], 500),
+                    properties: obj,
+                    name: "海域",
+                    polygon: {
+                        zIndex: 1,
+                        hierarchy: {
+                            positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
+                        },
+                        // outline: false,
+                        material: Cesium.Color.fromCssColorString(that.xzqh_color),
+
+                        height: 300,
+                        extrudedHeight: 350,
+                        outline: true,
+                        // outlineColor : Cesium.Color.BLACK
+                        outlineColor: Cesium.Color.fromCssColorString('#55A1E3'),
+                    }
+                });
+
+            })
+        },
+        addSceneFun() {
+            var pitch = viewer.camera.pitch;
+            //获取当前视角的heading
+            var heading = viewer.camera.heading;
+            //获取当前视角的postion（位置）
+            var position = viewer.camera.position;
+            var x = position.x;
+            var y = position.y;
+            var z = position.z;
+            var testPitch = pitch;
+            var testHeading = heading;
+            // console.log("获取当前视角x,y,z", position.x, position.y, position.z, "pitch", pitch, "heading", heading);
+
+            var obj = {
+                "x": x,
+                "y": y,
+                "z": z,
+                "pitch": pitch,
+                "heading": heading,
+            }
+
+            console.log(obj, "asd");
+
+        },
+        flatten3DArray(arr) {
+            let stack = [...arr]; // 初始化栈，并将数组元素压入栈中  
+            let result = []; // 用于存储结果的一维数组  
+
+            while (stack.length > 0) {
+                let current = stack.pop(); // 弹出栈顶元素  
+                if (Array.isArray(current)) {
+                    // 如果当前元素是数组，则将其元素压入栈中（逆序）  
+                    for (let i = current.length - 1; i >= 0; i--) {
+                        stack.push(current[i]);
+                    }
+                } else {
+                    // 如果当前元素不是数组，则将其添加到结果数组中  
+                    result.push(current);
+                }
+            }
+
+            // 注意：因为我们是逆序压入栈中的，所以结果数组的顺序与原始三维数组中的顺序相反  
+            // 如果需要保持原始顺序，可以在压入栈时使用unshift代替push，但这样会降低性能  
+            return result;
+        },
+    },
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    async mounted() {
+
+
+        this.$nextTick((res) => {
+            manager = new Cesium.PrimitiveCollection();
+            manager.destroyPrimitives = false;
+            viewer.scene.primitives.add(manager);
+            this.pick_xzqh();
+            this.init_xzqh();
+            this.init_hyqy();
+        });
+
+
+    }, //生命周期 - 挂在完成
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style  scoped lang="scss" >
+.viewer {
+    width: 100%;
+    height: 100%;
+}
+
+.bg {
+    width: 100%;
+    height: 100%;
+
+    .bg_left {
+        width: 21.6%;
+        height: calc(100% + 60px);
+        position: absolute;
+        top: -60px;
+        left: 0;
+        z-index: 100;
+        background: linear-gradient(to right, rgba(6, 37, 66, 1), rgba(26, 28, 53, 0));
+    }
+
+    .bg_right {
+        width: 21.6%;
+        height: calc(100% + 60px);
+        position: absolute;
+        top: -60px;
+        right: 0;
+        z-index: 100;
+        background: linear-gradient(to left, rgba(6, 37, 66, 1), rgba(26, 28, 53, 0));
+    }
+
+    .bg_bottom {
+        width: 100%; // 56.8%;
+        height: 30%;
+        position: absolute;
+        // left: 21.6%;
+        bottom: 0;
+        z-index: 100;
+        background: linear-gradient(to top, rgba(6, 37, 66, 0.5), rgba(26, 28, 53, 0));
+    }
+}
+</style>