是否开工、占比组件、添加土地闲置路由、土地闲置页面

src/components/echartsTemplate/ratio.vue

@@ -0,0 +1,111 @@
+<template>
+  <div id="ratio_echart" ref="echart"></div>
+</template>
+
+<script>
+let option = {
+  title: [
+    {
+      text: "rate",
+      x: "center",
+      y: "35%",
+      textStyle: {
+        fontSize: 16,
+        color: "#fff",
+        fontWeight: "bold",
+      },
+    },
+    {
+      text: "关联率",
+      x: "center",
+      y: "55%",
+      borderColor: "#fff",
+      textStyle: {
+        fontWeight: "normal",
+        fontSize: 12,
+        color: "#fff",
+      },
+    },
+  ],
+  polar: {
+    center: ["50%", "55%"],
+    radius: ["65%", "95%"],
+  },
+  angleAxis: {
+    max: 100,
+    startAngle: 180,
+    show: false,
+  },
+  radiusAxis: {
+    type: "category",
+    show: true,
+    axisLabel: {
+      show: false,
+    },
+    axisLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+  },
+  series: [
+    {
+      data: [80],
+      name: "",
+      type: "bar",
+      roundCap: true,
+      showBackground: true,
+      // backgroundStyle: {
+      //   color: 'rgba(19, 84, 146, .4)',
+      // },
+      coordinateSystem: "polar",
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            {
+              offset: 0,
+              color: "#005DCF",
+            },
+            {
+              offset: 1,
+              color: "#00CCFF",
+            },
+          ]),
+        },
+      },
+    },
+  ],
+};
+export default {
+  name: "ratio_echart",
+  components: {},
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  methods: {
+    setOptions(cartData) {
+      if (!this.myChart) {
+        // var dom = document.getElementById("ratio_echart");
+        this.myChart = echarts.init(this.$refs.echart);
+      }
+      option.title[0].text = cartData.ratio + "%";
+      option.title[1].text = cartData.name;
+      option.series.data = [cartData.ratio];
+      this.myChart.resize();
+      this.myChart.setOption(option);
+    },
+  },
+  mounted() {
+    // this.setOptions();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.ratio_echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/router/index.js

@@ -128,8 +128,12 @@ export const constantRoutes = [{
             import('@/views/ResourceShare/myReview/index.vue'),
         hidden: true
     },
-
-
+    {
+        path: '/Idleland',
+        component: () =>
+            import('@/views/Idleland/index.vue'),
+        hidden: true
+    },
     ]
 }, {
     path: '/login',

src/views/Idleland/components/tjzl.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="thzl">
+    <div class="content">
+      <div class="item" v-for="(sd, index) in sdlist" :key="index">
+        <div class="icon">
+          <div class="iicon" :class="sd.value"></div>
+        </div>
+        <div class="text">
+          <p>土地面积（亩）</p>
+          <span>{{ sdata[sd.prop].mj || 0 }} </span>
+          <p>宗地数（宗）</p>
+          <span>{{ sdata[sd.prop].zd || 0 }} </span>
+        </div>
+      </div>
+    </div>
+    <div class="echartlist">
+      <div class="echars">
+        <ratio class="ratio_echart" ref="echartRef3"></ratio>
+        <ratio class="ratio_echart" ref="echartRef4"></ratio>
+      </div>
+      <div class="echars">
+        <div class="block-title">各区县闲置情况</div>
+        <barAndLine class="echart" ref="echartRef1"></barAndLine>
+      </div>
+      <div class="echars">
+        <div class="block-title">闲置原因</div>
+        <pie unit="亿元" class="pie_echart" ref="echartRef2"></pie>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import pie from "@/components/echartsTemplate/pie.vue";
+import ratio from "@/components/echartsTemplate/ratio.vue";
+import barAndLine from "@/views/cockpit/common/ThreeStackedBarAndLine.vue";
+import { QueryOne, QueryList } from "@/api/cockpitNew";
+export default {
+  data() {
+    return {
+      sdata: { ys: {}, rd: {}, ycz: {} },
+      sdlist: [
+        { name: "疑似闲置", prop: "ys" },
+        { name: "认定闲置", prop: "rd" },
+        { name: "已处置闲置", prop: "ycz" },
+      ],
+      jdData: {
+        legend_data: ["闲置率", "认定闲置土地", "已处置闲置土地"],
+        x_data: [],
+        line_data: [],
+      },
+    };
+  },
+  components: {
+    pie,
+    ratio,
+    barAndLine,
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    changeData(name, updata) {
+      this[name] = updata;
+    },
+    getData() {
+      this.$emit("updateParent", "loading", true);
+      //   this.GetQueryOne();
+      this.GetQueryList();
+      this.GetSumList();
+      this.setEchart({ name: "土地闲置率", ratio: 56 }, 3);
+      this.setEchart({ name: "闲置处置率", ratio: 56 }, 4);
+    },
+    GetQueryOne() {
+      let params = {
+        jscType: `jsc_stxf_ztgh_ssxf`,
+        id: 4602,
+      };
+      QueryOne(params).then((res) => {
+        this.sdata = res.data || {};
+      });
+    },
+    GetQueryList() {
+      this.jdData.x_data = [];
+      this.jdData.line_data = [];
+      this.jdData.result = [[], []];
+      let params = { jscType: `jsc_stxf_ssxf_jdfq`, id: 4602 };
+      QueryList(params).then((res) => {
+        res.data.forEach((jdData) => {
+          let jd = `${(jdData.dj - 1) * 20}-${jdData.dj * 20}`;
+          this.jdData.x_data.push(jd);
+          this.jdData.line_data.push(jdData.zlmj);
+          this.jdData.result[0].push(jdData.dj_number);
+          this.jdData.result[1].push(jdData.tzje);
+          this.$emit("updateParent", "loading", false);
+        });
+        this.setEchart(this.jdData, 1);
+      });
+    },
+    GetSumList() {
+      let data = [
+        { name: "政府原因", value: "13.45" },
+        { name: "企业原因", value: "5" },
+        { name: "非政府原因和不可抗力", value: "18.67" },
+        { name: "其他", value: "18.67" },
+      ];
+      this.setEchart({ data, type: '"horizontal"' }, 2);
+    },
+    setEchart(data, id) {
+      this.$nextTick(() => {
+        this.$refs[`echartRef${id}`].setOptions(data);
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.thzl {
+  height: 100%;
+  .content {
+    width: 100%;
+    height: 140px;
+    .item {
+      width: 32%;
+      height: 100px;
+      display: inline-block;
+      position: relative;
+      .icon {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .iicon {
+        background: no-repeat 50%;
+        background-image: url("/static/images/overview/icon_yrkkg.png");
+        width: 45px;
+        height: 45px;
+        flex: 1;
+      }
+      .num {
+        background-image: url("/static/images/overview/icon_yrkkg.png");
+      }
+      .mj {
+        background-image: url("/static/images/overview/icon_yrkkg.png");
+      }
+      .ztz {
+        background-image: url("/static/images/overview/icon_yrkkg.png");
+      }
+
+      .text {
+        display: inline-block;
+        // border: #00FFFF 1px solid;
+        width: 100%;
+        margin-bottom: 4px;
+        text-align: center;
+        margin-left: 0.3rem;
+        span {
+          font-family: "Arial Negreta", "Arial Normal", "Arial";
+          font-weight: 700;
+          font-style: normal;
+          color: #68f4fb;
+        }
+      }
+    }
+  }
+  .echartlist {
+    width: 100%;
+    height: calc(100% - 150px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    .ratio_echart {
+      width: 180px;
+      height: 90px;
+      display: inline-block;
+    }
+    .echart {
+      height: 200px !important;
+    }
+    .pie_echart {
+      height: 180px;
+    }
+  }
+}
+</style>

src/views/Idleland/index.vue

@@ -0,0 +1,95 @@
+<!--闲置土地-->
+<template>
+  <div class="ghzc complianceAnalysis">
+    <div class="innerContainer leftPane" v-drag>
+      <h2 class="Pangetitle darg-div">
+        <span class="pange_text">闲置土地</span>
+      </h2>
+      <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
+        <el-tab-pane label="统计总览" name="tjzl">
+          <Tjzl
+            v-loading="loading"
+            @updateParent="changeData"
+            ref="tjzl"
+          ></Tjzl>
+        </el-tab-pane>
+        <el-tab-pane label="闲置管理" name="xzgl">
+          <!-- <Lsjl
+            v-loading="loading"
+            type="tjzl"
+            @updateParent="changeData"
+            ref="xzgl"
+          ></Lsjl> -->
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tjzl from "./components/tjzl.vue";
+// import Lsjl from "./components/lsjl.vue";
+
+// import RzDtails from "./components/rzDtails.vue";
+// import TabelView from "./components/tabelView.vue";
+export default {
+  name: "complianceAnalysis",
+  components: {
+    Tjzl,
+    // Lsjl,
+    // Scjg,
+    // RzDtails,
+    // TabelView,
+  },
+  data() {
+    return {
+      loading: false,
+      activeTabs: "tjzl",
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    changeData(name, updata) {
+      this[name] = updata;
+    },
+  },
+  watch: {
+    activeTabs(newValue) {
+      if (newValue != "tjzl") this.$refs.tjzl.reset();
+      if (newValue != "xzgl") this.$refs.xzgl.reset();
+
+      if (newValue == "tjzl") this.$refs.tjzl.getData();
+      if (newValue == "xzgl") {
+        this.$refs.xzgl.reset();
+        this.$refs.xzgl.changeForm();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.complianceAnalysis {
+  .xz_box {
+    .title {
+      padding: 8px;
+      margin-bottom: 10px;
+      span {
+        color: #605e5e;
+        padding-left: 8px;
+        border-left: 3px solid #3a8ee6;
+      }
+      button {
+        padding: 0;
+        float: right;
+        margin-right: 5px;
+        min-height: unset;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+@import "../complianceAnalysis/ghzc.scss";
+</style>

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

@@ -0,0 +1,91 @@
+<template>
+  <div class="dialog">
+    <el-dialog
+      :title="formData['项目名称']"
+      width="40%"
+      :visible.sync="dialogVisible"
+      :before-close="close"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+    >
+      <div class="content">
+        <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
+          <el-form-item label="是否开工:" prop="shjl">
+            <el-radio v-model="ruleForm.shjl" label="1"> 开工 </el-radio>
+            <el-radio v-model="ruleForm.shjl" label="2"> 不开工 </el-radio>
+          </el-form-item>
+          <el-form-item label="开工日期:" prop="jzrq">
+            <el-date-picker
+              v-model="ruleForm.jzrq"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="close">关闭</el-button>
+        <el-button type="primary" @click="submit">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+      formData: {},
+      ruleForm: {},
+      dialogVisible: false,
+    };
+  },
+  created() {},
+  methods: {
+    // 关闭弹窗
+    close() {
+      this.dialogVisible = false;
+      this.$emit("close");
+    },
+    Init(rowdata) {
+      this.dialogVisible = true;
+      this.formData = rowdata;
+    },
+
+    async submit() {
+      this.close();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  .content {
+    height: 400px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    color: #fff;
+    .create {
+      display: inline-block;
+      padding: 5px 10px;
+      border: 1px solid #3f93f5;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+  }
+
+  .el-radio {
+    color: #fff;
+  }
+  .elrow {
+    margin-top: 10px;
+  }
+}
+</style>
+<style lang="scss" >
+</style>