大屏接口调试
This commit is contained in:
BianLzhaoMin
parent
bf3e089a7f
commit
c6558ee4de
|
|
@ -0,0 +1,12 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
/* 下拉等公共接口 */
|
||||
|
||||
// 获取监测区域
|
||||
export const getMonitoringAreaAPI = (data) => {
|
||||
return request({
|
||||
url: '/smart-site/constInfo/querySelected',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 高支模监测 ---- 设备列表接口 左二
|
||||
export function getMassConcreteListAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/massConcrete/getCollectDeviceList',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 高支模监测 ---- 监测温度变化值趋势接口 左三
|
||||
export function temperatureListAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/massConcrete/temperatureList',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 高支模监测 ---- 设备统计接口 右一
|
||||
export function getDevStatisticsAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/massConcrete/getDevStatistics',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 高支模监测 ---- 区域设备统计接口 右二
|
||||
export function getCollectDeviceAllAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/massConcrete/getCollectDeviceAll',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 高支模监测 ---- 报警信息接口 右三
|
||||
export function concreteAlarmListAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/massConcrete/concreteAlarmList',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// // 高支模监测 ---- 获取高支模分组
|
||||
// export function getModeGroupAPI() {
|
||||
// return request({
|
||||
// url: '/smart-site/screen/devModel/getModeGroup',
|
||||
// method: 'post',
|
||||
// })
|
||||
// }
|
||||
// // 高支模监测 ---- 设备统计接口 右二
|
||||
// export function getDevStatisticsAPI(data) {
|
||||
// return request({
|
||||
// url: '/smart-site/screen/devModel/getDevStatistics',
|
||||
// method: 'post',
|
||||
// data,
|
||||
// })
|
||||
// }
|
||||
// // 高支模监测 ---- 报警信息接口 右三
|
||||
// export function getWarnInfoAPI(data) {
|
||||
// return request({
|
||||
// url: '/smart-site/screen/devModel/getWarnInfo',
|
||||
// method: 'post',
|
||||
// data,
|
||||
// })
|
||||
// }
|
||||
|
|
@ -9,20 +9,29 @@
|
|||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
import { temperatureListAPI } from '@/api/home-concrete.js'
|
||||
import * as echarts from 'echarts'
|
||||
// require('echarts/theme/macarons')
|
||||
import 'echarts/theme/macarons'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
props: {
|
||||
deviceId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
xData: [],
|
||||
yData: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
// this.$nextTick(() => {
|
||||
// this.initChart()
|
||||
// })
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
|
|
@ -46,20 +55,16 @@ export default {
|
|||
this.chart.setOption({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
'00:00',
|
||||
'03:00',
|
||||
'06:00',
|
||||
'09:00',
|
||||
'12:00',
|
||||
'15:00',
|
||||
'18:00',
|
||||
'21:00',
|
||||
'24:00',
|
||||
],
|
||||
data: this.xData,
|
||||
boundaryGap: false,
|
||||
axisTick: { show: true },
|
||||
axisLabel: { color: '#4494db' },
|
||||
axisLabel: {
|
||||
color: '#4494db',
|
||||
overflow: 'truncate', // 溢出时显示省略号
|
||||
width: 60, // 标签最大宽度（单位px）
|
||||
ellipsis: '...', // 自定义省略符号（可选）
|
||||
interval: 0, // 强制显示所有标签
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: { color: '#4494db' },
|
||||
},
|
||||
|
|
@ -93,20 +98,10 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
name: '数量',
|
||||
name: '温度',
|
||||
type: 'line',
|
||||
smooth: true, // 启用平滑曲线
|
||||
data: [
|
||||
{ value: 12, name: '00:00' },
|
||||
{ value: 25, name: '03:00' },
|
||||
{ value: 30, name: '06:00' },
|
||||
{ value: 18, name: '09:00' },
|
||||
{ value: 12, name: '12:00' },
|
||||
{ value: 16, name: '15:00' },
|
||||
{ value: 19, name: '18:00' },
|
||||
{ value: 23, name: '21:00' },
|
||||
{ value: 13, name: '24:00' },
|
||||
],
|
||||
data: this.yData,
|
||||
itemStyle: {
|
||||
color: '#15a0c6',
|
||||
},
|
||||
|
|
@ -208,6 +203,46 @@ export default {
|
|||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
|
||||
async getTemperatureListData(id) {
|
||||
const { data: res } = await temperatureListAPI({ id })
|
||||
console.log(
|
||||
`%c🔍 大体积混凝土 ----> 监测温度变化值趋势(右三) 数据出参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
res,
|
||||
)
|
||||
|
||||
if (res.length > 0) {
|
||||
this.xData = res.map((e) => e.createTime)
|
||||
this.yData = res.map((e) => {
|
||||
return {
|
||||
value: e.attrVal,
|
||||
name: e.createTime,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.xData = ['24:00']
|
||||
this.yData = [
|
||||
{
|
||||
name: '24:00',
|
||||
value: 0,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
deviceId: {
|
||||
handler(newValue) {
|
||||
this.getTemperatureListData(newValue)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,28 +2,39 @@
|
|||
<!-- 设备列表 -->
|
||||
<div style="height: 100%; position: relative">
|
||||
<ChartsBox :boxTitle="`设备列表`">
|
||||
<div class="container">
|
||||
<div
|
||||
class="device-item"
|
||||
v-for="(item, index) in deviceList"
|
||||
:key="index"
|
||||
>
|
||||
<img
|
||||
:src="
|
||||
item.onLine
|
||||
? `${require('@/assets/image/home-concrete/line_big.png')}`
|
||||
: `${require('@/assets/image/home-concrete/offline_big.png')}`
|
||||
"
|
||||
alt=""
|
||||
/>
|
||||
<span :style="item.onLine ? 'color:#71C4FF' : ''">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
<span :style="item.onLine ? 'color:#71C4FF' : ''">
|
||||
{{ item.code }}
|
||||
</span>
|
||||
<div class="container" v-if="deviceList.length > 0">
|
||||
<div class="scroll-container">
|
||||
<div
|
||||
:key="index"
|
||||
class="device-item"
|
||||
v-for="(item, index) in deviceList"
|
||||
@click="onHandleSelectDevice(index, item.id)"
|
||||
>
|
||||
<img
|
||||
:src="
|
||||
item.isOnline == 1
|
||||
? `${require('@/assets/image/home-concrete/line_big.png')}`
|
||||
: `${require('@/assets/image/home-concrete/offline_big.png')}`
|
||||
"
|
||||
alt=""
|
||||
/>
|
||||
<span
|
||||
:style="activeIndex === index ? 'color:#0ff' : ''"
|
||||
>
|
||||
{{ item.devName }}
|
||||
</span>
|
||||
<span
|
||||
:style="activeIndex === index ? 'color:#0ff' : ''"
|
||||
>
|
||||
{{ item.devLocation }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" v-else>
|
||||
<EmptyModel />
|
||||
</div>
|
||||
</ChartsBox>
|
||||
|
||||
<div class="case">
|
||||
|
|
@ -37,20 +48,52 @@
|
|||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
import EmptyModel from '@/components/EmptyModel/index.vue'
|
||||
import { getMassConcreteListAPI } from '@/api/home-concrete.js'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
components: { ChartsBox, EmptyModel },
|
||||
props: {
|
||||
queryId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deviceList: [
|
||||
{ name: '1号设备', code: 'YKD-231', onLine: true },
|
||||
{ name: '2号设备', code: 'YKD-233', onLine: true },
|
||||
{ name: '3号设备', code: 'YKD-232', onLine: false },
|
||||
{ name: '3号设备', code: 'YKD-232', onLine: false },
|
||||
{ name: '3号设备', code: 'YKD-232', onLine: false },
|
||||
{ name: '3号设备', code: 'YKD-232', onLine: false },
|
||||
],
|
||||
deviceList: [],
|
||||
activeIndex: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getMassConcreteListData(id) {
|
||||
const { data: res } = await getMassConcreteListAPI({ id })
|
||||
console.log(
|
||||
`%c🔍 大体积混凝土 ----> 设备列表(左二) 数据出参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
res,
|
||||
)
|
||||
|
||||
this.deviceList = res
|
||||
if (res.length > 0) {
|
||||
this.$emit('handleSelectDevice', res[0].id)
|
||||
}
|
||||
},
|
||||
|
||||
onHandleSelectDevice(index, id) {
|
||||
console.log('点击')
|
||||
this.activeIndex = index
|
||||
this.$emit('handleSelectDevice', id)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
queryId: {
|
||||
handler(newValue) {
|
||||
this.getMassConcreteListData(newValue)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -58,21 +101,46 @@ export default {
|
|||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
|
||||
// transform: translateY(10px);
|
||||
.scroll-container {
|
||||
flex: 1; // 占据剩余空间
|
||||
overflow-y: auto; // 垂直滚动
|
||||
scrollbar-width: thin; // Firefox滚动条样式
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent; // Firefox滚动条颜色
|
||||
z-index: 9;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
|
||||
/* Webkit浏览器滚动条样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.device-item {
|
||||
width: calc((100% - 20px) / 6);
|
||||
width: calc((100% - 20px) / 4);
|
||||
margin-right: 4px;
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
|
|
@ -80,7 +148,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
& .device-item:nth-child(6n) {
|
||||
& .device-item:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
/>
|
||||
<div>
|
||||
<span>设备总数</span>
|
||||
<span>9999</span>
|
||||
<span>{{ allNum }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-box">
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
/>
|
||||
<div>
|
||||
<span>设备在线率</span>
|
||||
<span>50%</span>
|
||||
<span>{{ onLineRate }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -30,10 +30,48 @@
|
|||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
import { getDevStatisticsAPI } from '@/api/home-concrete.js'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
props: {
|
||||
queryId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
allNum: 0,
|
||||
onLineRate: 0,
|
||||
online: 0,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getModelListData(id) {
|
||||
const { data: res } = await getDevStatisticsAPI({ id })
|
||||
console.log(
|
||||
`%c🔍 大体积混凝土 ----> 设备统计(右一) 数据出参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
res,
|
||||
)
|
||||
|
||||
const { totalQuantity, onlineQuantity } = res
|
||||
this.allNum = totalQuantity
|
||||
this.online = onlineQuantity
|
||||
this.onLineRate = isNaN(onlineQuantity / totalQuantity)
|
||||
? 0
|
||||
: ((onlineQuantity / totalQuantity) * 100).toFixed(2)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
queryId: {
|
||||
handler(newValue) {
|
||||
this.getModelListData(newValue)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,221 +11,65 @@
|
|||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
|
||||
import { concreteAlarmListAPI } from '@/api/home-concrete.js'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
props: {
|
||||
queryId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
data: [
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件1',
|
||||
'dev-1',
|
||||
"<span class='colorGrass'>↑75%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件2',
|
||||
'dev-2',
|
||||
"<span class='colorRed'>↓33%</span>",
|
||||
],
|
||||
[
|
||||
"<div class='img-box'><img src='" +
|
||||
require('@/assets/image/pro-view/red.png') +
|
||||
"' class='table-img red-img'><img src='" +
|
||||
require('@/assets/image/pro-view/three.png') +
|
||||
"' class='three-img'></div>",
|
||||
'组件3',
|
||||
'dev-3',
|
||||
"<span class='colorGrass'>↑100%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件4',
|
||||
'rea-1',
|
||||
"<span class='colorGrass'>↑94%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件5',
|
||||
'rea-2',
|
||||
"<span class='colorGrass'>↑95%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
[
|
||||
"<img src='" +
|
||||
require('@/assets/image/pro-view/blue.png') +
|
||||
"' class='table-img'>",
|
||||
'组件6',
|
||||
'fix-2',
|
||||
"<span class='colorGrass'>↑63%</span>",
|
||||
],
|
||||
],
|
||||
data: [],
|
||||
rowNum: 5, //表格行数
|
||||
// headerHeight: 35,
|
||||
headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
|
||||
oddRowBGC: '', //奇数行
|
||||
evenRowBGC: '', //偶数行
|
||||
|
||||
columnWidth: [80],
|
||||
align: ['center'],
|
||||
columnWidth: [],
|
||||
hoverPause: true,
|
||||
waitTime: 2000,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async concreteAlarmListData(id) {
|
||||
const { data: res } = await concreteAlarmListAPI({ id })
|
||||
console.log(
|
||||
`%c🔍大体积混凝土 ----> 报警信息 (右三) 数据出参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
res,
|
||||
)
|
||||
|
||||
if (res.length > 0) {
|
||||
console.log('996')
|
||||
const newData = res.map((e) => [
|
||||
`<img src="${require('@/assets/image/pro-view/blue.png')}" class="table-img">`,
|
||||
`<span class="colorBlue">${e.remark}</span>`,
|
||||
`<span class="colorBlue">${e.devName}</span>`,
|
||||
`<span class="time-box colorBlue">${e.createTime}</span>`,
|
||||
])
|
||||
|
||||
// 替换整个 config 对象，触发组件更新
|
||||
this.config = {
|
||||
...this.config, // 保留原有配置
|
||||
data: newData, // 更新数据
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
queryId: {
|
||||
handler(newValue) {
|
||||
this.concreteAlarmListData(newValue)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -260,4 +104,28 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
::v-deep .colorBlue {
|
||||
color: #6aaef3 !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
::v-deep.colorRed {
|
||||
color: #ff5534;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
::v-deep .time-box {
|
||||
font-family: 'DS-TITle';
|
||||
display: block;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
::v-deep .dv-scroll-board .rows .ceil {
|
||||
width: auto !important;
|
||||
min-width: 80px; /* 最小宽度 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,26 +2,49 @@
|
|||
<!-- 区域设备统计 -->
|
||||
<div style="height: 100%">
|
||||
<ChartsBox :boxTitle="`区域设备统计`">
|
||||
<div ref="chartContainer" class="container"> </div>
|
||||
<div
|
||||
ref="chartContainer"
|
||||
class="container"
|
||||
v-if="barBarNameList.length > 0"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="container" v-else>
|
||||
<EmptyModel />
|
||||
</div>
|
||||
</ChartsBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
import EmptyModel from '@/components/EmptyModel/index.vue'
|
||||
import { getCollectDeviceAllAPI } from '@/api/home-concrete.js'
|
||||
import * as echarts from 'echarts'
|
||||
// require('echarts/theme/macarons')
|
||||
import 'echarts/theme/macarons'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
components: { ChartsBox, EmptyModel },
|
||||
props: {
|
||||
queryId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
barBarNameList: [],
|
||||
barBarValueList: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
Promise.all([this.getCollectDeviceAllData()]).then(() => {
|
||||
this.$nextTick(() => {
|
||||
if (this.barBarNameList.length > 0) {
|
||||
this.initChart()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
|
@ -46,14 +69,7 @@ export default {
|
|||
this.chart.setOption({
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
'区域一',
|
||||
'区域二',
|
||||
'区域三',
|
||||
'区域四',
|
||||
'区域五',
|
||||
'区域六区域六区域六',
|
||||
],
|
||||
data: this.barBarNameList,
|
||||
axisTick: { show: false }, // 隐藏刻度线
|
||||
axisLine: { show: false }, // 完全隐藏轴线
|
||||
axisLabel: {
|
||||
|
|
@ -89,9 +105,9 @@ export default {
|
|||
series: [
|
||||
{
|
||||
// 主系列（实际数据部分）
|
||||
name: '区域排名',
|
||||
name: '数量',
|
||||
type: 'bar',
|
||||
data: [30, 40, 35, 45, 50, 60],
|
||||
data: this.barBarValueList,
|
||||
barWidth: '40%',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
|
|
@ -147,6 +163,24 @@ export default {
|
|||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
|
||||
async getCollectDeviceAllData() {
|
||||
const { data: res } = await getCollectDeviceAllAPI({
|
||||
typeId: '174435992023806894661',
|
||||
})
|
||||
console.log(
|
||||
`%c🔍 大体积混凝土 ----> 区域设备统计(右二) 数据出参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
res,
|
||||
)
|
||||
|
||||
if (res.length > 0) {
|
||||
const data = res.sort((a, b) => a.num - b.num)
|
||||
this.barBarNameList = data.map((e) => e.name)
|
||||
this.barBarValueList = data.map((e) => e.num)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -160,5 +194,6 @@ export default {
|
|||
align-items: center;
|
||||
color: #fff;
|
||||
z-index: 2;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,20 +5,48 @@
|
|||
<LeftOneModel />
|
||||
</div>
|
||||
<div class="env-2">
|
||||
<RightOneModel />
|
||||
<RightOneModel :queryId="queryId" />
|
||||
</div>
|
||||
<div class="env-3">
|
||||
<LeftTwoModel />
|
||||
<LeftTwoModel
|
||||
:queryId="queryId"
|
||||
@handleSelectDevice="handleSelectDevice"
|
||||
/>
|
||||
</div>
|
||||
<div class="env-4">
|
||||
<LeftThreeModel />
|
||||
<LeftThreeModel :deviceId="deviceId" />
|
||||
</div>
|
||||
<div class="env-5">
|
||||
<RightTwoModel />
|
||||
</div>
|
||||
<div class="env-6">
|
||||
<RightThreeModel />
|
||||
<RightThreeModel :queryId="queryId" />
|
||||
</div>
|
||||
|
||||
<el-drawer
|
||||
:with-header="false"
|
||||
append-to-body
|
||||
direction="rtl"
|
||||
:visible.sync="drawer"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<div
|
||||
class="group-item"
|
||||
v-for="(item, index) in areaList"
|
||||
:key="index"
|
||||
@click="onHandleArea(item, index)"
|
||||
:class="index === activeIndex ? 'active' : ''"
|
||||
>
|
||||
<div> {{ item.name }} </div>
|
||||
<div> 设备号： {{ item.id }} </div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<div
|
||||
class="floating-box"
|
||||
@click="drawer = true"
|
||||
v-if="areaList.length > 1"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,6 +57,8 @@ import LeftThreeModel from './components/left-three-model.vue' // 左3
|
|||
import RightOneModel from './components/right-one-model.vue' // 右1
|
||||
import RightTwoModel from './components/right-two-model.vue' // 右2
|
||||
import RightThreeModel from './components/right-three-model.vue' // 右2
|
||||
|
||||
import { getMonitoringAreaAPI } from '@/api/common.js'
|
||||
export default {
|
||||
components: {
|
||||
LeftOneModel,
|
||||
|
|
@ -38,6 +68,42 @@ export default {
|
|||
RightTwoModel,
|
||||
RightThreeModel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
activeIndex: 0,
|
||||
queryId: '',
|
||||
deviceId: '',
|
||||
areaList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.drawer = false
|
||||
},
|
||||
async getMonitoringAreaData() {
|
||||
const { data: res } = await getMonitoringAreaAPI({
|
||||
typeId: '174435992023806894661',
|
||||
})
|
||||
if (res.length > 0) {
|
||||
this.queryId = res[0].id
|
||||
}
|
||||
|
||||
this.areaList = res
|
||||
},
|
||||
onHandleArea(item, index) {
|
||||
this.activeIndex = index
|
||||
this.queryId = item.id
|
||||
this.drawer = false
|
||||
},
|
||||
handleSelectDevice(id) {
|
||||
console.log('箭头', id)
|
||||
this.deviceId = id
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getMonitoringAreaData()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -77,4 +143,51 @@ export default {
|
|||
grid-row: 8/ 12;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-drawer.rtl {
|
||||
// height: 80%;
|
||||
width: 22% !important;
|
||||
padding: 12px;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
background: rgba(26, 79, 104, 0.8);
|
||||
color: #fff;
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
border: 1px solid #0ff;
|
||||
// box-shadow: inset 0 0 10px 6px rgba(4, 211, 255, 0.5);
|
||||
box-shadow: inset 5px 0 10px 4px rgba(4, 211, 255, 0.5);
|
||||
overflow-y: auto; // 垂直滚动
|
||||
scrollbar-width: thin; // Firefox滚动条样式
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent; // Firefox滚动条颜色
|
||||
}
|
||||
|
||||
.group-item {
|
||||
width: 96%;
|
||||
margin: 0 auto 10px;
|
||||
border: 1px solid #3089b9;
|
||||
cursor: pointer;
|
||||
|
||||
div {
|
||||
padding: 6px 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid #0ff;
|
||||
}
|
||||
|
||||
.floating-box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 30px;
|
||||
height: 70px;
|
||||
background: url('@/assets/image/home/close_icon.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -172,7 +172,9 @@ export default {
|
|||
color: #fff;
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
box-shadow: inset 0 0 10px 6px rgba(4, 211, 255, 0.5);
|
||||
border: 1px solid #0ff;
|
||||
// box-shadow: inset 0 0 10px 6px rgba(4, 211, 255, 0.5);
|
||||
box-shadow: inset 5px 0 10px 4px rgba(4, 211, 255, 0.5);
|
||||
overflow-y: auto; // 垂直滚动
|
||||
scrollbar-width: thin; // Firefox滚动条样式
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent; // Firefox滚动条颜色
|
||||
|
|
|
|||
|
|
@ -29,8 +29,6 @@ export default {
|
|||
headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
|
||||
oddRowBGC: '', //奇数行
|
||||
evenRowBGC: '', //偶数行
|
||||
|
||||
columnWidth: [80],
|
||||
align: ['center'],
|
||||
hoverPause: true,
|
||||
waitTime: 3000,
|
||||
|
|
|
|||
Loading…
Reference in New Issue