大屏主界面除了监控

src/components/newmain/item12/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <!-- 支架压力柱状图 -->
+  <div class="main">
+    <div ref="bar" style="height: 170px; width: 300px"></div>
+    <div style="display: flex;flex-flow: column;">
+      <div class="botton1">
+        <span class="name">{{totalRisk}}</span>
+        <span class="value">风险总数</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      myChart: null,
+      xData: [],
+      yData: [5, 3 ,1, 1],
+    };
+  },
+  computed: {
+    totalRisk(){
+      return this.yData.reduce((pre,cur) => pre + cur,0);
+    }
+  },
+  mounted() {
+    const option = {
+      title: {
+        text: "风险概览",
+        // 标题内边距 上下边距 左右边距
+        padding: [10, 0, 0, 70],
+        textStyle: {
+          fontWeight: "bolder", //标题颜色
+          color: "white",
+          fontSize: 18,
+        },
+      },
+      tooltip: {
+        // show: false,
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+        formatter: (params) => {
+          return params[0].marker + "风险数量:" + params[0].data + "个";
+          // if (params[0].data > 39) {
+          //   return params[0].marker + "压力过高:" + params[0].data;
+          // } else if (params[0].data < 26) {
+          //   return params[0].marker + "压力过低:" + params[0].data;
+          // } else {
+          //   return params[0].marker + "压力正常:" + params[0].data;
+          // }
+        },
+      },
+      color: ["#FF6666", "#99CC66", "#FFFF66"],
+      legend: {
+        show: false,
+        orient: "horizontal",
+        left: "right",
+        padding: [25, 20],
+        icon: "rect",
+        textStyle: {
+          color: "#fff",
+        },
+        data: ["压力超限", "压力正常", "压力过低"],
+      },
+      grid: {
+        top: "22%",
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLabel: {
+            color: "#fff",
+            interval: 0,
+            fontSize: 9,
+          },
+          axisLine: {
+            show: true,
+          },
+          data: [
+            "低风险",
+            "一般风险",
+            "较大风险",
+            "重大风险",
+          ],
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          // name: "万吨",
+          axisLabel: {
+            color: "#fff",
+            // fontSize: 11,
+          },
+          nameTextStyle: {
+            color: "white",
+            padding: [0, 0, 0, -30],
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: "dotted",
+              color: "#fff",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "数据",
+          type: "bar",
+          barWidth: 12,
+          itemStyle: {
+            color: function(params) {
+              let colorList = ["#62D362", "#FAD860", "#E87C25", "#C1232B"]
+              return colorList[params.dataIndex];
+            }
+          },
+          // barWidth: "10",
+          barCategoryGap: "5%",
+          data: this.yData,
+        },
+      ],
+    };
+
+    this.myChart = this.$echarts.init(this.$refs.bar);
+    // 获取数据
+
+    this.myChart.setOption(option);
+  },
+};
+</script>
+
+<style scoped lang="less">
+.main {
+  display: flex;
+}
+.botton1 {
+  margin-top: 20px;
+}
+.botton2 {
+  margin-top: 20px;
+}
+.name {
+  margin-top: 20px;
+  color: #4adefe;
+  font-size: 20px;
+  display: block;
+  text-align: center;
+}
+.value {
+  margin-top:20px;
+  display: block;
+  color: white;
+  font-size: 18px;
+}
+</style>

