|
|
@@ -0,0 +1,1590 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <headerButton @renderData="renderData" :type="-2" :tabShow="true" />
|
|
|
+ <div class="matrix-body">
|
|
|
+ <div class="body-title">
|
|
|
+ <div class="base-inf">
|
|
|
+ <div class="title-name">
|
|
|
+ <div class="imgs">
|
|
|
+ <img src="@assets/imgs/downg.png" />
|
|
|
+ <img src="@assets/imgs/ptyup.png" class="qty_img" />
|
|
|
+ </div>
|
|
|
+ <div class="base-num" @click="handleClick('all')">
|
|
|
+ <div class="ic-nam">
|
|
|
+ <i class="svg-icon svg-icon-sm svg-icon-white">
|
|
|
+ <SvgIcon svgid="svg-station-surveillance"></SvgIcon
|
|
|
+ ></i>
|
|
|
+ <p class="base-name">{{ matrixOther?.czmc }}</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="ic-fan">
|
|
|
+ <i class="svg-icon svg-icon-sm svg-icon-white">
|
|
|
+ <SvgIcon svgid="svg-photovoltaic"></SvgIcon
|
|
|
+ ></i>
|
|
|
+ <p class="nums">{{ matrixOther?.zjsl }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="matrix-status">
|
|
|
+ <div
|
|
|
+ class="title-status"
|
|
|
+ :class="item.color"
|
|
|
+ v-for="(item, index) in titleList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="status-first" @click="handleClick(item.value1)">
|
|
|
+ <div class="matrix-status-left">{{ item.name }}</div>
|
|
|
+ <div class="matrix-status-right">
|
|
|
+ {{ matrixState[item.code] }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="status-end" @click="handleClick(item.value2)">
|
|
|
+ <div class="matrix-status-left">
|
|
|
+ <i
|
|
|
+ class="svg-icon svg-icon-sm"
|
|
|
+ :class="
|
|
|
+ $store.state.themeName === 'dark'
|
|
|
+ ? 'svg-icon-' + item.color
|
|
|
+ : 'white'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon :svgid="item.icon1"></SvgIcon>
|
|
|
+ </i>
|
|
|
+ {{ item.text1 }}
|
|
|
+ </div>
|
|
|
+ <div class="matrix-status-right">
|
|
|
+ {{ matrixState[item.code1] }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="status-end" @click="handleClick(item.value3)">
|
|
|
+ <div class="matrix-status-left">
|
|
|
+ <i
|
|
|
+ class="svg-icon svg-icon-sm"
|
|
|
+ :class="
|
|
|
+ $store.state.themeName === 'dark'
|
|
|
+ ? 'svg-icon-' + item.color
|
|
|
+ : 'white'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon :svgid="item.icon2"></SvgIcon>
|
|
|
+ </i>
|
|
|
+ {{ item.text2 }}
|
|
|
+ </div>
|
|
|
+ <div class="matrix-status-right">
|
|
|
+ {{ matrixState[item.code2] }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="unpaid" @click="handleStationCurveClick(matrixOther.czid)">
|
|
|
+ <div class="unpaid-list">
|
|
|
+ <div
|
|
|
+ class="unpaid-item"
|
|
|
+ v-for="(item, index) in unpaidList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="percent">{{ item.text }}</div>
|
|
|
+ <div class="nums">
|
|
|
+ {{ matrixOther[item.code] }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ height: calc(100vh - 207px);
|
|
|
+ overflow-y: auto;
|
|
|
+ background-color: rgba(0, 0, 0, 0.45);
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 0 0 5px 5px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="matrixs"
|
|
|
+ v-for="(value, indexe) of showMatrixList"
|
|
|
+ :key="indexe"
|
|
|
+ >
|
|
|
+ <div class="line_all">
|
|
|
+ <div class="line-namebox">
|
|
|
+ <div class="line-name">
|
|
|
+ {{ indexe }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="line-list">
|
|
|
+ <div
|
|
|
+ class="matrix-item"
|
|
|
+ v-for="(val, indexes) in showMatrixList[indexe]"
|
|
|
+ :key="indexes"
|
|
|
+ >
|
|
|
+ <!-- 风机颜色判断-->
|
|
|
+ <div
|
|
|
+ class="matrix-card"
|
|
|
+ style="cursor: pointer"
|
|
|
+ :class="
|
|
|
+ val.yxzt !== '' && colorList[val.yxzt]
|
|
|
+ ? colorList[Number(val.yxzt)]
|
|
|
+ : 'gray'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="info">
|
|
|
+ <div
|
|
|
+ class="card-left"
|
|
|
+ @click="handleLeftClick(val, value.id)"
|
|
|
+ >
|
|
|
+ <div class="card-name">{{ val.name }}</div>
|
|
|
+ <i
|
|
|
+ class="svg-icon svg-icon-sm"
|
|
|
+ :class="
|
|
|
+ val.yxzt === 4 || val.yxzt === 5
|
|
|
+ ? 'svg-icon-white'
|
|
|
+ : `svg-icon-${colorList[Number(val.yxzt)]}`
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon :svgid="mapping[Number(val.yxzt)]"></SvgIcon
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ <div class="dashed" />
|
|
|
+ <div class="card-right" @click="handleRightClick(val.id)">
|
|
|
+ <div class="right-item">
|
|
|
+ <i
|
|
|
+ class="svg-icon svg-icon-sm"
|
|
|
+ :class="
|
|
|
+ val.yxzt === 4 || val.yxzt === 5
|
|
|
+ ? 'svg-icon-white'
|
|
|
+ : `svg-icon-${colorList[Number(val.yxzt)]}`
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon svgid="svg-P"></SvgIcon
|
|
|
+ ></i>
|
|
|
+ <div class="right-value">
|
|
|
+ {{
|
|
|
+ val.ssgl
|
|
|
+ ? val && Number(val.ssgl)?.toFixed(2)
|
|
|
+ : "0.00"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-item">
|
|
|
+ <i
|
|
|
+ class="svg-icon svg-icon-sm"
|
|
|
+ :class="
|
|
|
+ val.yxzt === 4 || val.yxzt === 5
|
|
|
+ ? 'svg-icon-white'
|
|
|
+ : `svg-icon-${colorList[Number(val.yxzt)]}`
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon svgid="svg-A"></SvgIcon
|
|
|
+ ></i>
|
|
|
+ <div class="right-value">
|
|
|
+ {{ val.jldl ? Number(val.jldl)?.toFixed(2) : "0.00" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-item">
|
|
|
+ <i
|
|
|
+ class="svg-icon svg-icon-sm"
|
|
|
+ :class="
|
|
|
+ val.yxzt === 4 || val.yxzt === 5
|
|
|
+ ? 'svg-icon-white'
|
|
|
+ : `svg-icon-${colorList[Number(val.yxzt)]}`
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon svgid="svg-V"></SvgIcon
|
|
|
+ ></i>
|
|
|
+ <div class="right-value">
|
|
|
+ {{ val.jldy ? Number(val.jldy)?.toFixed(2) : "0.00" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="matrix-progress">
|
|
|
+ <div
|
|
|
+ class="progress-block"
|
|
|
+ :style="{
|
|
|
+ width: (val.rate > 100 ? 100 : val.rate) + '%',
|
|
|
+ }"
|
|
|
+ :class="
|
|
|
+ findUpColor(ratelist, parseInt(Number(val.ssqfzt)) + 1)
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ class="dialogs"
|
|
|
+ width="90%"
|
|
|
+ top="40px"
|
|
|
+ v-model="displayMatrix"
|
|
|
+ :show-close="true"
|
|
|
+ destroy-on-close
|
|
|
+ >
|
|
|
+ <template #title>
|
|
|
+ <div class="dialog-title">
|
|
|
+ <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
|
|
|
+ <div class="title">设备详情</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="dialog-body" style="height: 77vh">
|
|
|
+ <img class="dialog-img" src="@assets/imgs/dialog.png" />
|
|
|
+ <LightDetail :wind="wind" :flag="flag" showHeight="77vh"></LightDetail>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <qushi-dialog ref="child" :chartName="chartName"></qushi-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import qushiDialog from "@/components/qushi/qushiDialog.vue";
|
|
|
+import headerButton from "@/views/stateMonitor/factoryMonitor/components/headerButton.vue";
|
|
|
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
|
|
|
+import LightDetail from "@/components/lightDetial/index.vue";
|
|
|
+import api from "@/api/cockpit/matrix/index.js";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import { deepClone, findUpColor } from "@/utills/func.js";
|
|
|
+export default {
|
|
|
+ name: "lightMatrix",
|
|
|
+ components: {
|
|
|
+ headerButton,
|
|
|
+ SvgIcon,
|
|
|
+ LightDetail,
|
|
|
+ qushiDialog,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ units: [],
|
|
|
+ unitDatas: [{ flag: false, min: 0, max: 0, codex: 0 }],
|
|
|
+ color: [
|
|
|
+ "#1985de",
|
|
|
+ "#ff8300",
|
|
|
+ "#06a746",
|
|
|
+ "#3eede7",
|
|
|
+ "#eb0f7c",
|
|
|
+ "#dfdc0a",
|
|
|
+ "#de0feb",
|
|
|
+ "#cca4e3",
|
|
|
+ ],
|
|
|
+ z: "",
|
|
|
+ displayMatrix: false,
|
|
|
+ stationCode: "",
|
|
|
+ dialogDetail: false,
|
|
|
+ chartsDatas: [],
|
|
|
+ detailsValue: [],
|
|
|
+ // 欠发情况
|
|
|
+ ratelist: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ color: "upGreen",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+
|
|
|
+ color: "upSkyBlue",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+
|
|
|
+ color: "upBlue",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+
|
|
|
+ color: "upPurple",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+
|
|
|
+ color: "upPink",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ssPv: [
|
|
|
+ {
|
|
|
+ statiomName: "功率",
|
|
|
+ stse: "stse",
|
|
|
+ sts: "AI114",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ statiomName: "电流",
|
|
|
+ stse: "stse",
|
|
|
+ sts: "AI075",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ statiomName: "电压",
|
|
|
+ stse: "stse",
|
|
|
+ sts: "AIG055",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 左侧标签
|
|
|
+ titleList: [
|
|
|
+ {
|
|
|
+ color: "blue",
|
|
|
+ name: "待机",
|
|
|
+ text1: "待机",
|
|
|
+ text2: "手动停机",
|
|
|
+ value1: "dj",
|
|
|
+ value2: "0",
|
|
|
+ value3: "1",
|
|
|
+ code: "gf_djnum",
|
|
|
+ code1: "gf_dfnum",
|
|
|
+ code2: "gf_sdtjnum",
|
|
|
+ icon1: "svg-standby",
|
|
|
+ icon2: "svg-manual",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: "green",
|
|
|
+ name: "并网",
|
|
|
+ text1: "正常运行",
|
|
|
+ text2: "降出力运行",
|
|
|
+ value1: "yx",
|
|
|
+ value2: "2",
|
|
|
+ value3: "3",
|
|
|
+ code: "gf_yxnum",
|
|
|
+ code1: "gf_zcfdnum",
|
|
|
+ code2: "gf_jclyxnum",
|
|
|
+ icon1: "svg-normal-power",
|
|
|
+ icon2: "svg-drop-output",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: "red",
|
|
|
+ name: "故障",
|
|
|
+ text1: "故障停机",
|
|
|
+ text2: "故障受累",
|
|
|
+ value1: "gz",
|
|
|
+ value2: "4",
|
|
|
+ value3: "5",
|
|
|
+ code: "gf_gznum",
|
|
|
+ code1: "gf_gzcnslnum",
|
|
|
+ code2: "gf_gztjnum",
|
|
|
+ icon1: "svg-gz-downtime",
|
|
|
+ icon2: "svg-field-involved",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: "orange",
|
|
|
+ name: "检修",
|
|
|
+ text1: "检修停机",
|
|
|
+ text2: "检修受累",
|
|
|
+ value1: "jx",
|
|
|
+ value2: "6",
|
|
|
+ value3: "7",
|
|
|
+ code: "gf_jxnum",
|
|
|
+ code1: "gf_jxtjnum",
|
|
|
+ code2: "gf_jxclslnum",
|
|
|
+ icon1: "svg-jx-downtime",
|
|
|
+ icon2: "svg-field-involved",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: "pink",
|
|
|
+ name: "限电",
|
|
|
+ text1: "限电降出力",
|
|
|
+ text2: "限电停机",
|
|
|
+ value1: "xd",
|
|
|
+ value2: "8",
|
|
|
+ value3: "9",
|
|
|
+ code: "gf_xdnum",
|
|
|
+ code1: "gf_xdjclnum",
|
|
|
+ code2: "gf_tjnum",
|
|
|
+ icon1: "svg-limit-power",
|
|
|
+ icon2: "svg-downtime",
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ color: "write",
|
|
|
+ name: "受累",
|
|
|
+ text1: "电网受累",
|
|
|
+ text2: "环境受累",
|
|
|
+ value1: "sl",
|
|
|
+ value2: "10",
|
|
|
+ value3: "11",
|
|
|
+ code: "gf_slnum",
|
|
|
+ code1: "gf_slhjnum",
|
|
|
+ code2: "gf_sldwnum",
|
|
|
+ icon1: "svg-intranet-involvement",
|
|
|
+ icon2: "svg-environment",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: "gray",
|
|
|
+ name: "离线",
|
|
|
+ text1: "离线",
|
|
|
+ text2: "未知",
|
|
|
+ value1: "lx",
|
|
|
+ value2: "12",
|
|
|
+ value3: "13",
|
|
|
+ code: "gf_lxyznum",
|
|
|
+ code1: "gf_lxnum",
|
|
|
+ code2: "gf_wznum",
|
|
|
+ icon1: "svg-offline",
|
|
|
+ icon2: "svg-unknown",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 右侧标签
|
|
|
+ unpaidList: [
|
|
|
+ { text: "光照强度(W/m²)", code: "gzqd" },
|
|
|
+ { text: "预测功率(MW)", code: "ycgl" },
|
|
|
+ { text: "保证功率(MW)", code: "bzgl" },
|
|
|
+ // { text: "理论功率(MW)", code: "llgl" },
|
|
|
+ { text: "实际功率(MW)", code: "sjgl" },
|
|
|
+ // { text: "AGC指令", code: "agc" },
|
|
|
+ // { text: "出线功率(MW)", code: "cxgl" },
|
|
|
+ ],
|
|
|
+ stse: [
|
|
|
+ {
|
|
|
+ statiomName: "光照强度",
|
|
|
+ stse: "QCAMC",
|
|
|
+ sts: "SSPJGZD",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ statiomName: "保证功率",
|
|
|
+ stse: "QCAMC",
|
|
|
+ sts: "SSZBZGL",
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // statiomName: "理论功率",
|
|
|
+ // stse: "QCAMC",
|
|
|
+ // sts: "SSZNHGLZS",
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ statiomName: "实际功率",
|
|
|
+ stse: "QCAMC",
|
|
|
+ sts: "SSZGL",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ stsed: "",
|
|
|
+ mapping: {
|
|
|
+ 0: "svg-standby",
|
|
|
+ 1: "svg-manual",
|
|
|
+ 2: "svg-normal-power",
|
|
|
+ 3: "svg-drop-output",
|
|
|
+ 4: "svg-gz-downtime",
|
|
|
+ 5: "svg-field-involved",
|
|
|
+ 6: "svg-jx-downtime",
|
|
|
+ 7: "svg-field-involved",
|
|
|
+ 8: "svg-limit-power",
|
|
|
+ 9: "svg-downtime",
|
|
|
+ 10: "svg-intranet-involvement",
|
|
|
+ 11: "svg-environment",
|
|
|
+ 12: "svg-offline",
|
|
|
+ 13: "svg-unknown",
|
|
|
+ },
|
|
|
+ colorList: [
|
|
|
+ "blue",
|
|
|
+ "blue",
|
|
|
+ "green",
|
|
|
+ "green",
|
|
|
+ "red",
|
|
|
+ "red",
|
|
|
+ "orange",
|
|
|
+ "orange",
|
|
|
+ "pink",
|
|
|
+ "pink",
|
|
|
+ "write",
|
|
|
+ "write",
|
|
|
+ "gray",
|
|
|
+ "gray",
|
|
|
+ ],
|
|
|
+ status: 0,
|
|
|
+ totle: 0,
|
|
|
+ pointList: [],
|
|
|
+ titleArr: [],
|
|
|
+ showMatrixList: [],
|
|
|
+ current: "all",
|
|
|
+ timer: null,
|
|
|
+ param: {},
|
|
|
+ pointArr: {},
|
|
|
+ data1: [],
|
|
|
+ data2: [],
|
|
|
+ v: [],
|
|
|
+ wind: {},
|
|
|
+ chartsData: [],
|
|
|
+ dialogVisible: false,
|
|
|
+ chartName: "对比曲线",
|
|
|
+ wtType: -2,
|
|
|
+ flag: false,
|
|
|
+ datesr: "",
|
|
|
+ glStse: [
|
|
|
+ {
|
|
|
+ statiomName: "光照强度",
|
|
|
+ stse: "CZMC",
|
|
|
+ sts: "SSPJGZD",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ statiomName: "预测功率",
|
|
|
+ stse: "CZMC",
|
|
|
+ sts: "FCFGDQDT0001",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ statiomName: "保证功率",
|
|
|
+ stse: "CZMC",
|
|
|
+ sts: "SSZBZGL",
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // statiomName: "理论功率",
|
|
|
+ // stse: "CZMC",
|
|
|
+ // sts: "SSZNHGLZS",
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ statiomName: "实际功率",
|
|
|
+ stse: "CZMC",
|
|
|
+
|
|
|
+ sts: "SSZGL",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ glStsee: [],
|
|
|
+ singleMatrixInfo: {}, //阵区矩阵数据
|
|
|
+ tab: "", //集中式 组串式
|
|
|
+ matrixState: {}, //矩阵状态数据
|
|
|
+ matrixOther: {}, //矩阵其他数据
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.getSingleMatrix();
|
|
|
+ }, 5000);
|
|
|
+ },
|
|
|
+ unmounted() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ deepClone,
|
|
|
+ findUpColor,
|
|
|
+ renderData(company, wpid, name, tab) {
|
|
|
+ this.tab = tab;
|
|
|
+ if (wpid) {
|
|
|
+ this.stationCode = wpid;
|
|
|
+ this.getSingleMatrix();
|
|
|
+ } else {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ this.singleMatrixInfo = {};
|
|
|
+ this.showMatrixList = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取单场站矩阵数据
|
|
|
+ getSingleMatrix() {
|
|
|
+ if (this.stationCode) {
|
|
|
+ api
|
|
|
+ .matrixSinglePushFL({ wpid: this.stationCode, type: this.tab })
|
|
|
+ .then(({ data }) => {
|
|
|
+ this.matrixState = data.mxzt;
|
|
|
+ this.matrixOther = data.qtsj;
|
|
|
+ this.singleMatrixInfo = data.ZQ;
|
|
|
+ if (this.current) {
|
|
|
+ this.handleClick(this.current);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击左侧数据弹出曲线
|
|
|
+ handleLeftClick(wt, wpid) {
|
|
|
+ this.displayMatrix = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.wind = {
|
|
|
+ wtid: wt.id,
|
|
|
+ wtname: wt.name,
|
|
|
+ wtType: this.wtType,
|
|
|
+ wpid,
|
|
|
+ status: wt.yxzt,
|
|
|
+ };
|
|
|
+ this.flag = true;
|
|
|
+ });
|
|
|
+ // this.$refs.windDetail.start(wt);
|
|
|
+ },
|
|
|
+ // 点击设备右侧数据弹出曲线
|
|
|
+ handleRightClick(wtid) {
|
|
|
+ let y = this.deepClone(this.ssPv);
|
|
|
+ this.$refs.child.openCurvDatas(y, 2, wtid);
|
|
|
+ },
|
|
|
+ // 点击期次统计项弹出曲线
|
|
|
+ handleIndicatorClick(wpid) {
|
|
|
+ let y = this.deepClone(this.stse);
|
|
|
+ this.$refs.child.openCurvDatas(y, 5, wpid);
|
|
|
+ },
|
|
|
+ // 点击场站统计项弹出曲线
|
|
|
+ handleStationCurveClick(wpid) {
|
|
|
+ let y = this.deepClone(this.glStse);
|
|
|
+ this.$refs.child.openCurvDatas(y, 1, wpid);
|
|
|
+ },
|
|
|
+ curveSwitchData(e) {
|
|
|
+ this.value = e.showy;
|
|
|
+ var option = "{";
|
|
|
+ this.detailsValue.forEach((value, index) => {
|
|
|
+ option += "'" + value.name + "'" + ":" + value.showy + ",";
|
|
|
+ });
|
|
|
+ option = option.substring(0, option.length - 1);
|
|
|
+ option += "}";
|
|
|
+ var json = eval("(" + option + ")");
|
|
|
+ this.$refs.windChartCom.changDateVisible(json);
|
|
|
+ },
|
|
|
+ tagCellStyle({ row, column, rowIndex, columnIndex }) {
|
|
|
+ if (!row.showy) {
|
|
|
+ return { color: "#FAEBD7", fontSize: "11px" };
|
|
|
+ }
|
|
|
+ if ((columnIndex == 0 || columnIndex == 1) && row.showy) {
|
|
|
+ return { color: this.color[rowIndex], fontSize: "13px" };
|
|
|
+ } else {
|
|
|
+ return { padding: "6px 0px" };
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击切换状态
|
|
|
+ handleClick(val) {
|
|
|
+ this.current = val;
|
|
|
+ this.handleClickWind();
|
|
|
+ },
|
|
|
+ // 状态切换改变数据
|
|
|
+ handleClickWind() {
|
|
|
+ this.showMatrixList = JSON.parse(JSON.stringify(this.singleMatrixInfo));
|
|
|
+ let matrixList = this.singleMatrixInfo;
|
|
|
+ if (this.current !== "all") {
|
|
|
+ for (let key in this.showMatrixList) {
|
|
|
+ this.showMatrixList[key] = [];
|
|
|
+ }
|
|
|
+ switch (this.current) {
|
|
|
+ case "dj":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 0 || item.yxzt == 1) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "0":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 0) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "1":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 1) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "yx":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 2 || item.yxzt == 3) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "2":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 2) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "3":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 3) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "gz":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 4 || item.yxzt == 5) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "4":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 4) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "5":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 5) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "jx":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 6 || item.yxzt == 7) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "6":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 6) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "7":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 7) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "xd":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 8 || item.yxzt == 9) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "8":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 8) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "9":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 9) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "sl":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 10 || item.yxzt == 11) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "10":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 10) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "11":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 11) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "lx":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 12 || item.yxzt == 13) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "12":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 12) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "13":
|
|
|
+ for (let i in matrixList) {
|
|
|
+ matrixList[i].forEach((item, index) => {
|
|
|
+ if (item.yxzt == 13) {
|
|
|
+ this.showMatrixList[i].push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "all":
|
|
|
+ this.showMatrixList = this.singleMatrixInfo;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleDetailClick(index, indexes, indexe) {
|
|
|
+ let s = this.deepClone(
|
|
|
+ this.stsee[index].xlLists[indexes].sbLists[indexe]
|
|
|
+ );
|
|
|
+ let y = this.deepClone(this.ssPv);
|
|
|
+ console.log(s, "10");
|
|
|
+ y?.forEach((val) => {
|
|
|
+ for (let key in val) {
|
|
|
+ for (let k in s) {
|
|
|
+ if (val[key] == k) {
|
|
|
+ val[key] = s[k];
|
|
|
+ } else if (val[key] == "stse") {
|
|
|
+ val[key] = this.stsee[index].QCAMC + s.SBAMC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$refs.child.openCurvDatas(y, 2);
|
|
|
+ },
|
|
|
+ handleCurveClick(inde, index) {
|
|
|
+ if (inde >= 8) {
|
|
|
+ let s = this.deepClone(this.stsee[index]);
|
|
|
+ let y = this.deepClone(this.stse);
|
|
|
+
|
|
|
+ y?.forEach((val) => {
|
|
|
+ for (let key in val) {
|
|
|
+ for (let k in s) {
|
|
|
+ if (val[key] == k) {
|
|
|
+ val[key] = s[k];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$refs.child.openCurvDatas(y);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ul,
|
|
|
+ul li,
|
|
|
+p {
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+.low {
|
|
|
+ width: 70px !important;
|
|
|
+}
|
|
|
+.checkIcon {
|
|
|
+ position: absolute;
|
|
|
+ left: 50px;
|
|
|
+ top: 8px;
|
|
|
+
|
|
|
+ font-size: 20px;
|
|
|
+ color: #929396;
|
|
|
+}
|
|
|
+
|
|
|
+.matrix-body {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .body-title {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 78px;
|
|
|
+ border-radius: 5px 5px 0 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.45);
|
|
|
+
|
|
|
+ .base-inf {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1 0 auto;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .title-name {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .imgs {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 11px;
|
|
|
+ .qty_img {
|
|
|
+ position: absolute;
|
|
|
+ left: 12px;
|
|
|
+ top: 15px;
|
|
|
+ animation: move 1s infinite linear;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .base-num {
|
|
|
+ display: flex;
|
|
|
+ cursor: pointer;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0 5px;
|
|
|
+ .ic-nam {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .base-name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #b3b3b3;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ic-fan {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 10px;
|
|
|
+ align-items: center;
|
|
|
+ .nums {
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: Arial;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .all_img {
|
|
|
+ width: 20px;
|
|
|
+ position: relative;
|
|
|
+ left: -34px;
|
|
|
+ top: 1px;
|
|
|
+ animation: move 1s infinite linear;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes move {
|
|
|
+ 0% {
|
|
|
+ top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 20% {
|
|
|
+ top: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 40% {
|
|
|
+ top: 21px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 80% {
|
|
|
+ top: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ top: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-status {
|
|
|
+ flex: 1 0 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ height: 80%;
|
|
|
+ .title-status {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 15%;
|
|
|
+ height: 100%;
|
|
|
+ padding-right: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .status-first {
|
|
|
+ width: 100%;
|
|
|
+ height: 34%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .matrix-status-left {
|
|
|
+ margin-left: 6px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-status-right {
|
|
|
+ margin-right: 6px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-end {
|
|
|
+ width: 100%;
|
|
|
+ height: 33%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .matrix-status-left {
|
|
|
+ margin-left: 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-status-right {
|
|
|
+ margin-right: 6px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-status-right {
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ &.green {
|
|
|
+ .status-first {
|
|
|
+ background-color: rgba(5, 187, 76, 0.28);
|
|
|
+ border-top: 1px solid #0b3d26;
|
|
|
+ border-left: 1px solid #0b3d26;
|
|
|
+ border-right: 1px solid #0b3d26;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-end {
|
|
|
+ border-bottom: 1px solid #0b3d26;
|
|
|
+ }
|
|
|
+ .matrix-status-left,
|
|
|
+ .matrix-status-right {
|
|
|
+ color: #05bb4c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.blue {
|
|
|
+ .matrix-status-left,
|
|
|
+ .matrix-status-right {
|
|
|
+ color: #1c99ff;
|
|
|
+ }
|
|
|
+ .status-first {
|
|
|
+ background-color: rgba(0, 70, 199, 0.48);
|
|
|
+ border-top: 1px solid #1e2341;
|
|
|
+ border-left: 1px solid #1e2341;
|
|
|
+ border-right: 1px solid #1e2341;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-end {
|
|
|
+ background-color: rgba(0, 70, 199, 0.16);
|
|
|
+ border-left: 1px solid #1e2341;
|
|
|
+ border-right: 1px solid #1e2341;
|
|
|
+ border-bottom: 1px solid #1e2341;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.pink {
|
|
|
+ .matrix-status-left,
|
|
|
+ .matrix-status-right {
|
|
|
+ color: #c530c8;
|
|
|
+ }
|
|
|
+ .status-first {
|
|
|
+ background-color: rgba(197, 48, 200, 0.28);
|
|
|
+ border-top: 1px solid #3e1a48;
|
|
|
+ border-left: 1px solid #3e1a48;
|
|
|
+ border-right: 1px solid #3e1a48;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-end {
|
|
|
+ background-color: rgba(197, 48, 200, 0.16);
|
|
|
+ border-left: 1px solid #3e1a48;
|
|
|
+ border-right: 1px solid #3e1a48;
|
|
|
+ border-bottom: 1px solid #3e1a48;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.red {
|
|
|
+ .matrix-status-left,
|
|
|
+ .matrix-status-right {
|
|
|
+ color: #ba3237;
|
|
|
+ }
|
|
|
+ .status-first {
|
|
|
+ background-color: rgba(186, 50, 55, 0.28);
|
|
|
+ border-top: 1px solid #3c1c1f;
|
|
|
+ border-left: 1px solid #3c1c1f;
|
|
|
+ border-right: 1px solid #3c1c1f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-end {
|
|
|
+ background-color: rgba(186, 50, 55, 0.16);
|
|
|
+ border-left: 1px solid #3c1c1f;
|
|
|
+ border-right: 1px solid #3c1c1f;
|
|
|
+ border-bottom: 1px solid #3c1c1f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.orange {
|
|
|
+ .matrix-status-left,
|
|
|
+ .matrix-status-right {
|
|
|
+ color: #e17d24;
|
|
|
+ }
|
|
|
+ .status-first {
|
|
|
+ background-color: rgba(225, 125, 36, 0.28);
|
|
|
+ border-top: 1px solid #46301a;
|
|
|
+ border-left: 1px solid #46301a;
|
|
|
+ border-right: 1px solid #46301a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-end {
|
|
|
+ background-color: rgba(225, 125, 36, 0.16);
|
|
|
+ border-left: 1px solid #46301a;
|
|
|
+ border-right: 1px solid #46301a;
|
|
|
+ border-bottom: 1px solid #46301a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.gray {
|
|
|
+ .matrix-status-left,
|
|
|
+ .matrix-status-right {
|
|
|
+ color: #606769;
|
|
|
+ }
|
|
|
+ .status-first {
|
|
|
+ background-color: rgba(96, 103, 105, 0.28);
|
|
|
+ border-top: 1px solid #262b32;
|
|
|
+ border-left: 1px solid #262b32;
|
|
|
+ border-right: 1px solid #262b32;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-end {
|
|
|
+ background-color: rgba(96, 103, 105, 0.16);
|
|
|
+ border-left: 1px solid #262b32;
|
|
|
+ border-right: 1px solid #262b32;
|
|
|
+ border-bottom: 1px solid #262b32;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.write {
|
|
|
+ .matrix-status-left,
|
|
|
+ .matrix-status-right {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .status-first {
|
|
|
+ background-color: rgba(255, 255, 255, 0.28);
|
|
|
+ border-top: 1px solid #3f4349;
|
|
|
+ border-left: 1px solid #3f4349;
|
|
|
+ border-right: 1px solid #3f4349;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-end {
|
|
|
+ background-color: rgba(255, 255, 255, 0.16);
|
|
|
+ border-left: 1px solid #3f4349;
|
|
|
+ border-right: 1px solid #3f4349;
|
|
|
+ border-bottom: 1px solid #3f4349;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .unpaid {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ height: 65px;
|
|
|
+ background: rgba(0, 70, 199, 0.08);
|
|
|
+ border: 1px solid #1e386a;
|
|
|
+ position: relative;
|
|
|
+ flex: 1 0 auto;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ .unpaid-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .unpaid-item {
|
|
|
+ flex: 1 0 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Arial;
|
|
|
+ color: #ffffff;
|
|
|
+ height: 100%;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ .percent {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrixs {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 7px;
|
|
|
+
|
|
|
+ .matrix-title {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 32px;
|
|
|
+ // background-color: #001844;
|
|
|
+ background-color: rgba(96, 103, 105, 0.4);
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: SourceHanSansCN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ff8100;
|
|
|
+ padding: 0 12px;
|
|
|
+ .matrix-svg {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .station-name {
|
|
|
+ margin-left: 5px;
|
|
|
+ margin-right: 18px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .indicator {
|
|
|
+ flex: 1 0 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ width: 93%;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 30px;
|
|
|
+ white-space: nowrap;
|
|
|
+ .sub-title-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ width: 7%;
|
|
|
+ height: 100%;
|
|
|
+ margin-right: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #b3b3b3;
|
|
|
+ white-space: nowrap;
|
|
|
+ &.active {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-value {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Arial;
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line_all {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 5px;
|
|
|
+ .line-namebox {
|
|
|
+ padding: 0 10px;
|
|
|
+ min-height: 66px;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b3b3b3;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px solid;
|
|
|
+ border-image: linear-gradient(
|
|
|
+ 321deg,
|
|
|
+ rgba(5, 187, 76, 0.2),
|
|
|
+ rgba(5, 187, 76, 0.1),
|
|
|
+ rgba(67, 81, 107, 0.1),
|
|
|
+ rgba(67, 81, 107, 0),
|
|
|
+ rgba(5, 187, 76, 0.5)
|
|
|
+ )
|
|
|
+ 1 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line-list {
|
|
|
+ display: flex;
|
|
|
+ margin: 0 10px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 5px;
|
|
|
+
|
|
|
+ .matrix-card {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 114px;
|
|
|
+ height: 59px;
|
|
|
+ margin-right: 2px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+
|
|
|
+ .card-left {
|
|
|
+ width: 45px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .card-name {
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 0px 4px;
|
|
|
+ position: relative;
|
|
|
+ .right-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ height: 15px;
|
|
|
+
|
|
|
+ .right-value {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-left: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .matrix-progress {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 4px;
|
|
|
+ height: 8px;
|
|
|
+ .progress-block {
|
|
|
+ height: 3px;
|
|
|
+ &.upGreen {
|
|
|
+ background-color: rgba(87, 207, 58, 1);
|
|
|
+ }
|
|
|
+ &.upSkyBlue {
|
|
|
+ background-color: rgba(14, 199, 220, 1);
|
|
|
+ }
|
|
|
+ &.upBlue {
|
|
|
+ background-color: rgba(25, 116, 255, 1);
|
|
|
+ }
|
|
|
+ &.upPurple {
|
|
|
+ background-color: rgba(205, 76, 221, 1);
|
|
|
+ }
|
|
|
+ &.upPink {
|
|
|
+ background-color: rgba(255, 60, 128, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.green {
|
|
|
+ border: 1px solid #05bb4c;
|
|
|
+ color: #05bb4c;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ border-bottom: 1px solid #05bb4c;
|
|
|
+ background-color: rgba(5, 187, 76, 0.15);
|
|
|
+
|
|
|
+ .dashed {
|
|
|
+ width: 1px;
|
|
|
+ height: 100%;
|
|
|
+ background-image: linear-gradient(
|
|
|
+ rgba(5, 187, 76, 0.5) 0%,
|
|
|
+ rgba(5, 187, 76, 0.5) 40%,
|
|
|
+ transparent 50%
|
|
|
+ );
|
|
|
+ background-size: 1px 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.blue {
|
|
|
+ border: 1px solid #074ead;
|
|
|
+ color: #1c99ff;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ border-bottom: 1px solid #074ead;
|
|
|
+ background-color: rgba(0, 70, 199, 0.25);
|
|
|
+
|
|
|
+ .dashed {
|
|
|
+ width: 1px;
|
|
|
+ height: 100%;
|
|
|
+ background-image: linear-gradient(
|
|
|
+ rgba(0, 70, 199, 0.5) 0%,
|
|
|
+ rgba(0, 70, 199, 0.5) 40%,
|
|
|
+ transparent 50%
|
|
|
+ );
|
|
|
+ background-size: 1px 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.pink {
|
|
|
+ border: 1px solid #c530c8;
|
|
|
+ color: #c530c8;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ border-bottom: 1px solid #c530c8;
|
|
|
+ background-color: rgba(197, 48, 200, 0.15);
|
|
|
+
|
|
|
+ .dashed {
|
|
|
+ width: 1px;
|
|
|
+ height: 100%;
|
|
|
+ background-image: linear-gradient(
|
|
|
+ rgba(197, 48, 200, 0.5) 0%,
|
|
|
+ rgba(197, 48, 200, 0.5) 40%,
|
|
|
+ transparent 50%
|
|
|
+ );
|
|
|
+ background-size: 1px 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.red {
|
|
|
+ border: 1px solid #ba3237;
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ border-bottom: 1px solid #ba3237;
|
|
|
+ background-color: rgba(186, 50, 55, 1);
|
|
|
+
|
|
|
+ .dashed {
|
|
|
+ width: 1px;
|
|
|
+ height: 100%;
|
|
|
+ background-image: linear-gradient(
|
|
|
+ rgba(255, 255, 255, 0.5) 0%,
|
|
|
+ rgba(255, 255, 255, 0.5) 40%,
|
|
|
+ transparent 50%
|
|
|
+ );
|
|
|
+ background-size: 1px 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.orange {
|
|
|
+ border: 1px solid #e17d24;
|
|
|
+ color: #e17d24;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ border-bottom: 1px solid #e17d24;
|
|
|
+ background-color: rgba(225, 125, 36, 0.15);
|
|
|
+
|
|
|
+ .dashed {
|
|
|
+ width: 1px;
|
|
|
+ height: 100%;
|
|
|
+ background-image: linear-gradient(
|
|
|
+ rgba(225, 125, 36, 0.5) 0%,
|
|
|
+ rgba(225, 125, 36, 0.5) 40%,
|
|
|
+ transparent 50%
|
|
|
+ );
|
|
|
+ background-size: 1px 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.gray {
|
|
|
+ border: 1px solid #606769;
|
|
|
+ color: #a7a7a7;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ border-bottom: 1px solid #606769;
|
|
|
+ background-color: rgba(81, 85, 90, 0.2);
|
|
|
+
|
|
|
+ .dashed {
|
|
|
+ width: 1px;
|
|
|
+ height: 100%;
|
|
|
+ background-image: linear-gradient(
|
|
|
+ rgba(255, 255, 255, 0.5) 0%,
|
|
|
+ rgba(255, 255, 255, 0.5) 40%,
|
|
|
+ transparent 50%
|
|
|
+ );
|
|
|
+ background-size: 1px 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.write {
|
|
|
+ border: 1px solid #606769;
|
|
|
+ color: #a7a7a7;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ border-bottom: 1px solid #606769;
|
|
|
+ background-color: rgba(96, 103, 105, 0.2);
|
|
|
+
|
|
|
+ .dashed {
|
|
|
+ width: 1px;
|
|
|
+ height: 100%;
|
|
|
+ background-image: linear-gradient(
|
|
|
+ rgba(167, 167, 167, 0.5) 0%,
|
|
|
+ rgba(167, 167, 167, 0.5) 40%,
|
|
|
+ transparent 50%
|
|
|
+ );
|
|
|
+ background-size: 1px 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
baiyanting
