删除无用代码

src/views/cockpit/datePicker.vue

@@ -92,5 +92,5 @@ export default {
   padding: 0;
   width: 180px !important;
 }
-@import "../cockpitNew1/datePicker.scss";
+@import "../cockpit/datePicker.scss";
 </style>

src/views/cockpit/kjgh.vue

@@ -185,9 +185,10 @@ export default {
 };
 </script>
 <style  lang="scss"  scoped>
+
 .jsyd {
   position: fixed;
-  left: 1rem;
+  left: vh(20);
   top: 16.5rem;
   z-index: 1;
   width: 416px;
@@ -248,13 +249,9 @@ export default {
 
 .box_bottom {
   position: fixed;
-  width: 19rem;
-  height: 6rem;
-  left: 4%;
-  top: 27.5rem;
+  width: 25vw;
+  height: 5vh;
   background: no-repeat;
-  background-size: 100%;
-
   background-image: url("/static/images/overview/gkzb_back.png");
 
 
@@ -275,9 +272,8 @@ export default {
 }
 
 .box_text {
-  width: 21rem;
-  margin-left: 6rem;
-  margin-top: 1rem;
+  width: 23.4375vw;
+  margin-left: 3vw;
 
   p {
     font-size: 12px;

src/views/cockpitNew1/bjxm.vue

@@ -1,379 +0,0 @@
-<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) => {
-                  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: 407px;
-  width: 385px;
-  height: 310px;
-  top: 68%;
-  // left: 1080px;
-  left: 1096px;
-  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/titlebox.gif");
-
-  .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/cockpitNew1/borderTemplate.vue

@@ -1,138 +0,0 @@
-<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
-  max-width: 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/titlebox.gif");
-    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/cockpitNew1/datePicker.vue

@@ -1,96 +0,0 @@
-<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() + "";
-function setdata(time) {
-  return `${time.length == 1 ? "0" : ""}${time}`;
-}
-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}${setdata(nowMonth)}${setdata(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;
-}
-@import "datePicker";
-</style>

src/views/cockpitNew1/gdbh.vue

@@ -1,207 +0,0 @@
-<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>
-        </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: "平方千米" }, //耕地保有量
-        { name: "补充耕地项目", prop: "xzqhdm_number", unit: "个" },
-        { name: "永久基本农田", prop: "yjjbntmj", unit: "平方千米" },
-        { name: "补充耕地面积", prop: "mj", unit: "平方千米" },
-      ],
-    };
-  },
-  //监听属性 类似于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);
-        });
-      });
-    },
-  },
-  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/cockpitNew1/gkzb.vue

@@ -1,384 +0,0 @@
-<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_xzjsyd">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>陆域生态保护红线</p>
-          <span>{{ store.state.cockpit_gkzb.ly_mj }}</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_syzb">
-
-          </div>
-        </div>
-        <div class="text">
-          <p>近岸海域海洋生态保护红线
-
-          </p>
-          <span>{{ store.state.cockpit_gkzb.hy_mj }}</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/titlebox.gif");
-
-  .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/cockpitNew1/hysy.vue

@@ -1,542 +0,0 @@
-<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: 1rem;
-    top: 67%;
-    // top: 41.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/titlebox.gif");
-
-    .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/cockpitNew1/serCenter.vue

@@ -1,145 +0,0 @@
-<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/cockpitNew1/stxf.vue

@@ -1,194 +0,0 @@
-<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/cockpitNew1/tdsc.vue

@@ -1,765 +0,0 @@
-<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: 19rem;
-  width: 416px;
-  height: 310px;
-  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/titlebox.gif");
-
-  .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: 11rem;
-}
-
-
-#tdsc_echart_xzqh {
-  left: 1rem;
-  top: 2rem;
-  width: 32rem;
-  height: 13rem;
-}
-
-.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/cockpitNew1/tdsy.vue

@@ -1,1459 +0,0 @@
-<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: 434px;
-  top: 68%;
-  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/titlebox.gif");
-      // 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/cockpitNew1/wpjg.vue

@@ -1,139 +0,0 @@
-<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: 67% !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/complianceAnalysis/components/lsjl.vue

@@ -366,5 +366,5 @@ export default {
 </style>
 
 <style lang="scss">
-@import "../../cockpitNew1/datePicker.scss";
+@import "../../cockpit/datePicker.scss";
 </style>

src/views/map3d.vue

@@ -100,12 +100,9 @@
 
 <script>
 import { getRouters } from "@/api/menu";
-import GKZB from './cockpitNew1/gkzb';
-import TDSC from './cockpitNew1/tdsc';
-import HYSY from './cockpitNew1/hysy';
 export default {
   name: "app",
-  components: { GKZB, TDSC, HYSY },
+  components: {  },
   data() {
     return {
       menu_left: [],

src/views/viewer原本驾驶舱.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div>
         <i class="cesiumbtn" :class="store.state.viewer_flag ? 'el-icon-aim' : 'el-icon-rank'" :title="isbig ? '缩小' : '放大'"
             @click="bigViewerChange"></i>
@@ -673,4 +673,4 @@ export default {
         background: linear-gradient(to top, rgba(6, 37, 66, 0.5), rgba(26, 28, 53, 0));
     }
 }
-</style>
+</style> -->

src/views/viewer旧版驾驶舱.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div>
         <i class="cesiumbtn" :class="store.state.viewer_flag ? 'el-icon-aim' : 'el-icon-rank'" :title="isbig ? '缩小' : '放大'"
             @click="bigViewerChange"></i>
@@ -544,4 +544,4 @@ export default {
         background: linear-gradient(to top, rgba(6, 37, 66, 0.5), rgba(26, 28, 53, 0));
     }
 }
-</style>
+</style> -->

src/views/viewer行政区划渐变.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div>
         <i class="cesiumbtn" :class="store.state.viewer_flag ? 'el-icon-aim' : 'el-icon-rank'" :title="isbig ? '缩小' : '放大'"
             @click="bigViewerChange"></i>
@@ -536,4 +536,4 @@ export default {
         background: linear-gradient(to top, rgba(6, 37, 66, 0.5), rgba(26, 28, 53, 0));
     }
 }
-</style>
+</style> -->