|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="cqcy-content" style="margin: 0;">
|
|
|
+ <div class="cqcy-content" style="margin: 0;height: calc(100% - 70px);">
|
|
|
<breadcrumb-view :breadcrumbList="breadcrumbList" :show-index="false"></breadcrumb-view>
|
|
|
<el-divider></el-divider>
|
|
|
<div class="cy-main">
|
|
|
@@ -9,27 +9,40 @@
|
|
|
v-for="dict in groupDataList"
|
|
|
:key="dict.id"
|
|
|
:label="dict.groupName"
|
|
|
- :value="dict.id"
|
|
|
- ></el-option>
|
|
|
+ :value="dict.id">
|
|
|
+ <span>
|
|
|
+ <div v-if="dict.runState == 0" class="cy-run-status" style="background-color: red;"></div>
|
|
|
+ <div v-if="dict.runState == 1" class="cy-run-status" style="background-color: green;"></div>
|
|
|
+ </span>
|
|
|
+ <span>{{ dict.groupName }}</span>
|
|
|
+ </el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="cy-main cy-data-main">
|
|
|
- <div class="cy-item-main">
|
|
|
+ <div class="cy-item-main" style="overflow: hidden;">
|
|
|
<div class="cy-btn">
|
|
|
- <el-button v-if="runStatus == 0" size="mini" type="primary" plain icon="el-icon-video-play">运行</el-button>
|
|
|
- <el-button v-if="runStatus == 1" size="mini" type="danger" plain icon="el-icon-video-pause">停止</el-button>
|
|
|
+ <el-button v-if="runStatus == 0"
|
|
|
+ @click="runningEvent"
|
|
|
+ size="mini" type="primary" plain icon="el-icon-video-play">运行</el-button>
|
|
|
+ <el-button v-if="runStatus == 1"
|
|
|
+ @click="stopRunningEvent"
|
|
|
+ size="mini" type="danger" plain icon="el-icon-video-pause">停止</el-button>
|
|
|
</div>
|
|
|
- <div style="overflow: auto;height: 100%;">
|
|
|
+ <div style="overflow: auto;height: 100%;height: calc(100% - 40px);">
|
|
|
<ul>
|
|
|
<li v-for="item in itemDataList">
|
|
|
<div class="cy-item-name">{{ item.itemName }}</div>
|
|
|
<div style="display: flex;">
|
|
|
- <div class="cy-item-val" style="width: 60px;">实时数据</div>
|
|
|
+ <div class="cy-item-val" style="width: 60px;">状态</div>
|
|
|
<div class="cy-item-val">实时数据</div>
|
|
|
</div>
|
|
|
<div style="display: flex;">
|
|
|
- <div class="cy-item-val" style="width: 60px;">频率</div>
|
|
|
- <div class="cy-item-val">频率</div>
|
|
|
+ <div class="cy-item-val" style="width: 60px;">数据类型</div>
|
|
|
+ <div class="cy-item-val">{{ item.dataType }}</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div class="cy-item-val" style="width: 60px;">值</div>
|
|
|
+ <div class="cy-item-val">{{ item.dataValue }}</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
@@ -41,7 +54,7 @@
|
|
|
|
|
|
<script>
|
|
|
import BreadcrumbView from '@/components/BreadcrumbView'
|
|
|
-import {getAllItemGroup, getItemGroupById} from "@/api/datasource";
|
|
|
+import {getAllItemGroup, getItemGroupById, getItemValueById, runGroupById} from "@/api/datasource";
|
|
|
import {showLoading} from "@/utils/cqcy";
|
|
|
|
|
|
export default {
|
|
|
@@ -56,7 +69,8 @@ export default {
|
|
|
itemDataList: [],
|
|
|
runStatus: -1,
|
|
|
chooseGroup: null,
|
|
|
- chooseGroupId: null
|
|
|
+ chooseGroupId: null,
|
|
|
+ timeInterval: null
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -64,6 +78,12 @@ export default {
|
|
|
this.getGroupList()
|
|
|
},
|
|
|
},
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.timeInterval) {
|
|
|
+ clearInterval(this.timeInterval)
|
|
|
+ this.timeInterval = null
|
|
|
+ }
|
|
|
+ },
|
|
|
created() {
|
|
|
this.getGroupList()
|
|
|
},
|
|
|
@@ -80,16 +100,85 @@ export default {
|
|
|
},
|
|
|
/** 根据ID查询组信息 */
|
|
|
getGroupById(val) {
|
|
|
+ if (this.timeInterval) {
|
|
|
+ clearInterval(this.timeInterval)
|
|
|
+ this.timeInterval = null
|
|
|
+ }
|
|
|
const loading = showLoading(this, '加载中，请稍候···')
|
|
|
getItemGroupById(val).then(res => {
|
|
|
loading.close()
|
|
|
+ this.chooseGroup = res.data
|
|
|
+ this.chooseGroupId = res.data.id
|
|
|
this.runStatus = res.data.runState
|
|
|
+ if (this.runStatus == 1) {
|
|
|
+ this.getItemValueById()
|
|
|
+ }
|
|
|
this.itemDataList = res.data.itemList
|
|
|
- console.log(res)
|
|
|
}).catch((e) => {
|
|
|
loading.close()
|
|
|
})
|
|
|
- }
|
|
|
+ },
|
|
|
+ /** 修改数据状态 */
|
|
|
+ changeDataList(status) {
|
|
|
+ for (let i in this.groupDataList) {
|
|
|
+ let data = this.groupDataList[i]
|
|
|
+ if (data.id == this.chooseGroupId) {
|
|
|
+ data.runState = status
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 运行、停止运行接口 */
|
|
|
+ runGroupById(status) {
|
|
|
+ let params = {
|
|
|
+ 'id': this.chooseGroupId,
|
|
|
+ 'status': status
|
|
|
+ }
|
|
|
+ const loading = showLoading(this, params.status == 1 ? '正在运行，请稍候···' : '正在停止，请稍候···')
|
|
|
+ runGroupById(params).then(res => {
|
|
|
+ loading.close()
|
|
|
+ this.runStatus = status
|
|
|
+ this.changeDataList(this.runStatus)
|
|
|
+ if (this.runStatus == 1) {
|
|
|
+ this.getItemValueById()
|
|
|
+ } else {
|
|
|
+ if (this.timeInterval) {
|
|
|
+ clearInterval(this.timeInterval)
|
|
|
+ this.timeInterval = null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$message({
|
|
|
+ message: res.data,
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ }).catch((e) => {
|
|
|
+ loading.close()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 运行事件 */
|
|
|
+ runningEvent() {
|
|
|
+ this.runGroupById(1)
|
|
|
+ },
|
|
|
+ /** 停止运行事件 */
|
|
|
+ stopRunningEvent() {
|
|
|
+ this.runGroupById(0)
|
|
|
+ },
|
|
|
+ /** 获取数据项值信息 */
|
|
|
+ getItemValueById() {
|
|
|
+ if (!this.chooseGroup) {
|
|
|
+ if (this.timeInterval) {
|
|
|
+ clearInterval(this.timeInterval)
|
|
|
+ this.timeInterval = null
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let temp = setInterval(() => {
|
|
|
+ getItemValueById(this.chooseGroupId).then(res => {
|
|
|
+ this.itemDataList = res.data
|
|
|
+ }).catch((e) => {
|
|
|
+ })
|
|
|
+ }, this.chooseGroup.modeValue * 1000)
|
|
|
+ this.timeInterval = temp
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -143,7 +232,7 @@ export default {
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
- margin-bottom: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.cy-item-val {
|
|
|
@@ -153,4 +242,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.cy-run-status {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
</style>
|
FinalYu
