From d043e9283165ac10757ab4bf536998bf42b98e9b Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期六, 25 十一月 2023 08:20:17 +0800
Subject: [PATCH] UA 部分UI完成
---
src/views/home/index.vue | 1142 ++++++++++++++++++++++++++++++++------------------------
1 files changed, 649 insertions(+), 493 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 07e01b1..1ed757c 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,317 +1,54 @@
<script>
import { mapState } from "vuex";
import { updateDfu, readFileList, getDevFileName, stopDfu } from "./api";
+import propConfig from "./js/props";
+import SwitchBox from "./components/switchBox";
+import ProtectorBox from "./components/protectorBox";
+import TextBox from "./components/textBox";
+import SvgLine from "./components/svgline";
+
import FileProcess from "./fileProcess";
import getWebUrl from "@/assets/js/getWebUrl";
+import Panel from "@/components/panel.vue";
+import pdgImg from "./images/pdg.png";
+import kggImg from "./images/kgg.png";
+import hrImg from "./images/hr.png";
import createWs from "@/assets/js/websocket/plus";
const WSMixin = createWs("dev", "dfu");
-const WORKSTATE = ["閫氫俊鏁呴殰", "閫氫俊姝ｅ父", "杩滅▼鍗囩骇涓�", "鏂囦欢涓嬭浇涓�"];
+const { PDG, KGG, HR } = propConfig;
export default {
name: "home",
- mixins: [WSMixin],
+ // mixins: [WSMixin],
components: {
FileProcess,
+ Panel,
+ SwitchBox,
+ ProtectorBox,
+ TextBox,
+ SvgLine,
},
data() {
const baseURL = getWebUrl();
return {
- updatePercent: 0,
- baseURL,
- fileListVisible: false,
- updateVisible: false,
- battListVisible: false,
- tableData: [],
- headers: [
- {
- prop: "devIp",
- label: "璁惧Ip",
- width: "180",
- },
- {
- prop: "devVersion",
- label: "璁惧鐗堟湰鍙�",
- width: "240",
- },
- {
- prop: "devId",
- label: "璁惧ID",
- width: "180",
- },
- {
- prop: "recordDatetime",
- label: "鏇存柊鏃堕棿",
- width: "180",
- },
- {
- prop: "devEachgroupBattsum",
- label: "鐢垫睜缁勬暟",
- width: "120",
- },
- {
- prop: "devState",
- label: "璁惧宸ヤ綔鐘舵��",
- width: "120",
- },
- {
- prop: "devCommcount",
- label: "璁惧閫氫俊璁℃暟",
- width: "120",
- },
- {
- prop: "devErrcommcount",
- label: "璁惧閫氫俊閿欒璁℃暟",
- width: "150",
- },
- ],
- tableBattsData: [],
- battsHeaders: [
- {
- prop: "battName",
- label: "鐢垫睜缁勫悕绉�",
- width: "240",
- },
- ],
- fileList: [],
- currDevId: 0,
- transferFiles: {},
- pcFileListVisible: false,
- pcFileList: [],
- multipleSelection: [],
+ PDG,
+ KGG,
+ HR,
+ pdgImg,
+ kggImg,
+ hrImg,
};
},
methods: {
- onWSMessage1(res) {
- res = JSON.parse(res.data);
-
- let sys_time = new Date(res.data3).getTime();
- let data = res.data2.map((v) => {
- v.isTimeout =
- Math.abs(new Date(v.recordDatetime).getTime() - sys_time) > 1000 * 60;
- v.devState = v.isTimeout ? "杩炴帴瓒呮椂" : WORKSTATE[v.devWorkstate];
- v.batts = v.battnamelist.split(",");
- return v;
- });
- // console.log(data, "=====data", sys_time);
- this.tableData = data;
- },
- onWSMessage2(res) {
- res = JSON.parse(res.data);
- let { dfuDataBlocklen, dfuDataBlocknum } = res.data2;
- if (!dfuDataBlocklen) {
- this.updatePercent = 0;
- return false;
- }
- this.updatePercent =
- Math.round((dfuDataBlocknum / dfuDataBlocklen) * 10000) / 100;
- },
- sendMessage2() {
- if (!this.isWSOpen2) {
- setTimeout(this.sendMessage2, 500);
- return false;
- }
- this.SOCKET2.send(JSON.stringify(this.currDevId));
- },
- canUpdate(record) {
- let { isTimeout, devWorkstate } = record;
- return !isTimeout && (devWorkstate == 1 || devWorkstate == 2);
- },
- canRead(record) {
- let { isTimeout, devWorkstate } = record;
- return !isTimeout && (devWorkstate == 1 || devWorkstate == 3);
- },
- showBatts(record) {
- this.currDevId = record.devId;
- this.tableBattsData = record.batts.map((v, i) => ({
- battName: v,
- idx: i,
- }));
- this.battListVisible = true;
- },
- update(record) {
- this.currDevId = record.devId;
- this.fileList = [];
- this.updateVisible = true;
- this.sendMessage2();
- },
- fileChange(file, fileList) {
- // console.log(file, fileList, "change");
- this.fileList = [file];
- },
- fileRemove(file, fileList) {
- this.fileList = fileList;
- },
- stopUpdate() {
- let loading = this.$layer.loading();
- stopDfu(this.currDevId)
- .then((res) => {
- let { code, data } = res.data;
- if (code && data) {
- this.$message.success("鎿嶄綔鎴愬姛");
- } else {
- this.$message.error("鎿嶄綔澶辫触");
- }
- this.$layer.close(loading);
- })
- .catch((err) => {
- this.$layer.close(loading);
- console.log(err);
- });
- },
- upload() {
- let formData = new FormData();
- formData.append("file", this.fileList[0].raw);
- formData.append("devId", this.currDevId);
- let loading = this.$layer.loading();
- updateDfu(formData)
- .then((res) => {
- let { code, data, msg } = res.data;
- if (code && data) {
- this.$message.success(msg);
- } else {
- this.$message.error(msg);
- }
- this.$layer.close(loading);
- })
- .catch((err) => {
- this.$layer.close(loading);
- console.log(err);
- });
- },
- showFiles(record) {
- // 濡傛灉鏄笅杞戒腑 鍒欎笉璇锋眰鏁版嵁 杩涚粍浠� 鏌ebsocket
- if (this.isTransfering) {
- this.fileListVisible = true;
- this.transferFiles = {};
- return;
- }
-
- let battIndex = record.idx;
- let devId = this.currDevId;
- let fileIndex = 0;
- let loading = this.$layer.loading();
- readFileList(battIndex, devId, fileIndex)
- .then((res) => {
- let { code, data, data2, msg } = res.data;
- if (code && data) {
- this.$message.success(msg);
- this.fileListVisible = true;
- this.transferFiles = data2;
- } else {
- this.$message.error(msg);
- this.transferFiles = {};
- }
- this.$layer.close(loading);
- })
- .catch((err) => {
- this.$layer.close(loading);
- console.log(err);
- });
- },
- showPCFiles(record) {
- let battName = record.battName;
- let devId = this.currDevId;
- let loading = this.$layer.loading();
- getDevFileName(battName, devId)
- .then((res) => {
- let { code, data, data2 } = res.data;
- let list = [];
- if (code && data) {
- // console.log(data);
- list = data2.map((v) => {
- let url = v;
- let fileName = url.split("\\").pop();
- return {
- url,
- fileName,
- };
- });
- }
- this.$layer.close(loading);
- this.pcFileList = list;
- this.pcFileListVisible = true;
- })
- .catch((err) => {
- this.$layer.close(loading);
- console.log(err);
- });
- },
- handleSelectionChange(val) {
- // console.log(val, "selection");
- this.multipleSelection = val;
- },
- downloadFile(url) {
- // const fileName = url.split("\\").pop();
- // let link = document.createElement("a");
- // link.style.display = "none";
- // link.href = this.baseURL + url;
- // link.download = fileName;
- // document.body.appendChild(link);
- // link.click();
- // document.body.removeChild(link);
- const iframe = document.createElement("iframe");
- iframe.style.display = "none";
- iframe.src = this.baseURL + url;
- document.body.appendChild(iframe);
- setTimeout(() => {
- iframe.remove();
- }, 10 * 1000);
- },
- downloadFiles() {
- // console.log(this.multipleSelection, "??z");
- this.multipleSelection.forEach((v, i) => {
- this.downloadFile(v.url);
- });
- },
+ hover() {
+ console.log('hhhh');
+ }
},
computed: {
...mapState({
cachedViews: (state) => state.tagsView.cachedViews,
}),
- isTransfering() {
- if (!this.currDevId) {
- return false;
- }
- let obj = this.tableData.filter((v) => v.devId == this.currDevId)[0];
- let { isTimeout, devWorkstate } = obj;
- // console.log("鏄惁涓嬭浇涓�", !isTimeout && devWorkstate == 3);
- return !isTimeout && devWorkstate == 3;
- },
- isUpdateing() {
- if (!this.currDevId) {
- return false;
- }
- let obj = this.tableData.filter((v) => v.devId == this.currDevId)[0];
- let { isTimeout, devWorkstate } = obj;
- return !isTimeout && devWorkstate == 2;
- },
- readingBattName() {
- if (!this.currDevId) {
- return false;
- }
- let obj = this.tableData.filter((v) => v.devId == this.currDevId)[0];
- return obj.nowDownloadBatt;
- },
- progressColor() {
- if (this.updatePercent < 30) {
- return "#ff0000";
- }
- if (this.updatePercent < 60) {
- return "#AA40F0";
- }
- if (this.updatePercent == 100) {
- return "#009900";
- } else {
- return "#4840F0";
- }
- },
- progressTextColor() {
- if (this.updatePercent < 8) {
- return "#00f7f9";
- }
- return "#ffffff";
- },
},
mounted() {},
};
@@ -319,210 +56,433 @@
<template>
<div class="p-container" ref="root">
- <div class="p-title">璁惧鍒楄〃</div>
- <el-table
- ref="table"
- :data="tableData"
- border
- height="100%"
- style="width: 100%"
- tooltip-effect="light"
- >
- <el-table-column type="index" label="搴忓彿" width="80"></el-table-column>
- <el-table-column
- v-for="header in headers"
- :key="header.prop"
- :prop="header.prop"
- :label="header.label"
- :min-width="header.width"
- align="center"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column label="鎿嶄綔" fixed="right" width="180" align="center">
- <template slot-scope="scope">
- <el-button
- type="primary"
- size="mini"
- :disabled="!canRead(scope.row)"
- @click="showBatts(scope.row)"
- >鐢垫睜缁勫垪琛�</el-button
- >
- <el-button
- type="danger"
- :disabled="!canUpdate(scope.row)"
- size="mini"
- @click="update(scope.row)"
- >鍗囩骇</el-button
- >
- </template>
- </el-table-column>
- </el-table>
- <!-- 鍗囩骇寮圭獥 -->
- <el-dialog
- title="鐢垫睜缁勫垪琛�"
- :visible.sync="updateVisible"
- top="0"
- :close-on-click-modal="false"
- class="dialog-center"
- width="700px"
- center
- >
- <el-upload
- v-if="!isUpdateing"
- class="upload-demo"
- ref="upload"
- action=""
- :multiple="false"
- :on-remove="fileRemove"
- :on-change="fileChange"
- :file-list="fileList"
- accept=".sm5"
- :auto-upload="false"
- >
- <el-button slot="trigger" size="small" type="primary"
- >閫夊彇鏂囦欢</el-button
- >
- </el-upload>
- <template v-else>
- <div class="s-title">鍗囩骇涓�</div>
- <el-progress
- :text-inside="true"
- :stroke-width="24"
- :percentage="updatePercent"
- :color="progressColor"
- :text-color="progressTextColor"
- ></el-progress>
- </template>
- <span slot="footer" class="dialog-footer">
- <el-button @click="updateVisible = false">鍏抽棴</el-button>
- <el-button
- v-if="!isUpdateing"
- type="primary"
- :disabled="!fileList.length"
- @click="upload"
- >涓婁紶骞跺崌绾�</el-button
- >
- <el-button v-else type="primary" @click="stopUpdate"
- >缁堟鍗囩骇</el-button
- >
- </span>
- </el-dialog>
- <!-- 寮圭獥 -->
- <el-dialog
- title="鐢垫睜缁勫垪琛�"
- :visible.sync="battListVisible"
- top="0"
- :close-on-click-modal="false"
- class="dialog-center"
- width="700px"
- center
- >
- <el-table
- ref="table"
- :data="tableBattsData"
- border
- max-height="300"
- style="width: 100%"
- tooltip-effect="light"
- >
- <el-table-column type="index" label="搴忓彿" width="80"></el-table-column>
- <el-table-column
- v-for="header in battsHeaders"
- :key="header.prop"
- :prop="header.prop"
- :label="header.label"
- :min-width="header.width"
- align="center"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column label="鎿嶄綔" fixed="right" width="260" align="center">
- <template slot-scope="scope">
- <el-button
- type="primary"
- size="mini"
- :disabled="
- isTransfering &&
- !!readingBattName &&
- readingBattName != scope.row.battName
- "
- @click="showFiles(scope.row)"
- >璇诲彇鏂囦欢鍒楄〃</el-button
- >
- <el-button
- type="primary"
- size="mini"
- @click="showPCFiles(scope.row)"
- >宸插鍏ユ枃浠跺垪琛�</el-button
- >
- </template>
- </el-table-column>
- </el-table>
- </el-dialog>
- <!-- 鏈嶅姟鍣ㄦ枃浠跺垪琛� -->
- <el-dialog
- title="宸插鍏ユ枃浠跺垪琛�"
- :visible.sync="pcFileListVisible"
- top="0"
- :close-on-click-modal="false"
- class="dialog-center"
- width="700px"
- center
- >
- <div class="btn-grp">
- <el-button
- type="primary"
- size="mini"
- @click="downloadFiles"
- :disabled="!multipleSelection.length"
- >涓嬭浇閫変腑椤�</el-button
- >
+ <panel class="panel left" title="閫氫俊鐢垫簮鏌溿�佹牳瀹逛富鏈虹姸鎬�">
+ <div class="content">
+ <div class="info info1">
+ <div class="side">
+ <div class="info-title">浜ょ洿娴侀厤鐢垫煖</div>
+ <div class="img">
+ <el-image :src="pdgImg" fit="fill"></el-image>
+ </div>
+ <div class="state">
+ <div class="s-row">
+ 杩愯:
+ <div class="i"></div>
+ </div>
+ <div class="s-row">
+ 閫氫俊:
+ <div class="i danger"></div>
+ </div>
+ </div>
+ </div>
+ <div class="main">
+ <div class="list">
+ <div class="row-item" v-for="idx in 9" :key="'pdg_' + idx">
+ {{ idx - 1 }}{{ PDG[idx - 1].label }}:
+ </div>
+ </div>
+ <div class="list">
+ <div class="row-item" v-for="idx of 9" :key="'pdg2_' + idx">
+ <template v-if="PDG[idx + 8]"
+ >{{ idx + 8 }}{{ PDG[idx + 8].label }}:</template
+ >
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="info info2">
+ <div class="side">
+ <div class="info-title">楂橀寮�鍏虫煖</div>
+ <div class="img">
+ <el-image :src="kggImg" fit="fill"></el-image>
+ </div>
+ <div class="state">
+ <div class="s-row">
+ 杩愯:
+ <div class="i"></div>
+ </div>
+ <div class="s-row">
+ 閫氫俊:
+ <div class="i danger"></div>
+ </div>
+ </div>
+ </div>
+ <div class="main">
+ <div class="list">
+ <div class="row-item" v-for="idx in 6" :key="'kgg_' + idx">
+ {{ idx - 1 }}{{ KGG[idx - 1].label }}:
+ </div>
+ </div>
+ <div class="list">
+ <div class="row-item" v-for="idx of 6" :key="'kgg2_' + idx">
+ <template v-if="KGG[idx + 5]"
+ >{{ idx + 5 }}{{ KGG[idx + 5].label }}:</template
+ >
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="info info3">
+ <div class="side">
+ <div class="info-title">鏍稿瑁呯疆</div>
+ <div class="img img3">
+ <el-image :src="hrImg" fit="fill"></el-image>
+ </div>
+ <div class="state">
+ <div class="s-row">
+ 杩愯:
+ <div class="i"></div>
+ </div>
+ <div class="s-row">
+ 閫氫俊:
+ <div class="i danger"></div>
+ </div>
+ </div>
+ </div>
+ <div class="main">
+ <div class="list">
+ <div class="row-item" v-for="idx in 4" :key="'hr_' + idx">
+ <template v-if="idx < 4"
+ >{{ idx - 1 }}{{ HR[idx - 1].label }}:</template
+ >
+ </div>
+ </div>
+ <div class="list">
+ <div class="row-item" v-for="idx of 4" :key="'hr2_' + idx">
+ <template v-if="idx < 4 && HR[idx + 2]"
+ >{{ idx + 2 }}{{ HR[idx + 2].label }}:</template
+ >
+ </div>
+ </div>
+ </div>
+ </div>
</div>
- <el-table
- ref="table"
- :data="pcFileList"
- border
- max-height="300"
- style="width: 100%"
- @selection-change="handleSelectionChange"
- tooltip-effect="light"
- >
- <el-table-column type="selection" width="55"> </el-table-column>
- <el-table-column type="index" label="搴忓彿" width="80"></el-table-column>
- <el-table-column
- prop="fileName"
- label="鏂囦欢鍚嶇О"
- align="center"
- show-overflow-tooltip
- ></el-table-column>
- <el-table-column label="鎿嶄綔" fixed="right" width="160" align="center">
- <template slot-scope="scope">
- <el-button
- type="primary"
- size="mini"
- @click="downloadFile(scope.row.url)"
- >涓嬭浇</el-button
- >
- </template>
- </el-table-column>
- </el-table>
- </el-dialog>
- <!-- 浼犺緭杩涘害寮圭獥 -->
- <el-dialog
- title="鐢垫睜缁勬枃浠跺垪琛�"
- :visible.sync="fileListVisible"
- top="0"
- :close-on-click-modal="false"
- class="dialog-center"
- width="700px"
- center
- >
- <file-process
- v-if="fileListVisible"
- :dev-id="currDevId"
- :transfer="isTransfering"
- :infos="transferFiles"
- ></file-process>
- </el-dialog>
+ </panel>
+ <panel class="panel right" title="浜ゆ祦/鐩存祦寰柇璺櫒鐘舵��">
+ <div class="content">
+ <!-- -->
+ <div class="yc-row row1">
+ <div class="yc-panel">
+ <div class="yc-title">浜ゆ祦杩涚嚎1</div>
+ <div class="yc-content">
+ <div class="svg-contain">
+ <div class="pos-full">
+ <svg width="100%" height="100%" viewBox="0 0 500 340">
+ <text-box :offset="[220, 10]"></text-box>
+ <protector-box :offset="[36, 10]"></protector-box>
+ <switch-box :type="3" :offset="[36, 134]"></switch-box>
+ <switch-box :type="3" :offset="[220, 134]"></switch-box>
+ <switch-box :type="3" :offset="[390, 134]"></switch-box>
+ <switch-box :type="1" :offset="[36, 252]"></switch-box>
+ <switch-box :type="1" :offset="[150, 252]"></switch-box>
+ <switch-box :type="1" :offset="[274, 252]"></switch-box>
+ <switch-box :type="1" :offset="[390, 252]"></switch-box>
+ <svg-line
+ :points="[
+ [262, 40],
+ [262, 134],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [128, 70],
+ [262, 70],
+ ]"
+ ></svg-line>
+ <svg-line
+ :radius="10"
+ :points="[
+ [78, 134],
+ [78, 110],
+ [432, 110],
+ [432, 134],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [98, 202],
+ [98, 228],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [262, 202],
+ [262, 228],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [412, 202],
+ [412, 228],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [192, 228],
+ [192, 252],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [316, 228],
+ [316, 252],
+ ]"
+ ></svg-line>
+ <svg-line
+ :radius="10"
+ :points="[
+ [78, 252],
+ [78, 228],
+ [432, 228],
+ [432, 252],
+ ]"
+ ></svg-line>
+ </svg>
+ </div>
+ </div>
+
+ <div class="yc-panel-footer">
+ <div class="state">闃查浄淇濇姢鍣ㄧ┖寮�璺抽椄</div>
+ </div>
+ </div>
+ </div>
+ <div class="yc-panel">
+ <div class="yc-title">浜ゆ祦杩涚嚎2</div>
+ <div class="yc-content">
+ <div class="svg-contain">
+ <div class="pos-full">
+ <svg width="100%" height="100%" viewBox="0 0 500 340">
+ <text-box :offset="[220, 10]"></text-box>
+ <protector-box :offset="[390, 10]"></protector-box>
+ <switch-box :type="3" :offset="[36, 134]"></switch-box>
+ <switch-box :type="3" :offset="[220, 134]"></switch-box>
+ <switch-box :type="3" :offset="[390, 134]"></switch-box>
+ <switch-box :type="1" :offset="[36, 252]"></switch-box>
+ <switch-box :type="1" :offset="[150, 252]"></switch-box>
+ <switch-box :type="1" :offset="[274, 252]"></switch-box>
+ <switch-box :type="1" :offset="[390, 252]"></switch-box>
+ <svg-line
+ :points="[
+ [262, 40],
+ [262, 134],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [390, 70],
+ [262, 70],
+ ]"
+ ></svg-line>
+ <svg-line
+ :radius="10"
+ :points="[
+ [78, 134],
+ [78, 110],
+ [432, 110],
+ [432, 134],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [98, 202],
+ [98, 228],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [262, 202],
+ [262, 228],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [412, 202],
+ [412, 228],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [192, 228],
+ [192, 252],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [316, 228],
+ [316, 252],
+ ]"
+ ></svg-line>
+ <svg-line
+ :radius="10"
+ :points="[
+ [78, 252],
+ [78, 228],
+ [432, 228],
+ [432, 252],
+ ]"
+ ></svg-line>
+ </svg>
+ </div>
+ </div>
+ <div class="yc-panel-footer">
+ <div class="state"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="yc-row">
+ <div class="yc-panel">
+ <div class="yc-title">鐩存祦杩涚嚎1</div>
+ <div class="yc-content">
+ <div class="svg-contain">
+ <div class="pos-full">
+ <svg width="100%" height="100%" viewBox="0 0 622 240">
+ <switch-box @click.native="hover" :type="2" :offset="[269, 14]"></switch-box>
+ <switch-box @click.native="hover" small :offset="[20, 160]"></switch-box>
+ <switch-box small :offset="[94, 160]"></switch-box>
+ <switch-box small :offset="[168, 160]"></switch-box>
+ <switch-box alarm small :offset="[242, 160]"></switch-box>
+ <switch-box small :offset="[316, 160]"></switch-box>
+ <switch-box small :offset="[390, 160]"></switch-box>
+ <switch-box small :offset="[464, 160]"></switch-box>
+ <switch-box small :offset="[538, 160]"></switch-box>
+ <svg-line
+ :points="[
+ [311, 82],
+ [311, 116],
+ ]"
+ ></svg-line>
+ <svg-line
+ :radius="10"
+ :points="[
+ [52, 160],
+ [52, 116],
+ [570, 116],
+ [570, 160],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [126, 160],
+ [126, 116],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [200, 160],
+ [200, 116],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [274, 160],
+ [274, 116],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [348, 160],
+ [348, 116],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [422, 160],
+ [422, 116],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [496, 160],
+ [496, 116],
+ ]"
+ ></svg-line>
+ </svg>
+ </div>
+ </div>
+ <div class="yc-panel-footer">
+ <div class="state"></div>
+ </div>
+ </div>
+ </div>
+ <div class="yc-panel">
+ <div class="yc-title">鐩存祦杩涚嚎2</div>
+ <div class="yc-content">
+ <div class="svg-contain">
+ <div class="pos-full">
+ <svg width="100%" height="100%" viewBox="0 0 622 240">
+ <switch-box :type="2" :offset="[269, 14]"></switch-box>
+ <switch-box small :offset="[20, 160]"></switch-box>
+ <switch-box small :offset="[94, 160]"></switch-box>
+ <switch-box small :offset="[168, 160]"></switch-box>
+ <switch-box small :offset="[242, 160]"></switch-box>
+ <switch-box small :offset="[316, 160]"></switch-box>
+ <switch-box small :offset="[390, 160]"></switch-box>
+ <switch-box small :offset="[464, 160]"></switch-box>
+ <switch-box small :offset="[538, 160]"></switch-box>
+ <svg-line
+ :points="[
+ [311, 82],
+ [311, 116],
+ ]"
+ ></svg-line>
+ <svg-line
+ :radius="10"
+ :points="[
+ [52, 160],
+ [52, 116],
+ [570, 116],
+ [570, 160],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [126, 160],
+ [126, 116],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [200, 160],
+ [200, 116],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [274, 160],
+ [274, 116],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [348, 160],
+ [348, 116],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [422, 160],
+ [422, 116],
+ ]"
+ ></svg-line>
+ <svg-line
+ :points="[
+ [496, 160],
+ [496, 116],
+ ]"
+ ></svg-line>
+ </svg>
+ </div>
+ </div>
+ <div class="yc-panel-footer">
+ <div class="state"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </panel>
</div>
</template>
@@ -530,7 +490,8 @@
.p-container {
height: 100%;
display: flex;
- flex-direction: column;
+ flex-direction: row;
+ padding: 10px;
}
.p-title {
font-size: 20px;
@@ -545,4 +506,199 @@
font-weight: bolder;
padding-bottom: 10px;
}
+.panel {
+ color: #fff;
+ // height: 100%;
+ flex: 1;
+ &.right {
+ margin-left: 10px;
+ flex: 1.44;
+ }
+ &.left .content {
+ height: 100%;
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ .info {
+ border: 1px #02b4c0 solid;
+ border-radius: 4px;
+ display: flex;
+ flex-direction: row;
+ background: #011f39;
+ overflow: hidden;
+ .side {
+ width: 160px;
+ background: #0c4d77;
+ padding: 0 4px 10px;
+ border-right: 1px #02b4c0 solid;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .img {
+ width: 80px;
+ height: 120px;
+ }
+ .img3 {
+ width: 120px;
+ height: 50px;
+ }
+ .info-title {
+ font-size: 18px;
+ padding-top: 10px;
+ letter-spacing: 2px;
+ text-align: center;
+ }
+ .state {
+ background: #f69f41;
+ border-radius: 4px;
+ font-weight: bold;
+ align-self: stretch;
+ color: #1b2d3a;
+ .s-row {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .i {
+ margin-left: 20px;
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: radial-gradient(
+ circle farthest-side at 50% 50%,
+ rgba(1, 31, 57, 0.5) 50%,
+ rgba(74, 253, 136, 0.5) 100%
+ );
+ text-align: center;
+ position: relative;
+ &::after {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ border-radius: 50%;
+ top: 4px;
+ right: 4px;
+ bottom: 4px;
+ left: 4px;
+ background: #4afd88;
+ }
+ &.danger {
+ background: radial-gradient(
+ circle farthest-side at 50% 50%,
+ rgba(1, 31, 57, 0.5) 50%,
+ rgba(255, 56, 1, 0.5) 100%
+ );
+ &::after {
+ background: #ff3801;
+ }
+ }
+ }
+ }
+ .main {
+ flex: 1;
+ display: flex;
+ padding: 0 6px;
+ .list {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ padding: 10px 0;
+ & + .list {
+ margin-left: 6px;
+ }
+ .row-item {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ padding-left: 10px;
+ // height: 20px;
+ // line-height: 20px;
+ background: #153952;
+ &:nth-child(2n) {
+ background: rgba(21, 57, 82, 0.6);
+ }
+ }
+ }
+ }
+ &.info1 {
+ flex: 10;
+ }
+ &.info2 {
+ flex: 7;
+ }
+ &.info3 {
+ flex: 5;
+ }
+ & + .info {
+ margin-top: 10px;
+ }
+ }
+ }
+ &.right .content {
+ height: 100%;
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ }
+ .yc-row {
+ flex: 3;
+ display: flex;
+ &.row1 {
+ flex: 4;
+ }
+ & + .yc-row {
+ margin-top: 10px;
+ }
+ .yc-panel {
+ flex: 1;
+ border: 1px solid #4da2b1;
+ border-radius: 6px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ & + .yc-panel {
+ margin-left: 10px;
+ }
+ .yc-title {
+ text-align: center;
+ font-size: 18px;
+ height: 36px;
+ line-height: 36px;
+ background: #0c4d77;
+ }
+ .yc-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ background: #011f39;
+ .svg-contain {
+ flex: 1;
+ position: relative;
+ .pos-full {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ }
+ .yc-panel-footer {
+ padding: 0 20px 10px;
+ .state {
+ background: #78eef8;
+ height: 36px;
+ line-height: 36px;
+ color: #011f39;
+ font-weight: bold;
+ border-radius: 4px;
+ padding-left: 0.8em;
+ }
+ }
+ }
+ }
+ }
+}
</style>
--
Gitblit v1.9.1