<template>
  <div class="dashboard">
    <div style="width: 100%;height: 50px;"></div>
    <div class="content">
      <div class="left-map">
        <div style="width: 3px;height: 16px;background-color: #2250C8;position: absolute;left: 15px;top: 14px;"></div>
        <span style="font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;">线路实况</span>
        <div class="cameraBtn">
          <!-- <el-select></el-select>
          <el-select></el-select> -->
          <!-- <el-input size="small" v-model="searchInfo.camera" placeholder="输入摄像机编号"     clearable></el-input> -->
          <el-input size="small" v-model="searchInfo.vehicle" placeholder="输入机车编号"     clearable></el-input>
          <el-button @click="highlighPanel" size="small" type="primary">
            <i class="el-icon-search"></i>
          </el-button>
          <!-- <img src="/map/camera.png" :style="cameraShow ? { opacity: 0.6 } : { opacity: 1 }" width="32" height="32" alt=""
            @click="showCamera"> -->
        </div>
        <iframe ref="mapRef" style="width: 100%;height: 100%;" src="/SH-demo(1).html" frameborder="0"></iframe>
      </div>
      <div class="right-msg">
        <div class="msgStatistics">
          <div style="width: 3px;height: 16px;background-color: #2250C8;position: absolute;left: 15px;top: 14px;"></div>
          <span style="font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;">信息统计</span>
          <div class="tjMsg">
            <img src="../../assets/矩形_28@2x.png">
            <span class="total">车载终端总数</span>
            <div class="blueDrop"></div>
            <span class="onlineText">在线</span>
            <div class="redDrop"></div>
            <span class="offlineText">离线</span>
            <span class="zs">{{ this.msgStatisticsData.COUNTALLTERMINAL }}</span>
            <span class="onlineTotal">{{ this.msgStatisticsData.OFFLINETERMINAL }}</span>
            <span class="offlineTotal">{{ this.msgStatisticsData.ONLINETERMINAL }}</span>
          </div>
        </div>
        <div class="systemMsg">
          <div style="width: 3px;height: 16px;background-color: #2250C8;position: absolute;left: 15px;top: 14px;"></div>
          <span style="font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;">接入系统状态</span>
          <div style="width: 100%;height: 77px;"></div>
          <div class="tongji">
            <div class="total">
              <img src="../../assets/group4.png">
              <span
                style="position: absolute;font-size: 20px;line-height: 22px;font-weight: 600;color: #696969;left: 61px;">{{
                  sysMsg.countAllMonitor }}<span style="font-size: 16px;font-weight: 400;color: #696969;">{{ '套'
  }}</span></span>
              <span
                style="font-size: 14px;font-weight: 400;color: #484646;line-height: 22px;position: absolute;left: 60px;top: 20px;">接入监测系统</span>
            </div>
            <div class="online">
              <img src="../../assets/group5.png">
              <span
                style="position: absolute;font-size: 20px;line-height: 22px;font-weight: 600;color: #696969;left: 61px;">{{
                  sysMsg.onlineMonitor }}<span style="font-size: 16px;font-weight: 400;color: #696969;">{{ '套'
  }}</span></span>
              <span
                style="font-size: 14px;font-weight: 400;color: #484646;line-height: 22px;position: absolute;left: 60px;top: 20px;">在线</span>
            </div>
            <div class="offline">
              <img src="../../assets/group6.png">
              <span
                style="position: absolute;font-size: 20px;line-height: 22px;font-weight: 600;color: #696969;left: 61px;">{{
                  sysMsg.offlineMonitor }}<span style="font-size: 16px;font-weight: 400;color: #696969;">{{ '套'
  }}</span></span>
              <span
                style="font-size: 14px;font-weight: 400;color: #484646;line-height: 22px;position: absolute;left: 60px;top: 20px;">离线</span>
            </div>
          </div>
          <div class="msgItem" v-for="item in sysMsg.monitorSystemList.slice(0, 3)">
            <div class="blueDrop"></div>
            <div style="width: 100%;height: 10px;"></div>
            <div class="sysName">{{ item.monitorSystemName }}</div>
            <div class="sysState">
              <span style="padding-left: 14px;font-size: 14px;color: rgba(0, 0, 0, 0.88);font-weight: 400;">状态:</span>
              <span style="padding-left: 14px;color: #00974D;font-size: 14px;font-weight: 400;"
                v-if="item.status == 1">在线</span>
              <span style="padding-left: 14px;color: red;font-size: 14px;font-weight: 400;" v-else>离线</span>
              <span style="padding-left: 80px;font-size: 14px;color: rgba(0, 0, 0, 0.88);font-weight: 400;">未解除报警:</span>
              <span style="padding-left: 14px;font-size: 14px;color: blue;font-weight: 400;cursor: pointer;"
                @click="toAlarmList(item)">{{ item.countAlarm || 0 }}</span>
              <span style="position: absolute;right:15px;color: #2250C8;font-size: 12px;font-weight: 500;cursor: pointer;"
                @click="showDetaileDialog(item)">详情</span>
            </div>
          </div>
          <div class="more" @click="goMore">更多></div>
          <el-dialog width="836px" title="详情查看" :visible.sync="isShowDialog">
            <el-form style="padding: 0 10px; margin-left: -20px" label-width="120px" ref="ruleForm" :model="detaileMsg"
              label-position="top">
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="监测系统名称:">
                    <el-input v-model="detaileMsg.monitorSystemName" autocomplete="off" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="监测系统编码:">
                    <el-input v-model="detaileMsg.clientId" autocomplete="off" disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="正式环境密钥:">
                    <el-input v-model="detaileMsg.clientSecret" autocomplete="off" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="测试环境密钥:">
                    <el-input v-model="detaileMsg.testSecret" autocomplete="off" disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="报警信息生成机制:">
                    <el-input v-model="detaileMsg.alarmGenerate" autocomplete="off" disabled type="textarea"
                      style="height:50px" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="报警解除机制:">
                    <el-input v-model="detaileMsg.alarmRelease" autocomplete="off" disabled type="textarea" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="系统简介:">
                    <el-input v-model="detaileMsg.systemIntroduce" autocomplete="off" disabled type="textarea" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="报警信息内容:">
                    <el-input v-model="detaileMsg.alarmContent" autocomplete="off" disabled type="textarea" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="24">
                  <el-form-item label="报警对应的处理措施:">
                    <el-input v-model="detaileMsg.treateMeasure" autocomplete="off" disabled type="textarea" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-dialog>
        </div>
        <div class="alarmMsg">
          <div style="width: 3px;height: 16px;background-color: #2250C8;position: absolute;left: 15px;top: 14px;"></div>
          <span style="font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;">报警信息</span>
          <div style="width: 100%;height: 53px;"></div>
          <div class="switchButton">
            <div class="all" @click="selectAlarmType('1', '')"
              :style="buttonIndex == 1 ? 'border-color:#C9D5F5;color:#2250C8' : ''">全部</div>
            <div class="unreleased" @click="selectAlarmType('2', 2)"
              :style="buttonIndex == 2 ? 'border-color:#C9D5F5;color:#2250C8' : ''">未解除</div>
            <div class="released" @click="selectAlarmType('3', 1)"
              :style="buttonIndex == 3 ? 'border-color:#C9D5F5;color:#2250C8' : ''">已解除</div>
          </div>
          <div class="alarmMsgItem" v-for="item in alarmListData">
            <img src="../../assets/报警.png">
            <span class="isLock1" v-if="item.isRelease == 1">已解除</span>
            <span class="isLock" v-if="item.isRelease == 2">未解除</span>
            <div style="width: 100%;height: 7px;"></div>
            <div class="railwayName">{{ item.alarmTypeName }}</div>
            <div class="content">
              <!-- <div style="left: 0;top: 0;">{{ item.lineDirName + ',里程位置' + item.alarmMiles + ',' + item.alarmTypeName }}</div>
                <div style="left: 0;top: 19px;">{{ item.alarmTime }}</div>
                <div style="left: 0;top: 38px;" v-if="item.sourceName">{{ '来源:' + item.sourceName }}</div>
                <div style="left: 0;top: 38px;" v-else>{{ '来源:' }}</div> -->

              <div style="left: 0;top: 19px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                :title="item.sourceName + ' ' + item.alarmTime" v-if="item.sourceName">{{ item.sourceName }} {{
                  item.alarmTime }}</div>
              <div style="left: 0;top: 19px;" v-else>{{ }} {{ item.alarmTime }}</div>
              <div style="left: 0;top: 38px;" v-if="item.alarmLevel == 1">{{ item.lineDirName + ' ' + item.alarmMiles +
                ',' + item.alarmTypeName + ' ' + '一级报警' }}</div>
              <div style="left: 0;top: 38px;" v-if="item.alarmLevel == 2">{{ item.lineDirName + ' ' + item.alarmMiles +
                ',' + item.alarmTypeName + ' ' + '二级报警' }}</div>
              <div style="left: 0;top: 38px;" v-if="item.alarmLevel == 3">{{ item.lineDirName + ' ' + item.alarmMiles +
                ',' + item.alarmTypeName + ' ' + '三级报警' }}</div>
            </div>
            <div class="detailsBtn" @click="seeDetail(item)">
              查看详情
            </div>
          </div>
          <div class="more" @click="goAlarmList">更多></div>
        </div>
      </div>
    </div>
    <el-dialog width="65%" :visible="dialogInfo.show" @close="dialogInfo.show = false, dialogInfo.data = {}">
      <template #title>
        <div :style="`opacity: ${Object.keys(dialogInfo.data).length === 0 ? '1' : '0'};`">视频加载中...</div>
      </template>
      <div class="video" v-loading="Object.keys(dialogInfo.data).length === 0">
        <div v-for="item in dialogInfo.data.data" :key="item">
          <div>
            <VideoLine :showElectric="false" :items="false" :camera-code="item.cameraCode ? item.cameraCode : ''">
            </VideoLine>
            <Video :src="item.url"></Video>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
