重点用地监管

src/views/cockpit/ydjc.vue

@@ -1,31 +1,37 @@
 <template>
-    <div class="ydjc">
-        <Title title='重点用地监管'></Title>
-        <div class="selectTab">
-            <el-select v-model="value" placeholder="请选择" :popper-append-to-body="false" @change="changeChartsLeft">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-            </el-select>
+  <div class="ydjc">
+    <Title title="重点用地监管"></Title>
+    <div class="selectTab">
+      <el-select
+        v-model="value"
+        placeholder="请选择"
+        :popper-append-to-body="false"
+        @change="changeChartsLeft"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <!-- 临时用地(期限检测) -->
+    <div v-show="value == options[0].value">
+      <div class="stacontent_ydjc">
+        <div class="item">
+          <span class="dlabel">临时用地面积:</span>
+          <span class="dvalue">{{ sdata.lsyd.sh_mj }}公顷</span>
         </div>
-        <!-- 临时用地(期限检测) -->
-        <div v-show="value == options[0].value">
-            <div class="stacontent_ydjc">
-                <div class="item">
-                    <span class="dlabel">临时用地面积:</span>
-                    <span class="dvalue">24.85公顷</span>
-                </div>
-                <div class="item">
-                    <span class="dlabel"> 临时用地项目数:</span>
-                    <span class="dvalue">15个</span>
-                </div>
-
-            </div>
-            <ThreeStackedBarAndLine ref="lsyd_echart" v-show="xzqh_flag" class="qxjc_echart"></ThreeStackedBarAndLine>
-            <XZQHPieChart v-show="!xzqh_flag"></XZQHPieChart>
-
+        <div class="item">
+          <span class="dlabel"> 临时用地项目数:</span>
+          <span class="dvalue">{{ sdata.lsyd.sj_number }}个</span>
         </div>
-        <!-- 临时用地(复垦监测) -->
-        <!-- <div v-show="value == options[1].value">
+      </div>
+    </div>
+    <!-- 临时用地(复垦监测) -->
+    <!-- <div v-show="value == options[1].value">
             <div class="stacontent_ydjc">
                 <div class="item">
                     <span class="dlabel">应复垦面积:</span>
@@ -46,113 +52,190 @@
             </div>
             <ThreeStackedBarAndLine class="qxjc_echart"></ThreeStackedBarAndLine>
         </div> -->
-        <!-- 农专用地 -->
-        <div v-show="value == options[1].value">
-            <div class="stacontent_ydjc">
-                <div class="item">
-                    <span class="dlabel">建设项目数:</span>
-                    <span class="dvalue">62个</span>
-                </div>
-                <!-- <div class="item">
+    <!-- 农专用地 -->
+    <div v-show="value == options[1].value">
+      <div class="stacontent_ydjc">
+        <div class="item">
+          <span class="dlabel">建设项目数:</span>
+          <span class="dvalue">{{ sdata.nzyd.sj_number }}个</span>
+        </div>
+        <!-- <div class="item">
                     <span class="dlabel"> 项目用地面积:</span>
                     <span class="dvalue">543.89公顷</span>
                 </div> -->
-                <div class="item">
-                    <span class="dlabel"> 农转用面积:</span>
-                    <span class="dvalue">309.14公顷</span>
-                </div>
+        <div class="item">
+          <span class="dlabel"> 农转用面积:</span>
+          <span class="dvalue">{{ sdata.nzyd.sh_mj }}公顷</span>
+        </div>
+      </div>
+    </div>
+    <ThreeStackedBarAndLine
+      :ref="`${value}_echart`"
+      v-show="xzqh_flag"
+      class="qxjc_echart"
+    ></ThreeStackedBarAndLine>
+    <!-- <XZQHPieChart v-show="!xzqh_flag"></XZQHPieChart> -->
+    <div v-show="!xzqh_flag">
+      <div class="content">
+        <div class="infoLIst content" ref="contentRef">
+          <div class="infoItem" v-for="(item, index) in list" :key="index">
+            <div class="itemIcon">
+              <span>
+                {{ index + 1 }}
+              </span>
+            </div>
+            <div class="itemCon">
+              <p>{{ item["名称"] }}</p>
+              <p>
+                <span
+                  ><span class="font_color">面积</span
+                  >{{ item["面积(平方米)"] }}公顷</span
+                >
+              </p>
             </div>
