收储结构接口接入

src/views/cockpit/tdsc.vue

@@ -10,10 +10,12 @@
       </el-select>
     </div>
     <div v-show="tab == options[1].value">
-      <BarGraph3D ref="tdsc_bar_graph"  />
+      <!-- <BarGraph3D ref="tdsc_bar_graph" /> -->
+      <div id="tdsc_jg_echart"></div>
+
     </div>
     <div v-show="tab == options[0].value">
-      <DialWatch :dial_watch_info="dial_watch_info" ref="tdsc_scjd" class="tdsc_scjd" @draw_vector="dra"/>
+      <DialWatch :dial_watch_info="dial_watch_info" ref="tdsc_scjd" class="tdsc_scjd" @draw_vector="dra" />
     </div>
   </div>
 </template>
@@ -76,9 +78,216 @@ export default {
   }, //生命周期 - 创建完成（可以访问当前this实例）
   beforeMount() { }, //生命周期 - 挂载之前
   methods: {
-    dra(){
+    init_tu_gy_echart(xdata, result) {
+      var dom = document.getElementById("tdsc_jg_echart");
+      var myChart = window.echarts.init(dom);
+
+      var option = {
+        backgroundColor: 'rgba(0,0,0,0)',
+        tooltip: {
+          backgroundColor: 'RGBA(20, 106, 178, 0.4)',
+          trigger: "axis",
+          textStyle: { fontSize: '100%' },
+          formatter: params => {
+            let rander = params.map(item =>
+              `
+                        
+                    <div style='
+                        border:none;
+                        border-radius:3px;
+                        color:#FFF;
+                        font-size:12px
+                        '>
+                            ${item.seriesName}: ${item.value}
+                    </div>`).join('')
+            return rander
+          }
+        },
+        grid: {
+          left: '2%',
+          right: '4%',
+          bottom: '15%',
+          top: '20%',
+          containLabel: true
+        },
+        legend: {
+          data: ['完成收储', '计划收储'],
+          left: '7%',
+          top: '5%',
+          textStyle: {
+            color: "#666666"
+          },
+          itemWidth: 15,
+          itemHeight: 10,
+          itemGap: 25
+        },
+        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: xdata,
+        },
+        yAxis: [{
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(163, 163, 163, 0.5)',
+              type: 'dashed'
+            }
+          },
+          axisLabel: {
+            color: '#A0A4AA'
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(65, 97, 128, 0.5)',
+            },
+          },
+        },
+        {
+          type: "value",
+          name: "",
+          nameTextStyle: {
+            color: "#666666"
+          },
+          position: "right",
+          axisLine: {
+            lineStyle: {
+              color: '#cdd5e2'
+            }
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+            formatter: "{value} %", //右侧Y轴文字显示
+            textStyle: {
+              color: "#666666"
+            }
+          }
+        }
+        ],
+        dataZoom: [{
+          "show": true,
+          "height": 12,
+          "xAxisIndex": [
+            0
+          ],
+          top: '92%',
+          "start": 0,
+          "end": 40,
+          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+          handleSize: '110%',
+          handleStyle: {
+            color: "#d3dee5",
+
+          },
+          textStyle: {
+            color: "#333"
+          },
+          borderColor: "#90979c"
+        }, {
+          "type": "inside",
+          "show": true,
+          "height": 15,
+          "start": 1,
+          "end": 35
+        }],
+        series: [{
+          name: '完成收储',
+          type: 'bar',
+          barWidth: '12px',
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: '#12BDDF'
+              }, {
+                offset: 1,
+                color: 'rgba(24, 253, 255, 0)'
+              }]),
+            },
+          },
+          data: result[0].data
+        }
+          , {
+          name: "计划收储",
+          type: "line",
+          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+          smooth: true, //平滑曲线显示
+
+          symbol: "circle", //标记的图形为实心圆
+          symbolSize: 0, //标记的大小
+          itemStyle: {
+            normal: {
+              color: '#0AF37A',
+              borderColor: '#0AF37A',  //圆点透明 边框
+              borderWidth: 0,
+              lineStyle: {
+                color: "#0AF37A"
+              },
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: '#46C118'
+                }, {
+                  offset: 1,
+                  color: 'rgba(12, 162, 13, 0)'
+                }])
+              },
+            },
+          },
+          data: result[1].data
+        }
+        ]
+      };
+      myChart.setOption(option);
+    },
+    async init_tdsc_jg(params) {
+      const that = this;
+      let obj = {
+        jscType: "jsc_tdsc_ywfl",
+        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.tdyt);
+        result[0].data.push(res.xzqdm_number);
+        result[1].data.push(res.kgmj);
+      });
+
+      that.init_tu_gy_echart(xdata, result);
+    },
+    dra() {
       console.log(123123);
-      
+
     },
     change_model(e) {
       this.$forceUpdate();
@@ -132,7 +341,7 @@ export default {
     const that = this;
     this.$nextTick((res) => {
       this.init_scjd();
-
+      // this.init_tdsc_jg();
 
       this.$refs.tdsc_bar_graph.setOptions(this.legendData, this.xdata, this.result);
 
@@ -264,7 +473,15 @@ export default {
   width: 26rem;
   height: 10rem;
 }
-.tdsc_scjd{
+
+.tdsc_scjd {
   color: #163253;
 }
+
+#tdsc_jg_echart {
+  left: 0rem;
+  top: 0.1rem;
+  width: 26rem;
+  height: 10rem;
+}
 </style>

src/views/viewer.vue

@@ -145,6 +145,8 @@ export default {
             // 卫片监管
             this.$refs.wpjg_ref.init_wpjg_title(this.params);
 
+            // 土地收储
+            this.$refs.tdsc_ref.init_tdsc_jg(this.params);
             this.$refs.tdsc_ref.init_scjd(this.params);
             // 土地供应
             this.$refs.tdgy_ref.init_tdgy_gy_jd(this.params);