通用表格样式

src/views/cockpit/common/BarGraph3D.vue

@@ -89,7 +89,7 @@ export default {
                 right: '2%',
                 selectedMode: false
             }
-            const grid = { top: '15%', left: '12%', right: '2%', bottom: '25%' }
+            const grid = { top: '10%', left: '5%', right: '10%', bottom: '20%' }
             // xAxis
             const xAxis = {
                 axisTick: { show: false },
@@ -208,9 +208,9 @@ export default {
 </script>
 <style  scoped>
 #BarGraph3D {
-    left: -2rem;
+    left: 0rem;
     top: 0.1rem;
-    width: 26rem;
-    height: 10rem;
+    width: 27rem;
+    height: 11rem;
 }
 </style>

src/views/cockpit/common/DialWatch.vue

@@ -1,16 +1,18 @@
 <template>
     <div class="content_scjd">
         <div class="space">
+
             <div class="lt_box box">
                 <div class="text">
-                    <p>计划收储</p>
-                    <span>{{ store.state.cockpit_tdsc.scjd.jh_mj }}</span>公顷
+
+                    <p>{{ dial_watch_info.lt.key }}</p>
+                    <span>{{ dial_watch_info.lt.value }}</span>{{ dial_watch_info.lt.unit }}
                 </div>
             </div>
             <div class="lb_box box">
                 <div class="text">
-                    <p>计划收储项目</p>
-                    <span>{{ store.state.cockpit_tdsc.scjd.jh_xzqdm_number }}</span>个
+                    <p>{{ dial_watch_info.lb.key }}</p>
+                    <span>{{ dial_watch_info.lb.value }}</span>{{ dial_watch_info.lb.unit }}
                 </div>
             </div>
             <div id="dial_watch_scjg">
@@ -19,14 +21,14 @@
             </div>
             <div class="rt_box_tdsc_jd box">
                 <div class="text">
-                    <p>完成收储</p>
-                    <span>{{ store.state.cockpit_tdsc.scjd.sj_mj }}</span>公顷
+                    <p>{{ dial_watch_info.rt.key }}</p>
+                    <span>{{ dial_watch_info.rt.value }}</span>{{ dial_watch_info.rt.unit }}
                 </div>
             </div>
             <div class="rb_box_tdsc_jd box">
                 <div class="text">
-                    <p>完成收储</p>
-                    <span>{{ store.state.cockpit_tdsc.scjd.sj_xzqdm_number }}</span>个
+                    <p>{{ dial_watch_info.rb.key }}</p>
+                    <span>{{ dial_watch_info.rb.value }}</span>{{ dial_watch_info.rb.unit }}
                 </div>
             </div>
         </div>
@@ -45,12 +47,240 @@ export default {
     computed: {},
     //监控data中的数据变化
     watch: {},
+    props: {
+        dial_watch_info: {
+            type: Object,
+            default: {
+                lt: {
+                    key: '计划收储',
+                    value: 0,
+                    unit: "公顷",
+
+                }, lb: {
+                    key: "完成收储",
+                    value: 0,
+                    unit: "公顷",
+
+                }, rt: {
+                    key: "计划收储项目",
+                    value: 0,
+                    unit: "个",
+
+                }, rb: {
+                    key: "完成收储项目",
+                    value: 0,
+                    unit: "个",
+
+                },
+            }
+
+        }
+    },
     //方法集合
-    methods: {},
+    methods: {
+        init_dial_watch_scjg() {
+
+            var dom = document.getElementById("dial_watch_scjg");
+            var myChart = window.echarts.init(dom);
+            var demoData = {
+                name: '城镇化率',
+                value: 0,
+            };
+            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);
+
+        },
+    },
     beforeCreate() { }, //生命周期 - 创建之前
     created() { }, //生命周期 - 创建完成（可以访问当前this实例）
     beforeMount() { }, //生命周期 - 挂载之前
-    mounted() { }, //生命周期 - 挂在完成
+    mounted() {
+        this.init_dial_watch_scjg();
+
+    }, //生命周期 - 挂在完成
     beforeUpdate() { }, //生命周期 - 更新之前
     updated() { }, //生命周期 - 更新之后
     beforeDestroy() { }, //生命周期 - 销毁之前
@@ -59,4 +289,102 @@ export default {
     deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
-<style  scoped></style>
+<style lang="scss"  scoped>
+.content_scjd {
+    #dial_watch_scjg {
+        // border: 1px red solid;
+        width: 26rem;
+        height: 8.5rem;
+        float: left;
+        position: relative;
+        bottom: 9rem;
+        z-index: -1;
+    }
+
+
+    .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: relative;
+        top: 2rem;
+    }
+
+    .lb_box {
+
+        background: no-repeat;
+        background-size: 101% 50%;
+
+        background-image: url("/static/images/overview/lbback.png");
+        position: relative;
+        top: 4rem;
+
+    }
+
+    .rt_box_tdsc_jd {
+        background: no-repeat;
+        background-size: 101% 50%;
+
+        background-image: url("/static/images/overview/rtback.png");
+        position: absolute;
+        top: 4rem;
+        
+        left: 16rem;
+
+        z-index: -1;
+
+        .text {
+            margin-left: 4rem;
+        }
+    }
+
+    .rb_box_tdsc_jd {
+        background: no-repeat;
+        background-size: 101% 50%;
+        background-image: url("/static/images/overview/rbback.png");
+        position: absolute;
+        top: 11rem;
+        left: 16rem;
+
+        z-index: 100;
+
+        .text {
+            margin-left: 4rem;
+        }
+    }
+}
+
+
+.text {
+    display: inline-block;
+    width: 100px;
+    // margin-top: 10px;
+    margin-left: 15px;
+
+    margin-top: 3px;
+
+    p {
+        font-kerning: normal;
+        font-family: "Arial Negreta", "Arial Normal", "Arial";
+        font-weight: 500;
+        font-style: normal;
+        font-size: 12px;
+        color: #ffffff;
+    }
+
+    span {
+        font-family: "Arial Negreta", "Arial Normal", "Arial";
+        font-weight: 700;
+        font-style: normal;
+        color: #68f4fb;
+    }
+}
+</style>

