<template>
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      overflow: hidden;
    "
  >
    <div class="left" @mouseenter="mouseOver1" @mouseleave="mouseLeave1">
      <div class="leftBox1" :class="{ collapsed: isLeftCollapsed }">
        <div class="leftOne">
          <div class="title4">
            <span>管廊概况</span>
            <span class="remark" @click="showRemark">管廊介绍 ></span>
          </div>
          <div class="gl-info">
            <dl>
              <dt>管廊名称</dt>
              <dd>礼和路(友谊大道-欢乐大道)综合管廊</dd>
            </dl>
            <dl>
              <dt>舱室类型</dt>
              <dd>高压舱、综合舱、热力舱</dd>
            </dl>
            <dl>
              <dt>管廊长度</dt>
              <dd>
                <span style="font-size: 18px; color: #ff6100">2370</span>米
              </dd>
            </dl>
            <dl>
              <dt>分区总数</dt>
              <dd style="font-size: 18px; color: #ff6100">14</dd>
            </dl>
            <dl>
              <dt>起点</dt>
              <dd>欢乐大道</dd>
            </dl>
            <dl>
              <dt>终点</dt>
              <dd>友谊大道</dd>
            </dl>
          </div>
        </div>
        <div class="leftTwo">
          <div class="title4">
            <span class="calendar">设备情况统计</span>
          </div>
          <div class="warning">
            <div class="PieChart1">
              <PieChartdevice style="width: 100%; height: 100%" />
            </div>
          </div>
        </div>
        <div class="leftThree">
          <div class="title4">
            <span>能耗统计</span>
            <el-select
              v-model="nhValue"
              size="small"
              style="width: 100px"
              class="custom-select"
            >
              <el-option :value="1" label="用电量">用电量</el-option>
              <el-option :value="2" label="用水量">用水量</el-option>
            </el-select>
          </div>
          <div class="warning">
            <div class="lineChart">
              <line-charttpf
                ref="linecharttpf"
                :chartData="lineChartDataCO2"
                style="width: 100%; height: 100%; margin-top: 5%"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="middleTop">
      <plan></plan>
    </div>

    <div class="right" @mouseenter="mouseOver1" @mouseleave="mouseLeave1">
      <div class="rightBox1" :class="{ collapsedR: isRightCollapsed }">
        <div class="rightTwo">
          <div class="title4">报警信息</div>
          <div
            class="warnList"
            id="warnList"
            :style="
              !warnList.length
                ? 'display:flex;align-items: center;justify-content: center;'
                : ''
            "
          >
            <div
              class="warnListContent"
              v-for="(item, index) in warnList"
              @click="selectWarningItem(index, item)"
              :class="{ selected: warningIndex === index }"
              :key="index"
              id="warnListContent"
            >
              <div class="warnTitle">
                <span>{{ item.details }}</span>
              </div>
              <div class="warnArray">
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    margin-left: 3%;
                    width: 100%;
                  "
                >
                  <span>报警时间： {{ item.startTime }}</span>
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      margin-top: 2%;
                      width: 100%;
                    "
                  >
                    <span style="text-align: left"
                      >报警地点： {{ item.regionName }}</span
                    >
                    <span style="margin-right: 5%" @click="chuli(item)"
                      ><img src="../../assets/beij/ljcl.png" alt=""
                    /></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="noData" v-if="!warnList.length"></div>
          </div>
        </div>
        <div class="leftThree">
          <div class="title4">
            <span>环境监测</span>
            <el-select
              v-model="nhValue"
              size="small"
              style="width: 80px"
              class="custom-select"
            >
              <el-option :value="1" label="液位">液位</el-option>
              <el-option :value="2" label="氧气">氧气</el-option>
            </el-select>
          </div>
          <div class="warning">
            <div class="lineChart">
              <line-charttpf
                ref="linecharttpf2"
                color="#FF8000"
                unit="cm"
                :chartData="lineChartDataCO2"
                style="width: 100%; height: 100%; margin-top: 5%"
              />
            </div>
          </div>
        </div>

        <div class="rightThree">
          <div class="title4">视频监控</div>
          <div class="spjk">
            <img src="../../assets//beij/videoimg.png" alt="" />
            <img src="../../assets//beij/videoimg.png" alt="" />
            <img src="../../assets//beij/videoimg.png" alt="" />
            <img src="../../assets//beij/videoimg.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="componentShowC" v-if="modelOthersAlarm">
      <keep-alive>
        <component
          :is="componentShow"
          @closeStatus="getCloseStatus"
          :waringData="waringData"
          @getWarning="getWarning"
          @statusC="statusN"
        ></component>
      </keep-alive>
    </div>

    <el-dialog
      v-model="showRemarkPanel"
      title="管廊介绍"
      :zIndex="9999"
      width="500"
    >
      <span class="remark-content">
        礼和路(友谊大道-欢乐大道)综合管廊设计范围北起友谊大道，南至欢乐大道，综合管廊工程约2.37公里综合管廊布置在道路机非隔离带下方，为三舱管廊，其中综合舱断面净尺寸BXH=2.6mx3.0m，高压电力舱断面净尺寸BXH=2.5mx3.0m，热力舱断面净尺寸BxH=2.5mX3.0m，管廊标准段覆土均为3.0m。
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="close-btn" type="primary" @click="showRemarkPanel = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script>
import LineCharttpf from "./LineChartTpf";
import LineChartduoneng from "./LineChartduoneng";
import PieChartdevice from "./PieChartdevice";
import plan from "../plan.vue";
export default {
  name: "cockpit",
  components: {
    LineChartduoneng,
    PieChartdevice,
    LineCharttpf,
    plan,
  },
  data() {
    return {
      modelOthersAlarm: false,
      options: [],
      nhValue: 1,
      isLeftCollapsed: false,
      isRightCollapsed: false,
      warningIndex: -1,
      lineChartData: {},
      lineChartDataCO2: {},
      warnList: [
        {
          id: "1",
          startTime: "2024-03-18 15:26:08",
          regionName: "南一门左例",
          details: "甲醛浓度超标",
          status: "已处理",
        },
        {
          id: "1",
          startTime: "2024-03-18 15:26:08",
          regionName: "南一门左例",
          details: "甲醛浓度超标",
          status: "已处理",
        },
      ], //报警数组
      closeStatus: null,
      waringData: {},
      pickerVal: new Date(),
      barList: {
        xdata: [],
        result: [],
      },
      showRemarkPanel: false
    };
  },

  mounted() {
    this.initlineChartDataCO2();
    this.initlineChartDatayw();
  },

  methods: {
    showRemark() {
      this.showRemarkPanel = true;
    },
    getHoursFromZeroToTarget(endHour) {
      const targetHour =
        typeof endHour === "number"
          ? Math.max(0, Math.min(23, endHour))
          : new Date().getHours();
      const hourArr = [];
      for (let hour = 0; hour <= targetHour; hour += 2) {
        const formattedHour = hour.toString().padStart(2, "0");
        hourArr.push(`${formattedHour}:00`);
      }
      return hourArr;
    },
    initlineChartDatayw() {
      let time = this.getHoursFromZeroToTarget();
      let expectedData = [];
      let actualData = [];
      let type = 1;

      for (let i = 0; i < time.length; i++) {
        expectedData.push(40 + Math.random() * 10);
        actualData.push(40 + Math.random() * 10);
      }
      let lineChartDataCO2 = {
        expectedData,
        actualData,
        time,
        type,
      };
      this.$nextTick(() => {
        this.$refs.linecharttpf2.initChart(lineChartDataCO2);
      });
    },
    initlineChartDataCO2() {
      let expectedData = [];
      let actualData = [];
      let time = [];
      let type = 1;

      for (let i = 0; i < 11; i++) {
        expectedData.push(Math.random() * 100);
        actualData.push(Math.random() * 100);
        time.push(`2025-0${i + 1}`);
      }
      let lineChartDataCO2 = {
        expectedData,
        actualData,
        time,
        type,
      };
      this.$nextTick(() => {
        this.$refs.linecharttpf.initChart(lineChartDataCO2);
      });
    },
    getAssetUrl(imgName) {
      let url = `../../assets/beij${imgName}`;
      return new URL(url, import.meta.url).href;
    },
  },
  beforeDestroy() {},
};
</script>
  <style lang="scss" scoped>
