修改报建项目和重点用地监管

src/views/cockpit/bjxm.vue

@@ -36,7 +36,8 @@
       </div>
       <div id="bjxm_echart" v-show="!xzqh_flag"></div> -->
 
-      <div id="bjxm_echart"></div>
+      <!-- <div id="bjxm_echart"></div> -->
+      <ThreeStackedBarAndLine ref="bjxm_echart"></ThreeStackedBarAndLine>
 
     </div>
   </div>
@@ -45,12 +46,13 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 import { QueryOne, QueryList } from "../../api/cockpitNew";
+import ThreeStackedBarAndLine from "./common/ThreeStackedBarAndLine.vue";
 import Title from './common/Title.vue';
 import * as wellknown from "wellknown";
 let csbjcolumns = ["上月转结", "事项内容", "事项名称", "办件类型", "办件编号", "办结情况", "受理人", '实际办结时间', '审批模式', '当前环节', '当场办结', '承诺日期', '状态', '申请主体', '申请数量', '行政区', '面积（亩）', '预警']
 let szbjcolumns = ['报建项目名称', '审批单位', '所在行政区', '报批时间', '用地面积', '规划情况']
 export default {
-  components: { Title },
+  components: {ThreeStackedBarAndLine, Title },
   data() {
     return {
       sdata: {sj_mj:0},
@@ -268,156 +270,15 @@ export default {
 
     },
     init_bjxm_cs_echart(data) {
-      const _this = this;
-
-      var dom = document.getElementById("bjxm_echart");
-      var myChart = window.echarts.init(dom);
-
-      let option = {
-        backgroundColor: 'rgba(0, 0, 0, 0)',
-        tooltip: {
-          backgroundColor: 'RGBA(20, 106, 178, 0.4)',
-          trigger: "axis",
-          textStyle: {
-            fontSize: 14,
-            color: '#fff'
-          }
-        },
-        grid: {
-          top: '30%',
-          left: '6%',
-          right: '6%',
-          bottom: '5%',
-          containLabel: true,
-        },
-        color: ['#186bb8'],
-
-        legend: {
-          data: ["项目数量", "用地面积",],
-
-          top: '1%',
-          // textStyle: {
-          //     color: "#666666"
-          // },
-          textStyle: {
-            fontSize: 12,
-            color: '#fff',
-            padding: [0, 0, 0, 0],
-            rich: {
-              a: {
-                verticalAlign: 'middle',
-              },
-            },
-          },
-          itemWidth: 15,
-          itemHeight: 10,
-
-          itemGap: 10
-        },
-        xAxis: [{
-          type: 'category',
-          data: data.xAxis,
-          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: false,
-            lineStyle: {
-              color: 'rgba(239, 247, 253, .1)'
-            }
-          },
-        }, {
-          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: false,
-            lineStyle: {
-              color: 'rgba(239, 247, 253, .1)'
-            }
-          },
-        }],
-        series: [
-          {
-
-            name: "项目数量",
-            type: 'line',
-            smooth: true,
-            itemStyle: {
-              normal: {
-                color: '#FFCC64'  // 折线的颜色
-              }
-            },
-            yAxisIndex: 1, // 指定使用第二个Y轴  
-            data: data.line_data,
-          }
-          , {
-            name: '用地面积',
-            type: 'bar',
-            stack: '渠道1',
-            barWidth: 14,
-
-            data: data.bat_data,
-          }
-
-        ],
-      }
-
-      myChart.setOption(option);
-
-    },
+      let obj = {
+          legend_data: ["用地面积","项目数量",],
+          x_data: data.xAxis,
+          line_data:data.bat_data,
+          result: [data.line_data],
+        };
+
+        this.$refs.bjxm_echart.setOptions(obj);
+      },
     draw_vector() {
       store.setViewerFlagb(false);
       store.setToolBarShow(false);

src/views/cockpit/common/ThreeStackedBarAndLine.vue

@@ -41,9 +41,9 @@ export default {
                     }
                 },
                 grid: {
-                    top: '20%',
-                    left: '3%',
-                    right: '3%',
+                    top: '30%',
+                    left: '6%',
+                    right: '6%',
                     bottom: '5%',
                     containLabel: true,
                 },
