Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交更改

Browse Source
This commit is contained in:
zhujiyan
2024-10-14 15:09:58 +08:00
parent 3e91dae797
commit 3fd897fca2
5 changed files with 223 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/views/govern/device/control/tabs/components/realtrend.vue
View File

@@ -5,14 +5,14 @@
<el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
<div v-loading="loading">
<div class="realtrend_top">
<div class="thead">
<!-- <div class="thead">
<ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
<li>
{{ table[0].value }}
</li>
</ul>
</div>
<div class="table" >
<div class="table">
<ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
<span v-for="(key, keys) in table">
<li v-if="keys != 0">
@@ -20,6 +20,33 @@
</li>
</span>
</ul>
</div> -->
<div class="realtrend_table">
<div class="thead_left">
<p>次数</p>
<p>{{ item.groupName }}</p>
</div>
<div class="thead_right">
<div class="right_cell" v-for="(value, key, index) in tableData" :key="index">
<p style="color: red; margin: 0 10px">
<span style="color: green">
{{ String(key).replace('data', ' ') }}
</span>
</p>
<p style="color: red; margin: 0 10px">
<span
v-if="
String(key).includes('data') &&
String(key) != 'dataLevel' &&
String(key) != 'dataTime'
"
style="color: green"
>
{{ value }}
</span>
</p>
</div>
</div>
</div>
</div>
<div class="tab_info">
@@ -150,7 +177,6 @@ const findRealTrendDataByGroupId = (obj: any) => {
item.unshift({ value: myColumns.value[index].title, count: '' })
})
newTableList.value = list
console.log("🚀 ~ getDeviceTrendData ~ newTableList.value:", newTableList.value)
loading.value = false
init()
})
@@ -184,13 +210,11 @@ const reverseTable = () => {
reverseTable()
const echartsData: any = ref([]),
barCharts = ref()
const echartsData: any = ref([])
const barCharts = ref()
//加载echarts
const init = () => {
// let list: any = []
let timeList: any = []
let xAxisList: any = []
chartsData.value.map((item: any, index: any) => {
chartsYxiasData.value.map((vv: any, vvs: any) => {
@@ -294,7 +318,7 @@ const init = () => {
let list: any = []
list = []
chartsYxiasData.value.map((item: any) => {
console.log(item.gbList, 'guobialist340')
// console.log(item.gbList, 'guobialist340')
if (item.gbList.length != 0) {
list.push({ phase: item.phase, title: '国标限值', list: item.gbList })
}
@@ -319,9 +343,12 @@ const init = () => {
data: item.list
})
})
nextTick(() => {
barCharts.value && barCharts.value.initChart()
})
// nextTick(() => {
if (barCharts.value) {
console.log(barCharts.value, '+++++++++++++++++++#@!')
barCharts.value[activeName.value]?.initChart()
}
// })
return
}
@@ -330,8 +357,22 @@ const handleClick = (tab: any, event: any) => {
findRealTrendDataByGroupId(params.value)
init()
}
onMounted(() => { })
defineExpose({ open })
//获取mqtt传送的实时数据
const mqttMessage: any = ref()
const tableData: any = ref({})
const setRealTrendData = (val: any) => {
console.log(val, '7777777777773555')
mqttMessage.value = val
for (let key in val) {
if (String(key).includes('data') && String(key) != 'dataLevel' && String(key) != 'dataTime') {
console.log(val[key], '0000000')
tableData.value[key] = val[key]
}
}
console.log(tableData.value, 'kkkkjjjjjsssslllmmmmmssdddd')
}
onMounted(() => {})
defineExpose({ open, setRealTrendData })
</script>
<style lang="scss" scoped>
.realtrend {
@@ -345,42 +386,41 @@ defineExpose({ open })
justify-content: space-between;
align-items: center;
.thead {
height: 100%;
overflow-y: hidden;
border: 1px solid #eee;
border-right: 0;
ul {
width: auto;
height: 40px;
display: flex;
// .thead {
// height: 100%;
// // overflow-y: hidden;
// border: 1px solid #eee;
// border-right: 0;
// ul {
// width: auto;
// height: 40px;
// display: flex;
li {
flex: none;
width: 100px;
line-height: 40px;
border: 1px solid #eee;
text-align: center;
list-style: none;
}
// li {
// flex: none;
// width: 100px;
// line-height: 40px;
// border: 1px solid #eee;
// text-align: center;
// list-style: none;
// }
li:nth-child(1) {
flex: none;
width: 200px;
}
}
// li:nth-child(1) {
// flex: none;
// width: 200px;
// }
// }
ul:nth-child(1) {
li {
font-weight: 800;
background: #f4f6f9;
}
}
ul:nth-child(4) {
height: 48px;
}
}
// ul:nth-child(1) {
// li {
// font-weight: 800;
// background: #f4f6f9;
// }
// }
// ul:nth-child(4) {
// height: 48px;
// }
// }
.table {
flex: 1;
@@ -419,6 +459,40 @@ defineExpose({ open })
// .table::-webkit-scrollbar {
// display: none;
// }
.realtrend_table {
width: 100%;
height: 100px;
display: flex;
border: 2px solid green;
.thead_left {
width: 120px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
line-height: 50px;
}
.thead_right {
flex: 1;
align-items: center;
overflow-x: auto;
border: 2px solid yellowgreen;
display: flex;
.right_cell {
width: 100%;
display: flex;
flex-direction: column;
p {
flex: none;
width: 40px;
height: 100%;
line-height: 50px;
}
}
}
}
}
}