左侧样式调整

src/store/store.js

@@ -44,28 +44,11 @@ var store2 = {
             title:{},
             echart:{}
         },
-        cockpit_tdsc: {
-            scjd: {
-                percentage: 0,
-                sj_mj: 0, //完成收储
-                jh_xzqdm_number: 0,//计划收储项目个数
-                jh_mj: 0,//计划收储面积
-                sj_xzqdm_number: 1//完成收储项目个数
-            },
-            echart: {
-                x: [],
-                bar: [],
-            }
-        },
         cockpit_tdgy: {//土地供应
             gy_jg: {
                 xdata: [],
                 result: [],
             },
-            gy_jd_info: {
-                info: {},
-                pieData: {}
-            },
             jt_jg: {
                 "商服用地": {},
                 "工业用地": {},

src/views/cockpit/common/DialWatch.vue

@@ -15,7 +15,7 @@
                     <span>{{ dial_watch_info.lb.value }}</span>{{ dial_watch_info.lb.unit }}
                 </div>
             </div>
-            <div id="dial_watch_scjg">
+            <div id="dial_watch_scjg" ref="dial_watch_scjg">
 
 
             </div>
@@ -79,9 +79,7 @@ export default {
     //方法集合
     methods: {
         init_dial_watch(echart_data) {
-            console.log(this.$props.dial_watch_info);
-            var dom = document.getElementById("dial_watch_scjg");
-            var myChart = window.echarts.init(dom);
+            var myChart = echarts.init(this.$refs.dial_watch_scjg);
             var demoData = {
                 name: '城镇化率',
                 value: echart_data,
@@ -334,15 +332,16 @@ export default {
         background-size: 101% 50%;
 
         background-image: url("/static/images/overview/rtback.png");
-        position: absolute;
-        top: 4rem;
-
+        position: relative;
+        top: -8rem;
         left: 16rem;
-
         z-index: -1;
 
         .text {
             margin-left: 4rem;
+            margin-left: 4rem;
+            margin-top: -8.5rem;
+            float: left;
         }
     }
 
@@ -350,14 +349,16 @@ export default {
         background: no-repeat;
         background-size: 101% 50%;
         background-image: url("/static/images/overview/rbback.png");
-        position: absolute;
-        top: 11rem;
+        position: relative;
+        top: -6rem;
         left: 16rem;
-
-        z-index: 100;
+        z-index: -1;
 
         .text {
-            margin-left: 4rem;
+            display: inline-block;
+            position: relative;
+            left: 3rem;
+            top: -3.5rem;
         }
     }
 }

src/views/cockpit/tdsc.vue

@@ -14,7 +14,6 @@
 
     <div v-show="tab == options[1].value">
       <BarGraph3D ref="tdsc_bar_graph" />
-      <!-- <div id="scje_echart"></div> -->
     </div>
     <div v-show="tab == options[0].value">
       <DialWatch :dial_watch_info="dial_watch_info" ref="tdsc_scjd" />
@@ -118,17 +117,16 @@ export default {
       }
       that.dial_watch_info = proData;
       let echart_data = 0;
-      console.log('echart_data: ', echart_data);
       if (data.data.sj_mj == 0) {
         echart_data = 0
       } else if (data.data.jh_mj == 0 && data.data.sj_mj > 0) {
         echart_data = 100
       } else {
-        echart_data = data.data.sj_mj / data.data.jh_mj
+        echart_data = (data.data.sj_mj / data.data.jh_mj * 100).toFixed(2)
       }
-      that.dial_watch_info.echart_data = echart_data;
+      // that.$refs.tdgy_gyjd.init_dial_watch(echart_data);
+
       that.$refs.tdsc_scjd.init_dial_watch(echart_data);
-      // store.state.cockpit_tdsc.scjd = data.data
     },
   },
   mounted() {

src/views/cockpit/tdsy.vue

@@ -64,8 +64,11 @@
         </div>
       </div>
       <div v-show="left_value == left_options[0].value && right_value == right_options[0].value">
-       
 
+        <div class="tdgy_gyjd_box">
+          <DialWatch class="tdgy_gyjd" :dial_watch_info="dial_watch_info" ref="tdgy_gyjd" />
+
+        </div>
         <pie3d id="tdgy_echart_gyjd" unit="公顷" :legendFlag=true ref="tdgy_echart_gyjd"></pie3d>
 
       </div>
@@ -103,11 +106,35 @@
 // 定义myCharts用于统计图自适应
 import { QueryOne, QueryList } from "../../api/cockpitNew";
 import pie3d from "../../components/echartsTemplate/3dPie.vue";
+import DialWatch from './common/DialWatch.vue';
 
 export default {
-  components: { pie3d },
+  components: { pie3d, DialWatch },
   data() {
     return {
+      dial_watch_info: {
+        lt: {
+          key: '计划供应',
+          value: 0,
+          unit: "公顷",
+
+        }, lb: {
+          key: "完成供应",
+          value: 0,
+          unit: "公顷",
+
+        }, rt: {
+          key: "计划供应项目",
+          value: 0,
+          unit: "个",
+
+        }, rb: {
+          key: "完成供应项目",
+          value: 0,
+          unit: "个",
+
+        },
+      },
       right_value: 'gyjd',
       right_options: [
         { value: "gyjd", label: "供应进度" },
@@ -148,18 +175,47 @@ export default {
         id: params ? params.id : '4602'
       };
       let data = await QueryList(obj);
-      store.state.cockpit_tdgy.gy_jd_info.info = data.data[0]
-      store.state.cockpit_tdgy.gy_jd_info.pieData = {
-        wgy: data.data[0].ce_crmj,
-        yhb: data.data[0].sj_hb_crmj,
-        ycr: data.data[0].sj_cr_crmj,
 
+
+      let proData = {
+        lt: {
+          key: '计划供应',
+          value: data.data[0].jh_crmj,
+          unit: "公顷",
+
+        }, lb: {
+          key: "完成供应",
+          value: data.data[0].sj_crmj,
+          unit: "公顷",
+
+        }, rt: {
+          key: "计划供应项目",
+          value: data.data[0].jh_xzqhdm_number,
+          unit: "个",
+
+        }, rb: {
+          key: "完成供应项目",
+          value: data.data[0].sj_xzqhdm_number,
+          unit: "个",
+
+        },
+      }
+      that.dial_watch_info = proData;
+      let echart_data = 0;
+      if (data.data[0].sj_crmj == 0) {
+        echart_data = 0
+      } else if (data.data[0].jh_crmj == 0 && data.data[0].sj_crmj > 0) {
+        echart_data = 100
+      } else {
+        echart_data = (data.data[0].sj_crmj / data.data[0].jh_crmj * 100).toFixed(2)
       }
+      that.$refs.tdgy_gyjd.init_dial_watch(echart_data);
+
 
       this.$refs.tdgy_echart_gyjd.setOptions([
-        { name: "未供应", value: store.state.cockpit_tdgy.gy_jd_info.pieData.wgy },
-        { name: "已划拨", value: store.state.cockpit_tdgy.gy_jd_info.pieData.yhb },
-        { name: "已出让", value: store.state.cockpit_tdgy.gy_jd_info.pieData.ycr },
+        { name: "未供应", value: data.data[0].ce_crmj },
+        { name: "已划拨", value: data.data[0].sj_hb_crmj },
+        { name: "已出让", value: data.data[0].sj_cr_crmj },
       ], 0.2);
     },
     async init_tdgy_jt_jg(params) {
@@ -573,7 +629,7 @@ export default {
       myChart.setOption(option);
 
     },
-  
+
     async init_tdgy_gy_jd(params) {
       const that = this;
       let obj = {
@@ -918,8 +974,8 @@ export default {
   width: 20rem;
   height: 8rem;
   margin-bottom: 0rem;
-  position: fixed;
-  top: 50rem;
+  position: relative;
+  top: -9rem;
   left: 2rem;
 }
 
@@ -974,4 +1030,10 @@ export default {
     color: #64DAFF;
   }
 }
+
+.tdgy_gyjd_box {
+  color: #002B6C;
+  color: #002B6C;
+  margin-top: -1rem;
+}
 </style>