合并冲突

src/components/newmain/item1/index.vue

@@ -30,7 +30,7 @@ export default {
       title: {
         text: "煤炭产量",
         // 标题内边距 上下边距 左右边距
-        padding: [10, 0, 0, 70],
+        padding: [10, 0, 0, 110],
         textStyle: {
           fontWeight: "bolder", //标题颜色
           color: "white",
@@ -223,5 +223,6 @@ export default {
 .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/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/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

@@ -9,6 +9,15 @@
     <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-3 item2"><Main></Main></div>
+    <!-- <div class="span-col-2 span-row-3 item2">item2</div> -->
+    <div class="item3">Item 3</div>
+    <!-- 掘进进尺 -->
+    <div class="item4"><excavation></excavation></div>
+    <div class="item5">Item 5</div>
+    <div class="item6">Item 6</div>
+    <div class="item7">Item 7</div>
+    <div class="item8"><coal-proportion></coal-proportion></div>
     <div class="span-col-2 span-row-2 item9">
       <div class="watch watch1"></div>
       <div class="watch watch2"></div>
@@ -20,6 +29,9 @@
     <div class="item10">Item 10</div>
     <div class="item11">Item 11</div>
     <div class="item12"><item12></item12></div>
+    <div class="item10"><equipment></equipment></div>
+    <div class="item11"><coal-position></coal-position></div>
+    <div class="item12">Item 12</div>
   </div>
 </template>
 
@@ -31,6 +43,12 @@ 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 item1 from "@/components/newMain/item1"
+import excavation from "@/components/newMain/item4"
+import coalPosition from "@/components/newMain/item11"
+import coalProportion from "@/components/newMain/item8"
+import equipment from "@/components/newMain/item10"
+
 export default {
   name: "newMain",
   components: {
@@ -41,6 +59,10 @@ export default {
     item7,
     item3,
     item12,
+    excavation,
+    coalPosition,
+    coalProportion,
+    equipment
   },
 };
 </script>
@@ -71,9 +93,6 @@ export default {
 .span-row-2 {
   grid-row: span 2 / auto;
 }
-.item2 {
-  background-color: antiquewhite;
-}
 .item9 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);