From ad65280d10217df22b9812293c70ab2726c13bd8 Mon Sep 17 00:00:00 2001
From: 13693261870 <252740454@qq.com>
Date: 星期三, 27 十一月 2024 10:35:15 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.11.205:9000/r/se-cloud
---
se-index/src/assets/img/interactive/left_btn_height.png | 0
se-index/src/router/index.js | 5
se-index/src/assets/images/ConditionMonitoring/left.png | 0
se-index/src/assets/images/ConditionMonitoring/default.png | 0
se-index/src/components/door.vue | 6
se-index/src/assets/images/ConditionMonitoring/highlight.png | 0
se-index/src/assets/img/interactive/left_bg.png | 0
se-index/src/assets/img/interactive/details.png | 0
se-index/src/assets/img/interactive/call_icon.png | 0
se-index/src/assets/images/ConditionMonitoring/edit.png | 0
se-index/src/assets/img/interactive/left_btn.png | 0
se-index/src/components/home.vue | 2
se-index/src/components/ConditionMonitoring.vue | 410 ++++++++++++++++++++++++
se-index/src/assets/img/interactive/refresh_icon.png | 0
se-index/src/assets/img/interactive/yes.png | 0
se-index/src/assets/images/ConditionMonitoring/right.png | 0
se-index/src/components/interactive.vue | 570 +++++++++++++++++++++++++++++++++
se-index/src/assets/images/ConditionMonitoring/bg.png | 0
se-index/src/assets/images/ConditionMonitoring/delete.png | 0
se-index/src/components/InferentialTaskControl.vue | 2
20 files changed, 988 insertions(+), 7 deletions(-)
diff --git a/se-index/src/assets/images/ConditionMonitoring/bg.png b/se-index/src/assets/images/ConditionMonitoring/bg.png
new file mode 100644
index 0000000..e763c0d
--- /dev/null
+++ b/se-index/src/assets/images/ConditionMonitoring/bg.png
Binary files differ
diff --git a/se-index/src/assets/images/ConditionMonitoring/default.png b/se-index/src/assets/images/ConditionMonitoring/default.png
new file mode 100644
index 0000000..00a5515
--- /dev/null
+++ b/se-index/src/assets/images/ConditionMonitoring/default.png
Binary files differ
diff --git a/se-index/src/assets/images/ConditionMonitoring/delete.png b/se-index/src/assets/images/ConditionMonitoring/delete.png
new file mode 100644
index 0000000..b09250b
--- /dev/null
+++ b/se-index/src/assets/images/ConditionMonitoring/delete.png
Binary files differ
diff --git a/se-index/src/assets/images/ConditionMonitoring/edit.png b/se-index/src/assets/images/ConditionMonitoring/edit.png
new file mode 100644
index 0000000..21793c7
--- /dev/null
+++ b/se-index/src/assets/images/ConditionMonitoring/edit.png
Binary files differ
diff --git a/se-index/src/assets/images/ConditionMonitoring/highlight.png b/se-index/src/assets/images/ConditionMonitoring/highlight.png
new file mode 100644
index 0000000..95ee440
--- /dev/null
+++ b/se-index/src/assets/images/ConditionMonitoring/highlight.png
Binary files differ
diff --git a/se-index/src/assets/images/ConditionMonitoring/left.png b/se-index/src/assets/images/ConditionMonitoring/left.png
new file mode 100644
index 0000000..afc4552
--- /dev/null
+++ b/se-index/src/assets/images/ConditionMonitoring/left.png
Binary files differ
diff --git a/se-index/src/assets/images/ConditionMonitoring/right.png b/se-index/src/assets/images/ConditionMonitoring/right.png
new file mode 100644
index 0000000..f61f523
--- /dev/null
+++ b/se-index/src/assets/images/ConditionMonitoring/right.png
Binary files differ
diff --git a/se-index/src/assets/img/interactive/call_icon.png b/se-index/src/assets/img/interactive/call_icon.png
new file mode 100644
index 0000000..c71d187
--- /dev/null
+++ b/se-index/src/assets/img/interactive/call_icon.png
Binary files differ
diff --git a/se-index/src/assets/img/interactive/details.png b/se-index/src/assets/img/interactive/details.png
new file mode 100644
index 0000000..ea49bc3
--- /dev/null
+++ b/se-index/src/assets/img/interactive/details.png
Binary files differ
diff --git a/se-index/src/assets/img/interactive/left_bg.png b/se-index/src/assets/img/interactive/left_bg.png
new file mode 100644
index 0000000..afc4552
--- /dev/null
+++ b/se-index/src/assets/img/interactive/left_bg.png
Binary files differ
diff --git a/se-index/src/assets/img/interactive/left_btn.png b/se-index/src/assets/img/interactive/left_btn.png
new file mode 100644
index 0000000..00a5515
--- /dev/null
+++ b/se-index/src/assets/img/interactive/left_btn.png
Binary files differ
diff --git a/se-index/src/assets/img/interactive/left_btn_height.png b/se-index/src/assets/img/interactive/left_btn_height.png
new file mode 100644
index 0000000..95ee440
--- /dev/null
+++ b/se-index/src/assets/img/interactive/left_btn_height.png
Binary files differ
diff --git a/se-index/src/assets/img/interactive/refresh_icon.png b/se-index/src/assets/img/interactive/refresh_icon.png
new file mode 100644
index 0000000..e6979a3
--- /dev/null
+++ b/se-index/src/assets/img/interactive/refresh_icon.png
Binary files differ
diff --git a/se-index/src/assets/img/interactive/yes.png b/se-index/src/assets/img/interactive/yes.png
new file mode 100644
index 0000000..942cd7f
--- /dev/null
+++ b/se-index/src/assets/img/interactive/yes.png
Binary files differ
diff --git a/se-index/src/components/ConditionMonitoring.vue b/se-index/src/components/ConditionMonitoring.vue
new file mode 100644
index 0000000..0cdb416
--- /dev/null
+++ b/se-index/src/components/ConditionMonitoring.vue
@@ -0,0 +1,410 @@
+<template>
+ <div class="box">
+ <el-row :gutter="10">
+ <el-col class="left" :span="4">
+ <div style="padding-top: 20px">
+ <div
+ @click="change(item)"
+ v-for="(item, index) in dataArr"
+ :key="'butBox' + index"
+ class="butBox"
+ :style="focus == item ? highlightImg : defaultImg"
+ >
+ {{ item }}
+ </div>
+ </div>
+ </el-col>
+ <el-col class="right" :span="20">
+ <div style="height: 100%">
+ <div class="boxTop">
+ <div style="margin:20px 20px">
+ <el-table :data="table1.data">
+ <el-table-column width="100" label="骞冲彴鏍囧織" prop="logo" align="center" >
+ <template><div class="bg"></div></template>
+ </el-table-column>
+ <el-table-column width="200" label="骞冲彴鍚嶇О" prop="name" align="center" ></el-table-column>
+ <el-table-column width="100" label="骞冲彴绫诲瀷" prop="type" align="center" >
+ <template slot-scope="scope"><div class="type">{{scope.row.type}}</div></template>
+ </el-table-column>
+ <el-table-column min-width="350" label="骞冲彴涓婚〉" prop="url" align="center" ></el-table-column>
+ <el-table-column width="200" label="骞冲彴鎻忚堪" prop="describe" align="center" ></el-table-column>
+ <el-table-column width="100" label="鍒涘缓鑰�" prop="create" align="center" ></el-table-column>
+ <el-table-column width="180" label="鍒涘缓鏃堕棿" prop="createTime" align="center" ></el-table-column>
+ <el-table-column width="100" label="鍛婅璁剧疆" prop="giveAlarm" align="center" >
+ <template slot-scope="scope">
+ <el-switch
+ v-model="scope.row.giveAlarm"
+ active-color="#0CB8FF"
+ inactive-color="#ff4949">
+ </el-switch></template>
+ </el-table-column>
+ <el-table-column width="80" label="缂栬緫" align="center">
+ <template slot-scope="scope">
+ <div class="edit" @click="handleClick(scope.row)"></div>
+ </template>
+ </el-table-column>
+ <el-table-column label="鍒犻櫎" width="80" align="center">
+ <template slot-scope="scope">
+ <div class="delete" @click="handleClick(scope.row)"></div>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ <div class="boxBottom">
+ <el-row :gutter="30">
+ <el-col :span="12">
+ <div class="box1">
+ <div class="title">{{focus}}</div>
+ <div class="group">
+ <div class="text">鍚仠鐘舵��</div>
+ <div class="status">姝ｅ父鍚姩</div>
+ </div>
+ <div class="group">
+ <div class="text">閾炬帴鐘舵��</div>
+ <div class="status">姝ｅ父閾炬帴</div>
+ </div>
+ <div class="group">
+ <div class="text">鏁呴殰鏃堕棿</div>
+ <div class="status">鏃犳晠闅�</div>
+ </div>
+ <div class="group">
+ <div class="text">鏇存柊鏃堕棿</div>
+ <div>2024-11-01 11:08:48</div>
+ </div>
+ <div class="log">
+ <div class="logTitle">寮傚父鏃ュ織</div>
+ <div class="logText">8C-11-C 11:35:(6 00 DE0- bierntomhya;ahi.:mn.nf;, imaint:ga:he搴楁埛:famu:"sn,sac:1:</div>
+ <div class="logText">8C-11-C 11:35:(6 00 DE0- bierntomhya;ahi.:mn.nf;, imaint:ga:he搴楁埛:famu:"sn,sac:1:</div>
+ </div>
+ </div>
+ </el-col>
+ <el-col style="overflow:auto;" :span="12">
+ <el-table :data="table2.data">
+ <el-table-column align="center" label="搴忓彿" type="index" width="60">
+ </el-table-column>
+ <el-table-column
+ v-for="(item, index) in table2.tableTh"
+ :key="index"
+ :label="item.label"
+ :prop="item.prop"
+ align="center"
+ >
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" min-width="60" align="center">
+ <template slot-scope="scope">
+ <el-button
+ type="primary"
+ @click="handleClick(scope.row)"
+ size="small"
+ >妫�楠�</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "ConditionMonitoring",
+ data() {
+ return {
+ focus: "浣滄垬姒傚康寮�鍙戜笌楠岃瘉骞冲彴",
+ highlightImg: {
+ backgroundImage: `url(${require("@/assets/images/ConditionMonitoring/highlight.png")})`,
+ },
+ defaultImg: {
+ backgroundImage: `url(${require("@/assets/images/ConditionMonitoring/default.png")})`,
+ },
+ dataArr: [
+ "浣滄垬姒傚康寮�鍙戜笌楠岃瘉骞冲彴",
+ "浣滄垬绯荤粺璁捐涓庤瘎浼板钩鍙�",
+ "浣滄垬鏂规鎺ㄦ紨涓庡垎鏋愬钩鍙�",
+ "鎴樻硶鍒涙柊涓庝綔鎴樿繍鐢ㄧ爺绌跺钩鍙�",
+ "鎴樼暐缁煎悎闆嗘垚鐮旇鍘�",
+ "鎬佸娍鏄剧ず鍒嗙郴缁�",
+ "缁煎悎绠℃帶鍒嗙郴缁�",
+ "鏁版嵁绠＄悊鍒嗙郴缁�",
+ "浠跨湡璧勬簮绠＄悊绯荤粺",
+ ],
+ table2: {
+ data: [
+ {
+ subsystemName: "浣滄垬姒傚康寮�鍙戜笌楠岃瘉骞冲彴",
+ interactionStatus: "姝ｅ父",
+ updateTime: "2024-01-26",
+ },
+ {
+ subsystemName: "浣滄垬绯荤粺璁捐涓庤瘎浼板钩鍙�",
+ interactionStatus: "姝ｅ父",
+ updateTime: "2024-01-26",
+ },
+ {
+ subsystemName: "浣滄垬鏂规鎺ㄦ紨涓庡垎鏋愬钩鍙�",
+ interactionStatus: "姝ｅ父",
+ updateTime: "2024-01-26",
+ },
+ {
+ subsystemName: "鎴樻硶鍒涙柊涓庝綔鎴樿繍鐢ㄧ爺绌跺钩鍙�",
+ interactionStatus: "姝ｅ父",
+ updateTime: "2024-01-26",
+ },
+ {
+ subsystemName: "鎴樼暐缁煎悎闆嗘垚鐮旇鍘�",
+ interactionStatus: "姝ｅ父",
+ updateTime: "2024-01-26",
+ },
+ {
+ subsystemName: "鎬佸娍鏄剧ず鍒嗙郴缁�",
+ interactionStatus: "姝ｅ父",
+ updateTime: "2024-01-26",
+ },
+ {
+ subsystemName: "缁煎悎绠℃帶鍒嗙郴缁�",
+ interactionStatus: "姝ｅ父",
+ updateTime: "2024-01-26",
+ },
+ {
+ subsystemName: "鏁版嵁绠＄悊鍒嗙郴缁�",
+ interactionStatus: "姝ｅ父",
+ updateTime: "2024-01-26",
+ },
+ {
+ subsystemName: "浠跨湡璧勬簮绠＄悊绯荤粺",
+ interactionStatus: "姝ｅ父",
+ updateTime: "2024-01-26",
+ },
+ ],
+ tableTh: [
+ {
+ label: "鍒嗙郴缁熷悕绉�",
+ prop: "subsystemName",
+ },
+ {
+ label: "浜や簰鐘舵��",
+ prop: "interactionStatus",
+ },
+ {
+ label: "鏇存柊鏃堕棿",
+ prop: "updateTime",
+ },
+ ],
+ },
+ table1: {
+ data: [
+ {
+ name: "浣滄垬姒傚康寮�鍙戜笌楠岃瘉骞冲彴",
+ type: "榛樿搴旂敤",
+ url: "http://10.64.33.1859080/imcloud2/e/space/task?id=1762040579103117314",
+ describe: "",
+ create:"绠＄悊鍛�",
+ createTime: "2024-02-26 17:03:06",
+ giveAlarm: true,
+ }
+ ],
+ },
+ };
+ },
+ methods: {
+ change(value) {
+ this.focus = value;
+ this.table1.data.name = value
+ this.table1 = {
+ data: [
+ {
+ name: value,
+ type: "榛樿搴旂敤",
+ url: "http://10.64.33.1859080/imcloud2/e/space/task?id=1762040579103117314",
+ describe: "",
+ create:"绠＄悊鍛�",
+ createTime: "2024-02-26 17:03:06",
+ giveAlarm: true,
+ }
+ ],
+ }
+ },
+ handleClick(row) {},
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+ width: 100%;
+ height: 100%;
+ .el-row {
+ height: 100%;
+ padding: 0 20px 20px;
+ .el-col {
+ height: 100%;
+ }
+ }
+ .left {
+ background-size: 100% 100%;
+ background-image: url("~@/assets/images/ConditionMonitoring/left.png");
+ .butBox {
+ width: 90%;
+ margin: 0px auto 30px;
+ text-align: center;
+ height: 40px;
+ line-height: 40px;
+ font-size: 18px;
+ cursor: pointer;
+ background-size: 100% 100%;
+ color: #fff;
+ }
+ }
+ .right {
+ background-image: url("~@/assets/images/ConditionMonitoring/right.png");
+ background-size: 100% 100%;
+ .boxTop {
+ width: 100%;
+ height: 20%;
+ // margin-bottom: 20px;
+ .type{
+ width: 75px;
+ height: 25px;
+ line-height: 22px;
+ background: #066932;
+ color: #22C707;
+ box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.35);
+ border-radius: 4px;
+ border: 1px solid #FFFFFF;
+ margin:0 auto;
+ }
+ .bg{
+ width: 50px;
+ height: 50px;
+ margin:0 auto;
+ background-image: url("~@/assets/images/ConditionMonitoring/bg.png");
+ background-size: 100% 100%;
+ }
+ .edit{
+ width: 38px;
+ height: 38px;
+ margin:0 auto;
+ background-image: url("~@/assets/images/ConditionMonitoring/edit.png");
+ background-size: 100% 100%;
+ }
+ .delete{
+ width: 38px;
+ height: 38px;
+ margin:0 auto;
+ background-image: url("~@/assets/images/ConditionMonitoring/delete.png");
+ background-size: 100% 100%;
+ }
+ }
+ .boxBottom {
+ width: 100%;
+ height: 78%;
+ .box1{
+ width: 100%;
+ height: 100%;
+ background-color: #2D4C9E;
+ color: #fff;
+ .title{
+ padding-top:20px;
+ margin-bottom:10px;
+ font-size: 24px;
+ margin-left:15px;
+ }
+ .group{
+ display: flex;
+ line-height: 37px;
+ height: 37px;
+ font-size: 20px;
+ font-weight: 400;
+ margin-bottom:4px;
+ .text{
+ width: 130px;
+ text-align: center;
+ }
+ .status{
+ width: 115px;
+ // height:37px;
+ text-align: center;
+ background-color: #00E572;
+ }
+ }
+ .log{
+ width: 88%;
+ height: 56%;
+ background-color: #181C40;
+ margin:20px auto 0;
+ padding:10px 20px;
+ .logTitle{
+ width: auto;
+ height: 30px;
+ // font-family: Source Han Sans SC;
+ font-weight: 400;
+ font-size: 24px;
+ color: #0CB8FF;
+ // line-height: 10px;
+ }
+ .logText{
+ line-height: 30px;
+ width: 100%;
+ overflow: hidden;
+ }
+ }
+ }
+ }
+ }
+}
+/deep/ .el-table {
+ background-color: rgba(0, 0, 0, 0);
+ .computeNode {
+ background-image: url("~@/assets/images/InferentialTaskControl/computeNode.png");
+ background-size: 100% 100%;
+ width: 35px;
+ height: 35px;
+ margin: 0 auto;
+ }
+ thead {
+ tr {
+ th {
+ background-color: #1C305F;
+ border-bottom: 0px;
+ .cell {
+ font-weight: 400;
+ font-size: 18px;
+ color: #fff;
+ text-shadow: 0px 0px 2px #00fbff;
+ }
+ }
+ }
+ }
+ tbody {
+ tr {
+ background-color: rgba(0, 0, 0, 0);
+ td {
+ background-color: #181C40;
+ border-bottom: 0px;
+ .cell {
+ font-size: 16px;
+ color: #fff;
+ }
+ }
+ }
+ tr:hover {
+ // border: 2px solid #4b96dd;
+ td {
+ background-color: #2d468b;
+ .cell {
+ color: #fff;
+ }
+ }
+ }
+ }
+}
+/deep/ .el-table::before {
+ height: 0px;
+}
+</style>
\ No newline at end of file
diff --git a/se-index/src/components/InferentialTaskControl.vue b/se-index/src/components/InferentialTaskControl.vue
index 2571927..f6518fa 100644
--- a/se-index/src/components/InferentialTaskControl.vue
+++ b/se-index/src/components/InferentialTaskControl.vue
@@ -223,7 +223,7 @@
height: 85%;
background-image: url("~@/assets/images/InferentialTaskControl/bg.png");
background-size: 100% 100%;
- margin: 5% 5% 0;
+ margin: 0 5% 0;
padding: 10px 1% 20px;
}
/deep/ .el-form-item__label {
diff --git a/se-index/src/components/door.vue b/se-index/src/components/door.vue
index 85265bc..bc38c8c 100644
--- a/se-index/src/components/door.vue
+++ b/se-index/src/components/door.vue
@@ -37,7 +37,7 @@
},
{
name: "鍒嗙郴缁熺姸鎬佺洃鎺�",
- url: ""
+ url: "/home/ConditionMonitoring"
}
]
},
@@ -90,10 +90,12 @@
padding: 0 60px;
display: flex;
justify-content: space-between;
+ height: 100%;
.item {
width: 554px;
- height: 830px;
+ height: 90%;
background: url("../assets/img/home/door_bg.png");
+ background-size: 100% 100%;
.title {
position: relative;
font-family: Source Han Sans SC;
diff --git a/se-index/src/components/home.vue b/se-index/src/components/home.vue
index 99650e9..16e864d 100644
--- a/se-index/src/components/home.vue
+++ b/se-index/src/components/home.vue
@@ -117,7 +117,7 @@
}
.content {
width: 100%;
- height:calc(100vh - 183px);
+ height:calc(100vh - 147px);
margin-top: 60px;
}
}
diff --git a/se-index/src/components/interactive.vue b/se-index/src/components/interactive.vue
index b56d03a..f79aaa0 100644
--- a/se-index/src/components/interactive.vue
+++ b/se-index/src/components/interactive.vue
@@ -1,11 +1,575 @@
<template>
<div class="interactive">
- <h1>1111111111</h1>
+ <div class="left">
+ <div
+ :class="leftBtnName == item ? 'btn-height' : 'btn'"
+ v-for="(item, index) in leftBtnList"
+ :key="index"
+ @click="leftBtnClick(item, index)"
+ >
+ {{ item }}
+ </div>
+ </div>
+ <div class="right">
+ <div class="select">
+ <div class="log">
+ <div class="name">閫氶亾寮傚父鏃ュ織</div>
+ <div class="sum">1</div>
+ </div>
+ <div class="from">
+ <el-form style="margin-bottom: 20px" label-width="120px">
+ <el-row style="height: 50px">
+ <el-form-item style="float: left" label="淇℃簮锛�">
+ <el-select
+ :popper-append-to-body="false"
+ v-model="source.value"
+ placeholder="璇烽�夋嫨"
+ >
+ <el-option
+ v-for="item in source.options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item style="float: left" label="淇″锛�">
+ <el-select
+ :popper-append-to-body="false"
+ v-model="destination.value"
+ placeholder="璇烽�夋嫨"
+ >
+ <el-option
+ v-for="item in destination.options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item style="float: left" label="浼犺緭鏂瑰紡锛�">
+ <el-select
+ :popper-append-to-body="false"
+ v-model="transmission.value"
+ placeholder="璇烽�夋嫨"
+ >
+ <el-option
+ v-for="item in transmission.options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-row>
+ </el-form>
+ </div>
+ <div class="refresh">
+ <img src="../assets/img/interactive/refresh_icon.png" alt="" />
+ <div class="name">鍒锋柊</div>
+ </div>
+ <div class="call">
+ <img src="../assets/img/interactive/call_icon.png" alt="" />
+ <div class="name">鍏ㄩ儴鎶ヨ</div>
+ </div>
+ </div>
+ <el-table :data="table.data" height="85%">
+ <el-table-column label="淇℃簮" width="150px">
+ <template slot-scope="scope">
+ <div>
+ {{ scope.row.source }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="淇″">
+ <template slot-scope="scope">
+ <div>
+ {{ scope.row.destination }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="浼犺緭鏂瑰紡">
+ <template slot-scope="scope">
+ <div>
+ {{ scope.row.transmission }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="鐘舵��">
+ <template>
+ <img src="../assets/img/interactive/yes.png" alt="" />
+ </template>
+ </el-table-column>
+ <el-table-column label="鎻忚堪">
+ <template slot-scope="scope">
+ <div>
+ {{ scope.row.describe }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="浼犺緭鏁版嵁">
+ <template slot-scope="scope">
+ <div>
+ {{ scope.row.transfer }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="鏁呴殰鎶ヨ">
+ <template slot-scope="scope">
+ <el-switch v-model="scope.row.call"> </el-switch>
+ </template>
+ </el-table-column>
+ <el-table-column label="寮傚父澶勭悊">
+ <template slot-scope="scope">
+ <div>
+ {{ scope.row.abnormal }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="鏇存柊鏃堕棿">
+ <template slot-scope="scope">
+ <div>
+ {{ scope.row.time }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="鍋ュ悍">
+ <template>
+ <img src="../assets/img/interactive/yes.png" alt="" />
+ </template>
+ </el-table-column>
+ <el-table-column label="鍙敤">
+ <template>
+ <img src="../assets/img/interactive/yes.png" alt="" />
+ </template>
+ </el-table-column>
+ <el-table-column label="璇︽儏">
+ <template>
+ <img
+ src="../assets/img/interactive/details.png"
+ alt=""
+ @click="detailsClick"
+ />
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="block">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="currentPage"
+ :page-sizes="[10, 20, 30, 40]"
+ :page-size="10"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="40"
+ >
+ </el-pagination>
+ </div>
+ </div>
</div>
</template>
<script>
-export default {};
+export default {
+ data() {
+ return {
+ leftBtnList: ["浜や簰閫氶亾绠＄悊", "浜や簰杩囩▼鐩戞帶"],
+ leftBtnName: "浜や簰閫氶亾绠＄悊",
+ source: {
+ options: [
+ {
+ value: "qx102stect1",
+ label: "qx102stect1"
+ },
+ {
+ value: "qx102stect2",
+ label: "qx102stect2"
+ }
+ ],
+ value: ""
+ },
+ destination: {
+ options: [
+ {
+ value: "qx102stect1",
+ label: "qx102stect1"
+ },
+ {
+ value: "qx102stect2",
+ label: "qx102stect2"
+ }
+ ],
+ value: ""
+ },
+ transmission: {
+ options: [
+ {
+ value: "qx102stect1",
+ label: "qx102stect1"
+ },
+ {
+ value: "qx102stect2",
+ label: "qx102stect2"
+ }
+ ],
+ value: ""
+ },
+ table: {
+ data: [
+ {
+ source: "鏁版嵁绠＄悊鍒嗙郴缁�",
+ destination: "鍒嗙郴缁�",
+ transmission: "娑堟伅涓棿浠�",
+ state: "",
+ describe: "绯荤粺绠＄悊鏈嶅姟鏁拌＞",
+ transfer: "",
+ call: "",
+ abnormal: "閫氶亾鏂紑",
+ time: "2024-11-05 09:51:34",
+ healthy: "鏄�",
+ available: "鏄�",
+ details: ""
+ },
+ {
+ source: "鏁版嵁绠＄悊鍒嗙郴缁�",
+ destination: "鍒嗙郴缁�",
+ transmission: "娑堟伅涓棿浠�",
+ state: "鏄�",
+ describe: "缃戝叧鏈嶅姟",
+ transfer: "",
+ call: "",
+ abnormal: "浼犺緭瓒呮椂",
+ time: "2024-11-05 18:20:04",
+ healthy: "鏄�",
+ available: "鏄�",
+ details: ""
+ }
+ ],
+ tableTh: [
+ {
+ label: "淇℃簮",
+ prop: "source"
+ },
+ {
+ label: "淇″",
+ prop: "destination"
+ },
+ {
+ label: "浼犺緭鏂瑰紡",
+ prop: "transmission"
+ },
+ {
+ label: "鐘舵��",
+ prop: "state"
+ },
+ {
+ label: "鎻忚堪",
+ prop: "describe"
+ },
+ {
+ label: "浼犺緭鏁版嵁",
+ prop: "transfer"
+ },
+ {
+ label: "鏁呴殰鎶ヨ",
+ prop: "call"
+ },
+ {
+ label: "寮傚父澶勭悊",
+ prop: "abnormal"
+ },
+ {
+ label: "鏇存柊鏃堕棿",
+ prop: "time"
+ },
+ {
+ label: "鍋ュ悍",
+ prop: "healthy"
+ },
+ {
+ label: "鍙敤",
+ prop: "available"
+ },
+ {
+ label: "璇︽儏",
+ prop: "details"
+ }
+ ]
+ },
+ currentPage: 4
+ };
+ },
+ methods: {
+ leftBtnClick(item, index) {
+ this.leftBtnName = item;
+ },
+ detailsClick() {},
+ handleSizeChange(val) {
+ console.log(`姣忛〉 ${val} 鏉);
+ },
+ handleCurrentChange(val) {
+ console.log(`褰撳墠椤�: ${val}`);
+ }
+ }
+};
</script>
-<style lang="less" scope></style>
+<style lang="less" scoped>
+.interactive {
+ padding: 20px 30px;
+ display: flex;
+ height: 100%;
+ .left {
+ padding-top: 20px;
+ width: 320px;
+ height: 90%;
+ background: url("../assets/img/interactive/left_bg.png") no-repeat;
+ background-size: 100% 100%;
+ font-family: Source Han Sans SC;
+ font-weight: 400;
+ font-size: 18px;
+ color: #ffffff;
+ .btn {
+ margin: 20px auto;
+ width: 268px;
+ height: 43px;
+ line-height: 43px;
+ text-align: center;
+ background: url("../assets/img/interactive/left_btn.png");
+ }
+ .btn-height {
+ margin: 20px auto;
+ width: 268px;
+ height: 43px;
+ line-height: 43px;
+ text-align: center;
+ background: url("../assets/img/interactive/left_btn_height.png");
+ }
+ }
+ .right {
+ position: relative;
+ margin-left: 30px;
+ padding-top: 20px;
+ height: 90%;
+ .select {
+ display: flex;
+ .log {
+ position: relative;
+ width: 128px;
+ height: 48px;
+ background: radial-gradient(circle, #00c0fa 0%, #015eea 100%);
+ border-radius: 6px;
+ .name {
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ line-height: 48px;
+ font-family: Source Han Sans SC;
+ font-weight: 400;
+ font-size: 18px;
+ color: #ffffff;
+ }
+ .sum {
+ position: absolute;
+ right: -10px;
+ top: -10px;
+ width: 25px;
+ height: 25px;
+ text-align: center;
+ line-height: 25px;
+ background: #10ad40;
+ border-radius: 50%;
+ border: 1px solid #ffffff;
+ font-size: 14px;
+ color: #ffffff;
+ }
+ }
+ .from {
+ margin-left: 300px;
+ }
+ .refresh {
+ margin-left: 10px;
+ display: flex;
+ align-items: center;
+ width: 76px;
+ height: 50px;
+ line-height: 50px;
+ background: #015eea;
+ border-radius: 6px;
+ font-size: 18px;
+ color: #ffffff;
+ img {
+ margin-left: 5px;
+ width: 23px;
+ height: 23px;
+ }
+ .name {
+ margin-left: 5px;
+ }
+ }
+ .call {
+ margin-left: 10px;
+ display: flex;
+ align-items: center;
+ width: 115px;
+ height: 49px;
+ line-height: 49px;
+ background: #083d62;
+ border-radius: 6px;
+ border: 1px solid #4b96dd;
+ font-size: 18px;
+ color: #ffffff;
+ img {
+ margin-left: 5px;
+ width: 23px;
+ height: 23px;
+ }
+ .name {
+ margin-left: 5px;
+ }
+ }
+ }
+ .block {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ /deep/.el-pagination__total {
+ margin-top: 8px;
+ font-size: 18px;
+ color: #ffffff;
+ }
+ /deep/.el-input__inner {
+ width: 110px;
+ height: 40px;
+ font-size: 18px;
+ }
+ /deep/.btn-prev {
+ margin-top: 6px;
+ color: #fff;
+ background: rgba(0, 0, 0, 0);
+ }
+ /deep/.btn-next {
+ margin-top: 6px;
+ color: #fff;
+ background: rgba(0, 0, 0, 0);
+ }
+ /deep/.el-pager {
+ margin-top: 6px;
+ .number {
+ background: rgba(0, 0, 0, 0);
+ font-size: 18px;
+ color: #fff;
+ }
+ .active {
+ color: #0cb8ff;
+ }
+ }
+ /deep/.el-icon {
+ font-size: 16px;
+ }
+ /deep/.el-pagination__jump {
+ font-size: 18px;
+ color: #fff;
+ }
+ /deep/.el-pagination__editor {
+ width: 100px;
+ margin-left: 10px;
+ .el-input__inner {
+ width: 60px;
+ background: rgba(0, 0, 0, 0);
+ border: 1px solid #409eff;
+ color: #fff;
+ font-size: 18px;
+ }
+ }
+ }
+ }
+}
+/deep/ .el-form-item__label {
+ margin-top: 5px;
+ color: #fff;
+ font-size: 16px;
+}
+/deep/ .el-select {
+ input {
+ border: 1px solid #4b96dd;
+ background-color: rgba(0, 0, 0, 0);
+ color: #ddd;
+ height: 50px;
+ width: 160px;
+ font-size: 16px;
+ }
+}
+/deep/ .el-select-dropdown {
+ border: 1px solid #4b96dd;
+ background-color: #091631;
+ .el-select-dropdown__item.hover,
+ .el-select-dropdown__item:hover {
+ background-color: #2d4c9e;
+ color: #fff;
+ }
+ .el-select-dropdown__item {
+ color: #bbb;
+ }
+}
+
+/deep/ .el-table {
+ background-color: rgba(0, 0, 0, 0);
+
+ thead {
+ tr {
+
+ th {
+ background-color: #2d4c9e;
+ border-bottom: 0px;
+ .cell {
+ font-weight: 400;
+ font-size: 20px;
+ color: #fff;
+ text-shadow: 0px 0px 2px #00fbff;
+ }
+ }
+ }
+ }
+ tbody {
+ font-size: 16px;
+ color: #fff;
+ tr {
+ background-color: rgba(0, 0, 0, 0);
+ td {
+ background-color: rgba(0, 0, 0, 0);
+ border-bottom: 0px;
+ }
+ }
+ tr:hover {
+ border: 2px solid #4b96dd;
+ td {
+ background-color: #2d4c9e;
+ }
+ }
+ }
+}
+/deep/ .el-table::before {
+ height: 0px;
+}
+</style>
+
+<style>
+.el-select-dropdown {
+ border: 1px solid #4b96dd;
+ background-color: #091631;
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+ background-color: #2d4c9e;
+ color: #fff;
+}
+.el-select-dropdown__item {
+ color: #bbb;
+}
+
+
+</style>
diff --git a/se-index/src/router/index.js b/se-index/src/router/index.js
index 8f57c4a..daf1c6d 100644
--- a/se-index/src/router/index.js
+++ b/se-index/src/router/index.js
@@ -42,6 +42,11 @@
name:'鎺ㄦ紨浠诲姟鎺у埗',
component: () => import("@/components/InferentialTaskControl.vue")
},
+ {
+ path: "ConditionMonitoring",
+ name:'鍒嗙郴缁熺姸鎬佺洃鎺�',
+ component: () => import("@/components/ConditionMonitoring.vue")
+ },
]
}
];
--
Gitblit v1.9.3