修改了gitignore文件

.gitignore

@@ -19,3 +19,4 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+*.zip

src/components/newMain/item1/index.vue

@@ -0,0 +1,228 @@
+<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">486 /万吨</span>
+        <span class="value">今年产量</span>
+      </div>
+      <div class="botton2">
+        <span class="name">495 /万吨</span>
+        <span class="value">计划产量</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Bars",
+  data() {
+    return {
+      myChart: null,
+      xData: [],
+      yData: [],
+    };
+  },
+  mounted() {
+    const option = {
+      title: {
+        text: "煤炭产量",
+        // 标题内边距 上下边距 左右边距
+        padding: [10, 0, 0, 110],
+        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: [
+            "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: 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, 75, 95, 72, 73, 82],
+        },
+        // {
+        //   //这两组数据用来模拟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;
+  text-align: center;
+}
+</style>

src/components/newMain/item10/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div class="title">设备信息</div>
+    <div class="describe">
+      <div class="item item-1">
+        <span>39501</span>
+        <span>总设备数</span>
+      </div>
+      <div class="item item-2">
+        <span>17892</span>
+        <span>监控设备数</span>
+      </div>
+      <div class="item item-3">
+        <span>82%</span>
+        <span>综合开机率</span>
+      </div>
+      <div class="item item-4">
+        <span>89</span>
+        <span>报警次数</span>
+      </div>
+      <div class="item item-5">
+        <span>97%</span>
+        <span>综合效率</span>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.title {
+  color: #fff;
+  font-size: 18px;
+  font-weight: bolder;
+  margin-left: 150px;
+}
+.describe {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: [c1] 60px [c2] 60px [c3];
+  /* 垂直方向居中子元素 */
+  align-items: center;
+  /* 水平方向居中子元素 */
+  justify-items: center;
+  grid-gap: 10px;
+  height: 140px;
+  border: 1px solid #4adefe;
+}
+
+.item-1 {
+  /* margin: 23px; */
+  grid-row: span 2 / auto;
+}
+.item span:nth-of-type(1) {
+  display: block;
+  text-align: center;
+  color: #4adefe;
+  font-size: 20px;
+}
+.item span:nth-of-type(2) {
+  display: block;
+  color: white;
+  text-align: center;
+}
+</style>

src/components/newMain/item11/index.vue

@@ -0,0 +1,346 @@
+<template>
+  <div
+    class="com-chart"
+    ref="myline1"
+    style="height: 170px; width: 350px"
+  ></div>
+</template>
+<script>
+export default {
+  name: "myline1",
+  data() {
+    return {
+      myChart: null,
+      colorList: [
+        "#ffff66",
+        "#ffcc99",
+        "#99ff66",
+        "#9E9E9E",
+        "#BC8F8F",
+        "#CD919E",
+      ],
+    };
+  },
+  mounted() {
+    this.initCharts();
+    this.updateChart();
+    this.getRandomData();
+  },
+  methods: {
+    // 初始化图表
+    initCharts() {
+      this.myChart = this.$echarts.init(this.$refs.myline1);
+    },
+    // 更新图表
+    updateChart() {
+      const option = {
+       title: {
+          text: "煤仓煤位",
+          // 标题内边距 上下边距 左右边距
+          padding: [0, 0, 0, 110],
+          textStyle: {
+            fontWeight: "bolder", //标题颜色
+            color: "white",
+            fontSize: 18,
+          },
+        },
+        legend: {
+          align: "left",
+          left: "6%",
+          top: "13%",
+          type: "plain",
+          data: [
+            "原煤仓",
+            "块煤仓",
+            "末煤仓",
+            "成品煤",
+          ],
+          textStyle: {
+            color: "#DADBBD",
+          },
+        },
+
+        // legend: {
+        //     icon: 'circle',
+        //     // bottom: '20%',
+        //     top:'10%',
+        //     right: '15%',
+        //     itemWidth: 6,
+        //     itemGap: 20,
+        //     textStyle: {
+        //         color: '#556677'
+        //     }
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            label: {
+              show: true,
+              backgroundColor: "#fff",
+              color: "#DADBBD",
+              borderColor: "rgba(0,0,0,0)",
+              shadowColor: "rgba(0,0,0,0)",
+              shadowOffsetY: 0,
+            },
+            lineStyle: {
+              width: 0,
+            },
+          },
+          backgroundColor: "#fff",
+          textStyle: {
+            color: "#5c6c7c",
+          },
+          padding: [10, 10],
+          extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
+        },
+        grid: {
+          top: "22%",
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              "2021-1-1",
+              "2021-1-2",
+              "2021-1-3",
+              "2021-1-4",
+              "2021-1-5",
+              "2021-1-6",
+              "2021-1-7",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#DADBBD",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                color: "#DADBBD",
+              },
+              // 默认x轴字体大小
+              fontSize: 12,
+              // margin:文字到x轴的距离
+              margin: 15,
+            },
+            axisPointer: {
+              label: {
+                // padding: [11, 5, 7],
+                padding: [0, 0, 10, 0],
+                // 这里的margin和axisLabel的margin要一致!
+                margin: 15,
+                // 移入时的字体大小
+                fontSize: 12,
+                backgroundColor: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "#fff", // 0% 处的颜色
+                    },
+                    {
+                      // offset: 0.9,
+                      offset: 0.86,
+                      color: "#fff", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.86,
+                      color: "#33c0cd", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#33c0cd", // 100% 处的颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+            boundaryGap: false,
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#DADBBD",
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: "#DADBBD",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          {
+            type: "value",
+            position: "right",
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              textStyle: {
+                color: "#DADBBD",
+              },
+              formatter: "{value}",
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#DCE2E8",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "原煤仓",
+            type: "line",
+         
+            data: [],
+            symbolSize: 1,
+            symbol: "circle",
+            smooth: true,
+            yAxisIndex: 0,
+            showSymbol: false,
+            lineStyle: {
+              color: this.colorList[0],
+              width: "2",
+            },
+          },
+          {
+            name: "块煤仓",
+            type: "line",
+            data: [],
+            symbolSize: 1,
+            symbol: "circle",
+            smooth: true,
+            yAxisIndex: 0,
+            showSymbol: false,
+
+            lineStyle: {
+              color: this.colorList[1],
+              width: "2",
+            },
+          },
+          {
+            name: "末煤仓",
+            type: "line",
+            data: [],
+            symbolSize: 1,
+            yAxisIndex: 1,
+            symbol: "circle",
+            smooth: true,
+            showSymbol: false,
+            lineStyle: {
+              color: this.colorList[2],
+              width: "2",
+            },
+          },
+          {
+            name: "成品煤",
+            type: "line",
+            data: [],
+            symbolSize: 1,
+            yAxisIndex: 1,
+            symbol: "circle",
+            smooth: true,
+            showSymbol: false,
+            lineStyle: {
+              color: this.colorList[3],
+              width: "2",
+            },
+          },
+         
+        ],
+      };
+      this.myChart.setOption(option);
+    },
+    getRandomData(){
+      var first = 1;
+      if(first){
+        var xData=[];
+        var data1 = [];
+        var data2 = [];
+        var data3 = [];
+        var data4 = [];
+    
+
+        for (let i = 0; i < 4; i++) {
+          let now =new Date();
+          xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
+          now = new Date(+now - 2000);
+          data1.push(this.getRandomNum(80, 90));
+          data2.push(this.getRandomNum(80, 90));
+          data3.push(this.getRandomNum(80, 90));
+          data4.push(this.getRandomNum(70, 80));
+    
+        }
+        first = 0;
+      }
+      let interval = setInterval(() => {
+        xData.shift();
+        xData.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
+        data1.shift();
+        data1.push(this.getRandomNum(80, 90));
+        data2.shift();
+        data2.push(this.getRandomNum(60, 70));
+        data3.shift();
+        data3.push(this.getRandomNum(70, 80));
+        data4.shift();
+        data4.push(this.getRandomNum(65, 75));
+      
+
+        this.myChart.setOption({
+          xAxis:[{
+            data:xData
+          }],
+          series: [
+            {
+              data: data1,
+            },
+            {
+              data: data2,
+            },
+            {
+              data: data3,
+            },
+            {
+              data: data4,
+            }
+            
+          ],
+        });
+      }, 3000);
+      this.$once("hook:beforeDestroy", () => {
+        clearInterval(interval);
+      });
+    }
+  },
+};
+</script>
+<style scoped>
+
+</style>

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/item2/CaiMeiJi.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="container">
+      <div class="fankui">{{info_number}}采煤机运行反馈&nbsp;<i id="green" v-show="true" class="fa fa-circle"></i> <i id="red" v-show="false" class="fa fa-circle"></i></div>
+      <div class="bgi"></div> 
+      <!-- @click="change" -->
+      <div class="info">{{info_number}}采煤区</div>
+      <ul class="msg" :style="{height:h}">
+          <li v-for="(value,key) in msg" :key="key">{{key}}:{{value}}</li>
+      </ul>
+  </div>
+</template>
+
+<script>
+export default {
+    name:'CaiMeiJi',
+    data() {
+        return {
+            h:"0px",
+            show:false,
+            msg:{
+                '割煤刀数':2,
+                '回采米数':1300,
+                '出煤量':2
+            }
+        }
+    },
+    props:['info_number'],
+    methods:{
+        change(){
+            if(this.h==="0px"){
+                this.h = "200px"
+            }else if(this.h = "200px"){
+                this.h = "0px"
+            }
+        },
+        getData(msg){
+            this.msg = msg
+        }
+    }
+}
+</script>
+
+<style lang='less' scoped>
+.container{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    color: #fff;
+    left:60px;
+    .fankui{
+        text-align: center;
+        font-size: 12px;
+        padding-bottom: 2px;
+    }
+    .bgi{
+        height: 60px;
+        background-size:cover;
+        background-image: url(采煤机.png);
+    }
+    .info{
+        box-sizing: border-box;
+        height: 50px;
+        font-size: 14px;
+        border: 2px solid rgb(219,208,10);
+        padding-top: 12%;
+        text-align: center;
+        color: rgb(219,208,10);
+    }
+    .msg{
+        padding: 0;
+        list-style: none;
+        position: absolute;
+        overflow: hidden;
+        width: 200px;
+        height: 0;
+        top:-10px;
+        right: -220px;
+        border-radius: 20%;
+        background-color: rgba(88, 240, 227, 1);
+        box-shadow: 0 0 10px rgba(255, 255, 255, 1);
+        transition: 0.5s;
+        li{
+            color: rgb(236, 74, 74);
+            font-size: 20px;
+            text-align: center;
+            padding: 20px 0;
+        }
+    }
+}
+#green{
+        color: green;
+    }
+#red{
+    color: red;
+}
+</style>

