<template>
  <div class="box">
    <div class="a">
      <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
    </div>
    <div class="left">
      <img src="../../assets/img/标题/智能运维.png" class="title" />
      <div class="hbsj">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>环保数据</p>
        </div>
        <div class="btns">
          <div>一号窑系统</div>
          <div>二号窑系统</div>
          <div>三号窑系统</div>
        </div>
        <div class="date">
          <div class="one">
            <div>
              <span>SO2折算值：</span>
              <span>0.47</span>
            </div>
            <div>
              <span>颗粒折算值：</span>
              <span>0.20</span>
            </div>
            <div>
              <span>NOX折算值：</span>
              <span>41.42</span>
            </div>
            <div>
              <span>CO折算值：</span>
              <span>219.70</span>
            </div>
          </div>
          <div class="one">
            <div>
              <span>实际值：</span>
              <span>0.60</span>
            </div>
            <div>
              <span>实际值：</span>
              <span>0.26</span>
            </div>
            <div>
              <span>实际值：</span>
              <span>52.78</span>
            </div>
            <div>
              <span>实际值：</span>
              <span>280.00</span>
            </div>
          </div>
          <div class="one">
            <div>
              <span>O2:：</span>
              <span>6.98</span>
            </div>
            <div>
              <span>流量：</span>
              <span style="color: red">615218.94</span>
            </div>
            <div>
              <span>流速：</span>
              <span>18.74</span>
            </div>
            <div>
              <span>压力：</span>
              <span>-0.07</span>
            </div>
          </div>
        </div>
      </div>
      <div class="hbgzjc">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>环境感知监测</p>
        </div>
        <div class="date">
          <div>
            <p>
              <span>烟尘实测值：0.23</span>
              <span>流量：0.23</span>
              <span>温度：0.23</span>
              <span>湿度：0.23</span>
            </p>
            <p>
              <span>烟尘折算值：0.23</span>
              <span>流速：0.23</span>
              <span>压力：0.23</span>
              <span>氧气：0.23</span>
            </p>
          </div>
          <div>
            <p>
              <span>烟尘实测值：0.23</span>
              <span>流量：0.23</span>
              <span>温度：0.23</span>
              <span>湿度：0.23</span>
            </p>
            <p>
              <span>烟尘折算值：0.23</span>
              <span>流速：0.23</span>
              <span>压力：0.23</span>
              <span>氧气：0.23</span>
            </p>
          </div>
          <div>
            <p>
              <span>烟尘实测值：0.23</span>
              <span>流量：0.23</span>
              <span>温度：0.23</span>
              <span>湿度：0.23</span>
            </p>
            <p>
              <span>烟尘折算值：0.23</span>
              <span>流速：0.23</span>
              <span>压力：0.23</span>
              <span>氧气：0.23</span>
            </p>
          </div>
          <div>
            <p>
              <span>烟尘实测值：0.23</span>
              <span>流量：0.23</span>
              <span>温度：0.23</span>
              <span>湿度：0.23</span>
            </p>
            <p>
              <span>烟尘折算值：0.23</span>
              <span>流速：0.23</span>
              <span>压力：0.23</span>
              <span>氧气：0.23</span>
            </p>
          </div>
          <div>
            <p>
              <span>烟尘实测值：0.23</span>
              <span>流量：0.23</span>
              <span>温度：0.23</span>
              <span>湿度：0.23</span>
            </p>
            <p>
              <span>烟尘折算值：0.23</span>
              <span>流速：0.23</span>
              <span>压力：0.23</span>
              <span>氧气：0.23</span>
            </p>
          </div>
        </div>
      </div>
      <div class="kqwrpf">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>空气污染排放</p>
        </div>
        <div class="btns">
          <div>甲烷</div>
          <div>硫化氢</div>
          <div>一氧化碳</div>
          <div>氧气</div>
        </div>
        <div class="date">
          <div>垃圾处理站排放物监测</div>
          <div>一层</div>
          <div>
            <el-table :data="tableData" style="width: 100%" header-cell-style="background-color: #1969A8; color: white">
              <el-table-column prop="date1" label="监测点1" align="center">
              </el-table-column>
              <el-table-column prop="date2" label="监测点2" align="center">
              </el-table-column>
              <el-table-column prop="date3" label="监测点3" align="center">
              </el-table-column>
              <el-table-column prop="date4" label="监测点4" align="center">
              </el-table-column>
              <el-table-column prop="date5" label="监测点5" align="center">
              </el-table-column>
              <el-table-column prop="date6" label="监测点6" align="center">
              </el-table-column>
              <el-table-column prop="date7" label="监测点7" align="center">
              </el-table-column>
              <el-table-column prop="date8" label="监测点8" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="yxzt">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>运行状态</p>
        </div>
        <div class="date">
          <div>
            <img src="../../assets/znyw/安全.png" />
            <p style="color: #6aca32">安全</p>
          </div>
          <div>
            <img src="../../assets/znyw/警戒.png" />
            <p style="color: #fbae28">警戒</p>
          </div>
          <div>
            <img src="../../assets/znyw/紧急.png" />
            <p style="color: #f12f08">紧急</p>
          </div>
          <div>
            <img src="../../assets/znyw/恢复.png" />
            <p style="color: #00ebf2">恢复</p>
          </div>
        </div>
      </div>
      <div class="xjjh">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>巡检计划</p>
        </div>
        <div class="table">
          <el-table :data="plan" style="width: 100%" :row-class-name="tableRowClassName"
            header-cell-style="background-color: #1969A8; color: white">
            <el-table-column prop="date1" label="计划名称" align="center">
            </el-table-column>
            <el-table-column prop="date2" label="计划内容" align="center">
            </el-table-column>
            <el-table-column prop="date3" label="巡检区域" align="center">
            </el-table-column>
            <el-table-column prop="date4" label="巡检周期" align="center">
              <template scope="scope">
                <span style="color: #58ff70">{{ scope.row.date4 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="date5" label="巡检日期" align="center">
            </el-table-column>
            <el-table-column prop="date6" label="巡检人" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="sbyctj">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>设备异常统计</p>
        </div>
        <div id="charts"></div>
      </div>
      <div class="gjlb">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>告警列表</p>
        </div>
        <div class="table">
          <el-table :data="list" style="width: 100%" :row-class-name="tableRowClassName"
            header-cell-style="background-color: #1969A8; color: white">
            <el-table-column prop="date1" label="发生时间" align="center">
            </el-table-column>
            <el-table-column prop="date2" label="告警等级" align="center">
              <template scope="scope">
                <span v-if="scope.row.date2 == '重大'" style="color: red">{{
                  scope.row.date2
                }}</span>
                <span v-else style="color: yellow">{{ scope.row.date2 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="date3" label="告警内容" align="center">
            </el-table-column>
            <el-table-column prop="date4" label="处理人" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date1: "12",
          date2: "10",
          date3: "15",
          date4: "18",
          date5: "12",
          date6: "15",
          date7: "18",
          date8: "12",
        },
      ],
      plan: [
        {
          date1: "巡检计划1",
          date2: "1号生产线",
          date3: "回转窑",
          date4: "5",
          date5: "2023-10-21",
          date6: "张三",
        },
        {
          date1: "巡检计划2",
          date2: "2号生产线",
          date3: "回转窑",
          date4: "6",
          date5: "2023-10-22",
          date6: "李四",
        },
        {
          date1: "巡检计划3",
          date2: "3#线空压站",
          date3: "一号空压机",
          date4: "4",
          date5: "2023-10-26",
          date6: "王五",
        },
        {
          date1: "巡检计划4",
          date2: "水泥制备",
          date3: "水泥磨",
          date4: "5",
          date5: "2023-10-23",
          date6: "王五",
        },
        {
          date1: "巡检计划5",
          date2: "矿山开发",
          date3: "一号破碎机",
          date4: "3",
          date5: "2023-10-28",
          date6: "李四",
        },
        {
          date1: "巡检计划6",
          date2: "余热发电站",
          date3: "蒸汽轮机",
          date4: "6",
          date5: "2023-10-29",
          date6: "张三",
        },
        {
          date1: "巡检计划7",
          date2: "垃圾处理",
          date3: "垃圾破碎机",
          date4: "5",
          date5: "2023-10-30",
          date6: "赵六",
        },
      ],
      selectedRow: null, // 用于存储选中的行数据
      list: [
        {
          date1: "2023-10-21 20:30",
          date2: "紧急",
          date3: "配电房温度过高",
          date4: "张三",
        },
        {
          date1: "2023-10-22 20:30",
          date2: "重大",
          date3: "变压器设备发生故障",
          date4: "李四",
        },
        {
          date1: "2023-10-26 20:30",
          date2: "紧急",
          date3: "配电房温度过高",
          date4: "王五",
        },
      ],
      option: {
        legend: {
          data: ["正常", "预警", "故障"],
          x: "center",
          y: "top",
          itemGap: 100,
          textStyle: {
            color: "#fff",
            fontSize: "16px",
          },
        },
        xAxis: {
          type: "category",
          data: [
            "2023-02-12",
            "2023-03-12",
            "2023-04-12",
            "2023-05-12",
            "2023-06-12",
          ],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 20,
            },
            interval: 0, //代表显示所有x轴标签显示
          },
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 0.3,
          interval: 0.05, // 指定刻度间隔
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
        },
        grid: {
          // 让图表占满容器
          top: "5%",
          left: "8%",
          right: "5%",
          bottom: "8%",
        },
        series: [
          {
            name: "故障",
            type: "bar",
            stack: "total",
            data: [0.08, 0.08, 0.06, 0.12, 0.09],
          },
          {
            name: "预警",
            stack: "total",
            type: "bar",
            data: [0.06, 0.07, 0.03, 0.06, 0.04],
          },
          {
            name: "正常",
            type: "bar",
            stack: "total",
            data: [0.13, 0.12, 0.08, 0.14, 0.12],
          },
        ],
      },
    };
  },
  methods: {
    //U3D交互的绑定
    sendMessageToCSharp() {
      window.vuplex.postMessage({
        type: "Tog",
        message: "智能运维_true",
      });
      this.$router.push('/znywjk');
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "success-row";
      }
      return "";
    },
    defineEcharts() {
      //   获取容器实例;
      var chartDom = document.getElementById("charts");
      //   赋值并初始化ecahrts;
      var myChart = this.$echarts.init(chartDom);
      myChart.setOption(this.option);
    },
  },
  mounted() {
    this.defineEcharts();
  },
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  padding-top: 400px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  background-color: transparent;
  position: relative;

  .a {
    position: absolute;
    width: 1300px;
    z-index: 2;
    top: 420px;
    right: 480px;
    z-index: 100;

    img {
      margin-right: 102px;
      pointer-events: all;
      cursor: pointer;
    }
  }
}