-            <ThreeStackedBarAndLine ref="nzyd_echart" v-show="xzqh_flag" class="qxjc_echart"></ThreeStackedBarAndLine>
-            <XZQHPieChart v-show="!xzqh_flag"></XZQHPieChart>
+            <div
+              :class="item.geom != '' ? 'itemAdress' : 'itemAdress2'"
+              @click="goDetail(item)"
+            ></div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 //这里可以导入其他文件（比如:组件，工具js，第三方插件js，json文件，图片文件等等）
 import { QueryOne, QueryList } from "../../api/cockpitNew";
-import ThreeStackedBarAndLine from './common/ThreeStackedBarAndLine.vue';
-import XZQHPieChart from './common/XZQHPieChart.vue';
+import ThreeStackedBarAndLine from "./common/ThreeStackedBarAndLine.vue";
+import XZQHPieChart from "./common/XZQHPieChart.vue";
 
-import Title from './common/Title.vue';
+import Title from "./common/Title.vue";
+import parse from "wellknown";
 export default {
-    components: { ThreeStackedBarAndLine, Title, XZQHPieChart },
-    data() {
-        return {
-            options: [
-                // { value: "lsyd_qxjc", label: "临时用地(期限监测)" },
-                // { value: "lsyd_fkjc", label: "临时用地(复垦监测)" },
-                { value: "lsyd", label: "临时用地" },
-                { value: "nzyd", label: "农转用地" },
-            ],
-            value: 'lsyd',
-            xzqh_flag: true
+  components: { ThreeStackedBarAndLine, Title, XZQHPieChart },
+  data() {
+    return {
+      options: [
+        // { value: "lsyd_qxjc", label: "临时用地(期限监测)" },
+        // { value: "lsyd_fkjc", label: "临时用地(复垦监测)" },
+        { value: "lsyd", label: "临时用地" },
+        { value: "nzyd", label: "农转用地" },
+      ],
+      value: "lsyd",
+      xzqh_flag: true,
+      sdata: { lsyd: {}, nzyd: {} },
+      list: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  beforeCreate() {}, //生命周期 - 创建之前
+  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
+  beforeMount() {}, //生命周期 - 挂载之前
+  methods: {
+    async getInfo(params) {
+      let res = await QueryList({
+        jscType: `jsc_zdydjg_${this.value}_qxzbmx`,
+        id: params ? params.id : store.state.cockpit_region.id,
+        beginTime: params ? params.beginTime : store.state.cockpit_date[0],
+        endTime: params ? params.endTime : store.state.cockpit_date[1],
+      });
+      res.data.map((res) => {
+        if (res.geom) {
+          res.geom = parse(res.geom.split(";")[1]);
+        }
+      });
+      this.list = res.data;
+    },
+    async getqxfl(params) {
+      let res = await QueryList({
+        jscType: `jsc_zdydjg_${this.value}_qxfl`,
+        id: params ? params.id : store.state.cockpit_region.id,
+        beginTime: params ? params.beginTime : store.state.cockpit_date[0],
+        endTime: params ? params.endTime : store.state.cockpit_date[1],
+      });
+      let x_data = [],
+        line_data = [],
+        number_data = [];
+      if (res.data) {
+        res.data.map((res) => {
+          x_data.push(res["区县"]);
+          line_data.push(res.sh_mj);
+          if (this.value == "nzyd") number_data.push(res.sj_number);
+          else number_data.push(0);
+        });
+      }
+
+      if (this.value == "nzyd") {
+        let obj = {
+          legend_data: ["农转用面积", "建设项目数"],
+          x_data,
+          line_data,
+          result: [number_data],
+        };
+
+        this.$refs.nzyd_echart.setOptions(obj);
+      } else {
+        let obj = {
+          legend_data: ["临时用地面积", "正常使用", "剩余1个月", "已到期"],
+          x_data,
+          line_data,
+          result: [number_data, number_data, number_data],
         };
+        this.$nextTick(() => {
+          this.$refs.lsyd_echart.setOptions(obj);
+        });
+      }
     },
-    //监听属性 类似于data概念
-    computed: {},
-    //监控data中的数据变化
-    watch: {},
-    //方法集合
-    beforeCreate() { }, //生命周期 - 创建之前
-    created() {
-
-    }, //生命周期 - 创建完成（可以访问当前this实例）
-    beforeMount() { }, //生命周期 - 挂载之前
-    methods: {
-        changeChartsLeft(e) {
-            console.log('e: ', e);
-            if (e == 'nzyd') {
-                let obj = {
-                    legend_data: ['农转用面积', '建设项目数'],
-                    x_data: ['崖州区', '天涯区', '吉阳区', '海棠区'],
-                    line_data: [22.87, 49.27, 81.5, 155.50],
-                    result: [[6, 17, 22, 17]]
-                }
-
-                this.$refs.nzyd_echart.setOptions(obj)
-            } else {
-                let obj = {
-                    legend_data: ['临时用地面积', '正常使用', '剩余1个月', '已到期'],
-                    x_data: ['崖州区', '天涯区', '吉阳区', '海棠区'],
-                    line_data: [110, 90, 120, 70],
-                    result: [[12, 12, 12, 1], [24, 12, 1, 2], [12, 0, 24, 21]]
-                }
-
-                this.$refs.lsyd_echart.setOptions(obj)
-            }
-
-        },
-        switch_xzqh(value) {
-            if (value.id == '4602') {
-                this.xzqh_flag = true
-
-            } else {
-                this.xzqh_flag = false
-            }
-        },
+    GetQueryOne(params) {
+      let param = {
+        jscType: `jsc_zdydjg_${this.value}_hz`,
+        id: params ? params.id : store.state.cockpit_region.id,
+        beginTime: params ? params.beginTime : store.state.cockpit_date[0],
+        endTime: params ? params.endTime : store.state.cockpit_date[1],
+      };
+      QueryOne(param).then((res) => {
+        this.sdata[this.value] = res.data || {};
+      });
     },
-    mounted() {
-        const that = this;
-        this.$nextTick((res) => {
-            // this.init_info();
-            let obj = {
-                legend_data: ['临时用地面积', '正常使用', '剩余1个月', '已到期'],
-                x_data: ['崖州区', '天涯区', '吉阳区', '海棠区'],
-                line_data: [110, 90, 120, 70, 60],
-                result: [[12, 12, 12, 12, 1, 2], [24, 12, 12, 0, 1, 2], [12, 0, 0, 24, 21]]
-            }
-
-            this.$refs.lsyd_echart.setOptions(obj)
-
-        })
+
+    goDetail(item) {
+      store.setViewerFlagb(false);
+      store.setToolBarShow(false);
+      store.setXzqh_flag(false);
+      store.setCockpit_vector({
+        title: "",
+        tableData: [item],
+        goitem: item,
+      });
+    },
+    changeChartsLeft(e) {
+      this.GetQueryOne();
+      if (this.xzqh_flag) this.getqxfl();
+      else this.getInfo();
     },
-    beforeUpdate() { }, //生命周期 - 更新之前
-    updated() { }, //生命周期 - 更新之后
-    beforeDestroy() { }, //生命周期 - 销毁之前
-    destroy() { },//生命周期 - 销毁完成
-    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+    switch_xzqh(value) {
+      this.GetQueryOne(value);
+      if (value.id == "4602") {
+        this.xzqh_flag = true;
+        this.getqxfl(value);
+      } else {
+        this.xzqh_flag = false;
+        this.getInfo(value);
+      }
+    },
+  },
+  mounted() {},
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroy() {}, //生命周期 - 销毁完成
+  activated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+  deactivated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
 
@@ -160,144 +243,248 @@ export default {
 
 <style lang="scss"  scoped>
 .ydjc {
-
-    z-index: 100;
+  z-index: 100;
 }
 
 .title {
-
-    border-width: 0px;
-    width: 100%;
-    height: 36px;
-    background: no-repeat;
-    background-size: 100% 100%;
-    background-image: url("/static/images/overview/titlebox.gif");
-    /* display: -webkit-box; */
-    display: -ms-flexbox;
-    /* display: flex; */
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    position: relative;
-
-    span {
-        color: #fff;
-        font-size: 14px;
-        font-weight: bold;
-        position: absolute;
-        top: 0.3rem;
-        left: 2.5rem;
-    }
+  border-width: 0px;
+  width: 100%;
+  height: 36px;
+  background: no-repeat;
+  background-size: 100% 100%;
+  background-image: url("/static/images/overview/titlebox.gif");
+  /* display: -webkit-box; */
+  display: -ms-flexbox;
+  /* display: flex; */
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  position: relative;
+
+  span {
+    color: #fff;
+    font-size: 14px;
+    font-weight: bold;
+    position: absolute;
+    top: 0.3rem;
+    left: 2.5rem;
+  }
 }
 
-
 .selectTab {
-    position: absolute;
-    top: 3px;
-    right: 70px;
-    z-index: 100;
-
-    /deep/ .el-input__inner {
-        // padding-right: 30px;
-        width: 90px !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-color: rgba(0, 0, 0, 0) !important;
-        background-size: 100% 100%;
-    }
-
-    /deep/ .el-input__icon {
-        line-height: 1;
-    }
-
-    /deep/ .el-input__suffix {
-        right: -36px;
-    }
-
-    /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;
-    }
+  position: absolute;
+  top: 3px;
+  right: 70px;
+  z-index: 100;
+
+  /deep/ .el-input__inner {
+    // padding-right: 30px;
+    width: 90px !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-color: rgba(0, 0, 0, 0) !important;
+    background-size: 100% 100%;
+  }
+
+  /deep/ .el-input__icon {
+    line-height: 1;
+  }
+
+  /deep/ .el-input__suffix {
+    right: -36px;
+  }
+
+  /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.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 {
+    color: #ecf6ff;
+  }
 }
 
 /deep/ {
-    .el-select-dropdown__item.selected {
-        color: #409eff;
-    }
+  .el-select-dropdown__item.selected {
+    color: #409eff;
+  }
 }
 
 /deep/ .el-popper[x-placement^="bottom"] {
-    margin-top: 12px;
-    background: #163253;
+  margin-top: 12px;
+  background: #163253;
 }
 
 /deep/ .el-select-dropdown {
-    border: none;
+  border: none;
 }
 
 /deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
-    border-bottom-color: #163253;
-    top: 0;
+  border-bottom-color: #163253;
+  top: 0;
 }
 
-
-
 .stacontent_ydjc {
-    width: 100%;
-    height: 24px;
-    margin-top: 0.5rem;
-    margin-bottom: 1.5rem;
+  width: 100%;
+  height: 24px;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+
+  .item {
+    width: 49%;
+    height: 30%;
+    display: inline-block;
+    // border: #00FFFF 1px solid;
+  }
+
+  .cursor {
+    cursor: pointer;
+  }
+
+  .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;
+    font-size: 12px;
+  }
+}
 
-    .item {
-        width: 49%;
-        height: 30%;
+.qxjc_echart {
+}
+.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;
-        // border: #00FFFF 1px solid;
+        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;
+        }
+      }
     }
 
-    .cursor {
-        cursor: pointer;
+    .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;
     }
 
-    .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;
+    .itemAdress2 {
+      width: 1.5rem;
+      height: 1.7rem;
+      margin: 0.5rem;
     }
 
-    .dvalue {
-        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
-        font-weight: bold;
-        color: #64daff;
-        line-height: 16px;
-        text-align: left;
-        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;
     }
+  }
 }
-
-.qxjc_echart {}
 </style>

src/views/viewer.vue

@@ -266,7 +266,7 @@ export default {
                             let adcode = obj.adcode
                             that.params.id = adcode
                             that.params.name = pri_name
-                            store.setCockpitRegion(obj)
+                            store.setCockpitRegion({...obj,id:obj.adcode})
 
                             that.setDatas()
                             // 管控指标