src/components/newMain/item2/Main.vue

@@ -0,0 +1,563 @@
+<template>
+  <div id="outer">
+    <!-- 9个警告盒子 -->
+    <div class="warning_box">
+      <div class="warning_container warning1">
+        <WarningInfo :ref="0" :id="0"></WarningInfo>
+      </div>
+      <div class="warning_container warning2">
+        <WarningInfo :ref="1" :id="1"></WarningInfo>
+      </div>
+
+      <div class="warning_container warning3">
+        <WarningInfo :ref="2" :id="2"></WarningInfo>
+      </div>
+      <div class="warning_container warning4">
+        <WarningInfo :ref="3" :id="3"></WarningInfo>
+      </div>
+      <div class="warning_container warning5">
+        <WarningInfo :ref="4" :id="4"></WarningInfo>
+      </div>
+      <div class="warning_container warning6">
+        <WarningInfo :ref="5" :id="5"></WarningInfo>
+      </div>
+      <div class="warning_container warning7">
+        <WarningInfo :ref="6" :id="6"></WarningInfo>
+      </div>
+      <div class="warning_container warning8">
+        <WarningInfo :ref="7" :id="7"></WarningInfo>
+      </div>
+      <div class="warning_container warning9">
+        <WarningInfo :ref="8" :id="8"></WarningInfo>
+      </div>
+      <!-- <div class="warning_container warning10">
+        <WarningInfo :ref="9" :id="9"></WarningInfo>
+      </div>  -->
+    </div>
+    <!-- 9个转动的皮带 -->
+    <div class="pidai_box">
+      <div
+        v-for="(item, index) in 9"
+        :key="index"
+        :class="`pidai_container pidai${index + 1}`"
+      >
+        <Pidai :isStart="isStart"></Pidai>
+      </div>
+    </div>
+    <div class="caimeiji1">
+      <CaiMeiJi :ref="10" info_number="1#"></CaiMeiJi>
+    </div>
+    <!-- 采煤机2 -->
+    <div class="caimeiji2">
+      <CaiMeiJi :ref="11" info_number="9+10"></CaiMeiJi>
+    </div>
+
+    <div class="bottom_left">
+      煤 <br /><br />
+      仓
+    </div>
+
+    <div class="buttons">
+      <button class="btn1" @click="start">模拟皮带启动</button>
+      <button class="btn2" @click="close">模拟皮带停止</button>
+    </div>
+
+    <div class="xcspwt-box">
+      <div class="tipName">采煤机状态</div>
+      <ul class="msg1">
+        <li>
+          <span>割煤刀数</span>
+          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[0].coalCutters }}</span>
+        </li>
+        <li>
+          <span>回采米数</span>
+          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[0].miningMeters }}</span>
+        </li>
+        <li>
+          <span>出煤量</span>
+          <span
+            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            {{ shearerState[0].coalOutput }}</span
+          >
+        </li>
+      </ul>
+    </div>
+
+    <div class="xcspwt-box2">
+      <div class="tipName">采煤机状态</div>
+      <ul class="msg1">
+        <li>
+          <span>割煤刀数</span>
+          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[1].coalCutters }}</span>
+        </li>
+        <li>
+          <span>回采米数</span>
+          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[1].miningMeters }}</span>
+        </li>
+        <li>
+          <span>出煤量</span>
+          <span
+            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            {{ shearerState[1].coalOutput }}</span
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import WarningInfo from "./WarningInfo.vue";
+import CaiMeiJi from "./CaiMeiJi.vue";
+import Pidai from "./Pidai.vue";
+export default {
+  name: "Main",
+  components: { WarningInfo, Pidai, CaiMeiJi },
+  data() {
+    return {
+      isStart: true,
+      shearerState: [
+        {
+          coalCutters: 2,
+          miningMeters: 1300,
+          coalOutput: 2,
+        },
+        {
+          coalCutters: 2,
+          miningMeters: 1300,
+          coalOutput: 2,
+        },
+      ],
+    };
+  },
+  methods: {
+    start() {
+      if (this.isStart) {
+        this.$message.warning("不能重复启动");
+      } else {
+        this.isStart = !this.isStart;
+        for (let i = 0; i < 9; i++) {
+          this.$refs[i].init();
+        }
+      }
+    },
+    close() {
+      if (this.isStart) {
+        this.isStart = !this.isStart;
+        for (let i = 0; i < 9; i++) {
+          this.$refs[i].close();
+        }
+      }
+    },
+  },
+  mounted() {
+    let interval = setInterval(() => {
+      let temp = [];
+      for (let i = 0; i < 2; i++) {
+        let state = {};
+        state.coalCutters = this.getRandomNum(0, 10);
+        state.miningMeters = this.getRandomNum(800, 1500);
+        state.coalOutput = this.getRandomNum(0, 10);
+        temp.push(state);
+      }
+      this.shearerState = temp;
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#outer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .warning_box {
+    position: relative;
+    margin-left: -52px;
+  }
+  .pidai_box {
+    position: relative;
+    margin-left: 160px;
+  }
+  .shexiangtou_box {
+    position: relative;
+  }
+
+  .xcspwt-box {
+    // padding-top: 15px;
+    position: absolute;
+    width: 148px;
+    height: 84px;
+    left: 20px;
+    font-size: 12px;
+    top: 32px;
+    color: #4adefd;
+    .tipName {
+      padding: 5px;
+      outline: 1px rgba(255, 255, 255, 0.3) solid;
+      text-align: center;
+    }
+    .msg1 {
+      padding: 5px;
+      outline: 1px rgba(255, 255, 255, 0.3) solid;
+    }
+    .msg1 li {
+      width: 100%;
+      height: 20px;
+      line-height: 20px;
+      color: #4adefe;
+      font-size: 12px;
+      margin-top: -1px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: default;
+    }
+    .msg1 li span {
+      color: #4adefe;
+      display: block;
+      float: left;
+    }
+    .msg1 li span:nth-of-type(1) {
+      padding: 0 5px;
+      line-height: 20px;
+      text-align: center;
+      background-size: 100% 100%;
+    }
+
+    .msg1 li span:nth-of-type(2) {
+      color: #f3db5c;
+      width: 47px;
+    }
+  }
+
+  .xcspwt-box2 {
+    // margin-left:10px;
+    // padding-top: 15px;
+    position: absolute;
+    width: 148px;
+    height: 84px;
+    left: 298px;
+    font-size: 12px;
+    top: 425px;
+    color: #4adefe;
+    .tipName {
+      padding: 5px;
+      outline: 1px rgba(255, 255, 255, 0.3) solid;
+      text-align: center;
+    }
+    .msg1 {
+      padding: 5px;
+      outline: 1px rgba(255, 255, 255, 0.3) solid;
+    }
+    .msg1 li {
+      width: 100%;
+      height: 20px;
+      line-height: 20px;
+      color: #4adefe;
+      font-size: 12px;
+      margin-top: -1px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: default;
+    }
+    .msg1 li span {
+      color: #4adefe;
+      display: block;
+      float: left;
+    }
+    .msg1 li span:nth-of-type(1) {
+      padding: 0 5px;
+      line-height: 20px;
+      text-align: center;
+      background-size: 100% 100%;
+    }
+
+    .msg1 li span:nth-of-type(2) {
+      color: #f3db5c;
+      width: 47px;
+    }
+  }
+
+  // .xcspwt-box{
+  //   height: 100px;
+  //   width: 200px;
+  //   top: 900px;
+  //   left: 20px;
+  //   color: #4adefe;
+  //   border: 1px solid #4adefe;
+  //   border-radius: 5px;
+
+  // }
+  //   .xcspwt-box li {
+  //   width: 100%;
+  //   height: 20px;
+  //   line-height: 20px;
+  //   color: #4adefe;
+  //   font-size: 18px;
+  //   margin-top: 14px;
+  //   overflow: hidden;
+  //   text-overflow: ellipsis;
+  //   white-space: nowrap;
+  //   cursor: default;
+  // }
+  //   .xcspwt-box li span {
+  //   color: #f3db5c;
+  //   display: block;
+  //   float: left;
+  // }
+}
+.warning_container {
+  width: 55px;
+  height: 154px;
+  position: absolute;
+}
+.warning1 {
+  top: 22px;
+  left: 252px;
+}
+.warning2 {
+  top: 22px;
+  left: 319px;
+}
+.warning3 {
+  top: 22px;
+  left: 385px;
+}
+.warning4 {
+  top: 22px;
+  left: 451px;
+}
+.warning5 {
+  top: 299px;
+  left: 576px;
+}
+.warning6 {
+  top: 22px;
+  left: 518px;
+}
+.warning7 {
+  top: 22px;
+  left: 585px;
+}
+.warning8 {
+  top: 190px;
+  left: 700px;
+}
+.warning9 {
+  top: 165px;
+  left: 757px;
+}
+// .warning10 {
+//   top: 490px;
+//   left: 1030px;
+// }
+.pidai_container {
+  width: 200px;
+  height: 25px;
+  position: absolute;
+}
+.pidai1 {
+  left: 22px;
+  top: 277px;
+  width: 80px;
+  height: 17px;
+}
+.pidai2 {
+  left: 121px;
+  top: 278px;
+  width: 80px;
+  height: 20px;
+}
+.pidai3 {
+  left: 180px;
+  top: 328px;
+  transform: rotate(90deg);
+  width: 80px;
+  height: 17px;
+}
+
+.pidai4 {
+  left: 234px;
+  top: 277px;
+  width: 80px;
+  height: 17px;
+}
+.bottom_left {
+  position: absolute;
+  left: 416px;
+  top: 339px;
+  color: #fff;
+  font-size: 15px;
+  padding: 3px;
+  outline: 1px rgba(255, 255, 255, 0.3) solid;
+  text-align: center;
+}
+.pidai5 {
+  left: 301px;
+  top: 314px;
+  transform: rotate(-60deg);
+  width: 80px;
+  height: 17px;
+}
+
+.pidai6 {
+  left: 379px;
+  top: 277px;
+  // transform: rotate(-45deg);
+  width: 80px;
+  height: 17px;
+}
+.pidai7 {
+  left: 421px;
+  top: 210px;
+  transform: rotate(-90deg);
+  width: 80px;
+  height: 17px;
+}
+.pidai8 {
+  left: 448px;
+  top: 118px;
+  transform: rotate(-60deg);
+  width: 80px;
+  height: 17px;
+}
+.pidai9 {
+  left: 521px;
+  top: 61px;
+  width: 80px;
+  height: 17px;
+  transform: rotate(-10deg);
+}
+.pidai10 {
+  left: 1200px;
+  top: 410px;
+  width: 80px;
+  height: 17px;
+}
+.shexiangtou_container {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-image: url(摄像头.png);
+  background-size: cover;
+  position: absolute;
+}
+.shexiangtou1 {
+  top: 200px;
+  left: 470px;
+}
+.shexiangtou2 {
+  top: 240px;
+  left: 1270px;
+}
+.shexiangtou3 {
+  top: 450px;
+  left: 860px;
+}
+.caimeiji1 {
+  width: 133px;
+  height: 200px;
+  position: absolute;
+  top: 149px;
+  left: -31px;
+}
+.caimeiji2 {
+  width: 127px;
+  height: 197px;
+  position: absolute;
+  top: 393px;
+  left: 100px;
+}
+.tongcang {
+  width: 200px;
+  height: 220px;
+  position: absolute;
+  right: 50px;
+  bottom: 20px;
+  .tong {
+    width: 200px;
+    height: 200px;
+    background-image: url(筒仓.jpg);
+    background-size: cover;
+  }
+  .tong_info {
+    text-align: center;
+    color: #fff;
+  }
+}
+
+.bottom_msg {
+  margin: 0;
+  padding: 5px;
+  outline: 1px rgba(255, 255, 255, 0.3) solid;
+  list-style: none;
+  li {
+    text-align: center;
+  }
+}
+
+.bottom_right {
+  width: 180px;
+  height: 100px;
+  position: absolute;
+  right: 540px;
+  bottom: 20px;
+  color: #fff;
+  .bottom_info {
+    padding: 5px;
+    outline: 1px rgba(255, 255, 255, 0.3) solid;
+    text-align: center;
+  }
+  .bottom_msg {
+    margin: 0;
+    padding: 5px;
+    outline: 1px rgba(255, 255, 255, 0.3) solid;
+    list-style: none;
+    .bottom_msg li {
+      text-align: center;
+      .bottom_msg li span {
+        color: #4adefe;
+      }
+    }
+  }
+}
+.buttons {
+  width: 95px;
+  height: 88px;
+  position: absolute;
+  top: 393px;
+  left: -13px;
+  button {
+    display: block;
+    background-color: rgb(226, 226, 218);
+    background-image: linear-gradient(
+      to bottom,
+      rgb(255, 255, 255) 0%,
+      rgb(38, 120, 228) 50%,
+      rgb(255, 255, 255) 100%
+    );
+    border-radius: 10px;
+    font-size: 13px;
+    font-family: "'微软雅黑','Helvetica Neue',Helvetica,Arial,sans-serif";
+    font-weight: bold;
+  }
+  .btn1 {
+    margin-left: 40px;
+    margin-top: 10%;
+    width: 100%;
+    height: 45%;
+  }
+  .btn2 {
+    margin-left: 40px;
+    margin-top: 10%;
+    width: 100%;
+    height: 45%;
+  }
+}
+</style>

src/components/newMain/item2/Pidai.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="outer">
+        <div v-if="isStart" class="left_chilun"><i class="fa fa-cog fa-spin"></i></div>
+        <div v-else class="left_chilun"><i class="fa fa-cog"></i></div>
+        <div class="pidai"></div>
+        <div v-if="isStart" class="right_chilun"><i class="fa fa-cog fa-spin"></i></div>
+        <div v-else class="right_chilun"><i class="fa fa-cog"></i></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name:'Pidai',
+    props:["isStart"]
+}
+</script>
+
+<style lang="less" scoped>
+    .outer{
+        width: 100%;
+        height: 100%;
+        position: relative;
+        color: #fff;
+        .pidai{
+            width: 80%;
+            height: 100%;
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%,0);
+            border-top: 3px solid rgb(255, 255, 255);
+            border-bottom: 3px solid rgb(255, 255, 255);
+            border-radius: 20%;
+        }
+        .left_chilun{
+            width: 10%;
+            position: absolute;
+                left: 0;
+            font-size: 20px;
+            i{
+                position: absolute;
+                right: 0;
+            }
+        }
+        .right_chilun{
+            width: 10%;
+            position: absolute;
+            right: 0;
+            font-size: 20px;
+            i{
+                position: absolute;
+                left: 0;
+            }
+        }
+    }
+</style>