.picker {
  width: 35%;
  margin-right: 3%;
  height: 100%;

  ::v-deep .el-date-editor {
    height: 100%;
  }

  ::v-deep .el-input--medium .el-input__inner {
    height: 100%;
  }

  ::v-deep .el-date-editor {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.el-year-table td {
  text-align: center;
  padding: 4px 3px !important;
  cursor: pointer;
}

.el-month-table td div {
  height: 20px !important;
  padding: 6px 0 !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.el-date-table td {
  width: 32px;
  height: 21px !important;
  padding: 4px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.el-date-table td div {
  height: 12px !important;
  padding: 3px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.el-picker-panel__content {
  position: relative;
  margin: 15px;
  margin-top: 0;
}

.el-date-picker__header {
  margin: 0px;
  text-align: center;
}

.el-table--border .el-table__cell {
  border-right: 0px solid #dfe6ec;
}

.el-table::before,
.el-table--group::after,
.el-table--border::after {
  background: transparent !important;
}

::v-deep .el-dialog {
  background: url("/src/assets/beij/nrk.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 0 15px 3px rgba(212, 234, 255, 0.2),
                  0 0 30px 10px rgba(212, 234, 255, 0.1),
                  0 0 50px 15px rgba(212, 234, 255, 0.2);
}

.el-dialog__wrapper {
  height: 90%;
  overflow: hidden !important;
}

.el-dialog__body {
  height: 86%;
  overflow-y: auto;
  overflow: hidden;
}

.el-table--scrollable-y .el-table__body-wrapper {
  scrollbar-width: none;
}

.el-table__empty-block {
  scrollbar-width: none;
}

.miniTable .el-table__body-wrapper {
  scrollbar-width: none !important;
}

.el-dialog__body {
  scrollbar-width: none !important;
}

.el-table .el-table__body tr.el-table__row:nth-child(odd) {
  background: url("../../assets/beij/titletable2.png") !important;
  background-size: 100% 100% !important;
}
</style>
  
  <style rel="stylesheet/scss" lang="scss">
.noData {
  background-image: url(../../assets/images/noData.png);
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

.left {
  width: 25%;
  min-width: 475px;
  height: 95%;
  padding: 0.5% 0.3% 0% 0%;
  background: url(../../assets/beij/left.png) no-repeat;
  background-size: 100% 100%;
  z-index: 9999;
  position: absolute;
  top: 5%;

  .leftBox1 {
    height: 99%;
    margin-left: 6px;
    margin-top: 0%;
    padding: 3%;
    background: url(../../assets/beij/nrk.png) no-repeat;
    background-size: 100% 100%;
    .leftOne {
      height: 33%;
      width: 100%;
      .warnList {
        height: 100%;
        width: 30%;
        margin-bottom: 1%;
        margin-left: 2%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        color: #d4eaff;
        font-size: 0.7rem;
      }
    }

    .leftTwo {
      height: 33%;
      width: 100%;
      .warning {
        background-size: 100% 100%;
        height: calc(100% - 20%);
        margin-top: 1%;
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        .lineChart {
          margin-left: 1%;
          width: 96%;
          height: 90%;
        }
      }
      position: relative;
    }
  }
}

.middleTop {
  width: 100%;
  height: 100%;
  z-index: 666;
  top: 50%;
  display: flex;
  justify-content: space-around;
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  overflow: hidden;
}

.componentShowC {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 888;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.right {
  width: 25%;
  min-width: 475px;
  height: 95%;
  padding: 0.5% 0.3% 0% 0%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  background: url(../../assets/beij/right.png) no-repeat;
  background-size: 100% 100%;
  z-index: 999;
  position: absolute;
  top: 5%;
  right: 0%;
  .rightBox1 {
    width: 99%;
    height: 99%;
    margin-right: 0;
    margin-top: 0%;
    background: url(../../assets/beij/nrk.png) no-repeat;
    background-size: 100% 100%;
    padding: 3%;
    margin-left: 5%;
    .rightTwo {
      height: 33%;
      width: 100%;
      position: relative;
    }
  }
}

.title4 {
  width: 100%;
  height: 12%;
  justify-content: space-between;
  background: url("../../assets/beij/tit.png") no-repeat;
  background-size: 100% 100%;
  color: #d4eaff;
  font-size: 22px;
  display: flex;
  align-items: center;
  padding-left: 17%;
  box-sizing: border-box;
  font-family: "PangmenZhengDao", sans-serif;
  display: flex;
  text-shadow: 0px 1px 3px #d4eaff;
  .remark {
    font-size: 14px;
    cursor: pointer;
  }

  /* 蓝色发光层 */
  /* 白色发光层 */
  .calendar {
    display: inline-block;
    // width: 50%;

    .selectSmall .el-input__inner .el-input--medium .el-input__inner {
      line-height: 22px !important;
    }
  }

  .el-calendar__button-group {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    float: right;
    margin-right: 3%;
  }
}

.leftBox1 {
  transition: width 1s ease;
}

.leftBox1.collapsed {
  width: 0px;
  /* 缩起后的宽度 */
  display: none;
}

.rightBox1 {
  transition: width 1s ease;
}

.rightBox1.collapsedR {
  width: 0px;
  display: none;
}
.PieChart1 {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  margin-left: 1%;
  padding: 4px 4px 8px 4px;
  border-radius: 3%;
}
.gl-info {
  padding-left: 16px;
  dl {
    display: flex;
    color: #d4eaff;
    font-size: 16px;
    margin: 0;
    padding: 5px 0;
    dt {
      font-weight: bold;
      width: 100px;
      text-align: start;
    }
    dd {
      color: #d4eaff90;
    }
  }
}

.rightTwo {
  height: 34%;
  width: 100%;
  position: relative;

  .warning {
    background-size: 100% 100%;
    height: calc(100% - 20%);
    margin-top: 1%;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;

    .lineChart {
      margin-left: 1%;
      width: 96%;
      height: 90%;
    }
  }

  .warnList {
    background-size: 100% 100%;
    height: calc(100% - 18%);
    width: 100%;
    margin-top: 1%;
    overflow: auto;
    padding: 3%;

    .warnListContent {
      height: 47%;
      width: 100%;
      background: url(../../assets/beij/baoj.png) no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      margin-bottom: 3%;
      color: #d4eaff;
      font-size: 16px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding-left: 3%;
      box-sizing: border-box;
      font-size: 12px;

      .warnTitle {
        width: 100%;
        height: 25%;
        background: url("../../assets/beij/bjTit1.png") no-repeat;
        background-size: 100% 100%;
        text-align: left;
        padding-top: 0.5%;
        padding-left: 4%;
      }

      .warnArray {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        font-weight: 400;
        font-size: 14px;
        color: #d4eaff;
        // line-height: 20px;
        line-height: 17px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }

    .warnListContent.selected {
      background: url(../../assets/beij/baojh1.png) no-repeat;
      background-size: 100% 100%;
    }

    .warnListContent:hover {
      background: url(../../assets/beij/baojh1.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  ::-webkit-scrollbar {
    display: none;
  }
}

.leftThree {
  height: 33%;
  width: 100%;
  position: relative;

  .warning {
    background-size: 100% 100%;
    height: calc(100% - 20%);
    margin-top: 1%;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;

    .lineChart {
      margin-left: 1%;
      width: 96%;
      //   width: 96%;
      height: 90%;
    }
  }
}
</style>
<style scoped>
::v-deep .custom-select {
  height: 26px;
}
::v-deep .custom-select .el-select__wrapper {
  background: transparent !important;
  height: 26px;
  min-height: 26px;
}
::v-deep .el-select__selected-item {
  color: #fff;
}

.spjk {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 12px;
  height: calc(100% - 32px);
  img {
    width: calc(50% - 6px);
    height: calc(50%);
    margin-bottom: 10px;
  }
}
.rightThree {
  height: 33%;
}
.remark-content {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: start;
  line-height: 28px;
}
.close-btn {
  background: #d4eaff50;
  border: 0;
}
</style>>
  