{"remainingRequest":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/src/views/dashboard/index.vue?vue&type=style&index=1&id=106c86ed&lang=scss&scoped=true","dependencies":[{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/src/views/dashboard/index.vue","mtime":1708395041887},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/css-loader/dist/cjs.js","mtime":1708395146948},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1708395147772},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/postcss-loader/src/index.js","mtime":1708395147225},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/sass-loader/dist/cjs.js","mtime":1708395146389},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/cache-loader/dist/cjs.js","mtime":1708395146433},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/index.js","mtime":1708395147382}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCjo6di1kZWVwIC5lbC1kaWFsb2dfX2JvZHkgew0KICBwYWRkaW5nOiAyMHB4IDk1cHggIWltcG9ydGFudDsNCn0NCg0KOjp2LWRlZXAgLmVsLWJ1dHRvbi0tcHJpbWFyeSBpIHsNCiAgdG9wOiAwICFpbXBvcnRhbnQ7DQp9DQoNCi5kaWFsb2ctZm9vdGVyIHsNCiAgZGl2IHsNCiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7DQogICAgd2lkdGg6IDgwcHg7DQogICAgaGVpZ2h0OiA0MHB4Ow0KICAgIGJvcmRlci1yYWRpdXM6IDJweDsNCiAgICBmb250LXNpemU6IDE0cHg7DQogICAgbGluZS1oZWlnaHQ6IDQwcHg7DQogICAgdGV4dC1hbGlnbjogY2VudGVyOw0KICB9DQoNCiAgZGl2OmhvdmVyIHsNCiAgICBjdXJzb3I6IHBvaW50ZXI7DQogIH0NCg0KICAuc2VhcmNoIHsNCiAgICBtYXJnaW46IDAgMTJweDsNCiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjc2NmRkOw0KICAgIGNvbG9yOiAjZmZmOw0KICB9DQoNCiAgLnNlYXJjaDpob3ZlciB7DQogICAgYmFja2dyb3VuZC1jb2xvcjogIzRkODVmNDsNCiAgfQ0KDQogIC5yZXNldCB7DQogICAgY29sb3I6ICMzMzMzMzQ7DQogICAgYm9yZGVyOiAxcHggc29saWQgI2Q3ZDdkNzsNCiAgfQ0KDQogIC5yZXNldDpob3ZlciB7DQogICAgY29sb3I6ICMxZjlmZmY7DQogICAgYm9yZGVyOiAxcHggc29saWQgIzFmOWZmZjsNCiAgfQ0KfQ0KDQouY2FtZXJhQnRuIHsNCiAgY3Vyc29yOiBwb2ludGVyOw0KICB0b3A6IDEycHg7DQogIHJpZ2h0OiAyMXB4Ow0KICBwb3NpdGlvbjogYWJzb2x1dGU7DQogIGRpc3BsYXk6IGZsZXg7DQogIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogIGdhcDogMTJweDsNCn0NCg0KLnZpZGVvIHsNCiAgZGlzcGxheTogZ3JpZDsNCiAgZ2FwOiAxMnB4Ow0KICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdChhdXRvLWZpbGwsIGNhbGMoNTAlIC0gNnB4KSk7DQogIG1pbi1oZWlnaHQ6IDMwMHB4Ow0KICBtYXgtaGVpZ2h0OiA4NXZoOw0KICBvdmVyZmxvdzogYXV0bzsNCg0KICA+ZGl2IHsNCiAgICB3aWR0aDogMTAwJTsNCiAgICBwYWRkaW5nLWJvdHRvbTogNTYuNSU7DQogICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgIC8vIG92ZXJmbG93OiBoaWRkZW47DQoNCiAgICA+ZGl2IHsNCiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgICAgIHdpZHRoOiAxMDAlOw0KICAgICAgaGVpZ2h0OiAxMDAlOw0KICAgICAgdG9wOiAwOw0KICAgICAgbGVmdDogMDsNCiAgICB9DQogIH0NCg0KICAvLyBoZWlnaHQ6IDYwdmg7DQp9DQoNCjo6di1kZWVwIC5lbC1kaWFsb2cgew0KICBtYXJnaW4tdG9wOiA4dmggIWltcG9ydGFudDsNCg0KICAuZWwtZGlhbG9nX19ib2R5IHsNCiAgICBwYWRkaW5nOiA2cHggIWltcG9ydGFudDsNCiAgfQ0KfQ0KDQovLyDpgInkuK3lkI5yYWRpb+aWh+acrOeahOminOiJsg0KOjp2LWRlZXAgLmVsLXJhZGlvX19pbnB1dC5pcy1jaGVja2VkKy5lbC1yYWRpb19fbGFiZWwgew0KICBjb2xvcjogIzI3NjZkZDsNCn0NCg0KLyogcmFkaW/pgInkuK3lkI7lsI/lnIbngrnnmoTpopzoibIgKi8NCjo6di1kZWVwIC5lbC1yYWRpb19faW5wdXQuaXMtY2hlY2tlZCAuZWwtcmFkaW9fX2lubmVyIHsNCiAgYmFja2dyb3VuZDogIzI3NjZkZCAhaW1wb3J0YW50Ow0KICBib3JkZXItY29sb3I6ICMyNzY2ZGQgIWltcG9ydGFudDsNCn0NCg=="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqjCA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/views/dashboard","sourcesContent":["<template>\r\n  <div class=\"dashboard\">\r\n    <div style=\"width: 100%;height: 50px;\"></div>\r\n    <div class=\"content\">\r\n      <div class=\"left-map\">\r\n        <div style=\"width: 3px;height: 16px;background-color: #2250C8;position: absolute;left: 15px;top: 14px;\"></div>\r\n        <span style=\"font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;\">线路实况</span>\r\n        <div class=\"cameraBtn\">\r\n          <!-- <el-select></el-select>\r\n          <el-select></el-select> -->\r\n          <el-input size=\"small\" v-model=\"searchInfo.camera\" placeholder=\"输入摄像机编号\"     clearable></el-input>\r\n          <el-input size=\"small\" v-model=\"searchInfo.vehicle\" placeholder=\"输入机车编号\"     clearable></el-input>\r\n          <el-button @click=\"highlighPanel\" size=\"small\" type=\"primary\">\r\n            <i class=\"el-icon-search\"></i>\r\n          </el-button>\r\n          <img src=\"/map/camera.png\" :style=\"cameraShow ? { opacity: 0.6 } : { opacity: 1 }\" width=\"32\" height=\"32\" alt=\"\"\r\n            @click=\"showCamera\">\r\n        </div>\r\n        <iframe ref=\"mapRef\" style=\"width: 100%;height: 100%;\" src=\"/SH-demo(1).html\" frameborder=\"0\"></iframe>\r\n      </div>\r\n      <div class=\"right-msg\">\r\n        <div class=\"msgStatistics\">\r\n          <div style=\"width: 3px;height: 16px;background-color: #2250C8;position: absolute;left: 15px;top: 14px;\"></div>\r\n          <span style=\"font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;\">设备状态</span>\r\n          <div class=\"left\">\r\n            <img src=\"../../assets/编组201.png\" style=\"position: absolute;right: 25px;top: 29px;\">\r\n            <span style=\"color:#333333;font-size:12px;position: absolute;top: 18px;left: 77px;\">在线</span>\r\n            <span style=\"color:#333333;font-size:12px;position: absolute;bottom: 18px;left: 77px;\">离线</span>\r\n            <span\r\n              style=\"color:#333333;font-size:12px;position: absolute;bottom: 10px;right: 16px;font-weight: 600;\">接入摄像机</span>\r\n            <!-- <span style=\"color: #00974D;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;left: 33px;top: 13px;\">{{ msgStatisticsData.online||0 }}{{ '台' }}</span>\r\n              <span style=\"color: #FF0000;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;left: 33px;bottom: 13px;\">{{ msgStatisticsData.offline ||0}}{{ '台' }}</span>\r\n              <span style=\"color: #2250C8;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;right: 42px;top: 13px;\">{{ msgStatisticsData.countAllCamera||0}}{{ '台' }}</span> -->\r\n            <div class=\"onlineNum\" style=\"width: 40%;height: 50%;text-align: center;\">\r\n              <span\r\n                style=\"color: #00974D;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;\"\r\n                @click=\"toCameraMonitoring('2')\">{{ msgStatisticsData.online || 0 }}{{ '台' }}</span>\r\n            </div>\r\n            <div class=\"offlineNum\" style=\"width: 40%;height: 50%;text-align: center;\">\r\n              <span\r\n                style=\"color: #FF0000;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;\"\r\n                @click=\"toCameraMonitoring('1')\">{{ msgStatisticsData.offline || 0 }}{{ '台' }}</span>\r\n            </div>\r\n            <div class=\"cameraNum\" style=\"position: absolute;right: 5px;top:0;width: 40%;height: 50%;text-align: center;\">\r\n              <span\r\n                style=\"color: #2250C8;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);\">{{\r\n                  msgStatisticsData.countAllCamera || 0 }}{{ '台' }}</span>\r\n            </div>\r\n          </div>\r\n          <div class=\"right\">\r\n            <img src=\"../../assets/编组202.png\" style=\"position: absolute;left: 25px;top: 29px;\">\r\n            <span style=\"color:#333333;font-size:12px;position: absolute;top: 18px;right: 77px;\">在线</span>\r\n            <span style=\"color:#333333;font-size:12px;position: absolute;bottom: 18px;right: 77px;\">离线</span>\r\n            <span\r\n              style=\"color:#333333;font-size:12px;position: absolute;bottom: 10px;left: 24px;font-weight: 600;\">车载终端</span>\r\n            <!-- <span style=\"color: #00974D;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;right: 33px;top: 13px;\">{{ msgStatisticsData.OFFLINETERMINAL ||0}}{{ '台' }}</span>\r\n              <span style=\"color: #FF0000;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;right: 33px;bottom: 13px;\">{{ msgStatisticsData.ONLINETERMINAL ||0}}{{ '台' }}</span>\r\n              <span style=\"color: #2250C8;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;left: 37px;top: 13px;\">{{ msgStatisticsData.COUNTALLTERMINAL ||0}}{{ '台' }}</span> -->\r\n            <div class=\"terminalNum\"\r\n              style=\"position: absolute;left: 5px;top:0;width: 40%;height: 50%;text-align: center;\">\r\n              <span\r\n                style=\"color: #2250C8;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);\">{{\r\n                  msgStatisticsData.COUNTALLTERMINAL || 0 }}{{ '台' }}</span>\r\n            </div>\r\n            <div class=\"onlineNum\" style=\"width: 40%;height: 50%;text-align: center;float: right;\">\r\n              <span\r\n                style=\"color: #00974D;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;\"\r\n                @click=\"toVehicleMonitoring('1')\">{{ msgStatisticsData.OFFLINETERMINAL || 0 }}{{ '台' }}</span>\r\n            </div>\r\n            <div class=\"offlineNum\"\r\n              style=\"width: 40%;height: 50%;text-align: center;position: absolute;right: 0;bottom: 0;\">\r\n              <span\r\n                style=\"color: #FF0000;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;\"\r\n                @click=\"toVehicleMonitoring('2')\">{{ msgStatisticsData.ONLINETERMINAL || 0 }}{{ '台' }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"systemMsg\">\r\n          <div style=\"width: 3px;height: 16px;background-color: #2250C8;position: absolute;left: 15px;top: 14px;\"></div>\r\n          <span style=\"font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;\">接入系统状态</span>\r\n          <div style=\"width: 100%;height: 77px;\"></div>\r\n          <div class=\"tongji\">\r\n            <div class=\"total\">\r\n              <img src=\"../../assets/group4.png\">\r\n              <span\r\n                style=\"position: absolute;font-size: 20px;line-height: 22px;font-weight: 600;color: #696969;left: 61px;\">{{\r\n                  sysMsg.countAllMonitor }}<span style=\"font-size: 16px;font-weight: 400;color: #696969;\">{{ '套'\r\n  }}</span></span>\r\n              <span\r\n                style=\"font-size: 14px;font-weight: 400;color: #484646;line-height: 22px;position: absolute;left: 60px;top: 20px;\">接入监测系统</span>\r\n            </div>\r\n            <div class=\"online\">\r\n              <img src=\"../../assets/group5.png\">\r\n              <span\r\n                style=\"position: absolute;font-size: 20px;line-height: 22px;font-weight: 600;color: #696969;left: 61px;\">{{\r\n                  sysMsg.onlineMonitor }}<span style=\"font-size: 16px;font-weight: 400;color: #696969;\">{{ '套'\r\n  }}</span></span>\r\n              <span\r\n                style=\"font-size: 14px;font-weight: 400;color: #484646;line-height: 22px;position: absolute;left: 60px;top: 20px;\">在线</span>\r\n            </div>\r\n            <div class=\"offline\">\r\n              <img src=\"../../assets/group6.png\">\r\n              <span\r\n                style=\"position: absolute;font-size: 20px;line-height: 22px;font-weight: 600;color: #696969;left: 61px;\">{{\r\n                  sysMsg.offlineMonitor }}<span style=\"font-size: 16px;font-weight: 400;color: #696969;\">{{ '套'\r\n  }}</span></span>\r\n              <span\r\n                style=\"font-size: 14px;font-weight: 400;color: #484646;line-height: 22px;position: absolute;left: 60px;top: 20px;\">离线</span>\r\n            </div>\r\n          </div>\r\n          <div class=\"msgItem\" v-for=\"item in sysMsg.monitorSystemList.slice(0, 3)\">\r\n            <div class=\"blueDrop\"></div>\r\n            <div style=\"width: 100%;height: 10px;\"></div>\r\n            <div class=\"sysName\">{{ item.monitorSystemName }}</div>\r\n            <div class=\"sysState\">\r\n              <span style=\"padding-left: 14px;font-size: 14px;color: rgba(0, 0, 0, 0.88);font-weight: 400;\">状态:</span>\r\n              <span style=\"padding-left: 14px;color: #00974D;font-size: 14px;font-weight: 400;\"\r\n                v-if=\"item.status == 1\">在线</span>\r\n              <span style=\"padding-left: 14px;color: red;font-size: 14px;font-weight: 400;\" v-else>离线</span>\r\n              <span style=\"padding-left: 80px;font-size: 14px;color: rgba(0, 0, 0, 0.88);font-weight: 400;\">未解除报警:</span>\r\n              <span style=\"padding-left: 14px;font-size: 14px;color: blue;font-weight: 400;cursor: pointer;\"\r\n                @click=\"toAlarmList(item)\">{{ item.countAlarm || 0 }}</span>\r\n              <span style=\"position: absolute;right:15px;color: #2250C8;font-size: 12px;font-weight: 500;cursor: pointer;\"\r\n                @click=\"showDetaileDialog(item)\">详情</span>\r\n            </div>\r\n          </div>\r\n          <div class=\"more\" @click=\"goMore\">更多></div>\r\n          <el-dialog width=\"836px\" title=\"详情查看\" :visible.sync=\"isShowDialog\">\r\n            <el-form style=\"padding: 0 10px; margin-left: -20px\" label-width=\"120px\" ref=\"ruleForm\" :model=\"detaileMsg\"\r\n              label-position=\"top\">\r\n              <el-row :gutter=\"24\">\r\n                <el-col :span=\"12\">\r\n                  <el-form-item label=\"监测系统名称:\">\r\n                    <el-input v-model=\"detaileMsg.monitorSystemName\" autocomplete=\"off\" disabled />\r\n                  </el-form-item>\r\n                </el-col>\r\n                <el-col :span=\"12\">\r\n                  <el-form-item label=\"监测系统编码:\">\r\n                    <el-input v-model=\"detaileMsg.clientId\" autocomplete=\"off\" disabled />\r\n                  </el-form-item>\r\n                </el-col>\r\n              </el-row>\r\n              <el-row :gutter=\"24\">\r\n                <el-col :span=\"12\">\r\n                  <el-form-item label=\"正式环境密钥:\">\r\n                    <el-input v-model=\"detaileMsg.clientSecret\" autocomplete=\"off\" disabled />\r\n                  </el-form-item>\r\n                </el-col>\r\n                <el-col :span=\"12\">\r\n                  <el-form-item label=\"测试环境密钥:\">\r\n                    <el-input v-model=\"detaileMsg.testSecret\" autocomplete=\"off\" disabled />\r\n                  </el-form-item>\r\n                </el-col>\r\n              </el-row>\r\n              <el-row :gutter=\"24\">\r\n                <el-col :span=\"12\">\r\n                  <el-form-item label=\"报警信息生成机制:\">\r\n                    <el-input v-model=\"detaileMsg.alarmGenerate\" autocomplete=\"off\" disabled type=\"textarea\"\r\n                      style=\"height:50px\" />\r\n                  </el-form-item>\r\n                </el-col>\r\n                <el-col :span=\"12\">\r\n                  <el-form-item label=\"报警解除机制:\">\r\n                    <el-input v-model=\"detaileMsg.alarmRelease\" autocomplete=\"off\" disabled type=\"textarea\" />\r\n                  </el-form-item>\r\n                </el-col>\r\n              </el-row>\r\n              <el-row :gutter=\"24\">\r\n                <el-col :span=\"12\">\r\n                  <el-form-item label=\"系统简介:\">\r\n                    <el-input v-model=\"detaileMsg.systemIntroduce\" autocomplete=\"off\" disabled type=\"textarea\" />\r\n                  </el-form-item>\r\n                </el-col>\r\n                <el-col :span=\"12\">\r\n                  <el-form-item label=\"报警信息内容:\">\r\n                    <el-input v-model=\"detaileMsg.alarmContent\" autocomplete=\"off\" disabled type=\"textarea\" />\r\n                  </el-form-item>\r\n                </el-col>\r\n              </el-row>\r\n              <el-row :gutter=\"24\">\r\n                <el-col :span=\"24\">\r\n                  <el-form-item label=\"报警对应的处理措施:\">\r\n                    <el-input v-model=\"detaileMsg.treateMeasure\" autocomplete=\"off\" disabled type=\"textarea\" />\r\n                  </el-form-item>\r\n                </el-col>\r\n              </el-row>\r\n            </el-form>\r\n          </el-dialog>\r\n        </div>\r\n        <div class=\"alarmMsg\">\r\n          <div style=\"width: 3px;height: 16px;background-color: #2250C8;position: absolute;left: 15px;top: 14px;\"></div>\r\n          <span style=\"font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;\">报警信息</span>\r\n          <div style=\"width: 100%;height: 53px;\"></div>\r\n          <div class=\"switchButton\">\r\n            <div class=\"all\" @click=\"selectAlarmType('1', '')\"\r\n              :style=\"buttonIndex == 1 ? 'border-color:#C9D5F5;color:#2250C8' : ''\">全部</div>\r\n            <div class=\"unreleased\" @click=\"selectAlarmType('2', 2)\"\r\n              :style=\"buttonIndex == 2 ? 'border-color:#C9D5F5;color:#2250C8' : ''\">未解除</div>\r\n            <div class=\"released\" @click=\"selectAlarmType('3', 1)\"\r\n              :style=\"buttonIndex == 3 ? 'border-color:#C9D5F5;color:#2250C8' : ''\">已解除</div>\r\n          </div>\r\n          <div class=\"alarmMsgItem\" v-for=\"item in alarmListData\">\r\n            <img src=\"../../assets/报警.png\">\r\n            <span class=\"isLock1\" v-if=\"item.isRelease == 1\">已解除</span>\r\n            <span class=\"isLock\" v-if=\"item.isRelease == 2\">未解除</span>\r\n            <div style=\"width: 100%;height: 7px;\"></div>\r\n            <div class=\"railwayName\">{{ item.alarmTypeName }}</div>\r\n            <div class=\"content\">\r\n              <!-- <div style=\"left: 0;top: 0;\">{{ item.lineDirName + ',里程位置' + item.alarmMiles + ',' + item.alarmTypeName }}</div>\r\n                <div style=\"left: 0;top: 19px;\">{{ item.alarmTime }}</div>\r\n                <div style=\"left: 0;top: 38px;\" v-if=\"item.sourceName\">{{ '来源:' + item.sourceName }}</div>\r\n                <div style=\"left: 0;top: 38px;\" v-else>{{ '来源:' }}</div> -->\r\n\r\n              <div style=\"left: 0;top: 19px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;\"\r\n                :title=\"item.sourceName + ' ' + item.alarmTime\" v-if=\"item.sourceName\">{{ item.sourceName }} {{\r\n                  item.alarmTime }}</div>\r\n              <div style=\"left: 0;top: 19px;\" v-else>{{ }} {{ item.alarmTime }}</div>\r\n              <div style=\"left: 0;top: 38px;\" v-if=\"item.alarmLevel == 1\">{{ item.lineDirName + ' ' + item.alarmMiles +\r\n                ',' + item.alarmTypeName + ' ' + '一级报警' }}</div>\r\n              <div style=\"left: 0;top: 38px;\" v-if=\"item.alarmLevel == 2\">{{ item.lineDirName + ' ' + item.alarmMiles +\r\n                ',' + item.alarmTypeName + ' ' + '二级报警' }}</div>\r\n              <div style=\"left: 0;top: 38px;\" v-if=\"item.alarmLevel == 3\">{{ item.lineDirName + ' ' + item.alarmMiles +\r\n                ',' + item.alarmTypeName + ' ' + '三级报警' }}</div>\r\n            </div>\r\n            <div class=\"detailsBtn\" @click=\"seeDetail(item)\">\r\n              查看详情\r\n            </div>\r\n          </div>\r\n          <div class=\"more\" @click=\"goAlarmList\">更多></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <el-dialog width=\"65%\" :visible=\"dialogInfo.show\" @close=\"dialogInfo.show = false, dialogInfo.data = {}\">\r\n      <template #title>\r\n        <div :style=\"`opacity: ${Object.keys(dialogInfo.data).length === 0 ? '1' : '0'};`\">视频加载中...</div>\r\n      </template>\r\n      <div class=\"video\" v-loading=\"Object.keys(dialogInfo.data).length === 0\">\r\n        <div v-for=\"item in dialogInfo.data.data\" :key=\"item\">\r\n          <div>\r\n            <VideoLine :showElectric=\"false\" :items=\"false\" :camera-code=\"item.cameraCode ? item.cameraCode : ''\">\r\n            </VideoLine>\r\n            <Video :src=\"item.url\"></Video>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </el-dialog>\r\n  </div>\r\n</template>\r\n<script>\r\nvar elem = document.documentElement;\r\n\r\nfunction closeFullscreen() {\r\n  if (document.exitFullscreen) {\r\n    document.exitFullscreen();\r\n  } else if (document.webkitExitFullscreen) {\r\n    /* Safari */\r\n    document.webkitExitFullscreen();\r\n  } else if (document.msExitFullscreen) {\r\n    /* IE11 */\r\n    document.msExitFullscreen();\r\n  }\r\n}\r\n\r\nfunction fullscreenKeyPressed(event) {\r\n  if (event.keyCode === 27) {\r\n    // ESC key\r\n    closeFullscreen();\r\n  }\r\n}\r\n\r\nimport { cameraTree, lineDate, records, lineDateStock, messageStatistics, monitorSystem, alarmList } from \"@/api/video\";\r\nimport { monitorDetail } from '@/api/monitor'\r\nimport warningDispose from \"../../components/warning/warningDispose.vue\";\r\nimport {\r\n  msgAlarmList,\r\n  baseRailwayManagement,\r\n  baseVehicleVehicleTree,\r\n  baseVehicleVehicleCurrentStream,\r\n} from \"@/api/alarmList\";\r\nimport { statisticsNum, getVehicleList, getCameraList, getVehicleVideo } from \"@/api/home\";\r\nimport Video from \"./Video.vue\";\r\nimport VideoLine from \"@/components/videoPlayer/videoLine\";\r\nexport default {\r\n  name: \"Cart\",\r\n  computed: {},\r\n  data() {\r\n    return {\r\n      buttonIndex: 1,\r\n      isShowDialog: false,\r\n      detaileMsg: {},\r\n      msgStatisticsData: {},\r\n      alarmListData: [],\r\n      sysMsg: {},\r\n      isWarning: false,\r\n      butType: 1,\r\n      states: true,\r\n      depopover: false,\r\n      depopover1: false,\r\n      lineDir: \"\",\r\n      startKm: \"\",\r\n      endKm: \"\",\r\n      lcKm: \"\",\r\n      warningId: 0,\r\n      isMap: false,\r\n      selectList: [],\r\n      select: \"\",\r\n      electricLineVoltage: \"\",\r\n      codeList: [],\r\n      input2: \"\",\r\n      selectValue: \"\",\r\n      timeDate: \"\",\r\n      countMessage: {},\r\n      VehicleTree: [],\r\n      videoType: 1,\r\n      videoCode: \"\",\r\n      list: [{}, {}, {}, {}],\r\n      videoIndex: \"\",\r\n      errorMsgList: [],\r\n      data: [],\r\n      timer: null,\r\n      cameraShow: false,\r\n      dialogInfo: {\r\n        show: false,\r\n        data: {}\r\n      },\r\n      searchInfo: {\r\n        camera: '',\r\n        vehicle: ''\r\n      }\r\n    };\r\n  },\r\n  mounted() {\r\n    this.getMessageStatistics()\r\n    this.getMonitorSystem()\r\n    this.selectAlarmType('1', '')\r\n    cameraTree({\r\n      railwayCode: this.searchText,\r\n    }).then((res) => {\r\n      this.setDisabled(res.data.children, 1);\r\n      this.data = res.data.children;\r\n      this.listClick(1);\r\n    });\r\n\r\n    baseRailwayManagement().then((res) => {\r\n      this.selectList = res.data;\r\n    });\r\n\r\n    this.alarmList();\r\n\r\n    statisticsNum().then((res) => {\r\n      this.countMessage = res.data || {};\r\n    });\r\n\r\n    baseVehicleVehicleTree().then((res) => {\r\n      this.setDisabled(res.data.children, 2);\r\n      this.VehicleTree = res.data.children;\r\n    });\r\n    const getMapData = () => {\r\n      getVehicleList().then(res => {\r\n        this.$refs.mapRef.contentWindow.postMessage({ type: 1, data: res.data }, \"*\");\r\n      })\r\n      getCameraList().then(res => {\r\n        this.$refs.mapRef.contentWindow.postMessage({ type: 2, data: res.data }, \"*\");\r\n      })\r\n    }\r\n    getMapData()\r\n    this.timer = setInterval(getMapData, 10000);\r\n    window.onmessage = (e) => {\r\n      const { data: { data, name } } = e\r\n      if(!name) return\r\n      this.$set(this.dialogInfo, 'show', true)\r\n      getVehicleVideo(data).then(res => {\r\n        if (res.data?.length > 0) {\r\n          this.dialogInfo = {\r\n            show: true,\r\n            data: {\r\n              name,\r\n              data: res.data\r\n            }\r\n          }\r\n        }\r\n\r\n        else this.$message({\r\n          message: \"无监控视频\",\r\n          type: 'warning'\r\n        })\r\n      })\r\n    }\r\n  },\r\n  beforeDestroy() {\r\n    clearInterval(this.timer)\r\n  },\r\n  watch: {\r\n    select() {\r\n      if (this.butType === 2) {\r\n        baseVehicleVehicleTree({\r\n          railwayCode: this.select,\r\n          lineDir: this.lineDir,\r\n          mils: this.input2,\r\n        }).then((res) => {\r\n          this.setDisabled(res.data.children, 2);\r\n          this.VehicleTree = JSON.parse(JSON.stringify(res.data.children))\r\n        });\r\n        return;\r\n      }\r\n      cameraTree({\r\n        railwayCode: this.select,\r\n        lineDir: this.lineDir,\r\n        mils: this.input2,\r\n      }).then((res) => {\r\n        this.setDisabled(res.data.children, 1);\r\n        this.data = JSON.parse(JSON.stringify(res.data.children));\r\n        this.$forceUpdate();\r\n      });\r\n    },\r\n    butType() {\r\n      this.$refs.tree.map((item) => {\r\n        item.setCheckedKeys([]);\r\n      });\r\n      this.list = JSON.parse(JSON.stringify([{}, {}, {}, {}]));\r\n    },\r\n  },\r\n  components: {\r\n    warningDispose,\r\n    Video,\r\n    VideoLine\r\n  },\r\n  methods: {\r\n    showCamera() {\r\n      this.$refs.mapRef.contentWindow.postMessage(this.cameraShow, \"*\");\r\n      this.cameraShow = !this.cameraShow\r\n    },\r\n    toAlarmList(val) {\r\n      this.$router.push({\r\n        name: 'List',\r\n        params: {\r\n          pageNum: 1,\r\n          pageSize: 10,\r\n          source: val.clientId,\r\n          isLock: 2\r\n        }\r\n      })\r\n    },\r\n    toCameraMonitoring(val) {\r\n      this.$router.push({\r\n        name: 'CameraMonitoring',\r\n        params: {\r\n          pageNum: 1,\r\n          pageSize: 10,\r\n          onLine: val\r\n        }\r\n      })\r\n    },\r\n    toVehicleMonitoring(val) {\r\n      this.$router.push({\r\n        name: 'VehicleMonitoring',\r\n        params: {\r\n          pageNum: 1,\r\n          pageSize: 10,\r\n          status: val\r\n        }\r\n      })\r\n    },\r\n    selectAlarmType(type, index) {\r\n      this.buttonIndex = type\r\n      this.getAlarmList(index)\r\n    },\r\n    goMore() {\r\n      this.$router.push({\r\n        path: \"/systemMonitoring/monitoringSystemMonitoring\",\r\n      });\r\n\r\n      // this.$router.push({\r\n      //     name:'List',\r\n      //     params:{\r\n      //         pageNum:1,\r\n      //         pageSize:10,\r\n      //         source:'',\r\n      //         isLock:''\r\n      //     }\r\n      // })\r\n    },\r\n    goAlarmList() {\r\n      this.$router.push({\r\n        path: \"/list\",\r\n      });\r\n    },\r\n    seeDetail(item) {\r\n      this.$router.push({\r\n        path: \"/alarmDetail\",\r\n        query: {\r\n          id: item.id,\r\n          cameraCode: item.railwayCode,\r\n          alarmId: item.alarmId,\r\n        },\r\n      });\r\n    },\r\n    showDetaileDialog(val) {\r\n      monitorDetail(val.id).then(res => {\r\n        if (res.code == 200) {\r\n          this.detaileMsg = res.data\r\n          this.isShowDialog = true\r\n        }\r\n      })\r\n      // this.detaileMsg = val\r\n      // this.isShowDialog = true\r\n    },\r\n    getAlarmList(type) {\r\n      alarmList(type).then(res => {\r\n        if (res.code == 200) {\r\n          if (res.data.records.length > 2) {\r\n            res.data.records.length = 2\r\n          }\r\n          this.alarmListData = res.data.records\r\n        }\r\n      })\r\n    },\r\n    goChaxun() {\r\n      if (this.butType === 2) {\r\n        baseVehicleVehicleTree({\r\n          railwayCode: this.select,\r\n          lineDir: this.lineDir,\r\n          mils: this.input2,\r\n        }).then((res) => {\r\n          this.VehicleTree = res.data.children;\r\n        });\r\n        return;\r\n      }\r\n      cameraTree({\r\n        railwayCode: this.select || this.searchText,\r\n        lineDir: this.lineDir,\r\n        mils: this.input2,\r\n      }).then((res) => {\r\n        this.codeList = [];\r\n        this.setDisabled(res.data.children, 1);\r\n        this.data = res.data.children;\r\n        this.listClick(1);\r\n      });\r\n    },\r\n    getParentNodesByCode(nodes, code) {\r\n      for (const node of nodes) {\r\n        if (node.code === code) {\r\n          return [node];\r\n        }\r\n        if (node.children && node.children.length) {\r\n          const parentNodes = this.getParentNodesByCode(node.children, code);\r\n          if (parentNodes) {\r\n            return [node, ...parentNodes];\r\n          }\r\n        }\r\n      }\r\n      return null;\r\n    },\r\n    itemClickMsg(item, index) {\r\n      if (this.videoIndex === index) {\r\n        this.videoIndex = \"\";\r\n        this.videoCode = \"\";\r\n        return;\r\n      }\r\n      const nodes =\r\n        this.getParentNodesByCode(\r\n          this.butType === 1 ? this.data : this.VehicleTree,\r\n          item.code\r\n        ) || [];\r\n      nodes.map((item) => {\r\n        item.navItem = true;\r\n      });\r\n      console.log(nodes, this.data, item.code, \"nodes\");\r\n      console.log(this.data);\r\n      this.videoIndex = index;\r\n      this.videoCode = item.code;\r\n    },\r\n    checkValueLen() {\r\n      return this.codeList.filter((item) => item.node.checked).length;\r\n    },\r\n    checkboxChange({ node, data }) {\r\n      if (this.checkValueLen() > this.videoType && data.checked) {\r\n        data.checked = false;\r\n      }\r\n      this.change(data, data.checked);\r\n    },\r\n    clickCHangeCheck({ data, node }) {\r\n      if (!data.disabled) {\r\n        data.checked = !data.checked;\r\n      }\r\n      this.checkboxChange({ data, node });\r\n      this.$forceUpdate();\r\n    },\r\n    warningSuccess() {\r\n      alert(\"success\");\r\n    },\r\n    isWarningClick(item) {\r\n      this.warningId = item.id;\r\n      this.isWarning = true;\r\n    },\r\n    isWarningClose() {\r\n      this.isWarning = false;\r\n    },\r\n    openFullscreen() {\r\n      var msg = document.querySelector(\".msg-t\");\r\n      msg.className = msg.className + \" easc\";\r\n      if (elem.requestFullscreen) {\r\n        elem.requestFullscreen();\r\n      } else if (elem.webkitRequestFullscreen) {\r\n        /* Safari */\r\n        elem.webkitRequestFullscreen();\r\n      } else if (elem.msRequestFullscreen) {\r\n        /* IE11 */\r\n        elem.msRequestFullscreen();\r\n      }\r\n\r\n      document.addEventListener(\"fullscreenchange\", function () {\r\n        if (!document.fullscreenElement) {\r\n          msg.classList.remove(\"easc\");\r\n        }\r\n      });\r\n    },\r\n    reloadChange() {\r\n      this.selectValue = this.select;\r\n    },\r\n    reloadKeys() {\r\n      this.codeList.map((item) => {\r\n        if (item.node.checked) {\r\n          item.node.checked = false;\r\n          this.change(item.node, item.node.checked);\r\n        }\r\n      });\r\n      this.select = \"\";\r\n    },\r\n    listClick(res, is) {\r\n      if (this.butType === 2 && is) {\r\n        return;\r\n      }\r\n      this.videoType = res;\r\n      this.codeList.map((item) => {\r\n        item.node.checked = false;\r\n      });\r\n\r\n      this.list = JSON.parse(JSON.stringify([{}, {}, {}, {}]));\r\n      var codeList = this.codeList.filter((item) => item.num === this.butType);\r\n      for (var i = 0; i < this.videoType; i++) {\r\n        codeList[i].node.checked = true;\r\n        this.change(codeList[i].node, true);\r\n      }\r\n    },\r\n    butClick(v) {\r\n      this.butType = v;\r\n      if (v === 2) {\r\n        this.videoType = 1;\r\n      }\r\n      this.select = ''\r\n      this.listClick(this.videoType);\r\n    },\r\n    alarmList() {\r\n      msgAlarmList({\r\n        pageNum: 1,\r\n        pageSize: 1000,\r\n        alarmMile: this.lcKm,\r\n        beginMile: this.startKm,\r\n        endMile: this.endKm,\r\n        lineDir: this.lineDir,\r\n        railwayCode: this.electricLineVoltage,\r\n        beginAlarmTime:\r\n          this.timeDate && this.timeDate.length\r\n            ? this.timeDate[0] + \" 00:00:00\"\r\n            : \"\",\r\n        endAlarmTime:\r\n          this.timeDate && this.timeDate.length\r\n            ? this.timeDate[1] + \" 00:00:00\"\r\n            : \"\",\r\n        isRelease: this.states ? 2 : 1,\r\n      }).then((res) => {\r\n        this.errorMsgList = res.data.records;\r\n        this.electricLineVoltage = ''\r\n        this.lineDir = ''\r\n        this.lcKm = ''\r\n        this.startKm = ''\r\n        this.endKm = ''\r\n        this.timeDate = '';\r\n        this.depopover = false;\r\n      });\r\n    },\r\n    xqClick(item) {\r\n\r\n      sessionStorage.row = JSON.stringify(item)\r\n      this.$router.push({\r\n        path: `/alarmDetail?id=${item.id}&alarmId=${item.alarmId}&cameraCode=${item.cameraCode}`,\r\n      })\r\n    },\r\n    setDisabled(nodes, num) {\r\n      nodes.forEach((node) => {\r\n        node.checked = false;\r\n        node.navItem = true;\r\n        if (node.children && node.children.length > 0) {\r\n          node.disabled = true;\r\n          this.setDisabled(node.children, num);\r\n        } else {\r\n          node.disabled = false;\r\n          this.codeList.push({\r\n            node,\r\n            code: node.code,\r\n            num,\r\n          });\r\n        }\r\n      });\r\n    },\r\n    statesClick(states) {\r\n      this.states = states;\r\n      this.alarmList();\r\n    },\r\n    checkFun({ data, node }) {\r\n      return this.checkValueLen() >= this.videoType && !data.checked;\r\n    },\r\n    change(node, isB) {\r\n      const { code } = node;\r\n      if (isB) {\r\n        node.render = true;\r\n        var _index = null;\r\n        this.list.map((item, index) => {\r\n          if (!item.code && _index === null) {\r\n            _index = index;\r\n          }\r\n        });\r\n        this.list[_index].code = code;\r\n        if (this.butType === 2) {\r\n          baseVehicleVehicleCurrentStream(node.code).then((res) => {\r\n            if (res.data && res.data.currentStream) {\r\n              this.list[_index].src = res.data.currentStream || \"\";\r\n              this.list[_index].line = res.data.railwayName;\r\n              this.list[_index].lineDir = res.data.lineDir;\r\n              this.list[_index].mileagePosition = res.data.installMile;\r\n            }\r\n          });\r\n        } else {\r\n          records(node.code, true).then((item) => {\r\n            this.list[_index].src = item.data;\r\n          });\r\n        }\r\n        var isFun = this.butType === 2 ? lineDateStock : lineDate;\r\n        isFun(node.code).then((item) => {\r\n          this.list[_index].value = item.data;\r\n          if (item.data) {\r\n            this.list[_index].line = item.data[0];\r\n            this.list[_index].mileagePosition = item.data[1];\r\n            this.list[_index].lineDir = item.data[2] == 1 ? \"上行\" : \"下行\";\r\n            this.list[_index].code = item.data[3];\r\n            this.list[_index].isLock = item.data[5];\r\n          }\r\n          this.list = JSON.parse(JSON.stringify(this.list));\r\n        });\r\n      } else {\r\n        node.render = false;\r\n        for (var i = 0; i < this.list.length; i++) {\r\n          if (this.list[i].code === code) {\r\n            this.list[i] = { code: \"\" };\r\n            break;\r\n          }\r\n        }\r\n        console.log(this.list, code, \"this.list\");\r\n        this.list = JSON.parse(JSON.stringify(this.list));\r\n      }\r\n    },\r\n    getMessageStatistics() {\r\n      messageStatistics().then(res => {\r\n        if (res.code == 200) {\r\n          this.msgStatisticsData = res.data\r\n        }\r\n      })\r\n    },\r\n    getMonitorSystem() {\r\n      monitorSystem().then(res => {\r\n        if (res.code == 200) {\r\n          if (res.data.length > 3) {\r\n            res.data.length = 3\r\n          }\r\n          this.sysMsg = res.data\r\n        }\r\n      })\r\n    },\r\n    highlighPanel() {\r\n      this.$refs.mapRef.contentWindow.postMessage({\r\n        type: 3,\r\n        data: this.searchInfo\r\n      }, \"*\");\r\n    }\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.dashboard {\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  .content {\r\n    overflow: hidden;\r\n    padding: 20px;\r\n    height: 100%;\r\n    width: 100%;\r\n    display: flex;\r\n\r\n    .left-map {\r\n      position: relative;\r\n      float: left;\r\n      flex: 1;\r\n      height: 985px;\r\n      min-width: 600px;\r\n      margin-right: 10px;\r\n      padding: 60px 20px 12px 13px;\r\n      background-color: #fff;\r\n      //background: url('../../assets/地图图片.png'); \r\n    }\r\n\r\n    .right-msg {\r\n      float: right;\r\n      background-color: rgba(0, 0, 0, 0);\r\n      height: 100%;\r\n      width: 459px;\r\n      min-width: 459px;\r\n\r\n      .msgStatistics {\r\n        position: relative;\r\n        width: 100%;\r\n        height: 157px;\r\n        background-color: #fff;\r\n        box-shadow: 0px 0px 4px 0px #E4E4E4;\r\n        border-radius: 2px;\r\n\r\n        .left {\r\n          position: relative;\r\n          background: url('../../assets/编组24.png') no-repeat 50% 50%;\r\n          background-size: 100% 100%;\r\n          width: 205px;\r\n          height: 103px;\r\n          float: left;\r\n          margin-top: 47px;\r\n          margin-left: 20px;\r\n        }\r\n\r\n        .right {\r\n          position: relative;\r\n          background: url('../../assets/编组25.png') no-repeat 50% 50%;\r\n          background-size: 100% 100%;\r\n          width: 205px;\r\n          height: 103px;\r\n          float: right;\r\n          margin-top: 47px;\r\n          margin-right: 20px;\r\n        }\r\n      }\r\n\r\n      .systemMsg {\r\n        position: relative;\r\n        margin-top: 12px;\r\n        width: 100%;\r\n        height: 420px;\r\n        background-color: #fff;\r\n        box-shadow: 0px 0px 4px 0px #E4E4E4;\r\n        border-radius: 2px;\r\n\r\n        .tongji {\r\n          width: 100%;\r\n          height: 68px;\r\n          padding: 0 6px;\r\n\r\n          .total {\r\n            position: relative;\r\n            float: left;\r\n            width: 33.3%;\r\n            height: 100%;\r\n          }\r\n\r\n          .online {\r\n            position: relative;\r\n            float: left;\r\n            width: 33.3%;\r\n            height: 100%;\r\n          }\r\n\r\n          .offline {\r\n            position: relative;\r\n            float: left;\r\n            width: 33.3%;\r\n            height: 100%;\r\n          }\r\n        }\r\n\r\n        .msgItem {\r\n          position: relative;\r\n          width: 424px;\r\n          height: 71px;\r\n          margin: 0 auto 8px;\r\n          background-color: #F8F9FC;\r\n          border-bottom: 1px solid #E9E6E6;\r\n\r\n          .blueDrop {\r\n            width: 6px;\r\n            height: 6px;\r\n            background-color: #214FC7;\r\n            border-radius: 6px;\r\n            position: absolute;\r\n            left: 5px;\r\n            top: 17px;\r\n          }\r\n\r\n          .sysName {\r\n            padding-left: 14px;\r\n            width: 100%;\r\n            height: 22px;\r\n            line-height: 22px;\r\n            font-size: 14px;\r\n            font-weight: 600;\r\n            color: rgba(0, 0, 0, 0.88);\r\n            ;\r\n          }\r\n\r\n          .sysState {\r\n            position: relative;\r\n            width: 100%;\r\n            height: 22px;\r\n            line-height: 22px;\r\n            margin-top: 6px;\r\n          }\r\n        }\r\n\r\n        .more {\r\n          position: absolute;\r\n          bottom: 8px;\r\n          right: 22px;\r\n          color: #2250C8;\r\n          font-size: 12px;\r\n          cursor: pointer;\r\n        }\r\n      }\r\n\r\n      .alarmMsg {\r\n        margin-top: 12px;\r\n        width: 100%;\r\n        height: 384px;\r\n        position: relative;\r\n        background: #fff;\r\n        box-shadow: 0px 0px 4px 0px #E4E4E4;\r\n        border-radius: 2px;\r\n\r\n        .switchButton {\r\n          width: 100%;\r\n          height: 23px;\r\n          padding-left: 20px;\r\n\r\n          div {\r\n            width: 69px;\r\n            height: 23px;\r\n            line-height: 23px;\r\n            text-align: center;\r\n            color: #696969;\r\n            font-size: 14px;\r\n            font-weight: 500;\r\n            float: left;\r\n            cursor: pointer;\r\n          }\r\n\r\n          .all {\r\n            border: 1px solid #E3EBFF;\r\n            border-right: 0.5px solid #E3EBFF;\r\n            border-radius: 23px 0 0 23px;\r\n          }\r\n\r\n          .unreleased {\r\n            border: 1px solid #E3EBFF;\r\n            border-left: 0.5px solid #E3EBFF;\r\n            border-right: 0.5px solid #E3EBFF;\r\n          }\r\n\r\n          .released {\r\n            border: 1px solid #E3EBFF;\r\n            border-left: 0.5px solid #E3EBFF;\r\n            border-radius: 0 23px 23px 0;\r\n          }\r\n        }\r\n\r\n        .alarmMsgItem {\r\n          position: relative;\r\n          width: 424px;\r\n          height: 121px;\r\n          margin: 8px auto 0;\r\n          border-radius: 8px;\r\n          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);\r\n\r\n          img {\r\n            position: absolute;\r\n            left: 16px;\r\n            top: 7px;\r\n          }\r\n\r\n          .isLock {\r\n            position: absolute;\r\n            top: 7px;\r\n            right: 20px;\r\n            color: #D81E06;\r\n            font-size: 14px;\r\n            font-weight: 500;\r\n            line-height: 20px;\r\n          }\r\n\r\n          .isLock1 {\r\n            position: absolute;\r\n            top: 7px;\r\n            right: 20px;\r\n            color: green;\r\n            font-size: 14px;\r\n            font-weight: 500;\r\n            line-height: 20px;\r\n          }\r\n\r\n          .railwayName {\r\n            width: 100%;\r\n            height: 22px;\r\n            line-height: 22px;\r\n            padding-left: 57px;\r\n            font-size: 14px;\r\n            font-family: PingFangSC-Semibold, PingFang SC;\r\n            font-weight: 600;\r\n            color: rgba(0, 0, 0, 0.88);\r\n          }\r\n\r\n          .content {\r\n            position: relative;\r\n            width: 280px;\r\n            height: 57px;\r\n            margin-left: 55px;\r\n            padding: 0;\r\n            top: -15px;\r\n\r\n            div {\r\n              position: absolute;\r\n              width: 100%;\r\n              height: 19px;\r\n              line-height: 19px;\r\n              font-size: 14px;\r\n              font-family: PingFangSC-Regular, PingFang SC;\r\n              font-weight: 400;\r\n              color: rgba(0, 0, 0, 0.88);\r\n            }\r\n          }\r\n\r\n          .detailsBtn {\r\n            position: absolute;\r\n            right: 6px;\r\n            bottom: 11px;\r\n            width: 72px;\r\n            height: 24px;\r\n            line-height: 24px;\r\n            border-radius: 12px;\r\n            font-size: 12px;\r\n            background-color: #EAF0FE;\r\n            text-align: center;\r\n            color: #2250C8;\r\n            font-weight: 500;\r\n            cursor: pointer;\r\n          }\r\n        }\r\n\r\n        .more {\r\n          position: absolute;\r\n          bottom: 8px;\r\n          right: 22px;\r\n          color: #2250C8;\r\n          font-size: 12px;\r\n          cursor: pointer;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n\r\n<style lang=\"scss\" scoped>\r\n::v-deep .el-dialog__body {\r\n  padding: 20px 95px !important;\r\n}\r\n\r\n::v-deep .el-button--primary i {\r\n  top: 0 !important;\r\n}\r\n\r\n.dialog-footer {\r\n  div {\r\n    display: inline-block;\r\n    width: 80px;\r\n    height: 40px;\r\n    border-radius: 2px;\r\n    font-size: 14px;\r\n    line-height: 40px;\r\n    text-align: center;\r\n  }\r\n\r\n  div:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  .search {\r\n    margin: 0 12px;\r\n    background-color: #2766dd;\r\n    color: #fff;\r\n  }\r\n\r\n  .search:hover {\r\n    background-color: #4d85f4;\r\n  }\r\n\r\n  .reset {\r\n    color: #333334;\r\n    border: 1px solid #d7d7d7;\r\n  }\r\n\r\n  .reset:hover {\r\n    color: #1f9fff;\r\n    border: 1px solid #1f9fff;\r\n  }\r\n}\r\n\r\n.cameraBtn {\r\n  cursor: pointer;\r\n  top: 12px;\r\n  right: 21px;\r\n  position: absolute;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n}\r\n\r\n.video {\r\n  display: grid;\r\n  gap: 12px;\r\n  grid-template-columns: repeat(auto-fill, calc(50% - 6px));\r\n  min-height: 300px;\r\n  max-height: 85vh;\r\n  overflow: auto;\r\n\r\n  >div {\r\n    width: 100%;\r\n    padding-bottom: 56.5%;\r\n    position: relative;\r\n    // overflow: hidden;\r\n\r\n    >div {\r\n      position: absolute;\r\n      width: 100%;\r\n      height: 100%;\r\n      top: 0;\r\n      left: 0;\r\n    }\r\n  }\r\n\r\n  // height: 60vh;\r\n}\r\n\r\n::v-deep .el-dialog {\r\n  margin-top: 8vh !important;\r\n\r\n  .el-dialog__body {\r\n    padding: 6px !important;\r\n  }\r\n}\r\n\r\n// 选中后radio文本的颜色\r\n::v-deep .el-radio__input.is-checked+.el-radio__label {\r\n  color: #2766dd;\r\n}\r\n\r\n/* radio选中后小圆点的颜色 */\r\n::v-deep .el-radio__input.is-checked .el-radio__inner {\r\n  background: #2766dd !important;\r\n  border-color: #2766dd !important;\r\n}\r\n</style>"]}]}