|
|
@@ -0,0 +1,805 @@
|
|
|
+
|
|
|
+ <!--
|
|
|
+ *@description: 哨兵基础页
|
|
|
+ *@author: yh Fu
|
|
|
+ *@date: 2025-08-29 11:16:01
|
|
|
+ *@version: V1.0.5
|
|
|
+ -->
|
|
|
+
|
|
|
+
|
|
|
+ <template>
|
|
|
+ <div class="visual-con hz_body">
|
|
|
+ <div class="s_header">
|
|
|
+ <div class="head_btn">
|
|
|
+ <div @click="jumpTo('/SentryCockpit',0)" :class="routerIdx == 0 ? 'on' : ''">
|
|
|
+ <i>驾驶舱</i>
|
|
|
+ </div>
|
|
|
+ <div @click="jumpTo('/SenEquipmentCenter',1)" :class="routerIdx == 1 ? 'on' : ''">
|
|
|
+ <i>设备中心</i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="header_tit"><i>{{title}}</i></div>
|
|
|
+ <div class="head_btn">
|
|
|
+ <div @click="jumpTo('/SenEventCenter',2)" :class="routerIdx == 2 ? 'on' : ''">
|
|
|
+ <i>事件中心</i>
|
|
|
+ </div>
|
|
|
+ <div @click="jumpTo('/useCenter',3)" :class="routerIdx == 3 ? 'on' : ''">
|
|
|
+ <i>用户中心</i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="head_tx">
|
|
|
+ <span><img src="../assets/images/sentinel/hz_tx.png" /></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="visual-body">
|
|
|
+ <!--主体-->
|
|
|
+ <router-view>
|
|
|
+
|
|
|
+ </router-view>
|
|
|
+ <!-- 哨兵详情弹窗 -->
|
|
|
+ <div class="tk_div" v-show="isDetailVisible">
|
|
|
+ <div class="tk1 tk_bor" style="width: 371px;height: 310px;">
|
|
|
+ <h1>
|
|
|
+ <span :title="detailInfo.deviceName || '--'" style="display: inline-block;overflow: hidden;width: 62%;text-overflow: ellipsis;">{{ detailInfo.deviceName || '--' }}</span>
|
|
|
+ <i class="el-icon el-icon-close" style="margin-left: 5%;cursor: pointer;" @click="closeDetail"></i>
|
|
|
+ <i>{{ detailInfo.workingStatus == '0' ? '在线' : '离线' }}</i>
|
|
|
+ </h1>
|
|
|
+ <p>设备名称：{{ detailInfo.deviceName || '--' }}</p>
|
|
|
+ <p>设备类型：{{ detailInfo.deviceTypeText || '--' }}</p>
|
|
|
+ <p>设备监测指标：{{ detailInfo.threshold || '--' }}</p>
|
|
|
+ <p>品牌：{{ detailInfo.brand || '--' }}</p>
|
|
|
+ <p>所在街道：{{ detailInfo.address || '--' }}</p>
|
|
|
+ <p>历史数值：<a @click="toggleDisplay(detailInfo.deviceCode)">详情</a></p>
|
|
|
+ </div>
|
|
|
+ <div class="tk2 tk_bor" v-if="isVisible" style="position: absolute;width: 466px;height: 455px;left: 98%;">
|
|
|
+ <h1>哨兵详情</h1>
|
|
|
+ <div id="sbxqChart" ref="MyChart"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 地图 -->
|
|
|
+ <supermap ref="supermap" style="width: 100%;height: 100vh;" @preview="preview">
|
|
|
+ </supermap>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import Cookies from 'js-cookie'
|
|
|
+ import supermap from '@/components/supermap-2.5d' //超图
|
|
|
+ import {
|
|
|
+ getUserProfile
|
|
|
+ } from "@/api/system/user";
|
|
|
+
|
|
|
+ import '../assets/styles/hz_body.css';
|
|
|
+ import {
|
|
|
+ selectConfigKey
|
|
|
+ } from "@/api/system/config";
|
|
|
+ import {
|
|
|
+ selectByDeviceId,
|
|
|
+ selectDailyThreshold
|
|
|
+ } from "@/api/sentinel"
|
|
|
+ let echarts = require("echarts");
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'MyChart',
|
|
|
+ components: {
|
|
|
+ supermap
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return {
|
|
|
+ title: '四平市智慧哨兵监管平台',
|
|
|
+ meta: [{
|
|
|
+ charset: "utf-8"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "viewport",
|
|
|
+ content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: '四平市智慧哨兵监管平台',
|
|
|
+ routerIdx:0, // 当前导航索引
|
|
|
+ detailInfo:{}, // 设备详情信息
|
|
|
+ isVisible: false, // 初始时设置为false，不显示内容
|
|
|
+ isDetailVisible:false, // 设备弹窗显隐flag
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 初始定向到驾驶舱
|
|
|
+ this.$router.push({
|
|
|
+ path:'/SentryCockpit'
|
|
|
+ })
|
|
|
+ // 初始化地图数据
|
|
|
+ this.getSuperMapUrl();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.title = '四平市智慧哨兵监管平台'
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ closeDetail(){
|
|
|
+ this.isDetailVisible = false
|
|
|
+ this.isVisible = false
|
|
|
+ },
|
|
|
+ preview(e){
|
|
|
+ selectByDeviceId({id:e.id}).then(res => {
|
|
|
+ this.detailInfo = res.data
|
|
|
+ this.isDetailVisible = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toggleDisplay(deviceCode) {
|
|
|
+ this.isVisible = !this.isVisible; // 点击按钮时切换isVisible的值
|
|
|
+ if(this.isVisible){
|
|
|
+ selectDailyThreshold(deviceCode).then(res => {
|
|
|
+ this.initChart(res.data)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ jumpTo(path,idx){
|
|
|
+ if(this.routerIdx == idx) return;
|
|
|
+ // 重置哨兵详情态
|
|
|
+ this.isDetailVisible = false
|
|
|
+ this.isVisible = false
|
|
|
+ // 地图清点
|
|
|
+ this.$refs.supermap.clearM();
|
|
|
+ this.routerIdx = idx
|
|
|
+ this.$router.push({
|
|
|
+ path
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initChart(data){
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ const myChart = echarts.init(document.getElementById('sbxqChart'))
|
|
|
+ let xdata = data.time //x轴
|
|
|
+ let dataArr = data.value //value
|
|
|
+ let dashedArr = data.threshold
|
|
|
+ let titleName = "阈值";
|
|
|
+ let titleNames = "实际值";
|
|
|
+ let option = {
|
|
|
+ backgroundColor: "rgba(25,44,59,.4)",
|
|
|
+ grid: {
|
|
|
+ left: "5%",
|
|
|
+ bottom: "10%",
|
|
|
+ top: "18%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ x: "center",
|
|
|
+ y: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff", // 图例文字颜色
|
|
|
+ fontSize: 16,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: xdata,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "transparent",
|
|
|
+ width: 2, //这里是为了突出显示加上的
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ "dataZoom": [
|
|
|
+ {
|
|
|
+ "show": true,
|
|
|
+ "height": 12,
|
|
|
+ "xAxisIndex": [
|
|
|
+ 0
|
|
|
+ ],
|
|
|
+ "bottom": "8%",
|
|
|
+ "start": 0,
|
|
|
+ "end": 50,
|
|
|
+ "handleIcon": "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
|
|
|
+ "handleSize": "110%",
|
|
|
+ "handleStyle": {
|
|
|
+ "color": "#d3dee5"
|
|
|
+ },
|
|
|
+ "textStyle": {
|
|
|
+ "color": "#fff"
|
|
|
+ },
|
|
|
+ "borderColor": "#90979c"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "inside",
|
|
|
+ "show": true,
|
|
|
+ "height": 15,
|
|
|
+ "start": 1,
|
|
|
+ "end": 35
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "(%vol)",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "transparent",
|
|
|
+ width: 2, //这里是为了突出显示加上的
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#11366e",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: titleName,
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ symbol: "none",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ color: "#01F699", //拐点的颜色
|
|
|
+ borderColor: "#01F699", //拐点边框的颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: dashedArr,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: titleNames,
|
|
|
+ type: "line",
|
|
|
+ stack: "总量",
|
|
|
+ smooth: true, //平滑曲线显示
|
|
|
+ symbol: "circle", //标记的图形为实心圆
|
|
|
+ symbolSize: 8,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(3,191,255,1)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(18,93,236,1)",
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(3,191,255,.3)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(18,93,236,.3)",
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: dataArr,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ getSuperMapUrl() {
|
|
|
+ getUserProfile().then(response => {
|
|
|
+ let mapDeptId = response.mapDeptId
|
|
|
+ let num = 0;
|
|
|
+ if (mapDeptId == "365") {
|
|
|
+ num = 0;
|
|
|
+ } else if (mapDeptId == "369") {
|
|
|
+ num = 1;
|
|
|
+ } else if (mapDeptId == "371") {
|
|
|
+ num = 2;
|
|
|
+ } else if (mapDeptId == "373") {
|
|
|
+ num = 3;
|
|
|
+ } else if (mapDeptId == "372") {
|
|
|
+ num = 4;
|
|
|
+ } else if (mapDeptId == "370") {
|
|
|
+ num = 5;
|
|
|
+ }
|
|
|
+ this.$refs.supermap.removeAllviewer(mapDeptId, -1);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss">
|
|
|
+ .visual-con .el-input__inner {
|
|
|
+ border: 1px solid #3bb8a4;
|
|
|
+ background-color: rgba(20, 107, 115, 0.3);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .hz_body {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ i,
|
|
|
+ b,
|
|
|
+ u {
|
|
|
+ font-style: normal;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*//头部通用*/
|
|
|
+ .s_header {
|
|
|
+ width: 100%;
|
|
|
+ height: 110px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ z-index: 99;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-around;
|
|
|
+ background: url("../assets/images/sentinel/hz_header.png") no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s_header .header_tit {
|
|
|
+ display: block;
|
|
|
+ width: 1000px;
|
|
|
+ height: 109px;
|
|
|
+ line-height: 65px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .s_header .header_tit i {
|
|
|
+ font-family: 'ysbth';
|
|
|
+ font-size: 40px;
|
|
|
+ /*text-shadow: 3px 5.196px 0px rgba(17, 20, 22, 0.22);*/
|
|
|
+ letter-spacing: 4px;
|
|
|
+ background: linear-gradient(180deg, #fff 0%, #b0d3f1 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+ mix-blend-mode: screen;
|
|
|
+ /*text-shadow: 3px 5px 0px rgba(17, 20, 22, 0.22);*/
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s_header .head_btn {
|
|
|
+ width: 316px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s_header .head_tx {
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s_header .head_btn div {
|
|
|
+ display: inline-block;
|
|
|
+ background: url("../assets/images/sentinel/hz_btnbg.png") no-repeat center;
|
|
|
+ width: 138px;
|
|
|
+ margin: 0px 10px;
|
|
|
+ height: 29px;
|
|
|
+ line-height: 29px;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s_header .head_btn div i {
|
|
|
+ display: block;
|
|
|
+ font-family: 'ysbth';
|
|
|
+ font-size: 20px;
|
|
|
+ background: linear-gradient(180deg, #95dded 60%, #fff 40%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+ mix-blend-mode: screen;
|
|
|
+ /*text-shadow: 3px 5px 0px rgba(17, 20, 22, 0.22);*/
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s_header .head_btn div.on,
|
|
|
+ .s_header .head_btn div:hover {
|
|
|
+ background: url("../assets/images/sentinel/hz_btnbg_on.png") no-repeat center;
|
|
|
+ box-shadow: none;
|
|
|
+ filter: brightness(170%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .con_left {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 99;
|
|
|
+ left: 30px;
|
|
|
+ top: 100px;
|
|
|
+ width: 320px;
|
|
|
+ background: rgba(0, 0, 0, 0.55);
|
|
|
+ padding: 0px 10px 20px 10px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .con_right {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 99;
|
|
|
+ right: 30px;
|
|
|
+ top: 100px;
|
|
|
+ width: 320px;
|
|
|
+ background: rgba(0, 0, 0, 0.55);
|
|
|
+ padding: 0px 10px 20px 10px !important;
|
|
|
+
|
|
|
+ .list_tit {
|
|
|
+ background: url("../assets/images/sentinel/hz_list_tit.png") no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ padding-left: 20px;
|
|
|
+ font-family: 'ysbth';
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .con_left_js {
|
|
|
+ width: 400px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .con_left .list_tit {
|
|
|
+ background: url("../assets/images/sentinel/hz_list_tit.png") no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ padding-left: 20px;
|
|
|
+ font-family: 'ysbth';
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .con_left .el-select {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select-dropdown {
|
|
|
+ border: 1px solid #3bb7a3;
|
|
|
+ background-color: #0c3038;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select-dropdown__item {
|
|
|
+ color: #b0d3f1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select-dropdown__item.hover,
|
|
|
+ .con_left .el-select-dropdown__item:hover {
|
|
|
+ background-color: #0a4c5c;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select-dropdown__item.selected {
|
|
|
+ color: #3bb7a3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ color: #b0d3f1;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__icon {
|
|
|
+ line-height: 35px;
|
|
|
+ color: #5bf9e0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sp_list {
|
|
|
+ margin-top: 10px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sp_list dt {
|
|
|
+ background: linear-gradient(to right, rgba(40, 115, 124, 0.68), rgba(38, 75, 80, 0.68));
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .sp_list dd {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sp_list dd:hover {
|
|
|
+ filter: brightness(170%) hue-rotate(-20deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .sp_list dd:nth-child(odd) {
|
|
|
+ background: linear-gradient(to right, rgba(40, 115, 124, 0.68), rgba(38, 75, 80, 0.68));
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sp_list dd:nth-child(even) {
|
|
|
+ background: linear-gradient(to right, rgba(40, 115, 124, 0.38), rgba(38, 75, 80, 0.38));
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sp_list span {
|
|
|
+ display: inline-block;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #acdfe5;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sp_list span.dt1 {
|
|
|
+ width: 60px;
|
|
|
+ background: url("../assets/images/sentinel/hz_list_j.png") no-repeat left;
|
|
|
+ padding-left: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sp_list span.dt2 {
|
|
|
+ width: 200px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sp_list span.dt3 {
|
|
|
+ width: 40px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 38px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sp_list span.dt3 img {
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-pagination {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-pagination.is-background .btn-next,
|
|
|
+ .el-pagination.is-background .btn-prev,
|
|
|
+ .el-pagination.is-background .el-pager li {
|
|
|
+ margin: 0 2px;
|
|
|
+ background-color: unset !important;
|
|
|
+ color: #47c5b0;
|
|
|
+ min-width: 26px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
|
+ background-color: #47c5b0 !important;
|
|
|
+ color: #FFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-pagination.is-background .el-pager li:not(.disabled):hover {
|
|
|
+ background-color: #47c5b0 !important;
|
|
|
+ color: #FFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-pager li:hover {
|
|
|
+ background-color: #47c5b0 !important;
|
|
|
+ color: #FFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hei_scroll {
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hei_scroll::-webkit-scrollbar {
|
|
|
+ width: 0px;
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hei56 {
|
|
|
+ height: 56vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qydw1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 60%;
|
|
|
+ left: 40%;
|
|
|
+ display: block;
|
|
|
+ width: 54px;
|
|
|
+ height: 77px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qydw2 {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 70%;
|
|
|
+ display: block;
|
|
|
+ width: 54px;
|
|
|
+ height: 77px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qydw3 {
|
|
|
+ position: absolute;
|
|
|
+ top: 40%;
|
|
|
+ left: 80%;
|
|
|
+ display: block;
|
|
|
+ width: 54px;
|
|
|
+ height: 77px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tk_div {
|
|
|
+ position: absolute;
|
|
|
+ top: 24%;
|
|
|
+ left: 32.2%;
|
|
|
+ z-index: 98;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tk_bor {
|
|
|
+ padding: 15px !important;
|
|
|
+ border: 3px solid #28727e;
|
|
|
+ box-shadow: 0px 0px 24px #28727e;
|
|
|
+ background: rgba(0, 0, 0, 0.39);
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-bottom: 20px !important;
|
|
|
+
|
|
|
+ p {
|
|
|
+ width: 50%;
|
|
|
+ padding-left: 20px;
|
|
|
+ background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
|
|
|
+ background-size: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tk_bor h1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-left: 20px;
|
|
|
+ background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #e0e5fa;
|
|
|
+ font-weight: bold;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tk_bor h1 i {
|
|
|
+ display: inline-block;
|
|
|
+ float: right;
|
|
|
+ background: #3bad96;
|
|
|
+ padding: 0px 10px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tk_bor h1 i::after {
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
+ border-bottom: 9px solid transparent;
|
|
|
+ border-right: 9px solid #3bad96;
|
|
|
+ border-top: 9px solid transparent;
|
|
|
+ position: absolute;
|
|
|
+ left: -8px;
|
|
|
+ top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tk_bor p {
|
|
|
+ padding-left: 20px;
|
|
|
+ background: url("../assets/images/sentinel/hz_k.png") no-repeat left;
|
|
|
+ background-size: 12px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tk_bor p a {
|
|
|
+ color: #6bf5f2;
|
|
|
+ text-underline-offset: 0.4em;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tk_bor p a:hover {
|
|
|
+ color: #6bf5f2;
|
|
|
+ text-underline-offset: 0.4em;
|
|
|
+ text-decoration: underline;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .tk_bor .icon{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ float: right;
|
|
|
+
|
|
|
+ img{
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tk1 {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 20px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tk1::after {
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
+ background: url("../assets/images/sentinel/hz_down.png") no-repeat left;
|
|
|
+ width: 46px;
|
|
|
+ height: 40px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -40px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ #sbxqChart {
|
|
|
+ width: 100%;
|
|
|
+ height: 91%;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //图表设备分析
|
|
|
+ .sb_fx {
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yh_fx {
|
|
|
+ width: 100%;
|
|
|
+ height: 260px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sj_fx {
|
|
|
+ width: 100%;
|
|
|
+ height: 280px;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
+ @import '@/assets/styles/base.scss';
|
|
|
+</style>
|
yhfu