var elem = document.documentElement;

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    /* IE11 */
    document.msExitFullscreen();
  }
}

function fullscreenKeyPressed(event) {
  if (event.keyCode === 27) {
    // ESC key
    closeFullscreen();
  }
}

import { cameraTree, lineDate, records, lineDateStock, messageStatistics, monitorSystem, alarmList } from "@/api/video";
import { monitorDetail } from '@/api/monitor'
import warningDispose from "../../components/warning/warningDispose.vue";
import {
  msgAlarmList,
  baseRailwayManagement,
  baseVehicleVehicleTree,
  baseVehicleVehicleCurrentStream,
} from "@/api/alarmList";
import { statisticsNum, getVehicleList, getCameraList, getVehicleVideo } from "@/api/home";
import Video from "./Video.vue";
import VideoLine from "@/components/videoPlayer/videoLine";
export default {
  name: "Cart",
  computed: {},
  data() {
    return {
      buttonIndex: 1,
      isShowDialog: false,
      detaileMsg: {},
      msgStatisticsData: {},
      alarmListData: [],
      sysMsg: {},
      isWarning: false,
      butType: 1,
      states: true,
      depopover: false,
      depopover1: false,
      lineDir: "",
      startKm: "",
      endKm: "",
      lcKm: "",
      warningId: 0,
      isMap: false,
      selectList: [],
      select: "",
      electricLineVoltage: "",
      codeList: [],
      input2: "",
      selectValue: "",
      timeDate: "",
      countMessage: {},
      VehicleTree: [],
      videoType: 1,
      videoCode: "",
      list: [{}, {}, {}, {}],
      videoIndex: "",
      errorMsgList: [],
      data: [],
      timer: null,
      cameraShow: false,
      dialogInfo: {
        show: false,
        data: {}
      },
      searchInfo: {
        camera: '',
        vehicle: ''
      }
    };
  },
  mounted() {
    this.getMessageStatistics()
    this.getMonitorSystem()
    this.selectAlarmType('1', '')
    cameraTree({
      railwayCode: this.searchText,
    }).then((res) => {
      this.setDisabled(res.data.children, 1);
      this.data = res.data.children;
      this.listClick(1);
    });

    baseRailwayManagement().then((res) => {
      this.selectList = res.data;
    });

    this.alarmList();

    statisticsNum().then((res) => {
      this.countMessage = res.data || {};
    });

    baseVehicleVehicleTree().then((res) => {
      this.setDisabled(res.data.children, 2);
      this.VehicleTree = res.data.children;
    });
    const getMapData = () => {
      getVehicleList().then(res => {
        this.$refs.mapRef.contentWindow.postMessage({ type: 1, data: res.data }, "*");
      })
      getCameraList().then(res => {
        this.$refs.mapRef.contentWindow.postMessage({ type: 2, data: res.data }, "*");
      })
    }
    getMapData()
    this.timer = setInterval(getMapData, 10000);
    window.onmessage = (e) => {
      const { data: { data, name } } = e
      if(!name) return
      this.$set(this.dialogInfo, 'show', true)
      getVehicleVideo(data).then(res => {
        if (res.data?.length > 0) {
          this.dialogInfo = {
            show: true,
            data: {
              name,
              data: res.data
            }
          }
        }

        else this.$message({
          message: "无监控视频",
          type: 'warning'
        })
      })
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  watch: {
    select() {
      if (this.butType === 2) {
        baseVehicleVehicleTree({
          railwayCode: this.select,
          lineDir: this.lineDir,
          mils: this.input2,
        }).then((res) => {
          this.setDisabled(res.data.children, 2);
          this.VehicleTree = JSON.parse(JSON.stringify(res.data.children))
        });
        return;
      }
      cameraTree({
        railwayCode: this.select,
        lineDir: this.lineDir,
        mils: this.input2,
      }).then((res) => {
        this.setDisabled(res.data.children, 1);
        this.data = JSON.parse(JSON.stringify(res.data.children));
        this.$forceUpdate();
      });
    },
    butType() {
      this.$refs.tree.map((item) => {
        item.setCheckedKeys([]);
      });
      this.list = JSON.parse(JSON.stringify([{}, {}, {}, {}]));
    },
  },
  components: {
    warningDispose,
    Video,
    VideoLine
  },
  methods: {
    showCamera() {
      this.$refs.mapRef.contentWindow.postMessage(this.cameraShow, "*");
      this.cameraShow = !this.cameraShow
    },
    toAlarmList(val) {
      this.$router.push({
        name: 'List',
        params: {
          pageNum: 1,
          pageSize: 10,
          source: val.clientId,
          isLock: 2
        }
      })
    },
    toCameraMonitoring(val) {
      this.$router.push({
        name: 'CameraMonitoring',
        params: {
          pageNum: 1,
          pageSize: 10,
          onLine: val
        }
      })
    },
    toVehicleMonitoring(val) {
      this.$router.push({
        name: 'VehicleMonitoring',
        params: {
          pageNum: 1,
          pageSize: 10,
          status: val
        }
      })
    },
    selectAlarmType(type, index) {
      this.buttonIndex = type
      this.getAlarmList(index)
    },
    goMore() {
      this.$router.push({
        path: "/systemMonitoring/monitoringSystemMonitoring",
      });

      // this.$router.push({
      //     name:'List',
      //     params:{
      //         pageNum:1,
      //         pageSize:10,
      //         source:'',
      //         isLock:''
      //     }
      // })
    },
    goAlarmList() {
      this.$router.push({
        path: "/list",
      });
    },
    seeDetail(item) {
      this.$router.push({
        path: "/alarmDetail",
        query: {
          id: item.id,
          cameraCode: item.railwayCode,
          alarmId: item.alarmId,
        },
      });
    },
    showDetaileDialog(val) {
      monitorDetail(val.id).then(res => {
        if (res.code == 200) {
          this.detaileMsg = res.data
          this.isShowDialog = true
        }
      })
      // this.detaileMsg = val
      // this.isShowDialog = true
    },
    getAlarmList(type) {
      alarmList(type).then(res => {
        if (res.code == 200) {
          if (res.data.records.length > 2) {
            res.data.records.length = 2
          }
          this.alarmListData = res.data.records
        }
      })
    },
    goChaxun() {
      if (this.butType === 2) {
        baseVehicleVehicleTree({
          railwayCode: this.select,
          lineDir: this.lineDir,
          mils: this.input2,
        }).then((res) => {
          this.VehicleTree = res.data.children;
        });
        return;
      }
      cameraTree({
        railwayCode: this.select || this.searchText,
        lineDir: this.lineDir,
        mils: this.input2,
      }).then((res) => {
        this.codeList = [];
        this.setDisabled(res.data.children, 1);
        this.data = res.data.children;
        this.listClick(1);
      });
    },
    getParentNodesByCode(nodes, code) {
      for (const node of nodes) {
        if (node.code === code) {
          return [node];
        }
        if (node.children && node.children.length) {
          const parentNodes = this.getParentNodesByCode(node.children, code);
          if (parentNodes) {
            return [node, ...parentNodes];
          }
        }
      }
      return null;
    },
    itemClickMsg(item, index) {
      if (this.videoIndex === index) {
        this.videoIndex = "";
        this.videoCode = "";
        return;
      }
      const nodes =
        this.getParentNodesByCode(
          this.butType === 1 ? this.data : this.VehicleTree,
          item.code
        ) || [];
      nodes.map((item) => {
        item.navItem = true;
      });
      console.log(nodes, this.data, item.code, "nodes");
      console.log(this.data);
      this.videoIndex = index;
      this.videoCode = item.code;
    },
    checkValueLen() {
      return this.codeList.filter((item) => item.node.checked).length;
    },
    checkboxChange({ node, data }) {
      if (this.checkValueLen() > this.videoType && data.checked) {
        data.checked = false;
      }
      this.change(data, data.checked);
    },
    clickCHangeCheck({ data, node }) {
      if (!data.disabled) {
        data.checked = !data.checked;
      }
      this.checkboxChange({ data, node });
      this.$forceUpdate();
    },
    warningSuccess() {
      alert("success");
    },
    isWarningClick(item) {
      this.warningId = item.id;
      this.isWarning = true;
    },
    isWarningClose() {
      this.isWarning = false;
    },
    openFullscreen() {
      var msg = document.querySelector(".msg-t");
      msg.className = msg.className + " easc";
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.webkitRequestFullscreen) {
        /* Safari */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) {
        /* IE11 */
        elem.msRequestFullscreen();
      }

      document.addEventListener("fullscreenchange", function () {
        if (!document.fullscreenElement) {
          msg.classList.remove("easc");
        }
      });
    },
    reloadChange() {
      this.selectValue = this.select;
    },
    reloadKeys() {
      this.codeList.map((item) => {
        if (item.node.checked) {
          item.node.checked = false;
          this.change(item.node, item.node.checked);
        }
      });
      this.select = "";
    },
    listClick(res, is) {
      if (this.butType === 2 && is) {
        return;
      }
      this.videoType = res;
      this.codeList.map((item) => {
        item.node.checked = false;
      });

      this.list = JSON.parse(JSON.stringify([{}, {}, {}, {}]));
      var codeList = this.codeList.filter((item) => item.num === this.butType);
      for (var i = 0; i < this.videoType; i++) {
        codeList[i].node.checked = true;
        this.change(codeList[i].node, true);
      }
    },
    butClick(v) {
      this.butType = v;
      if (v === 2) {
        this.videoType = 1;
      }
      this.select = ''
      this.listClick(this.videoType);
    },
    alarmList() {
      msgAlarmList({
        pageNum: 1,
        pageSize: 1000,
        alarmMile: this.lcKm,
        beginMile: this.startKm,
        endMile: this.endKm,
        lineDir: this.lineDir,
        railwayCode: this.electricLineVoltage,
        beginAlarmTime:
          this.timeDate && this.timeDate.length
            ? this.timeDate[0] + " 00:00:00"
            : "",
        endAlarmTime:
          this.timeDate && this.timeDate.length
            ? this.timeDate[1] + " 00:00:00"
            : "",
        isRelease: this.states ? 2 : 1,
      }).then((res) => {
        this.errorMsgList = res.data.records;
        this.electricLineVoltage = ''
        this.lineDir = ''
        this.lcKm = ''
        this.startKm = ''
        this.endKm = ''
        this.timeDate = '';
        this.depopover = false;
      });
    },
    xqClick(item) {

      sessionStorage.row = JSON.stringify(item)
      this.$router.push({
        path: `/alarmDetail?id=${item.id}&alarmId=${item.alarmId}&cameraCode=${item.cameraCode}`,
      })
    },
    setDisabled(nodes, num) {
      nodes.forEach((node) => {
        node.checked = false;
        node.navItem = true;
        if (node.children && node.children.length > 0) {
          node.disabled = true;
          this.setDisabled(node.children, num);
        } else {
          node.disabled = false;
          this.codeList.push({
            node,
            code: node.code,
            num,
          });
        }
      });
    },
    statesClick(states) {
      this.states = states;
      this.alarmList();
    },
    checkFun({ data, node }) {
      return this.checkValueLen() >= this.videoType && !data.checked;
    },
    change(node, isB) {
      const { code } = node;
      if (isB) {
        node.render = true;
        var _index = null;
        this.list.map((item, index) => {
          if (!item.code && _index === null) {
            _index = index;
          }
        });
        this.list[_index].code = code;
        if (this.butType === 2) {
          baseVehicleVehicleCurrentStream(node.code).then((res) => {
            if (res.data && res.data.currentStream) {
              this.list[_index].src = res.data.currentStream || "";
              this.list[_index].line = res.data.railwayName;
              this.list[_index].lineDir = res.data.lineDir;
              this.list[_index].mileagePosition = res.data.installMile;
            }
          });
        } else {
          records(node.code, true).then((item) => {
            this.list[_index].src = item.data;
          });
        }
        var isFun = this.butType === 2 ? lineDateStock : lineDate;
        isFun(node.code).then((item) => {
          this.list[_index].value = item.data;
          if (item.data) {
            this.list[_index].line = item.data[0];
            this.list[_index].mileagePosition = item.data[1];
            this.list[_index].lineDir = item.data[2] == 1 ? "上行" : "下行";
            this.list[_index].code = item.data[3];
            this.list[_index].isLock = item.data[5];
          }
          this.list = JSON.parse(JSON.stringify(this.list));
        });
      } else {
        node.render = false;
        for (var i = 0; i < this.list.length; i++) {
          if (this.list[i].code === code) {
            this.list[i] = { code: "" };
            break;
          }
        }
        console.log(this.list, code, "this.list");
        this.list = JSON.parse(JSON.stringify(this.list));
      }
    },
    getMessageStatistics() {
      messageStatistics().then(res => {
        if (res.code == 200) {
          this.msgStatisticsData = res.data
        }
      })
    },
    getMonitorSystem() {
      monitorSystem().then(res => {
        if (res.code == 200) {
          if (res.data.length > 3) {
            res.data.length = 3
          }
          this.sysMsg = res.data
        }
      })
    },
    highlighPanel() {
      this.$refs.mapRef.contentWindow.postMessage({
        type: 3,
        data: this.searchInfo
      }, "*");
    }
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  width: 100%;
  height: 100%;

  .content {
    overflow: hidden;
    padding: 20px;
    height: 100%;
    width: 100%;
    display: flex;

    .left-map {
      position: relative;
      float: left;
      flex: 1;
      height: 985px;
      min-width: 600px;
      margin-right: 10px;
      padding: 60px 20px 12px 13px;
      background-color: #fff;
      //background: url('../../assets/地图图片.png'); 
    }

    .right-msg {
      float: right;
      background-color: rgba(0, 0, 0, 0);
      height: 100%;
      width: 459px;
      min-width: 459px;

      .msgStatistics {
        position: relative;
        width: 100%;
        height: 157px;
        background-color: #fff;
        box-shadow: 0px 0px 4px 0px #E4E4E4;
        border-radius: 2px;
        .tjMsg{
          width: 501px;
          height: 180px;
          background: url('../../assets/messageTjbgc.png') no-repeat 50% 50%;
          background-size: 100% 100%;
          position: relative;
          left: -25px;
          top: 8px;
          img{
            width: 1px;
            height: 46px;
            position: relative;
            left: 245px;
            top: 60px;
          }
          .total{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 12px;
            color: #484646;
            line-height: 22px;
            font-style: normal;
            position: relative;
            left: 140px;
            top: 30px;
          }
          .blueDrop{
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background-color: #2250C8;
            position: relative;
            left: 265px;
            top: 17px;
          }
          .redDrop{
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background-color: #FF0000;
            position: relative;
            left: 350px;
            top: -10px;
          }
          .onlineText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #696969;
            line-height: 22px;
            font-style: normal;
            position: relative;
            left: 275px;
            top: 2px;
          }
          .offlineText{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #696969;
            line-height: 22px;
            font-style: normal;
            position: relative;
            left: 360px;
            top: -25px;
          }
          .zs{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 20px;
            color: #2250C8;
            line-height: 22px;
            font-style: normal;
            position: relative;
            left: 135px;
          }
          .onlineTotal{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 20px;
            color: #00974D;
            font-style: normal;
            position: relative;
            left: 235px;
          }
          .offlineTotal{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 20px;
            color: #ff0000;
            font-style: normal;
            position: relative;
            left: 310px;
          }
        }
       
      }

      .systemMsg {
        position: relative;
        margin-top: 12px;
        width: 100%;
        height: 420px;
        background-color: #fff;
        box-shadow: 0px 0px 4px 0px #E4E4E4;
        border-radius: 2px;

        .tongji {
          width: 100%;
          height: 68px;
          padding: 0 6px;

          .total {
            position: relative;
            float: left;
            width: 33.3%;
            height: 100%;
          }

          .online {
            position: relative;
            float: left;
            width: 33.3%;
            height: 100%;
          }

          .offline {
            position: relative;
            float: left;
            width: 33.3%;
            height: 100%;
          }
        }

        .msgItem {
          position: relative;
          width: 424px;
          height: 71px;
          margin: 0 auto 8px;
          background-color: #F8F9FC;
          border-bottom: 1px solid #E9E6E6;

          .blueDrop {
            width: 6px;
            height: 6px;
            background-color: #214FC7;
            border-radius: 6px;
            position: absolute;
            left: 5px;
            top: 17px;
          }

          .sysName {
            padding-left: 14px;
            width: 100%;
            height: 22px;
            line-height: 22px;
            font-size: 14px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.88);
            ;
          }

          .sysState {
            position: relative;
            width: 100%;
            height: 22px;
            line-height: 22px;
            margin-top: 6px;
          }
        }

        .more {
          position: absolute;
          bottom: 8px;
          right: 22px;
          color: #2250C8;
          font-size: 12px;
          cursor: pointer;
        }
      }

      .alarmMsg {
        margin-top: 12px;
        width: 100%;
        height: 384px;
        position: relative;
        background: #fff;
        box-shadow: 0px 0px 4px 0px #E4E4E4;
        border-radius: 2px;

        .switchButton {
          width: 100%;
          height: 23px;
          padding-left: 20px;

          div {
            width: 69px;
            height: 23px;
            line-height: 23px;
            text-align: center;
            color: #696969;
            font-size: 14px;
            font-weight: 500;
            float: left;
            cursor: pointer;
          }

          .all {
            border: 1px solid #E3EBFF;
            border-right: 0.5px solid #E3EBFF;
            border-radius: 23px 0 0 23px;
          }

          .unreleased {
            border: 1px solid #E3EBFF;
            border-left: 0.5px solid #E3EBFF;
            border-right: 0.5px solid #E3EBFF;
          }

          .released {
            border: 1px solid #E3EBFF;
            border-left: 0.5px solid #E3EBFF;
            border-radius: 0 23px 23px 0;
          }
        }

        .alarmMsgItem {
          position: relative;
          width: 424px;
          height: 121px;
          margin: 8px auto 0;
          border-radius: 8px;
          box-shadow: 0px 3px 48px 0px rgba(0, 0, 0, 0.03), 0px 7px 28px 0px rgba(0, 0, 0, 0.05), 0px -1px 2px 0px rgba(0, 0, 0, 0.08);

          img {
            position: absolute;
            left: 16px;
            top: 7px;
          }

          .isLock {
            position: absolute;
            top: 7px;
            right: 20px;
            color: #D81E06;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
          }

          .isLock1 {
            position: absolute;
            top: 7px;
            right: 20px;
            color: green;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
          }

          .railwayName {
            width: 100%;
            height: 22px;
            line-height: 22px;
            padding-left: 57px;
            font-size: 14px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.88);
          }

          .content {
            position: relative;
            width: 280px;
            height: 57px;
            margin-left: 55px;
            padding: 0;
            top: -15px;

            div {
              position: absolute;
              width: 100%;
              height: 19px;
              line-height: 19px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.88);
            }
          }

          .detailsBtn {
            position: absolute;
            right: 6px;
            bottom: 11px;
            width: 72px;
            height: 24px;
            line-height: 24px;
            border-radius: 12px;
            font-size: 12px;
            background-color: #EAF0FE;
            text-align: center;
            color: #2250C8;
            font-weight: 500;
            cursor: pointer;
          }
        }

        .more {
          position: absolute;
          bottom: 8px;
          right: 22px;
          color: #2250C8;
          font-size: 12px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 20px 95px !important;
}

::v-deep .el-button--primary i {
  top: 0 !important;
}

.dialog-footer {
  div {
    display: inline-block;
    width: 80px;
    height: 40px;
    border-radius: 2px;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
  }

  div:hover {
    cursor: pointer;
  }

  .search {
    margin: 0 12px;
    background-color: #2766dd;
    color: #fff;
  }

  .search:hover {
    background-color: #4d85f4;
  }

  .reset {
    color: #333334;
    border: 1px solid #d7d7d7;
  }

  .reset:hover {
    color: #1f9fff;
    border: 1px solid #1f9fff;
  }
}

.cameraBtn {
  cursor: pointer;
  top: 12px;
  right: 21px;
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
}

.video {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, calc(50% - 6px));
  min-height: 300px;
  max-height: 85vh;
  overflow: auto;

  >div {
    width: 100%;
    padding-bottom: 56.5%;
    position: relative;
    // overflow: hidden;

    >div {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }

  // height: 60vh;
}

::v-deep .el-dialog {
  margin-top: 8vh !important;

  .el-dialog__body {
    padding: 20px  95px !important;
  }
}

// 选中后radio文本的颜色
::v-deep .el-radio__input.is-checked+.el-radio__label {
  color: #2766dd;
}

/* radio选中后小圆点的颜色 */
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #2766dd !important;
  border-color: #2766dd !important;
}
</style>