tdsc第二页面

src/views/cockpit/hysy.vue

@@ -21,12 +21,8 @@
                 </div>
 
                 <div id="dial_watch_hysy">
-
-                    <div class="text">
-                        <p>计划出让海域</p>
-                        <span>66.23</span>公顷
-                    </div>
                 </div>
+
                 <div class="rt_box box">
                     <div class="text">
                         <p>计划出让海域</p>

src/views/cockpit/tdsc.vue

@@ -15,6 +15,38 @@
       <div id="scje_echart"></div>
     </div>
     <div v-show="tab == options[1].value">
+      <div class="content_scjd">
+        <div class="space">
+          <div class="lt_box box">
+            <div class="text">
+              <p>计划出让海域</p>
+              <span>66.23</span>公顷
+            </div>
+          </div>
+          <div class="lb_box box">
+            <div class="text">
+              <p>计划出让海域</p>
+              <span>66.23</span>公顷
+            </div>
+          </div>
+          <div id="dial_watch_scjg">
+
+
+          </div>
+          <div class="rt_box box">
+            <div class="text">
+              <p>计划出让海域</p>
+              <span>66.23</span>公顷
+            </div>
+          </div>
+          <div class="rb_box box">
+            <div class="text">
+              <p>计划出让海域</p>
+              <span>66.23</span>公顷
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -26,10 +58,10 @@ export default {
   components: {},
   data() {
     return {
-      tab: '收储结构',
+      tab: 'scjd2',
       options: [
-        { value: "scjg", label: "收储结构" },
-        { value: "scjd", label: "收储进度" },
+        { value: "scjg1", label: "收储结构" },
+        { value: "scjd2", label: "收储进度" },
       ],
       active_model: null,
     };
@@ -185,17 +217,210 @@ export default {
       myChart.setOption(option);
 
     },
-    change_model(e) {
-      const that = this;
-      console.log(e, "E");
-      that.active_model = e;
+    init_dial_watch_scjg() {
 
+      var dom = document.getElementById("dial_watch_scjg");
+      var myChart = window.echarts.init(dom);
+      var demoData = {
+        name: '城镇化率',
+        value: 60,
+      };
+      let option = {
+        backgroundColor: 'rgba(0,0,0,0)',
+        title: {
+          text: `{num|${demoData.value}%} ` + '\n' + `{label|完成率}`,
+
+          x: '49%',
+          y: '70%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              num: {
+                fontWeight: '600',
+                color: 'rgba(249, 180, 71, 1)',
+                fontFamily: '微软雅黑',
+                fontSize: 14,
+              }, label: {
+                color: "#fff",
+                fontSize: 12,
+              },
+            },
+          },
+        },
+        grid: { top: '0%', left: '0%' },
+        series: [
+          {
+            type: 'gauge',
+            radius: '90%', // 1行3个
+            center: ['50%', '70%'],
+            splitNumber: 10,
+            // min: 0,
+            max: 100,
+            startAngle: 220,
+            endAngle: -44,
+            z: 99,
+            // 线
+            axisLine: {
+              lineStyle: {
+                width: 1,
+                color: [[1, 'rgba(255,255,255,0)']],
+              },
+              detail: {
+                formatter: '{value}',
+              },
+              data: [
+                {
+                  value: 50,
+                  name: 'SCORE',
+                },
+              ],
+            },
+            //刻度标签。
+            axisTick: {
+              show: true,
+              splitNumber: 6, //刻度的段落数
+              lineStyle: {
+                color: '#ccc',
+                width: 1, //刻度的宽度
+                shadowColor: 'RGBA(60, 139, 232, 0)',
+                shadowBlur: 2,
+              },
+              length: 3, //刻度的长度
+            },
+            splitLine: {
+              //文字和刻度的偏移量
+              show: true,
+              length: 1, //长度
+              lineStyle: {
+                color: '#ccc',
+                width: 1,
+              },
+            },
+            // //刻度线文字
+            axisLabel: {
+              show: false,
+              color: '#ccc',
+              fontSize: 1,
+              distance: -30,
+            },
+            data: [
+              {
+                value: demoData.value,
+                name: 'SCORE',
+                itemStyle: {
+                  color: 'rgba(73, 148, 236, 1)',
+                },
+              },
+            ],
+            pointer: {
+              show: true,
+              length: '40%',
+              radius: '50%',
+              width: 5, //指针粗细
+              offsetCenter: [0, -10]
+            },
+            detail: {
+              show: false
+            },
+            title: {
+              // 仪表盘标题。
+              show: false,
+            },
+          },
+          {
+            name: demoData.name,
+            type: 'pie',
+            radius: ['65%', '50%'],
+            center: ['50%', '70%'],
+            startAngle: 220,
+            endAngle: -10,
+            color: [
+              {
+                type: 'linear',
+                x: 1,
+                y: 0,
+                x2: 0,
+                y2: 0,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(62, 147, 244, 0.3)', // 0% 处的颜色
+                  },
+
+                  {
+                    offset: 1,
+                    color: 'rgba(62, 147, 244, 1)', // 100% 处的颜色
+                  },
+
+                ],
+              },
+              'transparent',
+            ],
+            hoverAnimation: true,
+            legendHoverLink: false,
+            z: 10,
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 60,
+              },
+              {
+                value: 20,
+              },
+            ],
+          },
+          {
+            type: 'pie',
+            hoverAnimation: false,
+            label: {
+              show: false,
+            },
+            center: ['50%', '70%'],
+            radius: ['0%', '60%'],
+            startAngle: 230,
+            data: [
+              {
+                value: 100,
+                itemStyle: {
+                  normal: {
+                    color: {
+                      type: 'radial',
+                      x: 0.5,
+                      y: 0.5,
+                      r: 0.5,
+                      colorStops: [
+                        { offset: 0, color: 'rgba(0,0,0,0)' },
+                        { offset: 1, color: 'rgba(0,0,0,0)' },
+                      ],
+                    },
+                    opacity: 0.2,
+                  },
+                },
+              },
+              {
+                value: 100,
+                color: 'transparent',
+              },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+
+    },
+    change_model(e) {
     }
   },
   mounted() {
     const that = this;
     this.$nextTick((res) => {
       that.init_scje_echart();
+      that.init_dial_watch_scjg();
+
     })
   },
   beforeUpdate() { }, //生命周期 - 更新之前
