图标更改

src/views/cockpit/common/BarGraph3D.vue

@@ -89,7 +89,7 @@ export default {
                 right: '2%',
                 selectedMode: false
             }
-            const grid = { top: '10%', left: '5%', right: '10%', bottom: '13%' }
+            const grid = { top: '10%', left: '5%', right: '10%', bottom: '15%' }
             // xAxis
             const xAxis = {
                 axisTick: { show: false },

src/views/cockpit/hysy.vue

@@ -5,9 +5,7 @@
             <span>重点用地监管</span>
         </div>
         <!-- <div class="hysy_box">
-            <DialWatch class="hysy_dial_watch" :dial_watch_info="dial_watch_info" ref="hysy_dial_watch" />
-            <BarGraph3D class="hysy_bar_graph" ref="hysy_bar_graph" />
-
+         
         </div> -->
     </div>
 </template>
@@ -65,173 +63,6 @@ export default {
     }, //生命周期 - 创建完成（可以访问当前this实例）
     beforeMount() { }, //生命周期 - 挂载之前
     methods: {
-        init_hysyEchart() {
-
-            var dom = document.getElementById("hysyEchart");
-            var myChart = window.echarts.init(dom);
-            var myChart = window.echarts.init(dom);
-            // Mock数据
-            const mockData = {
-                xdata: store.state.cockpit_hysy.echart.xdata,
-                result: store.state.cockpit_hysy.echart.result
-            }
-
-            const color = [
-                [{ offset: 0, color: 'rgba(183, 117, 12, 0.8)' }, { offset: 0.5, color: 'rgba(183, 117, 12, 0.8)' }, { offset: 0.5, color: 'rgba(249, 180, 71, 0.8)' }, { offset: 1, color: 'rgba(249, 180, 71, 0.8)' }],
-
-                [{ offset: 0, color: 'rgba(34, 129, 209, 0.8)' }, { offset: 0.5, color: 'rgba(34, 129, 209, 0.8)' }, { offset: 0.5, color: 'rgba(97, 173, 237, 0.8)' }, { offset: 1, color: 'rgba(97, 173, 237, 0.8)' }],
-
-            ]
-            const color2 = ['rgba(34, 129, 209, 0.8)', 'rgba(34, 129, 209, 0.8)',]
-
-            // tooltip
-            const tooltip = {
-                trigger: "axis",
-                textStyle: { fontSize: '100%' },
-                formatter: params => {
-                    let rander = params.map(item => `<div>${item.seriesName}: ${item.value}公顷</div>`).join('')
-                    return rander
-                }
-            }
-
-            const legend = {
-                data: ['计划出让', '完成出让'],      //图例名称
-
-                textStyle: { fontSize: 12, color: '#fff' },
-                itemWidth: 24,
-                itemHeight: 15,
-                itemGap: 15,
-                top: '-4%',
-                right: '2%',
-                selectedMode: false
-            }
-            const grid = { top: '20%', left: '12%', right: '2%', bottom: '25%' }
-            // xAxis
-            const xAxis = {
-                axisTick: { show: false },
-                axisLine: { lineStyle: { color: '#BCD3E5' } },
-                axisLabel: {
-                    textStyle: { fontSize: 12, color: '#BCD3E5' },
-                },
-                axisLabel: {
-                    interval: 0,
-                    formatter: function (value) {
-                        // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
-                        if (value.length > 4) {
-                            return `${value.slice(0, 4)}...`;
-                        } else {
-                            return value;
-                        }
-                    },
-                },
-                data: mockData.xdata,
-            }
-
-            // yAxis
-            const yAxis = [
-                {
-                    min: 0,
-                    name: '公顷',
-                    type: 'value',
-                    axisLine: {
-                        show: false,
-                        lineStyle: {
-                            color: '#BCD3E5'
-                        }
-                    },
-                    splitLine: {
-                        show: true,
-                        lineStyle: {
-                            type: "dashed",
-                            color: "rgba(255,255,255,0.1)"
-                        },
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                    axisLabel: {
-                        show: true,
-                        fontSize: 12,
-
-                    },
-                    boundaryGap: ['20%', '20%']
-                },]
-            // const yAxis = [{
-            //     axisTick: { show: false },
-            //     axisLine: { show: false },
-            //     splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
-            //     axisLabel: { show: false, textStyle: { fontSize: 14, color: '#fff' } }
-            // }, {
-            //     show: false,
-            //     splitLine: { show: false },
-            //     axisLine: { show: false },
-            //     axisTick: { show: false },
-            // }]
-            // const diamondData = mockData.result.reduce((pre, cur, index) => {
-            //     pre[index] = cur.data.map((el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0))
-            //     return pre
-            // }, [])
-
-            let series = mockData.result.reduce((p, c, i, array) => {
-                p.push({
-                    z: i + 1,
-                    stack: '总量',
-                    type: 'bar',
-                    name: c.name,
-                    barGap: 18,
-                    barWidth: 18,
-                    data: c.data,
-                    itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[i] } },
-                }, {
-                    z: i + 10,
-                    type: 'pictorialBar',
-                    symbolPosition: 'end',
-                    symbol: 'diamond',
-                    symbolOffset: [0, '-50%'],
-                    symbolSize: [18, 12],
-                    data: mockData.result[i],
-                    itemStyle: { color: color2[i] },
-                    tooltip: { show: false },
-                })
-
-                // 是否最后一个了？
-                if (p.length === (array.length) * 2) {
-                    p.push({
-                        z: array.length * 2,
-                        type: "pictorialBar",
-                        symbolPosition: "start",
-                        data: mockData.result[0].data,
-                        symbol: "diamond",
-                        symbolOffset: ["0%", "50%"],
-                        symbolSize: [18, 10],
-                        itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: color[0] } },
-                        tooltip: { show: false },
-                    })
-                    return p
-                }
-
-                return p
-            }, [])
-
-            const dataZoom = [{
-                show: false,
-                type: 'slider',
-                startValue: 0,
-                endValue: 7,
-                moveOnMouseWheel: true,
-                moveOnMouseMove: true,
-                zoomOnMouseWheel: false,
-            }]
-
-            let option = {
-
-                tooltip, legend, xAxis, yAxis, series, grid, dataZoom, backgroundColor: 'rgba(0, 0, 0, 0)'
-            }
-
-
-            myChart.setOption(option);
-
-        },
 
         async init_info(params) {
             const that = this;
@@ -315,8 +146,8 @@ export default {
     mounted() {
         const that = this;
         this.$nextTick((res) => {
-            this.init_info();
-            this.init_echart_data();
+            // this.init_info();
+            // this.init_echart_data();
 
         })
     },
@@ -392,16 +223,6 @@ export default {
     }
 }
 
-.hysy_bar_graph {
-    margin-left: 5rem;
-    left: -5rem !important;
-    top: -12rem !important;
-    height: 10rem !important;
-}
 
-.hysy_dial_watch {
-    position: relative;
-    top: -2.5rem;
 
-}
 </style>

src/views/cockpit/tdsy.vue

@@ -4,7 +4,7 @@
       <div class="title">
         <div>
           <div class="icon"></div>
-          <span>土地供应</span>
+          <span>资源供应</span>
         </div>
 
         <div class="selectTab left_tab">
@@ -93,6 +93,11 @@
         </pie3d>
         <pie3d id="tdgy_echart_gyyd" unit="公顷" :legendFlag=true ref="tdgy_echart_gyyd"></pie3d>
       </div>
+      <div v-show="left_value == left_options[2].value">
+        <DialWatch class="hysy_dial_watch" :dial_watch_info="dial_watch_info" ref="hysy_dial_watch" />
+        <BarGraph3D class="hysy_bar_graph" ref="hysy_bar_graph" />
+
+      </div>
     </div>
 
 
@@ -107,11 +112,42 @@
 import { QueryOne, QueryList } from "../../api/cockpitNew";
 import pie3d from "../../components/echartsTemplate/3dPie.vue";
 import DialWatch from './common/DialWatch.vue';
+import BarGraph3D from './common/BarGraph3D.vue';
 
 export default {
-  components: { pie3d, DialWatch },
+  components: { pie3d, DialWatch, BarGraph3D },
   data() {
     return {
+      legendData: ['计划收储', '完成收储'],
+      xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
+      result: [
+        { name: '计划收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
+        { name: '完成收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
+      ],
+
+      dial_watch_info: {
+        lt: {
+          key: '计划出让海域',
+          value: 0,
+          unit: "公顷",
+
+        }, lb: {
+          key: "完成出让海域",
+          value: 0,
+          unit: "公顷",
+
+        }, rt: {
+          key: "计划出让项目",
+          value: 0,
+          unit: "个",
+
+        }, rb: {
+          key: "完成出让项目",
+          value: 0,
+          unit: "个",
+
+        },
+      },
       accomplish_sfyd: 0,
       accomplish_gyyd: 0,
       dial_watch_info: {
@@ -151,6 +187,9 @@ export default {
         {
           value: "jtgyxtd",
           label: "集体供应性土地",
+        }, {
+          value: "hysyq",
+          label: "海域使用权",
         },
       ],
       left_value: 'gyjsyd',
@@ -170,6 +209,49 @@ export default {
   created() { }, //生命周期 - 创建完成（可以访问当前this实例）
   beforeMount() { }, //生命周期 - 挂载之前
   methods: {
+    async init_info(params) {
+      const that = this;
+      let obj = {
+        jscType: 'jsc_hysyq_ztsh',
+        beginTime: params ? params.beginTime : store.state.cockpit_date[0],
+        endTime: params ? params.endTime : store.state.cockpit_date[1],
+        id: params ? params.id : '4602'
+      };
+      let data = await QueryList(obj);
+      that.dial_watch_info = {
+        lt: {
+          key: '计划出让海域',
+          value: data.data[0].jh_mj,
+          unit: "公顷",
+
+        }, lb: {
+          key: "完成出让海域",
+          value: data.data[0].sj_mj,
+          unit: "公顷",
+
+        }, rt: {
+          key: "计划出让项目",
+          value: data.data[0].jh_number,
+          unit: "个",
+
+        }, rb: {
+          key: "完成出让项目",
+          value: data.data[0].sj_number,
+          unit: "个",
+
+        },
+      }
+      let echart_data = 0;
+      if (data.data[0].sj_mj == 0) {
+        echart_data = 0
+      } else if (data.data[0].jh_mj == 0 && data.data[0].sj_mj > 0) {
+        echart_data = 100
+      } else {
+        echart_data = (data.data[0].sj_mj / data.data[0].jh_mj * 100).toFixed(2)
+      }
+      that.$refs.hysy_dial_watch.init_dial_watch(echart_data);
+      // store.state.cockpit_hysy.info = data.data[0]
+    },
     async init_tdgy_gy_jg(params) {
       const that = this;
       let obj = {
@@ -426,7 +508,20 @@ export default {
 
     },
     changeChartsLeft() {
+      console.log('left_value: ', this.left_value);
+
+      if (this.left_value == 'hysyq') {
+        this.right_options = [
+          { value: "gyjd", label: "供应进度" },
+        ]
+        this.right_value = 'gyjd'
+      } else {
+        this.right_options = [
+          { value: "gyjd", label: "供应进度" },
+          { value: "gyjg", label: "供应结构" },
 
+        ]
+      }
     }, changeChartsRight() {
 
     },
@@ -676,6 +771,40 @@ export default {
       store.state.cockpit_tdgy.jt_gy.jh = data.data.jh_crmj
       store.state.cockpit_tdgy.jt_gy.wc = data.data.sj_crmj
       this.init_echart();
+    },
+    async init_echart_data(params) {
+      const that = this;
+      let obj = {
+        jscType: 'jsc_hysyq_yelx',
+        beginTime: params ? params.beginTime : store.state.cockpit_date[0],
+        endTime: params ? params.endTime : store.state.cockpit_date[1],
+        id: params ? params.id : '4602'
+      };
+      let data = await QueryList(obj);
+
+      let xdata = [];
+      let result = [
+        {
+          name: "计划出让",
+          data: []
+        },
+        {
+          name: "完成出让",
+          data: []
+        }
+      ];
+      data.data.forEach((res) => {
+        xdata.push(res.yhlx_name);
+        result[0].data.push(res.jh_mj);
+        result[1].data.push(res.sj_mj);
+
+      })
+
+      that.xdata = xdata;
+      that.result = result;
+      that.legendData = ['计划出让', '完成出让'];
+      this.$refs.hysy_bar_graph.setOptions(this.legendData, this.xdata, this.result);
+
     }
   },
   mounted() {
@@ -688,6 +817,9 @@ export default {
       // that.init_echart();
       that.getInfo();
       that.init_tdgy_jt_jd();
+      that.init_info();
+      that.init_echart_data();
+
 
       //  store.start.cockpit_tdgy.jt_jg
       // this.$refs.tdgy_echart_sfyd.setOptions([
@@ -1029,4 +1161,15 @@ export default {
     color: #64DAFF;
   }
 }
+
+.hysy_dial_watch {
+  position: relative;
+  top: -0.5rem;
+
+}
+
+.hysy_bar_graph {
+  top: -3.5rem !important;
+  height: 7.9rem !important;
+}
 </style>

src/views/viewer.vue

@@ -100,8 +100,8 @@ export default {
 
 
             // 海域使用
-            this.$refs.hysy_ref.init_info(this.params);
-            this.$refs.hysy_ref.init_echart_data(this.params);
+            // this.$refs.hysy_ref.init_info(this.params);
+            // this.$refs.hysy_ref.init_echart_data(this.params);
 
             // 报建项目
             this.$refs.bjxm_ref.init_info(this.params);