Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/views/cockpit/common/VectorSpace/BoxCommonVector.vue

@@ -332,6 +332,9 @@ export default {
             }else {
               this.init_vector()
             }
+            if(newVal.goitem){
+              this.go(newVal.goitem)
+            }
         },
         active_dableData(newVal, oldVal) {
             this.draw_vector_tdgy_gy_jd(newVal);

src/views/cockpit/stxf copy.vue

@@ -0,0 +1,427 @@
+<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="stacontent">
+      <div class="item" v-for="(sd, index) in sdlist[tab]" :key="index" :class="{cursor: sd.view}" @click="draw_vector(sd)">
+        <div class="itembg"></div>
+        <div class="text">{{ sd.name }}</div>
+        <span>{{ sdata[tab][sd.prop] || 0 }}</span>
+        {{ sd.unit }}
+        <i v-if="sd.view" style="pointer-events:all" :class="{ 'el-icon-view': true }"></i>
+      </div>
+    </div>
+
+    <div v-show="tab == options[0].value">
+      <pie3d id="stxf_echart_tdzz" unit="个" :legendFlag=true ref="stxf_echart_tdzz"></pie3d>
+    </div>
+    <div v-show="tab == options[1].value">
+      <div class="content">
+
+        <div class="infoLIst content" ref="contentRef">
+          <div class="infoItem" v-for="(item, index) in store.state.cockpit_stxf.ssgc.list" :key="index" >
+            <div class="itemIcon">
+              <span>
+                {{ index + 1 }}
+              </span>
+            </div>
+            <div class="itemCon">
+              <p>{{ item.xmmc }}</p>
+              <p>
+                <span><span class="font_color">治理面积</span>{{ item.zlmj }}公顷</span>
+                <span><span class="font_color">投资金额</span>{{ item.tzje }}万元</span>
+              </p>
+            </div>
+            <div :class="item.geom != '' ? 'itemAdress' : 'itemAdress2'" @click="goDetail(item)"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </borderTemplate>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import borderTemplate from "./borderTemplate.vue";
+import { QueryOne, QueryList } from "../../api/cockpitNew";
+import pie3d from "../../components/echartsTemplate/3dPie.vue";
+import parse from "wellknown";
+export default {
+  components: { borderTemplate, pie3d },
+  data() {
+    return {
+      timer: undefined,
+      options: [
+        { value: "tdzz", label: "土地整治" },
+        { value: "ssxf", label: "山水工程" },
+      ],
+      tab: "ssxf",
+      paramdatas: {},
+      sdlist: {
+        tdzz: [
+          { name: "综合整治项目", prop: "xzqhdm_number", unit: "个" },
+          { name: "土地整治面积", prop: "zlmj", unit: "公顷" },
+          { name: "总投资", prop: "tzje", unit: "亿元" },
+        ],
+        ssxf: [
+          { name: "2023-2025年项目", prop: "xzqhdm_number", unit: "个", view:true },
+          { name: "整治面积", prop: "zlmj", unit: "公顷" },
+          { name: "总投资", prop: "tzje", unit: "亿元" },
+        ],
+        haxf: [
+          { name: "海岸线长度", prop: "xzqhdm_number", unit: "千米" },
+          { name: "自然岸线保有率", prop: "zlmj", unit: "%" },
+          { name: "海岸线整治修复项目", prop: "tzje", unit: "个" },
+        ],
+      },
+      sdata: { tdzz: {}, ssxf: {}, haxf: {} },
+      eData: {
+        xData: ["农用地", "建设用地", "生态修复", "历史文化保护"],
+        yData: [
+          [10, 10, 10, 10],
+          [10, 10, 30, 10],
+          [10, 10, 10, 40],
+        ],
+        legend: [""],
+      },
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  methods: {
+    async getInfo(params) {
+      let res = await QueryList({
+        jscType: "jsc_stxf_ywlx_ssxfmx",
+        id: params ? params.id : '4602'
+
+      });
+      res.data.map((res) => {
+        if (res.geom) {
+          res.geom = parse(res.geom.split(";")[1]);
+        }
+      });
+      store.state.cockpit_stxf.ssgc.list = res.data
+
+
+      let res_title = await QueryOne({
+        jscType: "jsc_stxf_ztgh_ssxf",
+        id: params ? params.id : '4602'
+
+      });
+      store.state.cockpit_stxf.ssgc.title = res_title.data
+
+      this.sdata.ssxf = {
+        xzqhdm_number: store.state.cockpit_stxf.ssgc.title.xzqhdm_number,
+        zlmj: store.state.cockpit_stxf.ssgc.title.zlmj,
+        tzje: store.state.cockpit_stxf.ssgc.title.tzje,
+
+      }
+
+
+    },
+    changeCharts(e) {
+
+    },
+    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);
+        });
+      });
+    },
+    async tdzz(params) {
+      let res = await QueryList({
+        jscType: "jsc_stxf_ywfl_tdzz",
+        id: params ? params.id : '4602'
+
+      });
+      let arr = [];
+      let xmsl_num = 0;
+      let xmjz_num = 0;
+      // let xmsl_num = 0;
+      res.data.forEach((res) => {
+        arr.push({
+          name: res.zzlx,
+          value: res.xmsl
+        });
+        // xmsl_num += Number(res.xmsl)//综合项目格数
+        // xmjz_num += Number(res.xmjz) //总投资
+      })
+      this.$refs.stxf_echart_tdzz.setOptions(arr);
+
+      let res_hz = await QueryList({
+        jscType: "jsc_stxf_ztgh_tdzz",
+        id: params ? params.id : '4602'
+
+      });
+      
+      
+      
+      this.sdata.tdzz = {
+        xzqhdm_number: res_hz.data[0].xmsl,
+        zlmj: res_hz.data[0].mj,
+        tzje: res_hz.data[0].tzje,
+
+      }
+      console.log('res_hz.data: ', res_hz.data);
+
+    },
+    initDiv() {
+      const self = this
+      const setInter = function () {
+        if (self.$refs.contentRef.scrollTop > 1233) {
+          self.$refs.contentRef.scrollTop = 0
+
+        }
+
+        if (self.$refs.contentRef.scrollTop === self.$refs.contentRef.scrollHeight - self.$refs.contentRef.clientHeight) {
+          self.$refs.contentRef.scrollTop = 0
+        } else {
+          self.$refs.contentRef.scrollTop++
+        }
+
+      }
+      self.timer && clearInterval(self.timer)
+      self.timer = setInterval(setInter, 100)
+
+      self.$refs.contentRef.addEventListener('mouseover', function () {
+        self.timer && clearInterval(self.timer)
+      })
+      self.$refs.contentRef.addEventListener('mouseout', function () {
+        self.timer = setInterval(setInter, 100)
+      })
+    },
+    goDetail(item){
+      store.setViewerFlagb(false);
+      store.setToolBarShow(false);
+      store.setXzqh_flag(false);
+      store.setCockpit_vector({
+          title: "",
+          tableData: [item],
+          goitem: item
+        });
+    },
+    draw_vector(sd) {
+      if (sd.view) {
+        store.setViewerFlagb(false);
+        store.setToolBarShow(false);
+        store.setXzqh_flag(false);
+        store.setCockpit_vector({
+          title: "山水工程完成项目",
+          tableData: store.state.cockpit_stxf.ssgc.list,
+          tablejscType: `jsc_stxf_ywlx_ssxfmx`,
+          columns: ['区县编码','区县编码名称','项目名称','投资金额(万元)','治理时间','治理进度','治理面积(公顷)','备注'],
+        });
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick((res) => {
+
+
+      this.getInfo();
+      // this.tdzz();
+      this.initDiv()
+
+    })
+  },
+};
+</script>
+<style lang="scss" scoped>
+//  
+
+.stxf {
+  top: 33.3% !important;
+
+  .stacontent {
+    width: 100%;
+    height: 44px;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1.5rem;
+  }
+}
+
+.item {
+  width: 130px; //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");
+    pointer-events: none;
+  }
+
+  .text {
+    font-weight: bold;
+    font-size: 14px;
+    color: #bcd3e5;
+    line-height: 24px;
+  }
+
+  span {
+    font-size: 18px;
+    color: #64daff;
+    line-height: 18px;
+  }
+}
+.cursor {
+  cursor: pointer;
+}
+
+
+#stxf_echart_tdzz {
+  width: 27rem;
+  height: 10rem;
+  position: absolute;
+  right: -1rem;
+}
+
+
+.infoLIst {
+  width: 100%;
+  height: 9.5rem;
+  overflow: hidden;
+  overflow-y: auto;
+  margin-top: 23px;
+  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: 20px;
+      height: 20px;
+      background: url("/static/images/overview/stxf_sugc_index_back.png") no-repeat;
+      background-size: 100% 100%;
+      margin: 0.5rem;
+      text-align: center;
+
+      span {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
+        font-weight: 600;
+        font-size: 14px;
+        color: #F9B447;
+        line-height: 10px;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+      }
+    }
+
+    .itemCon {
+      width: 21rem;
+      // height: 1.55rem;
+      // background-color: #faa012;
+      // line-height: 1.55rem;
+      p {
+        height: 41%;
+        line-height: 1.55rem;
+        color: #ecf6ff;
+      }
+
+      p:first-child {
+        width: 90%;
+        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;
+        }
+
+        .font_color {
+          color: white;
+        }
+      }
+    }
+
+    .itemAdress {
+      width: 1.5rem;
+      height: 1.7rem;
+      background: url("/static/images/overview/iconDW.png") no-repeat;
+      background-size: 100% 100%;
+      margin: 0.5rem;
+      cursor: pointer;
+    }
+
+    .itemAdress2 {
+      width: 1.5rem;
+      height: 1.7rem;
+      margin: 0.5rem;
+    }
+
+    .itemStatus1 {
+      background: url("/static/images/overview/yrsIcon.png") no-repeat;
+      background-size: 100% 100%;
+      width: 62px;
+      height: 18px;
+      position: relative;
+      right: -30px;
+    }
+
+
+  }
+}
+
+.selectTab {
+  position: absolute;
+  bottom: 8px;
+  right: 11px;
+}
+</style>