@@ -203,7 +428,7 @@ export default {
   beforeDestroy() { }, //生命周期 - 销毁之前
   destroy() { },//生命周期 - 销毁完成
   activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+  deactivated() { } //若组件实例是 <Keee> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
 <style  lang="scss"  scoped>
@@ -332,4 +557,72 @@ export default {
   width: 26rem;
   height: 10rem;
 }
+
+.content_scjd {
+  #dial_watch_scjg {
+    // border: 1px red solid;
+    width: 26rem;
+    height: 8.5rem;
+    position: relative;
+    bottom: 1rem;
+  }
+
+
+  .box {
+    width: 10rem;
+    height: 5rem;
+    position: absolute;
+
+  }
+
+  .lt_box {
+
+    background: no-repeat;
+    background-size: 101% 50%;
+    background-image: url("/static/images/overview/ltback.png");
+    position: absolute;
+    top: 3rem;
+  }
+
+  .lb_box {
+
+    background: no-repeat;
+    background-size: 101% 50%;
+
+    background-image: url("/static/images/overview/lbback.png");
+    position: absolute;
+    top: 8rem;
+    right: 16rem;
+
+  }
+
+  .rt_box {
+    background: no-repeat;
+    background-size: 101% 50%;
+
+    background-image: url("/static/images/overview/rtback.png");
+    position: absolute;
+    top: 3rem;
+    right: 0rem;
+    z-index: -1;
+
+    .text {
+      margin-left: 4rem;
+    }
+  }
+
+  .rb_box {
+    background: no-repeat;
+    background-size: 101% 50%;
+    background-image: url("/static/images/overview/rbback.png");
+    position: absolute;
+    top: 8rem;
+    right: 0rem;
+    z-index: 100;
+
+    .text {
+      margin-left: 4rem;
+    }
+  }
+}
 </style>