src/components/newmain/item3/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="main">
+    <div class="left">
+      <pieChart :value="80" title="矿区总分" size="150px" />
+    </div>
+    <div class="right">
+      <div ref="bar" style="height: 170px; width: 230px"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import pieChart from "@/common/pieChart";
+export default {
+  components: {
+    pieChart,
+  },
+  data() {
+    return {
+      myChart: null,
+      xData: [],
+      yData: [],
+    };
+  },
+  mounted() {
+    const option = {
+      title: {
+        text: "区域得分",
+        // 标题内边距 上下边距 左右边距
+        padding: [10, 0, 0, 70],
+        textStyle: {
+          fontWeight: "bolder", //标题颜色
+          color: "white",
+          fontSize: 18,
+        },
+      },
+      tooltip: {
+        // show: false,
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+        formatter: (params) => {
+          let round =
+            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4693EC;"></span>';
+          return round + "得分:" + params[0].data;
+        },
+      },
+      color: ["#FF6666", "#99CC66", "#FFFF66"],
+      legend: {
+        show: false,
+        orient: "horizontal",
+        left: "right",
+        padding: [25, 20],
+        icon: "rect",
+        textStyle: {
+          color: "#fff",
+        },
+        data: ["压力超限", "压力正常", "压力过低"],
+      },
+      grid: {
+        top: "22%",
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLabel: {
+            color: "#fff",
+            interval: 0,
+            fontSize: 9,
+          },
+          axisLine: {
+            show: true,
+          },
+          axisLine: {
+            show: false
+          },
+          data: ["A区", "B区", "C区", "D区"],
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          axisLabel: {
+            color: "#fff",
+            // fontSize: 11,
+          },
+          axisLine: {
+            show: false
+          },
+          min: 0,
+          max: 100,
+          nameTextStyle: {
+            color: "white",
+            padding: [0, 0, 0, -30],
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: "dotted",
+              color: "#fff",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "数据",
+          type: "bar",
+          barWidth: 12,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#00FFE3",
+                },
+                {
+                  offset: 1,
+                  color: "#4693EC",
+                },
+              ]),
+            },
+          },
+          // barWidth: "10",
+          barCategoryGap: "5%",
+          data: [90, 95, 85, 92],
+        },
+      ],
+    };
+
+    this.myChart = this.$echarts.init(this.$refs.bar);
+    // 获取数据
+
+    this.myChart.setOption(option);
+  },
+};
+</script>
+
+<style scoped lang="less">
+.main {
+  display: flex;
+}
+</style>

src/components/newmain/item5/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div ref="bar" style="height: 170px; width: 380px"></div>
+</template>
+
+<script>
+export default {
+  name: "Bars",
+  data() {
+    return {
+      myChart: null,
+      xData: [],
+      yData: [],
+    };
+  },
+  mounted() {
+    const option = {
+      title: {
+        text: "环境参数",
+        // 标题内边距 上下边距 左右边距
+        padding: [10, 0, 0, 70],
+        textStyle: {
+          fontWeight: "bolder", //标题颜色
+          color: "white",
+          fontSize: 18,
+        },
+      },
+      tooltip: {
+        // show: false,
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+        formatter: (params) => {
+          let round = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4693EC;\"></span>";
+          return round + "得分:" + params[0].data + "分";
+          // if (params[0].data > 39) {
+          //   return params[0].marker + "压力过高:" + params[0].data;
+          // } else if (params[0].data < 26) {
+          //   return params[0].marker + "压力过低:" + params[0].data;
+          // } else {
+          //   return params[0].marker + "压力正常:" + params[0].data;
+          // }
+        },
+      },
+      color: ["#FF6666", "#99CC66", "#FFFF66"],
+      legend: {
+        show: false,
+        orient: "horizontal",
+        left: "right",
+        padding: [25, 20],
+        icon: "rect",
+        textStyle: {
+          color: "#fff",
+        },
+        data: ["压力超限", "压力正常", "压力过低"],
+      },
+      grid: {
+        top: "22%",
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLabel: {
+            color: "#fff",
+            interval: 0,
+            fontSize: 9,
+          },
+          axisLine: {
+            show: true,
+          },
+          data: [
+            "总分",
+            "水",
+            "火",
+            "瓦斯",
+            "顶板",
+            "粉尘",
+            "冲击地压",
+            "热害",
+          ],
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          // name: "万吨",
+          axisLabel: {
+            color: "#fff",
+            // fontSize: 11,
+          },
+          nameTextStyle: {
+            color: "white",
+            padding: [0, 0, 0, -30],
+          },
+          min: 0,
+          max: 100,
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: "dotted",
+              color: "#fff",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "数据",
+          type: "bar",
+          barWidth: 12,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#00FFE3",
+                },
+                {
+                  offset: 1,
+                  color: "#4693EC",
+                },
+              ]),
+            },
+          },
+          // barWidth: "10",
+          barCategoryGap: "5%",
+          data: [70, 80, 80, 80, 80, 80, 90, 60],
+        },
+      ],
+    };
+
+    this.myChart = this.$echarts.init(this.$refs.bar);
+    // 获取数据
+
+    this.myChart.setOption(option);
+  },
+};
+</script>
+
+<style scoped lang="less">
+.main {
+  display: flex;
+}
+.botton1 {
+  margin-top: 20px;
+}
+.botton2 {
+  margin-top: 20px;
+}
+.name {
+  color: #4adefe;
+  font-size: 20px;
+  display: block;
+}
+.value {
+  display: block;
+  color: white;
+}
+</style>

