From f0cecbee64935be0d5140d999c0046eacec6bc05 Mon Sep 17 00:00:00 2001
From: 安宇轩1 <11369407+an-yuxuan-1@user.noreply.gitee.com>
Date: 星期五, 22 十一月 2024 17:30:03 +0800
Subject: [PATCH] 1122_推演任务控制
---
se-index/src/router/index.js | 7
se-index/src/components/home.vue | 2
se-index/src/assets/images/InferentialTaskControl/bg.png | 0
se-index/src/components/door.vue | 2
se-index/src/components/TableComponent.vue | 253 +++++++++++++++++++++++++
se-index/src/assets/images/InferentialTaskControl/computeNode.png | 0
se-index/src/components/InferentialTaskControl.vue | 301 ++++++++++++++++++++++++++++++
7 files changed, 563 insertions(+), 2 deletions(-)
diff --git a/se-index/src/assets/images/InferentialTaskControl/bg.png b/se-index/src/assets/images/InferentialTaskControl/bg.png
new file mode 100644
index 0000000..37be7ed
--- /dev/null
+++ b/se-index/src/assets/images/InferentialTaskControl/bg.png
Binary files differ
diff --git a/se-index/src/assets/images/InferentialTaskControl/computeNode.png b/se-index/src/assets/images/InferentialTaskControl/computeNode.png
new file mode 100644
index 0000000..01501a0
--- /dev/null
+++ b/se-index/src/assets/images/InferentialTaskControl/computeNode.png
Binary files differ
diff --git a/se-index/src/components/InferentialTaskControl.vue b/se-index/src/components/InferentialTaskControl.vue
new file mode 100644
index 0000000..2571927
--- /dev/null
+++ b/se-index/src/components/InferentialTaskControl.vue
@@ -0,0 +1,301 @@
+<template>
+ <div class="box">
+ <el-form style="margin-bottom: 20px" label-width="100px">
+ <el-row style="height: 40px">
+ <el-button type="primary">娣诲姞鎺ㄦ紨</el-button>
+ <el-button
+ style="float: right"
+ icon="el-icon-video-pause"
+ type="primary"
+ >涓�閿仠姝�</el-button
+ >
+ <el-button style="float: right" icon="el-icon-video-play" type="primary"
+ >涓�閿惎鍔�</el-button
+ >
+ <el-button style="float: right" icon="el-icon-search" type="primary"
+ >鏌ヨ</el-button
+ >
+ <el-form-item style="float: right" label="浠诲姟鍚嶇О">
+ <el-select
+ :popper-append-to-body="false"
+ v-model="task.value"
+ placeholder="璇烽�夋嫨浠诲姟"
+ >
+ <el-option
+ v-for="item in task.options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item style="float: right" label="鏂规鍚嶇О">
+ <el-select
+ :popper-append-to-body="false"
+ v-model="scheme.value"
+ placeholder="璇烽�夋嫨鏂规"
+ >
+ <el-option
+ v-for="item in scheme.options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item style="float: right" label="鍦烘櫙锛堟兂瀹氾級">
+ <el-select
+ :popper-append-to-body="false"
+ v-model="scene.value"
+ placeholder="璇烽�夋嫨鍦烘櫙"
+ >
+ <el-option
+ v-for="item in scene.options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-row>
+ </el-form>
+ <el-table :data="table.data">
+ <el-table-column align="center" type="selection" width="55">
+ </el-table-column>
+ <el-table-column
+ v-for="(item, index) in table.tableTh"
+ :key="index"
+ :label="item.label"
+ :prop="item.prop"
+ align="center"
+ >
+ </el-table-column>
+ <el-table-column label="璁＄畻鑺傜偣" prop="computeNode" align="center">
+ <template>
+ <div class="computeNode"></div>
+ </template>
+ </el-table-column>
+ <el-table-column label="瀛樺偍鏁版嵁" prop="storeData" align="center">
+ <template>
+ <div
+ style="
+ width: 31px;
+ height: 20px;
+ background: #ffffff;
+ border-radius: 10px;
+ margin: 0 auto;
+ "
+ ></div> </template
+ ></el-table-column>
+ <el-table-column label="鐘舵��" prop="status" align="center">
+ <template>
+ <div
+ style="
+ width: 20px;
+ height: 20px;
+ background: #ffffff;
+ border-radius: 10px;
+ margin: 0 auto;
+ "
+ ></div> </template
+ ></el-table-column>
+ <el-table-column label="鎿嶄綔" min-width="100" align="center">
+ <template slot-scope="scope">
+ <el-button type="text" @click="handleClick(scope.row)" size="small"
+ >鍚姩</el-button
+ >
+ <el-button type="text" @click="handleClick(scope.row)" size="small"
+ >鍋滄</el-button
+ >
+ <el-button type="text" @click="handleClick(scope.row)" size="small"
+ >缁х画</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "InferentialTaskControl",
+ data() {
+ return {
+ task: {
+ options: [
+ {
+ value: "qx102stect1",
+ label: "qx102stect1",
+ },
+ {
+ value: "qx102stect2",
+ label: "qx102stect2",
+ },
+ ],
+ value: "",
+ },
+ scheme: {
+ options: [
+ {
+ value: "qx102stect1",
+ label: "qx102stect1",
+ },
+ {
+ value: "qx102stect2",
+ label: "qx102stect2",
+ },
+ ],
+ value: "",
+ },
+ scene: {
+ options: [
+ {
+ value: "qx102stect1",
+ label: "qx102stect1",
+ },
+ {
+ value: "qx102stect2",
+ label: "qx102stect2",
+ },
+ ],
+ value: "",
+ },
+ table: {
+ data: [
+ {
+ task: "qx102stect1浠诲姟",
+ scheme: "qx102stect1",
+ scene: "qx102stect1-鍦烘櫙",
+ computeNode: "",
+ startTime: "2023-06-01 00:00:00",
+ endTime: "2027-06-01 00:00:00",
+ storeData: "",
+ status: "",
+ },
+ {
+ task: "qx102stect2浠诲姟",
+ scheme: "qx102stect2",
+ scene: "qx102stect2-鍦烘櫙",
+ computeNode: "",
+ startTime: "2023-06-01 00:00:00",
+ endTime: "2027-06-01 00:00:00",
+ storeData: "",
+ status: "",
+ },
+ ],
+ tableTh: [
+ {
+ label: "浠诲姟鍚嶇О",
+ prop: "task",
+ },
+ {
+ label: "鏂规鍚嶇О",
+ prop: "scheme",
+ },
+ {
+ label: "鍦烘櫙鍚嶇О",
+ prop: "scene",
+ },
+ {
+ label: "寮�濮嬫椂闂�",
+ prop: "startTime",
+ },
+ {
+ label: "缁撴潫鏃堕棿",
+ prop: "endTime",
+ },
+ ],
+ },
+ };
+ },
+ methods: {
+ handleClick(row) {},
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+ width: 88%;
+ height: 85%;
+ background-image: url("~@/assets/images/InferentialTaskControl/bg.png");
+ background-size: 100% 100%;
+ margin: 5% 5% 0;
+ padding: 10px 1% 20px;
+}
+/deep/ .el-form-item__label {
+ color: #fff;
+}
+
+/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: #2d4c9e;
+ border-bottom: 0px;
+ .cell {
+ font-weight: 400;
+ font-size: 20px;
+ color: #fff;
+ text-shadow: 0px 0px 2px #00fbff;
+ }
+ }
+ }
+ }
+ tbody {
+ tr {
+ background-color: rgba(0, 0, 0, 0);
+ td {
+ background-color: rgba(0, 0, 0, 0);
+ border-bottom: 0px;
+ .cell {
+ font-size: 16px;
+ color: #fff;
+ }
+ }
+ }
+ tr:hover {
+ border: 2px solid #4b96dd;
+ td {
+ background-color: #2d4c9e;
+ .cell {
+ color: #fff;
+ }
+ }
+ }
+ }
+}
+/deep/ .el-table::before {
+ height: 0px;
+}
+/deep/ .el-select {
+ input {
+ border: 1px solid #4b96dd;
+ background-color: rgba(0, 0, 0, 0);
+ color: #ddd;
+ }
+}
+/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;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/se-index/src/components/TableComponent.vue b/se-index/src/components/TableComponent.vue
new file mode 100644
index 0000000..28246c3
--- /dev/null
+++ b/se-index/src/components/TableComponent.vue
@@ -0,0 +1,253 @@
+<!-- 璇︽儏琛ㄦ牸寮圭獥 -->
+<template>
+ <div class="dataBox">
+ <el-table :data="data" style="width: 100%" height="100%"
+ :row-class-name="tableRowClassName">
+ <el-table-column
+ :title="item.label"
+ v-for="(item, index) in tableTh"
+ :key="index"
+ :prop="item.prop"
+ show-overflow-tooltip
+ :label="item.label"
+ :width="item.width"
+ placement="top"
+ >
+ <!-- <template slot-scope="scope">
+ <div :title="item.label" @click="handleClick(scope.row)"></div>
+ </template> -->
+ </el-table-column>
+ <el-table-column v-if="operate" :label="action" width="45">
+ <template slot-scope="scope">
+ <div @click="handleClick(scope.row)" class="more"></div>
+ </template>
+ </el-table-column>
+ <el-table-column v-if="deleteBut" label="鍒犻櫎" width="45">
+ <template slot-scope="scope">
+ <div @click="deleteClick(scope.row)" class="deleteBut"></div>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ tableData: {
+ type: Array,
+ },
+ tableTh: {
+ type: Array,
+ },
+ operate: {
+ type: Boolean,
+ default: false,
+ },
+ deleteBut: {
+ type: Boolean,
+ default: false,
+ },
+ action:{
+ type: String,
+ default: '鏇村',
+ }
+ },
+ data() {
+ return {
+ boxShow: true,
+ login: false,
+ data: ["test"],
+ }
+ },
+ watch: {
+ tableData: {
+ handler: function (newVal, oldVal) {
+ this.data = newVal
+ },
+ immediate: true,
+ },
+ },
+ methods: {
+ //瑙﹀彂璇︽儏浜嬩欢
+ handleClick(data) {
+ console.log(this.$parent)
+ this.$parent.handleClick(data)
+ },
+ //瑙﹀彂璇︽儏浜嬩欢
+ deleteClick(data) {
+ this.$parent.deleteClick(data)
+ },
+ // rowDblclick(row) {
+ // this.$parent.rowDblclick(row)
+ // },
+ //鏍峰紡鎺у埗
+ tableRowClassName({row, rowIndex}){
+ if (row.lx && row.lx != '闈為噸鐐逛汉') {
+ // return 'zdr-row'
+ let className = ''
+ switch (row.lx) {
+ case '鐙眳鑰佷汉':
+ className = 'zdr-row-1'
+ break;
+ case '閫�浼嶅啗浜�':
+ className = 'zdr-row-2'
+ break;
+ case '楂橀緞鑰佷汉':
+ className = 'zdr-row-3'
+ break;
+ case '鍥伴毦浜哄憳':
+ className = 'zdr-row-4'
+ break;
+ case '瀛曞':
+ className = 'zdr-row-6'
+ break;
+ default:
+ break;
+ }
+ return className;
+ }
+ return ''
+ }
+ },
+ mounted(){
+ //tooltip鑷�傚簲閫傞厤
+ // function bodyScale() {
+ // var deviceHeight = document.documentElement.clientHeight;//鑾峰彇褰撳墠鍒嗚鲸鐜囦笅鐨勫彲鏄尯鍩熼珮搴�
+ // var scale = deviceHeight/1080;
+ // let tooltip = document.getElementsByClassName('el-tooltip__popper')
+ // for(let i in tooltip){
+ // if(typeof tooltip[i] == 'object'){
+ // // tooltip[i].style.zoom = scale
+ // // clearInterval(tooltipTime)
+ // }
+ // }
+ // }
+ // //鍔ㄦ�佺洃鍚綋鍓嶅垎杈ㄧ巼鏄惁鏀瑰彉
+ // window.addEventListener('resize',function() {
+ // bodyScale();
+ // })
+ // let tooltipTime = setInterval(() => {
+ // bodyScale();
+ // }, 500);
+ }
+}
+</script>
+
+<style lang="less" scoped>
+.dataBox {
+ width: 100%;
+ height: 100%;
+ .more {
+ width: 23px;
+ height: 23px;
+ background-image: url("~@/assets/images/button/Arrow.png");
+ background-size: 100% 100%;
+ cursor: pointer;
+ margin: 0 auto;
+ }
+ .deleteBut {
+ width: 23px;
+ height: 23px;
+ background-image: url("~@/assets/images/button/delete.png");
+ background-size: 100% 100%;
+ cursor: pointer;
+ margin: 0 auto;
+ }
+ ::v-deep .el-table {
+ background-color: rgba(0, 0, 0, 0);
+ border-bottom: 0px;
+ color: #fff;
+ }
+ ::v-deep .el-table::before {
+ height: 0px;
+ }
+ ::v-deep .el-table thead tr {
+ background-color: rgba(0, 0, 0, 0);
+ background-image: url("~@/assets/images/button/tr.png");
+ background-size: 100% 100%;
+ font-size: 16px;
+ }
+ ::v-deep .el-table thead tr th {
+ background-color: rgba(0, 0, 0, 0);
+ border-bottom: 0px;
+ text-align: center;
+ .cell {
+ padding: 0;
+ color: #e1f8ff;
+ }
+ }
+ ::v-deep .el-table tbody {
+ tr:nth-child(2n-1) {
+ margin-top: 5px;
+ background-color: rgba(0, 0, 0, 0);
+ border-bottom: 0px;
+ background-image: url("~@/assets/images/button/single.png");
+ background-size: 100% 100%;
+ font-size: 13px;
+ max-height: 30px;
+ }
+ tr:nth-child(2n) {
+ margin-top: 5px;
+ background-color: rgba(0, 0, 0, 0);
+ border-bottom: 0px;
+ background-image: url("~@/assets/images/button/double.png");
+ background-size: 100% 100%;
+ font-size: 13px;
+ max-height: 30px;
+ }
+ tr:hover {
+ margin-top: 5px;
+ background-color: rgba(0, 0, 0, 0);
+ border-bottom: 0px;
+ background-image: url("~@/assets/images/button/hover.png");
+ td {
+ .cell {
+ color: #fff;
+ }
+ }
+ }
+ }
+ ::v-deep .el-table tbody tr td {
+ background-color: rgba(0, 0, 0, 0);
+ border-bottom: 0px;
+ text-align: center;
+ .cell {
+ font-size: 14px;
+ padding: 0 2px 0 2px;
+ color: #dbdbdb;
+ }
+ }
+ ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+ background-color: rgba(0, 0, 0, 0);
+ }
+ ::v-deep .el-table {
+ .zdr-row-1{ td { .cell { color: #32db87;}}}
+ .zdr-row-1:hover{ td{ .cell{color: #00FF7F;}}}
+ .zdr-row-2{ td { .cell { color: #8b7fd3;}}}
+ .zdr-row-2:hover{ td{ .cell{color: #8470FF;}}}
+ .zdr-row-3{ td { .cell { color: #db7575;}}}
+ .zdr-row-3:hover{ td{ .cell{color: #FF6A6A;}}}
+ .zdr-row-4{ td { .cell { color: #c9be48;}}}
+ .zdr-row-4:hover{ td{ .cell{color: #FFF68F;}}}
+ .zdr-row-6{ td { .cell { color: #25b2e0;}}}
+ .zdr-row-6:hover{ td{ .cell{color: #00BFFF;}}}
+ }
+
+ ::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
+ /* 瀵瑰簲绾靛悜婊氬姩鏉＄殑瀹藉害 */
+ width: 10px;
+ /* 瀵瑰簲妯悜婊氬姩鏉＄殑瀹藉害 */
+ height: 0px;
+ }
+ ::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
+ background-image: url("~@/assets/images/button/scrollBar.png");
+ background-size: 100% 100%;
+ cursor: pointer;
+ }
+ ::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
+ background: #41494c;
+ background-size: 100% 100%;
+ }
+}
+</style>
diff --git a/se-index/src/components/door.vue b/se-index/src/components/door.vue
index 7ea1bea..85265bc 100644
--- a/se-index/src/components/door.vue
+++ b/se-index/src/components/door.vue
@@ -33,7 +33,7 @@
},
{
name: "鎺ㄦ紨浠诲姟鎺у埗",
- url: ""
+ url: "/home/InferentialTaskControl"
},
{
name: "鍒嗙郴缁熺姸鎬佺洃鎺�",
diff --git a/se-index/src/components/home.vue b/se-index/src/components/home.vue
index 5ec2ac0..99650e9 100644
--- a/se-index/src/components/home.vue
+++ b/se-index/src/components/home.vue
@@ -116,6 +116,8 @@
}
}
.content {
+ width: 100%;
+ height:calc(100vh - 183px);
margin-top: 60px;
}
}
diff --git a/se-index/src/router/index.js b/se-index/src/router/index.js
index 2cfc4c3..8f57c4a 100644
--- a/se-index/src/router/index.js
+++ b/se-index/src/router/index.js
@@ -36,7 +36,12 @@
path: "interactive",
name:'鍒嗙郴缁熶氦浜掔鐞�',
component: () => import("@/components/interactive.vue")
- }
+ },
+ {
+ path: "InferentialTaskControl",
+ name:'鎺ㄦ紨浠诲姟鎺у埗',
+ component: () => import("@/components/InferentialTaskControl.vue")
+ },
]
}
];
--
Gitblit v1.9.3