src/components/newMain/item2/WarningInfo.vue

@@ -0,0 +1,179 @@
+<template>
+  <div ref="outer" class="outer">
+    <div class="number_Info">{{ id }}#皮带</div>
+    <ul class="msg">
+      <li v-for="(item, index) in infoList" :key="index">
+        {{ item.info_msg }}
+        <i id="green" v-if="item.info == '0'" class="fa fa-circle"></i>
+        <i id="red" v-else class="fa fa-circle"></i>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "WarningInfo",
+  data() {
+    return {
+      infoList: [
+        {
+          info: "0",
+          info_msg: "撕裂",
+        },
+        {
+          info: "0",
+          info_msg: "闭锁",
+        },
+        {
+          info: "0",
+          info_msg: "跑偏",
+        },
+        {
+          info: "0",
+          info_msg: "烟雾",
+        },
+        {
+          info: "0",
+          info_msg: "堆煤",
+        },
+        {
+          info: "0",
+          info_msg: "速度",
+        },
+        {
+          info: "0",
+          info_msg: "温度",
+        },
+        {
+          info: "0",
+          info_msg: "打滑",
+        },
+        {
+          info: "0",
+          info_msg: "纵撕",
+        },
+        {
+          info: "0",
+          info_msg: "断带",
+        },
+      ],
+    };
+  },
+  mounted() {
+    // this.init();
+    this.interval = setInterval(() => {
+      this.infoList.forEach((item) => {
+        // item.info = Math.round(Math.random()) ? "1" : "0";
+        item.info = Math.random()>0.97? "1" : "0";
+      });
+    }, 1000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(this.interval);
+    });
+  },
+  methods: {
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        if (JSON.parse(event.data).length) {
+          this.changeState(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+      });
+    },
+    changeState(data) {
+      let state = data[0]["baojing_after"];
+      this.$nextTick(() => {
+        this.infoList.forEach((item, index) => {
+          item.info = state[index];
+        });
+      });
+    },
+    close() {
+      // this.websocket.close();
+      console.log(123);
+      clearInterval(this.interval);
+    },
+    init() {
+      // if (this.id < 10) return;
+      // this.websocket = new WebSocket(
+      //   `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+      // );
+      // this.initWebSocket();
+      this.interval = setInterval(() => {
+        this.infoList.forEach((item) => {
+          item.info = Math.round(Math.random()) ? "1" : "0";
+        });
+      }, 1000);
+      this.$once("hook:beforeDestroy", () => {
+        clearInterval(this.interval);
+      });
+    },
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  props: ["id"],
+};
+</script>
+
+<style lang="less" scoped>
+#green {
+  color: green;
+}
+#red {
+  color: red;
+}
+.outer {
+  width: 100%;
+  height: 100%;
+  color: #ddd;
+  font-size: 12px;
+  .number_Info {
+    width: 100%;
+    height: 15%;
+    padding: 5px 0;
+    text-align: center;
+    outline: 1px rgba(255, 255, 255, 0.3) solid;
+  }
+  ul {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 208px;
+    list-style: none;
+    outline: 1px rgba(255, 255, 255, 0.3) solid;
+    overflow: auto;
+    li {
+      text-align: center;
+      margin: 2px 0px;
+    }
+  }
+  ul::-webkit-scrollbar {
+    display: none;
+  }
+}
+</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: [70, 75, 88, 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/item4/index.vue

@@ -0,0 +1,326 @@
+<template>
+  <div class="main">
+    <div ref="testLine" style="height: 170px; width: 300px"></div>
+    <div style="display: flex; flex-flow: column">
+      <div class="botton1">
+        <span class="name">1235 /m</span>
+        <span class="value">本月煤巷掘进</span>
+      </div>
+      <div class="botton2">
+        <span class="name">5690 /m</span>
+        <span class="value">本月岩巷掘进</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentChartId: 1,
+      xData: new Array(30).fill("-"),
+      y1Data: new Array(30).fill("-"),
+      y2Data: new Array(30).fill("-"),
+      count: 0,
+      myChart: null,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "transparent",
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(126,199,255,0)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(126,199,255,1)", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(126,199,255,0)", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+          },
+          formatter: (p) => {
+            let dom = `<div style="width: 79px;
+	height: 110px;;color:#fff;position: relative;">
+	<svg style="position: absolute;top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="100"
+		height="111" viewBox="0 0 80 85">
+		<defs>
+			<style>
+				.cls-1 {
+					fill: #07172c;
+					fill-opacity: 0.8;
+					stroke: #a7d8ff;
+					stroke-linejoin: round;
+					stroke-opacity: 0.2;
+					stroke-width: 1px;
+					fill-rule: evenodd;
+				}
+			</style>
+		</defs>
+		<path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
+			transform="translate(-258.5 -592.5)" />
+	</svg>
+	<div style="padding: 3px 1px 3px 11px;display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;position: relative;z-index: 1;">
+		<div
+			style="margin-bottom: 4px;width:100%;display:${
+        p[0] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[0] ? p[0].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[0] ? p[0].data : ""}</span>
+		</div>
+		<div
+			style="width:100%;height:100%;display:${
+        p[1] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[1] ? p[1].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[1] ? p[1].data : ""}</span>
+		</div>
+		<div
+			style="width:100%;height:100%;display:${
+        p[1] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[2] ? p[2].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[2] ? p[2].data : ""}</span>
+		</div>
+	</div>
+</div>`;
+            return dom;
+          },
+        },
+        legend: {
+          align: "left",
+          left: "44%",
+          top: "17%",
+          type: "plain",
+          textStyle: {
+            color: "#7ec7ff",
+            fontSize: 11,
+          },
+          // icon:'rect',
+          itemGap: 25,
+          // itemWidth: 18,
+          icon: "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
+          data: ["煤巷", "岩巷"],
+        },
+        grid: {
+          top: "22%",
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: [
+          {
+            boundaryGap: [0, "100%"],
+            name: "米",
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            type: "category",
+            name: "日",
+            axisLabel: {
+              color: "#fff",
+              interval: 0,
+              fontSize: 9,
+            },
+            axisLine: {
+              show: true,
+            },
+            data: [
+              1, 3, 5, 7, 9, 10, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31,
+            ],
+          },
+        ],
+        title: {
+          text: "掘进进尺",
+          // 标题内边距 上下边距 左右边距
+          padding: [10, 0, 0, 110],
+          textStyle: {
+            fontWeight: "bolder", //标题颜色
+            color: "white",
+            fontSize: 18,
+          },
+        },
+
+        series: [
+          {
+            name: "煤巷",
+            type: "line",
+            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
+              },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 102, 102,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 102, 102, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+              },
+            },
+            data: [
+              35, 32, 34, 37, 38, 41, 40, 37, 32, 37, 39, 41, 43, 45, 40, 37,
+              34, 32, 36, 34, 31, 30, 28, 33, 34, 37, 35, 33, 31, 34, 37,
+            ],
+          },
+          {
+            name: "岩巷",
+            type: "line",
+            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(0, 102, 153,1)", // 线条颜色
+              },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(0, 102, 153,1)",
+              borderColor: "#3578e5",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 102, 153,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0, 102, 153, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 102, 153, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+              },
+            },
+            data: [
+              23, 25, 26, 28, 25, 26, 25, 25, 27, 28, 31, 31, 33, 35, 30, 32,
+              35, 36, 35, 37, 31, 30, 28, 33, 34, 30, 31, 32, 30, 26, 23,
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {},
+  mounted() {
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    // 获取数据
+
+    this.myChart.setOption(this.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;
+  text-align: center;
+}
+</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/components/newMain/item8/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div >
+    <div ref="testLine" style="height: 170px; width: 300px"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentChartId: 1,
+      xData: new Array(30).fill("-"),
+      y1Data: new Array(30).fill("-"),
+      y2Data: new Array(30).fill("-"),
+      count: 0,
+      myChart: null,
+      option: {
+        title: {
+          text: "各煤仓占比",
+          // 标题内边距 上下边距 左右边距
+          padding: [10, 10, 0, 110],
+          textStyle: {
+            fontWeight: "bolder", //标题颜色
+            color: "white",
+            fontSize: 18,
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+         grid: {
+          top: "22%",
+          left: "41%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        // legend: {
+        //   align: "left",
+        //   left: "44%",
+        //   top: "17%",
+        //   type: "plain",
+        //   textStyle: {
+        //     color: "#7ec7ff",
+        //     fontSize: 11,
+        //   },
+        //   data: ["原煤仓", "块煤仓","末煤仓","成品煤"],
+        // },
+        series: [
+          {
+            name: "煤仓占比",
+            type: "pie",
+            radius: "50%",
+            data: [
+              { value: 1048, name: "原煤仓" },
+              { value: 735, name: "块煤仓" },
+              { value: 580, name: "末煤仓" },
+              { value: 484, name: "成品煤" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {},
+  mounted() {
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    // 获取数据
+
+    this.myChart.setOption(this.option);
+  },
+};
+</script>
+<style scoped lang="less">
+
+</style>

src/views/newMain.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="grid">
+    <div class="item1 item">
+      <item1></item1>
+    </div>
+    <div class="span-col-2 span-row-3 item2 item">
+      <Main></Main>
+    </div>
+    <!-- <div class="span-col-2 span-row-3 item2">item2</div> -->
+    <div class="item3 item">
+      <item3></item3>
+    </div>
+    <div class="item4 item">
+      <excavation></excavation>
+    </div>
+    <div class="item5 item">
+      <item5></item5>
+    </div>
+    <div class="item6 item">
+      <item6></item6>
+    </div>
+    <div class="item7 item">
+      <item7></item7>
+    </div>
+    <div class="item8 item">
+      <coal-proportion></coal-proportion>
+    </div>
+    <div class="span-col-2 span-row-2 item9 item">
+      <div class="watch watch1">
+        <m3u8></m3u8>
+      </div>
+      <div class="watch watch2">
+        <m3u8></m3u8>
+      </div>
+      <div class="watch watch3">
+        <m3u8></m3u8>
+      </div>
+      <div class="watch watch4">
+        <m3u8></m3u8>
+      </div>
+      <div class="watch watch5">
+        <m3u8></m3u8>
+      </div>
+      <div class="watch watch6">
+        <m3u8></m3u8>
+      </div>
+    </div>
+    <div class="item10 item">
+      <equipment></equipment>
+    </div>
+    <div class="item11 item">
+      <coal-position></coal-position>
+    </div>
+    <div class="item12 item">
+      <item12></item12>
+    </div>
+  </div>
+</template>
+
+<script>
+import Main from "../components/newMain/item2/Main";
+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";
+import excavation from "@/components/newMain/item4";
+import coalPosition from "@/components/newMain/item11";
+import coalProportion from "@/components/newMain/item8";
+import equipment from "@/components/newMain/item10";
+import m3u8 from "@/common/m3u8";
+
+export default {
+  name: "newMain",
+  components: {
+    Main,
+    item1,
+    item6,
+    item5,
+    item7,
+    item3,
+    item12,
+    excavation,
+    coalPosition,
+    coalProportion,
+    equipment,
+    m3u8,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.grid {
+  // background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+  //   linear-gradient(
+  //     to top,
+  //     rgba(255, 255, 255, 0.4) 0%,
+  //     rgba(0, 0, 0, 0.25) 200%
+  //   );
+  background: #bdc3c7; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to top,
+    #2c3e50,
+    #bdc3c7
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to top,
+    #2c3e50,
+    #bdc3c7
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+  width: 100%;
+  height: 890px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+  grid-gap: 10px;
+  .item {
+    position: relative;
+    background-color: #303030;
+    border-radius: 20px;
+    padding: 0px;
+  }
+}
+.span-col-2 {
+  grid-column: span 2 / auto;
+}
+
+.span-row-3 {
+  grid-row: span 3 / auto;
+}
+
+.span-row-2 {
+  grid-row: span 2 / auto;
+}
+.item9 {
+  display: grid;
+  grid-template-columns: repeat(3, 257px);
+  grid-template-rows: repeat(3, 160px);
+  grid-gap: 5px;
+  .watch {
+    margin-top: 20px;
+  }
+}
+</style>

src/views/newmain.vue

@@ -120,7 +120,7 @@ export default {
     position: relative;
     background-color: #303030;
     border-radius: 20px;
-    padding: 1px;
+    padding: 0px;
   }
 }
 .span-col-2 {