src/components/newmain/item6/index.vue

@@ -0,0 +1,226 @@
+<template>
+  <!-- 支架压力柱状图 -->
+  <div ref="bar" style="height: 170px; width: 380px"></div>
+</template>
+
+<script>
+export default {
+  name: "Bars",
+  data() {
+    return {
+      myChart: null,
+      xData: [],
+      yData: [],
+    };
+  },
+  mounted() {
+    const option = {
+      title: {
+        text: "材料损耗",
+        // 标题内边距 上下边距 左右边距
+        padding: [10, 0, 0, 70],
+        textStyle: {
+          fontWeight: "bolder", //标题颜色
+          color: "white",
+          fontSize: 18,
+        },
+      },
+      tooltip: {
+        // show: false,
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+        formatter: (params) => {
+          let str = "";
+          for (let i = 0; i < params.length; i++) {
+            if (params[i].seriesName !== "") {
+              str +=
+                params[i].name +
+                ":" +
+                params[i].seriesName +
+                params[i].value +
+                "<br/>";
+            }
+          }
+          return str;
+          // if (params[0].data > 39) {
+          //   return params[0].marker + "压力过高:" + params[0].data;
+          // } else if (params[0].data < 26) {
+          //   return params[0].marker + "压力过低:" + params[0].data;
+          // } else {
+          //   return params[0].marker + "压力正常:" + params[0].data;
+          // }
+        },
+      },
+      color: ["#FF6666", "#99CC66", "#FFFF66"],
+      legend: {
+        show: true,
+        orient: "horizontal",
+        padding: [10, 0, 0, 0],
+        right: 0,
+        icon: "circle",
+        itemGap: 10,
+        itemHeight: 10,
+        textStyle: {
+          color: "#fff",
+          fontSize: 10,
+          padding: [0, 0, 0, -10],
+        },
+        data: ["锚杆消耗", "工字钢消耗", "水泥黄沙消耗"],
+      },
+      grid: {
+        top: "22%",
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLabel: {
+            color: "#fff",
+            interval: 0,
+            fontSize: 9,
+          },
+          axisLine: {
+            show: true,
+          },
+          data: [
+            "1月",
+            "2月",
+            "3月",
+            "4月",
+            "5月",
+            "6月",
+            "7月",
+            "8月",
+            "9月",
+            "10月",
+            "11月",
+            "12月",
+          ],
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          name: "万吨",
+          axisLabel: {
+            color: "#fff",
+            // fontSize: 11,
+          },
+          nameTextStyle: {
+            color: "white",
+            padding: [0, 0, 0, -30],
+          },
+          min: 0,
+          max: 200,
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: "dotted",
+              color: "#fff",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "锚杆消耗",
+          type: "bar",
+          barWidth: 6,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#93FF93",
+                },
+                {
+                  offset: 1,
+                  color: "#34FF34",
+                },
+              ]),
+            },
+          },
+          // barWidth: "10",
+          barCategoryGap: "5%",
+          data: [116, 153, 167, 186, 178, 134, 111, 173, 107, 174, 139, 122],
+        },
+        {
+          name: "工字钢消耗",
+          type: "bar",
+          barWidth: 6,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#00FFE3",
+                },
+                {
+                  offset: 1,
+                  color: "#4693EC",
+                },
+              ]),
+            },
+          },
+          // barWidth: "10",
+          barCategoryGap: "5%",
+          data: [159, 142, 190, 110, 106, 176, 161, 168, 116, 105, 169, 171],
+        },
+        {
+          name: "水泥黄沙消耗",
+          type: "bar",
+          barWidth: 6,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#FFEB8E",
+                },
+                {
+                  offset: 1,
+                  color: "#FFCC23",
+                },
+              ]),
+            },
+          },
+          // barWidth: "10",
+          barCategoryGap: "5%",
+          data: [136, 163, 194, 192, 120, 109, 182, 185, 122, 171, 105, 113],
+        },
+      ],
+    };
+
+    this.myChart = this.$echarts.init(this.$refs.bar);
+    // 获取数据
+
+    this.myChart.setOption(option);
+  },
+};
+</script>
+
+<style scoped lang="less">
+.main {
+  display: flex;
+}
+.botton1 {
+  margin-top: 20px;
+}
+.botton2 {
+  margin-top: 20px;
+}
+.name {
+  color: #4adefe;
+  font-size: 20px;
+  display: block;
+}
+.value {
+  display: block;
+  color: white;
+}
+</style>