@@ -94,12 +94,13 @@ export default {
                 }
                 ],
                 yAxis: [{
-                    name: '',
+                    name: '项目个数/个',
                     nameTextStyle: {
                         color: "#fff",
                         fontSize: 12,
                         padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
                     },
+                    minInterval: 1, // 设置y轴的最小间隔为1
                     axisLabel: {
                         interval: 0,
                         show: true,
@@ -119,7 +120,7 @@ export default {
                         }
                     },
                 }, {
-                    name: '',
+                    name: '面积/公顷',
                     nameTextStyle: {
                         color: "#fff",
                         fontSize: 12,
@@ -145,7 +146,6 @@ export default {
                     },
                 }],
                 series: [
-
                     {
 
                         name: obj.legend_data[0],
@@ -223,7 +223,7 @@ export default {
 #ThreeStackedBarAndLine {
     left: 0rem;
     top: 0.1rem;
-    width: 21rem;
+    width: 24rem;
     height: 12rem;
 }
 </style>

src/views/cockpit/ydjc.vue

@@ -18,21 +18,32 @@
       </el-select>
     </div>
     <!-- 临时用地(期限检测) -->
-    <div v-show="value == options[0].value">
+    <div class="content">
       <div class="stacontent_ydjc">
-        <div class="item">
-          <span class="dlabel">临时用地面积:</span>
-          <span class="dvalue">{{ sdata.lsyd.sh_mj }}公顷</span>
-        </div>
         <div class="item cursor" @click="draw_vector">
-          <span class="dlabel"> 临时用地项目数:</span>
-          <span class="dvalue">{{ sdata.lsyd.sj_number }}个</span>
-          <i style="pointer-events: all" :class="{ 'el-icon-view': true }"></i>
+          <div class="icon">
+            <div class="icon_zxkg"></div>
+          </div>
+          <div class="text">
+            <p>建设项目数</p>
+            <span>{{ sdata[value].sj_number }}</span>
+            个
+            <i style="pointer-events: all" class="el-icon-view"></i>
+          </div>
+        </div>
+        <div class="item">
+          <div class="icon">
+            <div class="icon_zxkg"></div>
+          </div>
+          <div class="text">
+            <p>用地面积</p>
+            <span>{{ sdata[value].sh_mj }}</span>
+            公顷
+          </div>
         </div>
       </div>
-    </div>
-    <!-- 临时用地(复垦监测) -->
-    <!-- <div v-show="value == options[1].value">
+      <!-- 临时用地(复垦监测) -->
+      <!-- <div v-show="value == options[1].value">
             <div class="stacontent_ydjc">
                 <div class="item">
                     <span class="dlabel">应复垦面积:</span>
@@ -53,52 +64,37 @@
             </div>
             <ThreeStackedBarAndLine class="qxjc_echart"></ThreeStackedBarAndLine>
         </div> -->
-    <!-- 农专用地 -->
-    <div v-show="value == options[1].value">
-      <div class="stacontent_ydjc">
-        <div class="item cursor" @click="draw_vector">
-          <span class="dlabel">建设项目数:</span>
-          <span class="dvalue">{{ sdata.nzyd.sj_number }}个</span>
-          <i style="pointer-events: all" :class="{ 'el-icon-view': true }"></i>
-        </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">{{ 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>
+      <!-- 农专用地 -->
+
+      <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>
+              <div
+                :class="item.geom != '' ? 'itemAdress' : 'itemAdress2'"
+                @click="goDetail(item)"
+              ></div>
             </div>
-            <div
-              :class="item.geom != '' ? 'itemAdress' : 'itemAdress2'"
-              @click="goDetail(item)"
-            ></div>
           </div>
         </div>
       </div>
@@ -368,37 +364,54 @@ export default {
 
 .stacontent_ydjc {
   width: 100%;
-  height: 24px;
-  margin-top: 0.5rem;
-  margin-bottom: 1.5rem;
+  // height: 24px;
+  // margin-top: 0.5rem;
+  // margin-bottom: 1.5rem;
 
   .item {
     width: 49%;
     height: 30%;
     display: inline-block;
+    margin-top: 0.5rem;
     // 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;
+  .icon {
+    width: 40px;
+    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;
+    width: 115px;
+
+    p {
+      font-kerning: normal;
+      font-family: "Arial Negreta", "Arial Normal", "Arial";
+      font-weight: 700;
+      font-style: normal;
+      font-size: 14px;
+      color: #ffffff;
+    }
 
-  .dvalue {
-    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
-    font-weight: bold;
-    color: #64daff;
-    line-height: 16px;
-    text-align: left;
-    font-size: 12px;
+    span {
+      font-family: "Arial Negreta", "Arial Normal", "Arial";
+      font-weight: 700;
+      font-style: normal;
+      color: #68f4fb;
+    }
   }
 }