|
@@ -0,0 +1,701 @@
|
|
|
+<template>
|
|
|
+ <div class="photovoltaicCard" id="photovoltaicCard">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <div v-if="dataSourceList.length > 0" class="data-cards">
|
|
|
+ <el-col :span="6" v-for="item in dataSourceList" :key="item.code">
|
|
|
+ <div class="card-list">
|
|
|
+ <div class="border-corner">
|
|
|
+ <div class="border-top"></div>
|
|
|
+ <div class="border-right"></div>
|
|
|
+ <div class="border-bottom"></div>
|
|
|
+ <div class="border-left"></div>
|
|
|
+ </div>
|
|
|
+ <div class="card-status" v-if="isStation" @click="showCurve(item)">
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ item.CZZT?.value == 0
|
|
|
+ ? require('@assets/img/images/state_normal.png')
|
|
|
+ : item.CZZT?.value == 1
|
|
|
+ ? require('@assets/img/images/state_fault.png')
|
|
|
+ : require('@assets/img/images/state_broken-chain.png')
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- <img :src="item.image ? item.image : !isStation ? require('@assets/img/images/level-one_company.png') : require('@assets/img/images/level-two_power-plant.png')" class="card-img" @click="jumpLevelTwo(item)">-->
|
|
|
+ <img
|
|
|
+ v-show="theme === 'operate'"
|
|
|
+ :src="
|
|
|
+ item.image
|
|
|
+ ? item.image
|
|
|
+ : item.orgType != 'STA'
|
|
|
+ ? require('@assets/img/images/level-one_company.png')
|
|
|
+ : require('@assets/img/images/level-two_power-plant.png')
|
|
|
+ "
|
|
|
+ class="card-img"
|
|
|
+ @click="jumpLevelTwo(item)"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div v-show="theme === 'maintenance'" class="leftData">
|
|
|
+ <div>
|
|
|
+ <div class="data-num">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ :content="getchangeTime(item.RFDL.dateTime)"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span>{{ item.RFDL.value }}</span> kWh
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="data-prop">日发电量</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="data-num">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ :content="getchangeTime(item.RLYXS.dateTime)"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span>{{ item.RLYXS.value }}</span> h
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="data-prop">日等效小时</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card-data">
|
|
|
+ <div class="card-company">
|
|
|
+ <div
|
|
|
+ class="company-name card-hover"
|
|
|
+ :title="item.anames"
|
|
|
+ @click="jumpLevelTwo(item)"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ :class="
|
|
|
+ isStation ? 'icon-Photovoltaic-pv' : 'icon-enterprise'
|
|
|
+ "
|
|
|
+ ></i>
|
|
|
+ {{ item.anames }}
|
|
|
+ </div>
|
|
|
+ <div class="company-address" :title="item.address">
|
|
|
+ <i class="icon-positioning"></i>
|
|
|
+ {{ item.address }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul class="data-list" v-show="theme === 'operate'">
|
|
|
+ <li>
|
|
|
+ <div class="data-prop">接入容量</div>
|
|
|
+ <div class="data-num">
|
|
|
+ <span>{{ item.jrrl || 0 }}</span> kWp
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="data-prop">实际功率</div>
|
|
|
+ <div class="data-num">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ :content="getchangeTime(item.SSZGL.dateTime)"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span>{{ item.SSZGL.value }}</span> kW
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="data-prop">日发电量</div>
|
|
|
+ <div class="data-num">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ :content="getchangeTime(item.RFDL.dateTime)"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span>{{ item.RFDL.value }}</span> kWh
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="data-prop">月发电量</div>
|
|
|
+ <div class="data-num">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ :content="getchangeTime(item.YFDL.dateTime)"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span>{{ item.YFDL.value }}</span> 万kWh
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="data-prop">日等效小时</div>
|
|
|
+ <div class="data-num">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ :content="getchangeTime(item.RLYXS.dateTime)"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span>{{ item.RLYXS.value }}</span> h
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="data-prop">
|
|
|
+ {{ !isStation ? "总发电量" : "总辐射量" }}
|
|
|
+ </div>
|
|
|
+ <div class="data-num">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ :content="
|
|
|
+ getchangeTime(
|
|
|
+ !isStation ? item.ZFDL.dateTime : item.ZFSL.dateTime
|
|
|
+ )
|
|
|
+ "
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span>{{
|
|
|
+ !isStation ? item.ZFDL.value : item.ZFSL.value
|
|
|
+ }}</span>
|
|
|
+ {{ !isStation ? "万kWh" : "MJ/㎡" }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="data-maintenance" v-show="theme === 'maintenance'">
|
|
|
+ <li class="child-interrupt">
|
|
|
+ <div class="service-label">通讯中断</div>
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ :content="getchangeTime(item.TXZDTS?.dateTime)"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span class="service-data">{{
|
|
|
+ dataFix(item.TXZDTS?.value)
|
|
|
+ }}</span>
|
|
|
+ {{
|
|
|
+ calcPercentage(
|
|
|
+ [
|
|
|
+ item.TXZDTS?.value,
|
|
|
+ item.SBTJTS?.value,
|
|
|
+ item.DZYXTS?.value,
|
|
|
+ item.ZCYXTS?.value,
|
|
|
+ ],
|
|
|
+ 0
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </li>
|
|
|
+ <li class="child-halt">
|
|
|
+ <div class="service-label">设备停机</div>
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ :content="getchangeTime(item.SBTJTS?.dateTime)"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span class="service-data">{{
|
|
|
+ dataFix(item.SBTJTS?.value)
|
|
|
+ }}</span>
|
|
|
+ {{
|
|
|
+ calcPercentage(
|
|
|
+ [
|
|
|
+ item.TXZDTS?.value,
|
|
|
+ item.SBTJTS?.value,
|
|
|
+ item.DZYXTS?.value,
|
|
|
+ item.ZCYXTS?.value,
|
|
|
+ ],
|
|
|
+ 1
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </li>
|
|
|
+ <li class="child-fault">
|
|
|
+ <div class="service-label">带障运行</div>
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ :content="getchangeTime(item.DZYXTS?.dateTime)"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span class="service-data">{{
|
|
|
+ dataFix(item.DZYXTS?.value)
|
|
|
+ }}</span>
|
|
|
+ {{
|
|
|
+ calcPercentage(
|
|
|
+ [
|
|
|
+ item.TXZDTS?.value,
|
|
|
+ item.SBTJTS?.value,
|
|
|
+ item.DZYXTS?.value,
|
|
|
+ item.ZCYXTS?.value,
|
|
|
+ ],
|
|
|
+ 2
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </li>
|
|
|
+ <li class="child-normal">
|
|
|
+ <div class="service-label">正常运行</div>
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ :content="getchangeTime(item.ZCYXTS?.dateTime)"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <span class="service-data">{{
|
|
|
+ dataFix(item.ZCYXTS?.value)
|
|
|
+ }}</span>
|
|
|
+ {{
|
|
|
+ calcPercentage(
|
|
|
+ [
|
|
|
+ item.TXZDTS?.value,
|
|
|
+ item.SBTJTS?.value,
|
|
|
+ item.DZYXTS?.value,
|
|
|
+ item.ZCYXTS?.value,
|
|
|
+ ],
|
|
|
+ 3
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ <div v-else class="empty-data">
|
|
|
+ <el-col :span="24">暂无数据</el-col>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <qushi-dialog ref="child" :chartName="'对比曲线'"></qushi-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import qushiDialog from "@/views/layout/stateMonitor/factoryMonitor/components/qushiDialog";
|
|
|
+export default {
|
|
|
+ name: "photovoltaicCard", // 公司首页-卡片
|
|
|
+ components: {
|
|
|
+ qushiDialog,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ dataSource: {
|
|
|
+ type: Array,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ chooseCom: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ isStation: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ theme: {
|
|
|
+ type: String,
|
|
|
+ default: "operate",
|
|
|
+ },
|
|
|
+ typeStr: {
|
|
|
+ type: String,
|
|
|
+ default: "-1",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataSourceList: [],
|
|
|
+ page: {
|
|
|
+ pagesize: 8,
|
|
|
+ currentPage: 2,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ //转换时间
|
|
|
+ getchangeTime(data) {
|
|
|
+ if (data != undefined && data != "") {
|
|
|
+ var date = new Date(data);
|
|
|
+ var y = date.getFullYear();
|
|
|
+ var m = date.getMonth() + 1;
|
|
|
+ var d = date.getDate();
|
|
|
+ var h = date.getHours();
|
|
|
+ var f = date.getMinutes();
|
|
|
+ var s = date.getSeconds();
|
|
|
+ m = m < 10 ? "0" + m : m;
|
|
|
+ d = d < 10 ? "0" + d : d;
|
|
|
+ h = h < 10 ? "0" + h : h;
|
|
|
+ f = f < 10 ? "0" + f : f;
|
|
|
+ s = s < 10 ? "0" + s : s;
|
|
|
+ return y + "-" + m + "-" + d + " " + h + ":" + f + ":" + s;
|
|
|
+ } else {
|
|
|
+ return "--";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击状态 打开对比曲线图
|
|
|
+ showCurve(item) {
|
|
|
+ const param = [
|
|
|
+ {
|
|
|
+ statiomName: "场站状态",
|
|
|
+ stse: item.NAME,
|
|
|
+ sts: item.curveData.curveCZZT,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ // const param = [
|
|
|
+ // {statiomName: '实时功率', stse: item.NAME, sts: item.curveData.curveSSZGL},
|
|
|
+ // {statiomName: '日发电量', stse: item.NAME, sts: item.curveData.curveRFDL},
|
|
|
+ // {statiomName: '月发电量', stse: item.NAME, sts: item.curveData.curveYFDL},
|
|
|
+ // {statiomName: '总辐射量', stse: item.NAME, sts: item.curveData.curveZFSL},
|
|
|
+ // {statiomName: '日等效小时', stse: item.NAME, sts: item.curveData.curveRLYXS},
|
|
|
+ // ]
|
|
|
+ this.$refs.child.openCurvDatas(param);
|
|
|
+ },
|
|
|
+ calcPercentage(arr, index) {
|
|
|
+ let total = 0;
|
|
|
+ arr.forEach((num) => {
|
|
|
+ if (typeof num == "number") {
|
|
|
+ total += num;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (typeof arr[index] == "number") {
|
|
|
+ return ((arr[index] / total) * 100).toFixed(2) + "%";
|
|
|
+ } else {
|
|
|
+ return arr[index];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ jumpLevelTwo(param) {
|
|
|
+ if (param.orgType == "STA") {
|
|
|
+ debugger
|
|
|
+ console.log({ companyCode: param.code, stationCode: param.code,type:this.typeStr})
|
|
|
+ // 场站跳转详情
|
|
|
+ this.$router.push({
|
|
|
+ name: "lighthome",
|
|
|
+ query: { companyCode: param.code, stationCode: param.code,type:this.typeStr},
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 公司跳转场站
|
|
|
+ this.$router.push({
|
|
|
+ path: "/stateMonitor/photovoltaicLevelTwoStation",
|
|
|
+ query: { companyCode: param.code},
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataFix(num) {
|
|
|
+ let str = typeof num == "number" ? Number(num).toFixed(0) : num;
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ deepClone(ob) {
|
|
|
+ var obj = JSON.stringify(ob);
|
|
|
+ var objClone = JSON.parse(obj);
|
|
|
+ return objClone;
|
|
|
+ },
|
|
|
+ addRollListener() {
|
|
|
+ const dom = document.getElementById("photovoltaicCard");
|
|
|
+ dom.addEventListener("scroll", () => {
|
|
|
+ const scrollTop = dom.scrollTop;
|
|
|
+ const offsetHeight = dom.offsetHeight;
|
|
|
+ const clientHeight = dom.clientHeight;
|
|
|
+ const scrollHeight = dom.scrollHeight;
|
|
|
+
|
|
|
+ if (clientHeight + scrollTop + 1 > scrollHeight) {
|
|
|
+ if (
|
|
|
+ this.page.total + this.page.currentPage <
|
|
|
+ this.page.pagesize * this.page.currentPage
|
|
|
+ ) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.page.currentPage = this.page.currentPage + 1;
|
|
|
+ let arr = this.deepClone(this.dataSource);
|
|
|
+ this.dataSourceList = arr.splice(
|
|
|
+ 0,
|
|
|
+ this.page.pagesize * this.page.currentPage
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ unmounted() {},
|
|
|
+ computed: {},
|
|
|
+ watch: {
|
|
|
+ dataSource() {
|
|
|
+ this.page.total = this.dataSource.length;
|
|
|
+ let arr = this.deepClone(this.dataSource);
|
|
|
+ this.dataSourceList = arr.splice(
|
|
|
+ 0,
|
|
|
+ this.page.pagesize * this.page.currentPage
|
|
|
+ );
|
|
|
+
|
|
|
+ // const dom = document.getElementById('photovoltaicCard')
|
|
|
+ // dom.scrollTop=0;
|
|
|
+ // this.page.currentPage=2;
|
|
|
+
|
|
|
+ this.$nextTick(() => this.addRollListener());
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+::v-deep .el-input--mini .el-input__inner {
|
|
|
+ background: #212933 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.photovoltaicCard {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: calc(100vh - 414px);
|
|
|
+ overflow: auto;
|
|
|
+ padding-bottom: 50px;
|
|
|
+
|
|
|
+ .el-row {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .card-hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-list {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 250px;
|
|
|
+ background: rgba(11, 11, 11, 0.45);
|
|
|
+ padding: 25px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 15px;
|
|
|
+
|
|
|
+ .card-status {
|
|
|
+ position: absolute;
|
|
|
+ width: 66px;
|
|
|
+ top: 0px;
|
|
|
+ right: 0px;
|
|
|
+ z-index: 5;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border-corner {
|
|
|
+ position: absolute;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 0;
|
|
|
+
|
|
|
+ div {
|
|
|
+ position: absolute;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border-top {
|
|
|
+ border-top: 1px solid;
|
|
|
+ border-left: 1px solid;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border-right {
|
|
|
+ right: 0;
|
|
|
+ border-top: 1px solid;
|
|
|
+ border-right: 1px solid;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border-bottom {
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ border-bottom: 1px solid;
|
|
|
+ border-right: 1px solid;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border-left {
|
|
|
+ bottom: 0;
|
|
|
+ border-bottom: 1px solid;
|
|
|
+ border-left: 1px solid;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-img {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ width: 158px;
|
|
|
+ height: 100%;
|
|
|
+ margin-right: 25px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftData {
|
|
|
+ width: 158px;
|
|
|
+ height: 100%;
|
|
|
+ margin-right: 25px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ .data-num {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1b99ff;
|
|
|
+ > div > span {
|
|
|
+ font-family: "Bicubik";
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ > div:last-child {
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data-prop {
|
|
|
+ font-font: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-data {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ flex: 1;
|
|
|
+ width: 50%;
|
|
|
+
|
|
|
+ .card-company {
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid #3c3f43;
|
|
|
+
|
|
|
+ .company-name {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .company-address {
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #b3b3b3;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data-list {
|
|
|
+ margin-top: 15px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ li {
|
|
|
+ width: 50%;
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ .data-prop {
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-num {
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 50px;
|
|
|
+ color: rgb(27, 147, 244);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data-maintenance {
|
|
|
+ margin-top: 15px;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ .service-label {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .service-label::before {
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ background: #a7a7a7;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .service-data {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .child-interrupt {
|
|
|
+ .service-label::before {
|
|
|
+ background: #a7a7a7;
|
|
|
+ }
|
|
|
+ .box-item {
|
|
|
+ color: #fff;
|
|
|
+ .service-data {
|
|
|
+ color: #a7a7a7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .child-halt {
|
|
|
+ .service-label::before {
|
|
|
+ background: #ba3237;
|
|
|
+ }
|
|
|
+ .service-data {
|
|
|
+ color: #ba3237;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .child-fault {
|
|
|
+ .service-label::before {
|
|
|
+ background: #e17d24;
|
|
|
+ }
|
|
|
+ .service-data {
|
|
|
+ color: #e17d24;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .child-normal {
|
|
|
+ .service-label::before {
|
|
|
+ background: #1986e0;
|
|
|
+ }
|
|
|
+ .service-data {
|
|
|
+ color: #1986e0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-cards {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-data {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|