图斑窗口关闭，关闭右侧属性信息框

src/components/Query/clickQuery/clickQuery.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sm-panel sm-function-module-query" v-show="PoinyQueryShow && (store.state.cockpit_vector.title ? !store.state.viewer_flag : true)">
+  <div class="sm-panel sm-function-module-query" v-show="PoinyQueryShow && vectorShow">
     <div class="sm-panel-header">
       <span>{{ Resource.PoinyQuery }}</span>
       <span class="closeBtn" @click="toggleVisibility">&times;</span>
@@ -126,6 +126,9 @@ export default {
     PoinyQueryShow: function () {
       return store.state.toolBar[9];
     },
+    vectorShow: function () {
+      return store.state.cockpit_vector.title ||store.state.cockpit_vector. goitem ? !store.state.viewer_flag : true
+    },
   },
   created() { },
   watch: {

src/views/cockpit/stxf copy.vue

@@ -1,427 +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="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>