55298b35fc7c286dd7575d10316bd5bc.json 19 KB

1
  1. {"remainingRequest":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/src/components/videoPlayer/cameraInfoMessage.vue?vue&type=script&lang=js","dependencies":[{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/src/components/videoPlayer/cameraInfoMessage.vue","mtime":1708395041800},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/cache-loader/dist/cjs.js","mtime":1708395146433},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/babel-loader/lib/index.js","mtime":1708395147257},{"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:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCB7IHZpZGVvSGlzdG9yaWNhbEFsYXJtLCBnZXRBbGFybSB9IGZyb20gIkAvYXBpL3ZpZGVvIjsKCi8vIHBhbHlBbmRQbGF5YmFjawovLyDmkq3mlL7kuI7lm57mlL4KZXhwb3J0IGRlZmF1bHQgewogIG5hbWU6ICJQYWx5QW5kUGxheWJhY2siLAogIHByb3BzOiB7CiAgICBwYWdlVHlwZTogewogICAgICAvLyDpobXpnaLnsbvlnosgdmlkZW9TZXJ2aWNlIOinhumikeacjeWKoSBhbGFybURldGFpbCDmiqXorabor6bmg4UKICAgICAgdHlwZTogU3RyaW5nLAogICAgICBkZWZhdWx0KCkgewogICAgICAgIHJldHVybiAiIjsKICAgICAgfSwKICAgIH0sCiAgICBjYW1lcmFDb2RlOiB7CiAgICAgIC8vIOaRhOWDj+acumNvZGUKICAgICAgdHlwZTogU3RyaW5nLAogICAgICBkZWZhdWx0KCkgewogICAgICAgIHJldHVybiAiIjsKICAgICAgfSwKICAgIH0sCiAgICBpc1Nob3c6IHsKICAgICAgdHlwZTogQm9vbGVhbiwKICAgIH0sCiAgICBjYW1lcmFJbmZvOiB7CiAgICAgIHR5cGU6IE9iamVjdCwKICAgICAgZGVmYXVsdCgpIHsKICAgICAgICByZXR1cm4gewogICAgICAgICAgY2FtZXJhQ29kZTogIiIsCiAgICAgICAgICBhbGFybVR5cGU6ICIiLAogICAgICAgICAgbGluZURpcjogIiIsCiAgICAgICAgICBkZXB0SWQ6ICIiLAogICAgICAgICAgYWxhcm1NaWxlOiAiIiwKICAgICAgICAgIGJlZ2luTWlsZTogIiIsCiAgICAgICAgICBpbnN0YWxsTG9uZ2l0dWRlOiAiIiwKICAgICAgICAgIHJlbGVhc2VkVGltZTogIiIsCiAgICAgICAgfTsKICAgICAgfSwKICAgIH0sCiAgICBoaXN0b3JpY2FsQWxhcm06IHsKICAgICAgdHlwZTogQXJyYXksCiAgICAgIGRlZmF1bHQoKSB7CiAgICAgICAgcmV0dXJuIFtdOwogICAgICB9LAogICAgfSwKICB9LAogIHdhdGNoOiB7CiAgICBjYW1lcmFDb2RlKCkgewogICAgICB0aGlzLmdldEluZm8oImNhbWVyYUNvZGUiKTsKICAgIH0sCiAgICBjYW1lcmFJbmZvKG5ld1ZhbCkgewogICAgICB0aGlzLmNhbWVyYUluZm9fID0gbmV3VmFsOwogICAgfSwKICAgIGhpc3RvcmljYWxBbGFybShuZXdWYWwpIHsKICAgICAgdGhpcy5oaXN0b3JpY2FsQWxhcm1fID0gbmV3VmFsOwogICAgICB0aGlzLmhpc3RvcmljYWxBbGFybUNoYW5nZSgpOwogICAgfSwKICB9LAogIGRhdGEoKSB7CiAgICByZXR1cm4gewogICAgICBhY3RpdmVOYW1lOiAxLAogICAgICBjYW1lcmFJbmZvXzogewogICAgICAgIGNhbWVyYUNvZGU6ICIiLAogICAgICAgIGFsYXJtVHlwZTogIiIsCiAgICAgICAgbGluZURpcjogIiIsCiAgICAgICAgZGVwdElkOiAiIiwKICAgICAgICBhbGFybU1pbGU6ICIiLAogICAgICAgIGJlZ2luTWlsZTogIiIsCiAgICAgICAgaW5zdGFsbExvbmdpdHVkZTogIiIsCiAgICAgICAgcmVsZWFzZWRUaW1lOiAiIiwKICAgICAgfSwgLy8g5pGE5YOP5py65L+h5oGvCiAgICAgIGhpc3RvcmljYWxBbGFybV86IFtdLCAvLyDljoblj7Lkv6Hmga8KICAgICAgaXNmYWlsdXJlVG9BbGFybTogZmFsc2UsCiAgICB9OwogIH0sCiAgbW91bnRlZCgpIHsKICAgIHRoaXMuY2FtZXJhSW5mb18gPSB0aGlzLmNhbWVyYUluZm87CiAgICB0aGlzLmhpc3RvcmljYWxBbGFybV8gPSB0aGlzLmhpc3RvcmljYWxBbGFybTsKICAgIHRoaXMuaGlzdG9yaWNhbEFsYXJtQ2hhbmdlKCk7CiAgICB0aGlzLmdldEluZm8oIm1vdW50ZWQiKTsKCiAgICBjb25zb2xlLmxvZygicGFnZVR5cGUiLCB0aGlzLnBhZ2VUeXBlKTsKICB9LAogIG1ldGhvZHM6IHsKICAgIGdldEluZm8oc291cmNlKSB7CiAgICAgIGNvbnNvbGUubG9nKCLor7fmsYLkv6Hmga8iLCBzb3VyY2UsIHRoaXMuY2FtZXJhQ29kZSwgIXRoaXMuY2FtZXJhQ29kZSk7CiAgICAgIGlmICghdGhpcy5jYW1lcmFDb2RlKSByZXR1cm4gZmFsc2U7CgogICAgICBpZiAodGhpcy5jYW1lcmFDb2RlKSB7CiAgICAgICAgLy8g6I635Y+W5pGE5YOP5py65L+h5oGvCiAgICAgICAgZ2V0QWxhcm0odGhpcy5jYW1lcmFDb2RlKS50aGVuKChyZXMpID0+IHsKICAgICAgICAgIGNvbnNvbGUubG9nKCLpgJrov4djb2Rl6I635Y+W55So5oi35L+h5oGvIiwgcmVzKTsKCiAgICAgICAgICBpZiAocmVzLmNvZGUgPT0gMjAwICYmIHJlcy5kYXRhIGluc3RhbmNlb2YgT2JqZWN0KSB7CiAgICAgICAgICAgIHRoaXMuY2FtZXJhSW5mb18gPSByZXMuZGF0YTsKICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgIHRoaXMuY2FtZXJhSW5mb18gPSB7CiAgICAgICAgICAgICAgY2FtZXJhQ29kZTogIiIsCiAgICAgICAgICAgICAgYWxhcm1UeXBlOiAiIiwKICAgICAgICAgICAgICBsaW5lRGlyOiAiIiwKICAgICAgICAgICAgICBkZXB0SWQ6ICIiLAogICAgICAgICAgICAgIGFsYXJtTWlsZTogIiIsCiAgICAgICAgICAgICAgYmVnaW5NaWxlOiAiIiwKICAgICAgICAgICAgICBpbnN0YWxsTG9uZ2l0dWRlOiAiIiwKICAgICAgICAgICAgICByZWxlYXNlZFRpbWU6ICIiLAogICAgICAgICAgICB9OwogICAgICAgICAgfQoKICAgICAgICAgIHRoaXMuJGVtaXQoImdldENhbWVyYUluZm8iLCB0aGlzLmNhbWVyYUluZm9fKTsKICAgICAgICB9KTsKCiAgICAgICAgLy8g6I635Y+W5Y6G5Y+y5L+h5oGvCiAgICAgICAgdmlkZW9IaXN0b3JpY2FsQWxhcm0odGhpcy5jYW1lcmFDb2RlKS50aGVuKChyZXMpID0+IHsKICAgICAgICAgIGlmIChyZXMuY29kZSA9PSAyMDApIHsKICAgICAgICAgICAgdGhpcy5oaXN0b3JpY2FsQWxhcm1fID0gcmVzLmRhdGE7CiAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICB0aGlzLmhpc3RvcmljYWxBbGFybV8gPSBbXTsKICAgICAgICAgICAgdGhpcy4kbWVzc2FnZS5lcnJvcihyZXMubXNnKTsKICAgICAgICAgIH0KCiAgICAgICAgICB0aGlzLmhpc3RvcmljYWxBbGFybUNoYW5nZSgpOwogICAgICAgIH0pOwogICAgICB9CiAgICB9LAogICAgaGlzdG9yaWNhbEFsYXJtQ2hhbmdlKCkgewogICAgICB0aGlzLmlzZmFpbHVyZVRvQWxhcm0gPSBmYWxzZTsKICAgICAgdGhpcy5oaXN0b3JpY2FsQWxhcm1fLmZvckVhY2goKGVsZW1lbnQpID0+IHsKICAgICAgICBpZiAoZWxlbWVudC5pc0xvY2sgPT0gMikgewogICAgICAgICAgdGhpcy5pc2ZhaWx1cmVUb0FsYXJtID0gdHJ1ZTsKICAgICAgICB9CiAgICAgIH0pOwogICAgfSwKICAgIHRvRGV0YWlscyhpbmZvKSB7CiAgICAgIHRoaXMuJHJvdXRlci5wdXNoKHsKICAgICAgICBwYXRoOiAiL2FsYXJtRGV0YWlsIiwKICAgICAgICBxdWVyeTogewogICAgICAgICAgaWQ6IGluZm8uaWQsCiAgICAgICAgICBjYW1lcmFDb2RlOiBpbmZvLmNhbWVyYUNvZGUsCiAgICAgICAgICBhbGFybUlkOiBpbmZvLmFsYXJtSWQsCiAgICAgICAgfSwKICAgICAgfSk7CiAgICB9LAogIH0sCn07Cg=="},{"version":3,"sources":["cameraInfoMessage.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+KA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"cameraInfoMessage.vue","sourceRoot":"src/components/videoPlayer","sourcesContent":["<template>\n <el-tabs\n class=\"cameraInfoMessage\"\n v-model=\"activeName\"\n :class=\"\n 'actionCameraln' +\n activeName +\n ' ' +\n pageType +\n '-message ' +\n (isfailureToAlarm ? 'isfailureToAlarm' : '')\n \"\n >\n <el-tab-pane label=\"基础信息\" :name=\"1\">\n <div style=\"line-height: 1.8em; padding: 0px 10px\">\n <div style=\"display: flex; justify-content: space-between\">\n <!-- <span class=\"headline\">线路:</span -->\n <div>{{ cameraInfo_.railwayName }}</div>\n </div>\n <div style=\"display: flex\">\n <div class=\"headline\">报警类型:</div>\n <div div class=\"text\" style=\"color: red\">\n {{\n cameraInfo_.alarmType == 1\n ? \"泥石流\"\n : cameraInfo_.alarmType == 2\n ? \"异物侵限\"\n : \"断轨监测\"\n }}\n </div>\n </div>\n <div style=\"display: flex\">\n <div class=\"headline\">行别:</div>\n <div class=\"text\">\n {{ cameraInfo_.lineDir == 1 ? \"上行\" : \"\" }}\n {{ cameraInfo_.lineDir == 2 ? \"下行\" : \"\" }}\n </div>\n </div>\n <!-- <div style=\"display: flex\">\n <div class=\"headline\">所属工务段:</div>\n <div class=\"text\">{{ cameraInfo_.deptName }}</div>\n </div> -->\n <div style=\"display: flex\">\n <div class=\"headline\">里程位置:</div>\n <div class=\"text\">{{ cameraInfo_.alarmMile }}</div>\n </div>\n <!-- <div style=\"display: flex\" v-if=\"pageType == 'videoService'\">\n <div class=\"headline\">监控里程范围:</div>\n <div class=\"text\">{{ cameraInfo_.beginMile }}</div>\n </div>\n <div style=\"display: flex\" v-if=\"pageType == 'videoService'\">\n <div class=\"headline\">相机通道:</div>\n <div class=\"text\">{{ cameraInfo_.channerl }}</div>\n </div> -->\n <!-- <div style=\"display: flex\" v-if=\"pageType == 'videoService'\">\n <div class=\"headline\">经纬度:</div>\n <div class=\"text\">{{ cameraInfo_.installLongitude }}</div>\n </div> -->\n <template v-if=\"pageType != 'videoService'\">\n \n <div style=\"display: flex; max-height: 200px\">\n <div class=\"headline\">报警内容:</div>\n <div class=\"text\">{{ cameraInfo_.content }}</div>\n </div>\n <div style=\"display: flex; max-height: 200px\">\n <div class=\"headline\">报警级别:</div>\n <div class=\"text\" v-if=\"cameraInfo_.alarmLevel == 1\">一级报警</div> \n <div class=\"text\" v-if=\"cameraInfo_.alarmLevel == 2\">二级报警</div> \n <div class=\"text\" v-if=\"cameraInfo_.alarmLevel == 3\">三级报警</div> \n </div>\n <div style=\"display: flex; max-height: 200px\">\n <div class=\"headline\">来源:</div>\n <div class=\"text\">{{ cameraInfo_.sourceName }}</div>\n </div>\n <div style=\"display: flex\">\n <div class=\"headline\">\n 报警属性:\n <span style=\"color: #787878; font-size: 14px\">{{\n cameraInfo_.alarmAttrName\n }}</span>\n </div>\n </div>\n <div style=\"display: flex\">\n <div class=\"headline\">状态:</div>\n <div\n class=\"text\"\n :style=\"{ color: cameraInfo_.isRelease == 2 ? 'red' : '#09BB07' }\"\n >\n {{ cameraInfo_.isRelease == 1 ? \"已解除\" : \"\" }}\n {{ cameraInfo_.isRelease == 2 ? \"未解除\" : \"\" }}\n </div>\n </div>\n <template v-if=\"cameraInfo_.isRelease == 1\">\n <!-- <div style=\"display: flex\">\n <div class=\"headline\">解除人:</div>\n <div class=\"text\">{{ cameraInfo_.releasedByName }}</div>\n </div> -->\n <div style=\"display: flex\">\n <div class=\"headline\">解除原因:</div>\n <div class=\"text\">{{ cameraInfo_.releaseContent }}</div>\n </div>\n <div style=\"display: flex\">\n <div class=\"headline\">解除时间:</div>\n <div class=\"text\">{{ cameraInfo_.releasedTime }}</div>\n </div>\n\n <!-- <div style=\"display: flex\">\n <div class=\"headline\">\n 解除描述:\n <span class=\"text\">{{ cameraInfo_.releasedReason }}</span>\n </div>\n <div class=\"text\"></div>\n </div> -->\n </template>\n </template>\n </div>\n </el-tab-pane>\n <el-tab-pane\n :label=\"pageType == 'videoService' ? '历史报警信息' : '本次报警次数信息'\"\n :name=\"2\"\n style=\"height: 100%\"\n >\n <div style=\"padding: 0px 10px; height: 100%\">\n <div v-if=\"historicalAlarm_.length <= 0\" class=\"list-empty\">\n 无报警数据\n </div>\n\n <div v-else>\n <div style=\"color: #b9b9b9; font-size: 12px\">\n (以下展示为:当前相机下同一事件报警的次数)\n </div>\n <el-timeline\n style=\"padding-left: 0px; margin-top: 30px; font-size: 13px\"\n >\n <el-timeline-item\n v-for=\"(activity, index) in historicalAlarm_\"\n :key=\"index\"\n :color=\"activity.isLock == 2 ? 'red' : ''\"\n >\n <div style=\"display: flex; align-items: center\">\n <div style=\"width: 100px\">\n {{ activity.alarmTime }}\n </div>\n\n <div\n style=\"width: 60px; margin-left: 20px\"\n :style=\"{ color: activity.isLock == 2 ? 'red' : '' }\"\n >\n {{\n activity.alarmType == 1\n ? \"泥石流\"\n : activity.alarmType == 2\n ? \"异物侵限\"\n : \"断轨监测\"\n }}\n </div>\n\n <div\n v-if=\"pageType == 'videoService'\"\n @click=\"toDetails(activity)\"\n class=\"list-button\"\n >\n 详情\n </div>\n </div>\n </el-timeline-item>\n </el-timeline>\n </div>\n </div>\n </el-tab-pane>\n </el-tabs>\n <!-- </el-aside> -->\n</template>\n\n<script>\nimport { videoHistoricalAlarm, getAlarm } from \"@/api/video\";\n\n// palyAndPlayback\n// 播放与回放\nexport default {\n name: \"PalyAndPlayback\",\n props: {\n pageType: {\n // 页面类型 videoService 视频服务 alarmDetail 报警详情\n type: String,\n default() {\n return \"\";\n },\n },\n cameraCode: {\n // 摄像机code\n type: String,\n default() {\n return \"\";\n },\n },\n isShow: {\n type: Boolean,\n },\n cameraInfo: {\n type: Object,\n default() {\n return {\n cameraCode: \"\",\n alarmType: \"\",\n lineDir: \"\",\n deptId: \"\",\n alarmMile: \"\",\n beginMile: \"\",\n installLongitude: \"\",\n releasedTime: \"\",\n };\n },\n },\n historicalAlarm: {\n type: Array,\n default() {\n return [];\n },\n },\n },\n watch: {\n cameraCode() {\n this.getInfo(\"cameraCode\");\n },\n cameraInfo(newVal) {\n this.cameraInfo_ = newVal;\n },\n historicalAlarm(newVal) {\n this.historicalAlarm_ = newVal;\n this.historicalAlarmChange();\n },\n },\n data() {\n return {\n activeName: 1,\n cameraInfo_: {\n cameraCode: \"\",\n alarmType: \"\",\n lineDir: \"\",\n deptId: \"\",\n alarmMile: \"\",\n beginMile: \"\",\n installLongitude: \"\",\n releasedTime: \"\",\n }, // 摄像机信息\n historicalAlarm_: [], // 历史信息\n isfailureToAlarm: false,\n };\n },\n mounted() {\n this.cameraInfo_ = this.cameraInfo;\n this.historicalAlarm_ = this.historicalAlarm;\n this.historicalAlarmChange();\n this.getInfo(\"mounted\");\n\n console.log(\"pageType\", this.pageType);\n },\n methods: {\n getInfo(source) {\n console.log(\"请求信息\", source, this.cameraCode, !this.cameraCode);\n if (!this.cameraCode) return false;\n\n if (this.cameraCode) {\n // 获取摄像机信息\n getAlarm(this.cameraCode).then((res) => {\n console.log(\"通过code获取用户信息\", res);\n\n if (res.code == 200 && res.data instanceof Object) {\n this.cameraInfo_ = res.data;\n } else {\n this.cameraInfo_ = {\n cameraCode: \"\",\n alarmType: \"\",\n lineDir: \"\",\n deptId: \"\",\n alarmMile: \"\",\n beginMile: \"\",\n installLongitude: \"\",\n releasedTime: \"\",\n };\n }\n\n this.$emit(\"getCameraInfo\", this.cameraInfo_);\n });\n\n // 获取历史信息\n videoHistoricalAlarm(this.cameraCode).then((res) => {\n if (res.code == 200) {\n this.historicalAlarm_ = res.data;\n } else {\n this.historicalAlarm_ = [];\n this.$message.error(res.msg);\n }\n\n this.historicalAlarmChange();\n });\n }\n },\n historicalAlarmChange() {\n this.isfailureToAlarm = false;\n this.historicalAlarm_.forEach((element) => {\n if (element.isLock == 2) {\n this.isfailureToAlarm = true;\n }\n });\n },\n toDetails(info) {\n this.$router.push({\n path: \"/alarmDetail\",\n query: {\n id: info.id,\n cameraCode: info.cameraCode,\n alarmId: info.alarmId,\n },\n });\n },\n },\n};\n</script>\n\n<style lang=\"scss\">\n.el-tabs--top .el-tabs__item.is-top:nth-child(2) {\n padding-left: 20px;\n}\n\n.actionCameraln1 .el-tabs__active-bar.is-top {\n width: 20px !important;\n left: 20%;\n border: 1px solid #409eff;\n}\n\n.actionCameraln2 .el-tabs__active-bar.is-top {\n width: 20px !important;\n left: 74%;\n}\n\n.videoService-message.actionCameraln1 .el-tabs__active-bar.is-top {\n left: 17%;\n}\n\n.videoService-message.actionCameraln2 .el-tabs__active-bar.is-top {\n left: 70%;\n}\n\n.el-tabs el-tabs--top .actionCameraln1 {\n}\n\n.actionCameraln2 .el-tabs--top .el-tabs__item.is-top:nth-child(2) {\n padding-left: 20px;\n}\n\n.el-tabs el-tabs--top .actionCameraln1 {\n}\n</style>\n<style scoped lang=\"scss\">\n.headline {\n color: #333333;\n /* flex-shrink: 0; */\n}\n\n::v-deep .el-tab-pane {\n overflow-y: auto;\n}\n\n.text {\n color: #787878;\n font-size: 14px;\n}\n\n::v-deep .el-tabs__nav-wrap {\n background: #eff2f6 !important;\n}\n\n.cameraInfoMessage {\n border: 1px solid #eaf3fb;\n border-radius: 5px;\n box-sizing: border-box;\n overflow: auto;\n display: flex;\n flex-direction: column;\n\n &.isfailureToAlarm {\n ::v-deep .el-tabs__item.is-top:last-child::before {\n content: \" \";\n display: inline-block;\n margin-right: 5px;\n margin-bottom: 1px;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: red;\n }\n }\n\n ::v-deep .el-tabs__header {\n flex-shrink: 0;\n }\n\n ::v-deep .el-tabs__content {\n flex: 1;\n overflow-y: auto;\n }\n\n .list-empty {\n color: #b9b9b9;\n width: 100%;\n height: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .list-button {\n padding: 5px 10px;\n border-radius: 15px;\n flex-shrink: 0;\n font-size: 12px;\n line-height: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #2866dd;\n background-color: #dbe6fa;\n }\n}\n</style>"]}]}