Merge branch 'master' of git.mes123.com:zhouyx/mes-ui into product-rjt

pages/bigScreen/index.vue

@@ -15,7 +15,7 @@
     </div>
     <div class="down-screen">
       <div>1</div>
-      <div>2</div>
+      <div><Suspend></Suspend></div>
       <div>3</div>
       <div>4</div>
     </div>
@@ -25,12 +25,14 @@
 import MonthlyPlan from "./monthlyPlan.vue";
 import Consume from "./consume.vue";
 import Workshop from "./workshop.vue";
+import Suspend from "./suspend.vue";
 
 export default {
   components: {
     MonthlyPlan,
     Consume,
     Workshop,
+    Suspend,
   },
   data() {
     return {};

pages/bigScreen/suspend.vue

+<template>
+  <div>
+    <v-chart :options="braking" style="width:'100%',height:'100%'" />
+  </div>
+</template>
+<script>
+import ECharts from "vue-echarts";
+import echarts from "echarts/lib/echarts";
+//import "echarts/lib/chart/pie";
+import "echarts/lib/chart/bar";
+import "echarts/lib/component/tooltip";
+import "echarts/lib/component/title";
+import "echarts/lib/component/legend";
+import "echarts/lib/component/grid";
+export default {
+  name: "MonthlyPlan",
+  components: {
+    "v-chart": ECharts,
+  },
+  data() {
+    return {
+      braking: {},
+    };
+  },
+  mounted() {
+    this.statistics();
+  },
+  methods: {
+    statistics() {
+      this.braking = {
+        backgroundColor: "#2c343c",
+        // color: ["#3398DB"],
+        title: {
+          text: "暂停任务类型分布",
+          left: "center",
+          top: 20,
+          textStyle: {
+            color: "#ccc",
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: ["计划数量", "已完成", "执行中", "暂停中", "未开工"],
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
+        },
+        yAxis: {
+          splitLine: {
+            show: false,
+            // lineStyle: {
+            //   color: "#eee",
+            //   type: "solid",
+            // },
+          },
+          axisTick: {
+            show: false,
+          },
+          //   axisLine: {
+          //     show: false,
+          //   },
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+          },
+        },
+        series: [
+          {
+            name: "任务分类",
+            type: "bar",
+            barWidth: 10,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: [30, 30, 30, 30],
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#1268f3", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#08a4fa", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#01ccfe", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: [10, 52, 200, 334, 390, 330, 220],
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
\ No newline at end of file