src/views/cockpit/tdsc.vue

@@ -17,38 +17,7 @@
       <!-- <div id="scje_echart"></div> -->
     </div>
     <div v-show="tab == options[0].value">
-      <div class="content_scjd">
-        <div class="space">
-          <div class="lt_box box">
-            <div class="text">
-              <p>计划收储</p>
-              <span>{{ store.state.cockpit_tdsc.scjd.jh_mj }}</span>公顷
-            </div>
-          </div>
-          <div class="lb_box box">
-            <div class="text">
-              <p>计划收储项目</p>
-              <span>{{ store.state.cockpit_tdsc.scjd.jh_xzqdm_number }}</span>个
-            </div>
-          </div>
-          <div id="dial_watch_scjg">
-
-
-          </div>
-          <div class="rt_box_tdsc_jd box">
-            <div class="text">
-              <p>完成收储</p>
-              <span>{{ store.state.cockpit_tdsc.scjd.sj_mj }}</span>公顷
-            </div>
-          </div>
-          <div class="rb_box_tdsc_jd box">
-            <div class="text">
-              <p>完成收储</p>
-              <span>{{ store.state.cockpit_tdsc.scjd.sj_xzqdm_number }}</span>个
-            </div>
-          </div>
-        </div>
-      </div>
+      <DialWatch :dial_watch_info="dial_watch_info" />
     </div>
   </div>
 </template>
@@ -57,8 +26,10 @@
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 import { QueryOne, QueryList } from '@/api/cockpitNew'
 import BarGraph3D from './common/BarGraph3D.vue';
+import DialWatch from './common/DialWatch.vue';
+
 export default {
-  components: { BarGraph3D },
+  components: { BarGraph3D, DialWatch },
   data() {
     return {
       tab: 'scjd',
@@ -72,7 +43,30 @@ export default {
       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: "个",
+
+        },
+      },
     };
   },
   //监听属性 类似于data概念
@@ -85,201 +79,7 @@ export default {
   }, //生命周期 - 创建完成（可以访问当前this实例）
   beforeMount() { }, //生命周期 - 挂载之前
   methods: {
-    init_dial_watch_scjg() {
-
-      var dom = document.getElementById("dial_watch_scjg");
-      var myChart = window.echarts.init(dom);
-      var demoData = {
-        name: '城镇化率',
-        value: 0,
-      };
-      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) {
       this.$forceUpdate();
     },
@@ -292,13 +92,37 @@ export default {
         id: params ? params.id : '4602'
       };
       let data = await QueryOne(obj);
-      store.state.cockpit_tdsc.scjd = data.data
+      let proData = {
+        lt: {
+          key: '计划收储',
+          value: data.data.jh_mj,
+          unit: "公顷",
+
+        }, lb: {
+          key: "完成收储",
+          value: data.data.jh_xzqdm_number,
+          unit: "公顷",
+
+        }, rt: {
+          key: "计划收储项目",
+          value: data.data.sj_mj,
+          unit: "个",
+
+        }, rb: {
+          key: "完成收储项目",
+          value: data.data.sj_xzqdm_number,
+          unit: "个",
+
+        },
+      }
+      that.dial_watch_info = proData;
+
+      // store.state.cockpit_tdsc.scjd = data.data
     },
   },
   mounted() {
     const that = this;
     this.$nextTick((res) => {
-      that.init_dial_watch_scjg();
       this.init_scjd();
 
 
@@ -434,99 +258,4 @@ export default {
   height: 10rem;
 }
 
-.content_scjd {
-  #dial_watch_scjg {
-    // border: 1px red solid;
-    width: 26rem;
-    height: 8.5rem;
-    position: relative;
-    bottom: 1rem;
-    z-index: -1;
-  }
-
-
-  .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_tdsc_jd {
-    background: no-repeat;
-    background-size: 101% 50%;
-
-    background-image: url("/static/images/overview/rtback.png");
-    position: absolute;
-    top: 3rem;
-    left: 16rem;
-
-    z-index: -1;
-
-    .text {
-      margin-left: 4rem;
-    }
-  }
-
-  .rb_box_tdsc_jd {
-    background: no-repeat;
-    background-size: 101% 50%;
-    background-image: url("/static/images/overview/rbback.png");
-    position: absolute;
-    top: 8rem;
-    left: 16rem;
-
-    z-index: 100;
-
-    .text {
-      margin-left: 4rem;
-    }
-  }
-}
-
-.text {
-  display: inline-block;
-  width: 100px;
-  // margin-top: 10px;
-  margin-left: 15px;
-
-  margin-top: 3px;
-
-  p {
-    font-kerning: normal;
-    font-family: "Arial Negreta", "Arial Normal", "Arial";
-    font-weight: 500;
-    font-style: normal;
-    font-size: 12px;
-    color: #ffffff;
-  }
-
-  span {
-    font-family: "Arial Negreta", "Arial Normal", "Arial";
-    font-weight: 700;
-    font-style: normal;
-    color: #68f4fb;
-  }
-}
 </style>