src/components/newmain/item7/index.vue

@@ -0,0 +1,215 @@
+<template>
+  <!-- 支架压力柱状图 -->
+  <div class="main">
+    <div ref="bar" style="height: 170px; width: 300px"></div>
+    <div style="display: flex;flex-flow: column;">
+      <div class="botton1">
+        <span class="name">52 /人</span>
+        <span class="value">人员总数</span>
+      </div>
+      <div class="botton2">
+        <span class="name">20 /人</span>
+        <span class="value">井下人员总数</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      myChart: null,
+      xData: [],
+      yData: [],
+    };
+  },
+  mounted() {
+    const option = {
+      title: {
+        text: "人员数量",
+        // 标题内边距 上下边距 左右边距
+        padding: [10, 0, 0, 70],
+        textStyle: {
+          fontWeight: "bolder", //标题颜色
+          color: "white",
+          fontSize: 18,
+        },
+      },
+      tooltip: {
+        // show: false,
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+        formatter: (params) => {
+          let round = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4693EC;\"></span>";
+          return round + "人数:" + params[0].data + "人";
+          // if (params[0].data > 39) {
+          //   return params[0].marker + "压力过高:" + params[0].data;
+          // } else if (params[0].data < 26) {
+          //   return params[0].marker + "压力过低:" + params[0].data;
+          // } else {
+          //   return params[0].marker + "压力正常:" + params[0].data;
+          // }
+        },
+      },
+      color: ["#FF6666", "#99CC66", "#FFFF66"],
+      legend: {
+        show: false,
+        orient: "horizontal",
+        left: "right",
+        padding: [25, 20],
+        icon: "rect",
+        textStyle: {
+          color: "#fff",
+        },
+        data: ["压力超限", "压力正常", "压力过低"],
+      },
+      grid: {
+        top: "22%",
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLabel: {
+            color: "#fff",
+            interval: 0,
+            fontSize: 9,
+          },
+          axisLine: {
+            show: true,
+          },
+          data: [
+            "采煤工作面",
+            "掘金工作面",
+            "大巷",
+            "井底车场",
+          ],
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          axisLabel: {
+            color: "#fff",
+            // fontSize: 11,
+          },
+          nameTextStyle: {
+            color: "white",
+            padding: [0, 0, 0, -30],
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: "dotted",
+              color: "#fff",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "数据",
+          type: "bar",
+          barWidth: 12,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#00FFE3",
+                },
+                {
+                  offset: 1,
+                  color: "#4693EC",
+                },
+              ]),
+            },
+          },
+          // barWidth: "10",
+          barCategoryGap: "5%",
+          data: [7, 18, 5, 10],
+        },
+        // {
+        //   //这两组数据用来模拟markLine线段开关,data可以为空
+        //   name: "压力超限",
+        //   type: "line",
+        //   markLine: {
+        //     data: [
+        //       {
+        //         name: "压力超限",
+        //         yAxis: "64",
+        //         itemStyle: {
+        //           normal: {
+        //             show: true,
+        //             color: "#FF6666",
+        //           },
+        //         },
+        //       },
+        //     ],
+        //   },
+        // },
+        // {
+        //   //这两组数据用来模拟markLine线段开关,data可以为空
+        //   name: "压力正常",
+        //   type: "line",
+        //   markLine: {
+        //     data: [
+        //       {
+        //         name: "压力正常",
+        //         yAxis: "24",
+        //         itemStyle: {
+        //           normal: {
+        //             show: true,
+        //             color: "#FFFF66",
+        //           },
+        //         },
+        //       },
+        //     ],
+        //   },
+        // },
+        // {
+        //   name: "压力过低",
+        //   type: "line",
+        //   itemStyle: {
+        //     normal: {
+        //       color: "#FFFF66",
+        //     },
+        //   },
+        // },
+      ],
+    };
+
+    this.myChart = this.$echarts.init(this.$refs.bar);
+    // 获取数据
+
+    this.myChart.setOption(option);
+  },
+};
+</script>
+
+<style scoped lang="less">
+.main {
+  display: flex;
+}
+.botton1 {
+  margin-top: 20px;
+}
+.botton2 {
+  margin-top: 20px;
+}
+.name {
+  color: #4adefe;
+  font-size: 20px;
+  display: block;
+}
+.value {
+  display: block;
+  color: white;
+}
+</style>

