From 84ff051d5c6bbf10e71f6f8d1d57740c26619d9e Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期四, 08 五月 2025 16:51:16 +0800
Subject: [PATCH] U 苏州地铁首页
---
src/views/home/home-szdt.vue | 610 +++++++++++++++++++++++++++----------------------------
1 files changed, 300 insertions(+), 310 deletions(-)
diff --git a/src/views/home/home-szdt.vue b/src/views/home/home-szdt.vue
index f97962a..923e6a3 100644
--- a/src/views/home/home-szdt.vue
+++ b/src/views/home/home-szdt.vue
@@ -1,162 +1,94 @@
<template>
<div class="p-main">
- <div class="row">
- <card>
- <big-screen-card title="鍛婅缁熻">
- <template #tools>
- <el-radio-group size="mini" v-model="alarmType" @input="alarmTypeChangede">
- <el-radio-button :label="0">鍛婅绫诲瀷</el-radio-button>
- <el-radio-button :label="1">鍛婅绛夌骇</el-radio-button>
- </el-radio-group>
- </template>
- <div class="chart-wrap">
- <div class="inner">
- <bar-chart-alarm v-if="alarmType == 1" ref="chart_alarm"></bar-chart-alarm>
- <pie-chart ref="alarmPieChart" :values="alarms" v-else></pie-chart>
- </div>
- </div>
- </big-screen-card>
- </card>
- </div>
- <div class="row">
- <card>
- <big-screen-card title="璁惧宸ヤ綔鐘舵��">
- <div class="dev-wrap">
- <circle-box class="item" :type="0" :value="workState[0]" @click.native="goDevWorkState(4)"></circle-box>
- <circle-box ref="devWorkState1" class="item" :type="1" :value="workState[1]"
- @click.native="goDevWorkState(2)"></circle-box>
- <circle-box ref="devWorkState2" class="item" :type="2" :value="workState[2]"
- @click.native="goDevWorkState(0)"></circle-box>
- <circle-box ref="devWorkState3" class="item" :type="3" :value="workState[3]"
- @click.native="goDevAlarm"></circle-box>
- </div>
- </big-screen-card>
- </card>
- </div>
- <div class="row">
- <card>
- <big-screen-card title="鏁寸粍瀹归噺">
- <div class="mon-box-container">
- <div class="mon-info-box">
- <div class="mon-info-title">澶т簬95%姣斾緥:</div>
- <div class="mon-info-value">{{ cap.level0 }}</div>
- </div>
- <div class="mon-info-box box2">
- <div class="mon-info-title">95%~85%姣斾緥:</div>
- <div class="mon-info-value">{{ cap.level1 }}</div>
- </div>
- <div class="mon-info-box box3">
- <div class="mon-info-title">85%~60%姣斾緥:</div>
- <div class="mon-info-value">{{ cap.level2 }}</div>
- </div>
- </div>
- <div class="mon-box-container mgt16">
- <div class="mon-info-box box2">
- <div class="mon-info-title">60%~50%姣斾緥:</div>
- <div class="mon-info-value">{{ cap.level3 }}</div>
- </div>
- <div class="mon-info-box box3">
- <div class="mon-info-title">灏忎簬50%:</div>
- <div class="mon-info-value">{{ cap.level4 }}</div>
- </div>
- </div>
- </big-screen-card>
- </card>
+ <div class="p-side p-left">
+ <div class="row">
+ <home-card title="缁熻鐢垫睜鍛婅">
+ <template #tools>
+ <el-select v-model="lineSelect0" size="mini" @change="testLevelChange(0)">
+ <el-option v-for="(item, idx) in lineList" :key="'select_' + idx" :label="item == 0 ? '鍏ㄩ儴' : item + '鍙风嚎'" :value="item"></el-option>
+ </el-select>
+ </template>
+ <!-- <div class="chart-wrap">
+ <div class="inner">
+ <bar-chart-alarm v-if="alarmType == 1" ref="chart_alarm"></bar-chart-alarm>
+ <pie-chart ref="alarmPieChart" :values="alarms" v-else></pie-chart>
+ </div>
+ </div> -->
+ <bar3d ref="bar3d0"></bar3d>
+ </home-card>
+ </div>
+ <div class="row">
+ <home-card title="鏁呴殰绫诲瀷缁熻">
+ <template #tools>
+ <el-select v-model="lineSelect1" size="mini" @change="testLevelChange(1)">
+ <el-option v-for="(item, idx) in lineList" :key="'select_' + idx" :label="item == 0 ? '鍏ㄩ儴' : item + '鍙风嚎'" :value="item"></el-option>
+ </el-select>
+ </template>
+ <pie-chart ref="pie"></pie-chart>
+ </home-card>
+ </div>
</div>
<div class="wraper">
<div class="row row1">
- <card :miniCor="true">
<div class="info">
<div class="item" @click="goStations">
- <div class="name">绔欑偣</div>
+ <div class="name">鏈烘埧涓暟</div>
<div class="num">
- <led-num color="#f00" :num="stationNum"></led-num>
+ {{ stationNum }}
</div>
</div>
<div class="item">
- <div class="name">璁惧</div>
+ <div class="name">璁惧涓暟</div>
<div class="num">
- <led-num color="#f00" :num="devCount"></led-num>
+ {{ devCount }}
</div>
</div>
<div class="item" @click="goBatt">
- <div class="name">鐢垫睜鑺傛暟</div>
- <div class="num bits5">
- <led-num color="#f00" :bits='5' :num="battGroupMonCount"></led-num>
- </div>
- </div>
- <div class="item" @click="goBatt">
- <div class="name">鐢垫睜缁�</div>
+ <div class="name">鐢垫睜缁勪釜鏁�</div>
<div class="num">
- <led-num color="#f00" :num="battGroupCount"></led-num>
+ {{ battGroupCount }}
</div>
</div>
</div>
- </card>
</div>
<div class="row row2">
- <card :inside="false">
<div class="flex-map-contain">
<div class="inner">
- <map-chart ref="map" subway="suzhou">
- <map-mark-list slot="tools"></map-mark-list>
- </map-chart>
+ <svg-subway :lines="lineList.filter(v=> v != 0)" :status="statusList" @legend-change="legendChange"></svg-subway>
</div>
</div>
- </card>
</div>
</div>
- <div class="row alarm">
- <card>
- <big-screen-card title="瀹炴椂鍛婅淇℃伅">
- <div class="scroller-wrap">
- <div class="inner">
- <el-table ref="elTbl" stripe size="small" :data="tbl.data" height="100%" :row-class-name="
- (row) =>'cursor-pointer'
- " @row-dblclick="goRealTime" class="tableCent">
- <el-table-column v-for="header in tbl.headers" :key="header.prop" :prop="header.prop"
- :label="header.label" :width="header.width" :min-width="header.minWidth" :sortable="header.sortable"
- align="center"></el-table-column>
- <el-table-column label="鎿嶄綔" width="110" align="center">
- <template slot-scope="scope">
- <el-button type="primary" size="mini" @click="goRealTime(scope.row)">瀹炴椂</el-button>
- </template>
- </el-table-column>
- </el-table>
- <!-- <div class="empty-msg" v-else>鏈�杩戜竴鍛ㄦ棤璁板綍</div> -->
+ <div class="p-side p-right">
+ <div class="row alarm">
+ <home-card title="鐢垫睜鐘舵��">
+ <template #tools>
+ <el-select v-model="lineSelect2" size="mini" @change="testLevelChange(2)">
+ <el-option v-for="(item, idx) in lineList" :key="'select_' + idx" :label="item == 0 ? '鍏ㄩ儴' : item + '鍙风嚎'" :value="item"></el-option>
+ </el-select>
+ </template>
+ <bar3d ref="bar3d1"></bar3d>
+ </home-card>
+ </div>
+ <div class="row test-info">
+ <home-card title="瀹炴椂鐢垫睜鍛婅婊氬姩">
+ <template #tools>
+ <el-select v-model="lineSelect3" size="mini" @change="testLevelChange(3)">
+ <el-option v-for="(item, idx) in lineList" :key="'select_' + idx" :label="item == 0 ? '鍏ㄩ儴' : item + '鍙风嚎'" :value="item"></el-option>
+ </el-select>
+ </template>
+ <div class="scroller-wraper">
+ <marquee-top :sendVal="newItems" v-if="showMarquee"></marquee-top>
+ <div class="no-warning-msg" v-else>鏈�杩�24灏忔椂鍐呮棤鍛婅</div>
</div>
- </div>
- </big-screen-card>
- </card>
- </div>
- <div class="row test-info">
- <card>
- <big-screen-card title="绾胯矾鍛婅">
- <template #tools>
- <!-- :disabled="!chartData.test.length" -->
- <!-- <el-radio-group
- size="mini"
- @input="testLevelChange"
- v-model="testLevel"
- >
- <el-radio-button :label="0">鎬荤嚎璺�</el-radio-button>
- <el-radio-button :label="1">1鍙风嚎</el-radio-button>
- <el-radio-button :label="2">2鍙风嚎</el-radio-button>
- </el-radio-group> -->
- <el-select v-model="testLevel" size="small" @change="testLevelChange">
- <el-option v-for="(item, idx) in lineList" :key="'select_' + idx" :label="item" :value="item"></el-option>
- </el-select>
- </template>
- <bar3d ref="bar3d"></bar3d>
- </big-screen-card>
- </card>
+ </home-card>
+ </div>
</div>
</div>
</template>
<script>
- import card from "./components/card-corner";
- import BigScreenCard from "@/components/bigScreenPage/big_screen_card.vue";
+ import homeCard from "./components/home_card.vue";
import BatteryPieChart from "@/components/myCharts/BatteryPieChart.vue";
import MapChart from "@/components/myCharts/MapChart.vue";
import MapMarkList from "@/components/mapMarkList.vue";
@@ -165,28 +97,42 @@
import circleBox from "./components/circle.vue";
import BarChart from "@/components/myCharts/BarChart.vue";
import LedNum from "@/components/ledNum";
- import pieChart from "./components/pieCharts";
+ // import pieChart from "./components/pieCharts";
+ import pieChart from "./components/pie-chart1";
import BarChartAlarm from "./components/batt-chart-alarm";
import PowerPieChart from "@/components/myCharts/PieRoseChart.vue";
import { const_alarm_level } from "@/assets/js/const";
import { getLabelByValue } from "@/assets/js/tools";
import getNowStamp from "@/assets/js/tools/getNowStamp";
+ import marqueeTop from './components/marqueeTop.vue';
+
+ // import svgSubway from './components/test.vue';
+ import svgSubway from './components/SubwayView.vue';
import createWs from "@/assets/js/websocket/plus";
import { sethoubeiTime, formatSeconds } from "@/assets/js/tools";
- const WSMixin = createWs("screen_sz", 'battAlarmFoot');
+ const WSMixin = createWs("screen_sz2", 'battAlarmFoot');
export default {
name: "",
mixins: [WSMixin],
data() {
return {
+ nums: {},
+ selectFlag: false,
+ newItems: [],
+ lineSelect0: '',
+ lineSelect1: '',
+ lineSelect2: '',
+ lineSelect3: '',
lineList: [],
otherPwrProd: [],
testData: {},
+ faultData: {},
+ workState: {},
+ alarmRt: {},
+ statusList: {},
alarmData: [[], [], []],
- testLevel: '',
- workState: [0, 0, 0, 0],
nxType: 0,
alarmType: 0,
alarms: [0, 0, 0],
@@ -238,19 +184,13 @@
label: "鍛婅寮�濮嬫椂闂�",
minWidth: 110,
},
- // {
- // prop: "xuhang",
- // label: "棰勪及缁埅鏃堕暱",
- // minWidth: 110,
- // },
],
data: [],
},
};
},
components: {
- card,
- BigScreenCard,
+ homeCard,
BatteryPieChart,
MapChart,
MapMarkList,
@@ -262,6 +202,8 @@
BarChartAlarm,
bar3d,
PowerPieChart,
+ svgSubway,
+ marqueeTop,
},
methods: {
alarmTypeChangede(value) {
@@ -279,30 +221,19 @@
res = JSON.parse(res.data);
// console.log(res, "=====111data");
let {
- devStates,
- stationCount,
- battGroupInfo,
- alarmsLevelWithStationName5,
- devCountMap,
- resTestdataInfAnalysis,
- groupCap,
- alarmsLevel,
- dischargingBattery,
+ res_inf,
+ res_battState,
+ res_battAlarm,
+ res_station,
} = res.data;
// 绔欑偣鏁伴噺缁熻鏇存柊
- this.updateSiteDev(devCountMap);
- // 鏇存柊璁惧宸ヤ綔鐘舵��
- this.updateWorkState(devStates);
- // 鏇存柊鏁寸粍瀹归噺
- this.updateGroupCap(groupCap);
+ this.updateSiteDev(res_inf);
// 娴嬭瘯淇℃伅 鏀逛负鍛婅淇℃伅
- this.updateTestData(alarmsLevelWithStationName5);
- // 鏇存柊鍦板浘
- this.updateMap(devCountMap);
- // 鏇存柊鍛婅缁熻
- this.updateAlarms(alarmsLevel);
- // // 瀹炴椂鏀剧數淇℃伅
- // this.updateDischargeInfo(dischargingBattery);
+ this.updateTestData(res_battAlarm);
+ // 鏇存柊鐢垫睜鐘舵��
+ this.updateWorkState(res_battState);
+ // // 鏇存柊鍦板浘
+ this.updateMap(res_station);
},
onWSOpen2() {
this.sendMessage2();
@@ -353,21 +284,56 @@
// this.updateFlag = Math.random();
},
+ legendChange(data) {
+ console.log('data, ', data, '=============');
+ this.selectFlag = true;
+ let stionNum = 0;
+ let battNum = 0;
+ let devNum = 0;
+ let nums = this.nums;
+ Object.keys(data).forEach(v => {
+ if (data[v]) {
+ stionNum += nums[v].stionNum;
+ devNum += nums[v].devNum;
+ battNum += nums[v].battNum;
+ }
+ });
+ this.stationNum = stionNum;
+ this.devCount = devNum;
+ this.battGroupCount = battNum;
+ },
updateSiteDev(data) {
- const { devCount, stationNum, battGroupCount, battGroupMonCount } = data.data2;
- this.devCount = devCount;
- this.stationNum = stationNum;
- this.battGroupCount = battGroupCount;
- this.battGroupMonCount = battGroupMonCount;
+ const { devNum, stionNum, battNum } = data.data2?.allmap || {};
+ if (!this.selectFlag) {
+ this.devCount = devNum || 0;
+ this.stationNum = stionNum || 0;
+ this.battGroupCount = battNum || 0;
+ }
+
+ let _data = data.data2;
+ let res = {};
+ Object.keys(_data).forEach(v => {
+ if (v != 'allmap') {
+ res[v + '鍙风嚎'] = _data[v];
+ }
+ });
+ this.nums = res;
},
updateWorkState(data) {
data = data.data2;
- this.workState = [
- data["鍐呴樆娴嬭瘯鏁伴噺"],
- data["鏍稿娴嬭瘯鏁伴噺"],
- data["鐩磋繛鍏呯數鏁伴噺"],
- data["閫氳鏁呴殰鏁伴噺"],
- ];
+ let workList = {};
+ this.lineList.forEach(v => {
+ let item = v == 0 ? data['allmap'] : data[v];
+ let xLabel = [];
+ let sData = [];
+ Object.keys(item).forEach(vv => {
+ xLabel.push(vv);
+ sData.push(item[vv]);
+ });
+ workList[v] = {xLabel, sData};
+ });
+ this.workState = workList;
+ this.$refs.bar3d1.setData(this.workState[this.lineSelect2]);
},
updateGroupCap(obj) {
const { code, data, data3 } = obj;
@@ -389,123 +355,90 @@
this.cap.level3 = level3;
this.cap.level4 = level4;
},
- // 鐢垫睜缁熻
- updateBattInfo(obj) {
- // let { code, data, data2 } = obj;
- // let vol2 = 0,
- // vol12 = 0,
- // producer = [{ name: "鐢垫睜鍝佺墝", value: 0 }];
- // if (code && data) {
- // vol2 = data2.monVol["2.0"];
- // vol12 = data2.monVol["12.0"];
- // let arr = Object.keys(data2.producer)
- // .map((v) => ({ name: v, value: data2.producer[v] }))
- // .sort((a, b) => b.value - a.value);
- // if (arr.length <= 5) {
- // producer = arr;
- // } else {
- // let name = "鍏朵粬";
- // let value = 0;
- // arr.splice(4).forEach((v) => {
- // value += v.value * 1;
- // });
- // arr.push({ name, value });
- // producer = arr;
- // }
- // }
- // this.$refs.batteryChart.setData(vol2, vol12, producer);
- },
updateTestData(obj) {
- let list_obj = obj.data2.data;
+ let list_obj = obj.data2.level;
let lineList = Object.keys(list_obj);
+ lineList.unshift(0);
if (!this.lineList.length) {
this.lineList = lineList;
- this.testLevel = lineList[0];
+
+ this.lineSelect0 = 0;
+ this.lineSelect1 = 0;
+ this.lineSelect2 = 0;
+ this.lineSelect3 = 0;
}
let test = {};
lineList.forEach((item) => {
- let _item = list_obj[item];
+ let _item = item == 0 ? obj.data2.allLevel : list_obj[item];
const {
- level1,
- level2,
- level3,
- level4,
+ 1: level1,
+ 2: level2,
+ 3: level3,
+ 4: level4,
} = _item;
test[item] = {
xLabel: ["涓�绾у憡璀�", "浜岀骇鍛婅", "涓夌骇鍛婅", "鍥涚骇鍛婅"],
sData: [
- level1.battAlarmCount + level1.powerAlarmCount + level1.deviceAlarmCount,
- level2.battAlarmCount + level2.powerAlarmCount + level2.deviceAlarmCount,
- level3.battAlarmCount + level3.powerAlarmCount + level3.deviceAlarmCount,
- level4.battAlarmCount + level4.powerAlarmCount + level4.deviceAlarmCount
+ level1,
+ level2,
+ level3,
+ level4
],
};
});
this.testData = test;
- this.$refs.bar3d.setData(test[this.testLevel]);
+ // 鏁呴殰
+ let fault = {};
+ let _fault = obj.data2.type;
+ lineList.forEach(v => {
+ let _item = v == 0 ? obj.data2.allType : _fault[v];
+ let arr = [];
+ Object.keys(_item).forEach(vv => {
+ arr.push({
+ name: vv,
+ value: _item[vv]
+ });
+ });
+ fault[v] = arr;
+ });
+
+ this.faultData = fault;
+
+ this.$refs.bar3d0.setData(test[this.lineSelect0]);
+ this.$refs.pie.setData(fault[this.lineSelect1]);
+ // 鍛婅鍒楄〃
+ let alarmRt = {};
+ let alarmList = obj.data2.list;
+ lineList.forEach(v => {
+ let _list = v == 0 ? alarmList['allList'] : alarmList[v];
+ alarmRt[v] = _list;
+ });
+ this.alarmRt = alarmRt;
+ this.newItems = alarmRt[this.lineSelect3];
},
testLevelChange(value) {
- this.$refs.bar3d.setData(this.testData[value]);
+ // TODO
+ switch(value) {
+ case 0:
+ this.$refs.bar3d0.setData(this.testData[this.lineSelect0]);
+ break;
+ case 1:
+ this.$refs.pie.setData(this.faultData[this.lineSelect1]);
+ break;
+ case 2:
+ this.$refs.bar3d1.setData(this.workState[this.lineSelect2]);
+ break;
+ case 3:
+ this.newItems = this.alarmRt[this.lineSelect3];
+ break;
+ }
},
// 鏇存柊鍦板浘
updateMap(obj) {
- let data = obj.data2.stationInfList;
- const getColor = (o) => {
- let res = 0;
- res = o.devWorkState <= 3 ? o.devWorkState : 0;
- return ["#0081ff", "#66f842", "#ff6b6c", "#7668f9"][res];
- };
- this.$refs.map.setData(
- data.map((v) => {
- return {
- ...v,
- label: v.stationName3,
- color: getColor(v),
- points: [v.stationLongitude, v.stationLatitude],
- // 鏃犲疄闄呮剰涔�
- value: 100,
- };
- })
- );
- },
- // 鏇存柊鍛婅缁熻
- updateAlarms(obj) {
- let { level1, level2, level3, level4 } = obj.data2.data;
- this.alarms = [
- level1.powerAlarmCount,
- level1.deviceAlarmCount,
- level1.battAlarmCount,
- ];
- this.alarmData = [
- [
- level1.powerAlarmCount,
- level2.powerAlarmCount,
- level3.powerAlarmCount,
- level4.powerAlarmCount,
- ],
- [
- level1.deviceAlarmCount,
- level2.deviceAlarmCount,
- level3.deviceAlarmCount,
- level4.deviceAlarmCount,
- ],
- [
- level1.battAlarmCount,
- level2.battAlarmCount,
- level3.battAlarmCount,
- level4.battAlarmCount,
- ],
- ];
- if (this.$refs.alarmPieChart) {
- this.$refs.alarmPieChart.update();
- }
-
- if (this.$refs.chart_alarm) {
- this.$refs.chart_alarm.setData(this.alarmData);
- }
+ this.statusList = obj.data2 || {};
},
goDevWorkState(num) {
let status = num;
@@ -526,29 +459,6 @@
},
});
},
- // updateDischargeInfo(obj) {
- // const { code, data, data2, msg } = obj;
- // let list = [];
- // if (code && data) {
- // let outTime = 2 * 60; //璁惧瓒呮椂鏃堕棿(2鍒嗛挓)
- // let nowTime = new Date(msg).getTime(); //褰撳墠鏃堕棿
- // list = data2
- // .filter((v) => {
- // // 鍒ゆ柇鏄惁瓒呮椂
- // let record = new Date(v.battTestRecordtime).getTime();
- // return Math.abs(nowTime - record) / 1000 <= outTime;
- // })
- // .map((v) => {
- // // v.stationArea =
- // // v.stationName1 + " " + v.stationName2 + " " + v.stationName5;
- // v.battTestTimelong = formatSeconds(v.battTestTlong);
- // let xuhang = v.loadCurr ? v.battRealCap / v.loadCurr : 0;
- // v.xuhang = xuhang ? sethoubeiTime(xuhang) : "---";
- // return v;
- // });
- // }
- // this.tbl.data = list;
- // },
goDevAlarm() {
this.$router.push({
path: "/alarmMager/deviceTimequery",
@@ -585,12 +495,20 @@
this.$router.push("/dataMager/battGroupMager");
},
initEvent() {
- this.$refs.map.getChart().on("click", (e) => {
- console.log('e', e, '=======123======');
+ // this.$refs.map.getChart().on("click", (e) => {
+ // console.log('e', e, '=======123======');
- });
+ // });
},
},
+
+ computed: {
+ showMarquee() {
+ return typeof this.newItems == "undefined" || this.newItems.length == 0
+ ? false
+ : true;
+ },
+ },
mounted() {
if (this.$refs.alarmPieChart) {
@@ -604,18 +522,61 @@
<style scoped lang="less">
.p-main {
height: 100%;
- display: grid;
- grid-auto-flow: column;
- grid-template-rows: 1fr 1fr 1fr;
- grid-template-columns: 1fr 1.5fr 1fr;
- grid-gap: 8px;
+ // display: grid;
+ // grid-auto-flow: column;
+ // grid-template-rows: 1fr;
+ // grid-template-columns: 1fr 1.95fr 1fr;
+ // grid-gap: 8px;
+ display: flex;
- /deep/ .big-screen-card {
+ .p-side {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ padding-left: 36px;
+ padding-right: 58px;
+ position: relative;
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: url(./images/bg-side.png) left center / auto 100% no-repeat,
+ url(./images/bg-card.png) left center / 100% 100% no-repeat;
+ }
+ &.p-right {
+ padding-left: 68px;
+ padding-right: 36px;
+ &::before {
+ transform: scaleX(-1);
+ }
+ }
+ .row {
+ margin-top: 50px;
+ margin-bottom: 50px;
+
+ }
+ .row~.row {
+ margin-top: 8px;
+ }
+ }
+ .row {
+ flex: 1;
+ :deep(.el-select) {
+ width: 8em;
+ }
+ }
+
+
+ /deep/ .home-card {
padding: 0;
}
.wraper {
- grid-row-start: span 2;
+ flex: 2.4;
+ // grid-row-start: span 2;
display: flex;
flex-direction: column;
@@ -626,15 +587,26 @@
.row2 {
flex: 1.8;
margin-top: 8px;
+ position: relative;
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: url(./images/bg-map-sz.jpg) center center / cover no-repeat;
+ opacity: 0.6;
+ }
}
}
.row.alarm {
- grid-column-start: span 2;
+ // grid-column-start: span 2;
}
.row.test-info {
- grid-row-start: span 2;
+ // grid-row-start: span 2;
}
}
@@ -731,26 +703,36 @@
.item {
cursor: pointer;
display: flex;
+ flex-direction: column;
// border-radius: 6px;
align-items: center;
+ justify-content: center;
+ min-width: 10em;
+ min-height: 4em;
+ background: url(./images/bg-info.png) center center / contain no-repeat;
.name {
- background: #0ff;
- border-radius: 6px;
- color: #333;
- font-size: 18px;
- font-weight: bold;
- padding: 0 10px;
+ // background: #0ff;
+ // border-radius: 6px;
+ // color: #333;
+ // font-size: 18px;
+ // font-weight: bold;
+ // padding: 0 10px;
+ font-size: 14px;
+ margin-top: 10px;
+ color: #0ff;
+ &::after {
+ content: ':';
+ }
}
.num {
- width: 3em;
- height: 1.5em;
- padding: 0 10px;
-
- &.bits5 {
- width: 5em;
- }
+ // width: 3em;
+ // height: 1.5em;
+ // padding: 0 10px;
+ color: #fbfc0d;
+ font-weight: bold;
+ font-size: 22px;
}
}
}
@@ -767,6 +749,14 @@
bottom: 0;
}
}
+.scroller-wraper {
+ position: absolute;
+ left: 0;
+ top: 30px;
+ right: 0;
+ bottom: 30px;
+ overflow: hidden;
+}
/deep/ .mark-list-container {
bottom: 0.4rem;
--
Gitblit v1.9.1