#img {
  position: absolute;
  right: 0px;
}

.left {
  width: 1237px;
  height: 2500px;
  margin-left: 61px;
  background-image: url("../../assets/img/侧边.png");
  padding-left: 59px;
  padding-right: 45px;
  box-sizing: border-box;

  .title {
    margin-top: 15px;
    margin-left: 60px;
  }

  .hbsj {
    position: relative;
    margin-top: 56px;

    .imgBox {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    .btns {
      display: flex;
      justify-content: space-between;
      margin-top: 50px;
      margin-bottom: 50px;
      padding-left: 149px;
      padding-right: 124px;
      box-sizing: border-box;

      div {
        width: 211px;
        height: 55px;
        background: #3ce9c2;
        border-radius: 12px 12px 12px 12px;
        border: 1px solid #36ffd3;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
        color: #ffffff;
        line-height: 55px;
        text-align: center;
      }
    }

    .date {
      width: 1132px;
      height: 400px;
      background: linear-gradient(NaNdeg, #1e5181 0%);
      border: 1px solid #135064;
      border-image: radial-gradient(circle, rgba(30, 81, 129, 1)) 1 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #fff;

      .one {
        height: 100%;

        div {
          height: 68px;
          width: 313px;
          line-height: 68px;
          font-size: 30px;
          font-family: "MicrosoftYaHei";
          display: flex;
          margin: 20px;
          justify-content: space-between;
          background: linear-gradient(90deg,
              rgba(56, 183, 161, 0.3) 30%,
              rgba(79, 180, 163, 0.3) 30%,
              rgba(81, 147, 136, 0.3) 40%);
          border-left: 5px solid #28a896;
          padding-left: 16px;
          padding-right: 16px;
          color: #fff;
          box-sizing: border-box;

          span:nth-of-type(2) {
            color: #28ff50;
          }
        }
      }
    }
  }

  .hbgzjc {
    position: relative;
    margin-top: 56px;

    .imgBox {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    .date {
      margin-top: 50px;

      div {
        width: 1128px;
        height: 124px;
        margin-top: 30px;
        font-size: 30px;
        color: #ffffff;
        line-height: 60px;
        position: relative;

        p {
          position: absolute;
          right: 10px;

          span {
            margin: 0 34px;
          }
        }

        p:nth-of-type(1) {
          top: 10px;
        }

        p:nth-of-type(2) {
          top: 60px;
        }
      }

      div:nth-of-type(1) {
        background: url("../../assets/znyw/1.png");
      }

      div:nth-of-type(2) {
        background: url("../../assets/znyw/2.png");
      }

      div:nth-of-type(3) {
        background: url("../../assets/znyw/3.png");
      }

      div:nth-of-type(4) {
        background: url("../../assets/znyw/4.png");
      }

      div:nth-of-type(5) {
        background: url("../../assets/znyw/5.png");
      }
    }
  }

  .kqwrpf {
    position: relative;
    margin-top: 56px;

    .imgBox {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    .btns {
      display: flex;
      justify-content: space-between;
      margin-top: 50px;
      margin-bottom: 50px;
      padding-left: 64px;
      padding-right: 51px;
      box-sizing: border-box;

      div {
        width: 211px;
        height: 55px;
        background: #24ccd4;
        border-radius: 12px 12px 12px 12px;
        border: 1px solid #36ffd3;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
        color: #ffffff;
        line-height: 55px;
        text-align: center;
      }
    }

    .date {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 1156px;

      div {
        width: 100%;
        font-size: 30px;
        font-family: "SourceHanSansCN";
        font-weight: bold;
        text-align: center;
        color: #ffffff;
      }

      div:nth-of-type(1) {
        background-color: #1969a8;
        height: 103px;
        line-height: 103px;
      }

      div:nth-of-type(2) {
        background-color: #15456e;
        height: 103px;
        line-height: 103px;
      }

      div:nth-of-type(3) {
        /deep/ .el-table {
          background-color: transparent;
          height: 300px;
        }

        .el-table::before {
          background-color: transparent;
        }

        /deep/.el-table__body {
          height: 100px;
        }

        /* 设置表头文字颜色为白色，如果需要 */
        /deep/.table__header thead colgroup {
          color: #fff;
          background-color: transparent !important;
        }

        /deep/.el-table__row {
          background-color: #102b44 !important;
          color: #fff;
        }

        /deep/ .el-table__row--current,
        .el-table__row--selected {
          background-color: transparent !important;
        }

        // 去掉eltable的hover效果
        ::v-deep .el-table tbody tr:hover>td {
          background-color: #102b49 !important;
        }

        //去掉边框白线
        ::v-deep .el-table__row>td {
          border: none;
        }

        ::v-deep .el-table::before {
          height: 0px;
        }

        /* 移除表头的下边框 */
        ::v-deep .el-table__header th {
          border-bottom: none;
        }
      }
    }
  }
}

.right {
  width: 1237px;
  height: 2500px;
  margin-right: 61px;
  background-image: url("../../assets/img/侧边.png");
  padding-left: 59px;
  padding-right: 45px;
  box-sizing: border-box;

  .yxzt {
    position: relative;
    margin-top: 130px;

    .imgBox {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    .date {
      display: flex;
      margin-top: 50px;
      justify-content: space-around;

      div {
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
          font-size: 30px;
        }
      }
    }
  }

  .xjjh {
    position: relative;
    margin-top: 50px;

    .imgBox {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    .table {
      margin-top: 50px;

      //表体颜色
      /deep/.el-table tr {
        background: #16253b;
        color: #fff;
        font-size: 30px;
        height: 50px;

        .cell {
          line-height: 50px;
        }
      }

      // 去掉eltable的hover效果
      ::v-deep .el-table tbody tr:hover>td {
        background-color: #0b679e !important;
      }

      //修改表头颜色
      ::v-deep .has-gutter {
        background-color: #1969a8;

        th {
          background-color: #1969a8;
        }
      }

      //奇偶行颜色
      ::v-deep .el-table .success-row {
        background: #184167;
      }

      //去掉边框白线
      ::v-deep .el-table__row>td {
        border: none;
      }

      ::v-deep .el-table::before {
        height: 0px;
      }

      /* 移除表头的下边框 */
      ::v-deep .el-table__header th {
        border-bottom: none;
      }
    }
  }

  .sbyctj {
    position: relative;
    margin-top: 50px;

    .imgBox {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    #charts {
      margin-top: 50px;
      width: 1155px;
      height: 400px;
    }
  }

  .gjlb {
    position: relative;
    margin-top: 50px;

    .imgBox {
      height: 93px;
      width: 1156px;

      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }

    .table {
      margin-top: 50px;

      //表体颜色
      /deep/.el-table tr {
        background: #16253b;
        color: #fff;
        font-size: 30px;
        height: 50px;

        .cell {
          line-height: 50px;
        }
      }

      // 去掉eltable的hover效果
      ::v-deep .el-table tbody tr:hover>td {
        background-color: #0b679e !important;
      }

      //修改表头颜色s
      ::v-deep .has-gutter {
        background-color: #1969a8;

        th {
          background-color: #1969a8;
        }
      }

      //奇偶行颜色
      ::v-deep .el-table .success-row {
        background: #184167;
      }

      //去掉边框白线
      ::v-deep .el-table__row>td {
        border: none;
      }

      ::v-deep .el-table::before {
        height: 0px;
      }

      /* 移除表头的下边框 */
      ::v-deep .el-table__header th {
        border-bottom: none;
      }
    }
  }
}
</style>