src/views/newmain.vue

@@ -3,11 +3,11 @@
     <div class="item1"><item1></item1></div>
     <!-- <div class="span-col-2 span-row-3 item2"><Main></Main></div> -->
     <div class="span-col-2 span-row-3 item2">item2</div>
-    <div class="item3">Item 3</div>
+    <div class="item3"><item3></item3></div>
     <div class="item4">Item 4</div>
-    <div class="item5">Item 5</div>
-    <div class="item6">Item 6</div>
-    <div class="item7">Item 7</div>
+    <div class="item5"><item5></item5></div>
+    <div class="item6"><item6></item6></div>
+    <div class="item7"><item7></item7></div>
     <div class="item8">Item 8</div>
     <div class="span-col-2 span-row-2 item9">
       <div class="watch watch1"></div>
@@ -19,23 +19,33 @@
     </div>
     <div class="item10">Item 10</div>
     <div class="item11">Item 11</div>
-    <div class="item12">Item 12</div>
+    <div class="item12"><item12></item12></div>
   </div>
 </template>
 
 <script>
 import Main from "../components/newMain/item2/Main";
-import item1 from "@/components/newMain/item1"
+import item1 from "@/components/newMain/item1";
+import item6 from "@/components/newMain/item6";
+import item5 from "@/components/newMain/item5";
+import item7 from "@/components/newMain/item7";
+import item3 from "@/components/newMain/item3";
+import item12 from "@/components/newMain/item12";
 export default {
   name: "newMain",
   components: {
     Main,
-    item1
+    item1,
+    item6,
+    item5,
+    item7,
+    item3,
+    item12,
   },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .grid {
   background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
     linear-gradient(