接口调试
This commit is contained in:
BianLzhaoMin
parent
9721e5d5de
commit
e44d28da12
|
|
@ -0,0 +1,62 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 有限空间气体监测 ---- 设备列表接口 左1
|
||||
export function getHomeSpaceGasListAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/excavationDetection/getMassConcreteList',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 有限空间气体监测 ---- 一氧化碳浓度接口 左2
|
||||
export function getCarbonMonoxideByIdAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/confinedSpaceGas/getCurveGraph',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 有限空间气体监测 ---- 甲烷浓度接口 左3
|
||||
export function getMethaneDataByIdAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/confinedSpaceGas/getCurveGraph',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 有限空间气体监测 ---- 实时数据变化接口 中1
|
||||
export function getRealDataByIdAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/confinedSpaceGas/realData',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 有限空间气体监测 ---- 硫化氢浓度接口 中2
|
||||
export function getHydrogenSulfideDataByIdAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/confinedSpaceGas/getCurveGraph',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 有限空间气体监测 ---- 氧气浓度接口 中3
|
||||
export function getOxygenDataByIdAPI(data) {
|
||||
return request({
|
||||
url: '/smart-site/confinedSpaceGas/getCurveGraph',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 有限空间气体监测 ---- 报警信息接口 右1
|
||||
export function getWarningInfoAPI(data = {}) {
|
||||
return request({
|
||||
url: '/smart-site/excavationDetection/concreteAlarmList',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
|
@ -166,7 +166,7 @@ export default {
|
|||
|
||||
async getCollectDeviceAllData() {
|
||||
const { data: res } = await getCollectDeviceAllAPI({
|
||||
typeId: '174435992023806894661',
|
||||
typeCode: '9000200',
|
||||
})
|
||||
console.log(
|
||||
`%c🔍 大体积混凝土 ----> 区域设备统计(右二) 数据出参 %c`,
|
||||
|
|
|
|||
|
|
@ -32,8 +32,7 @@ export default {
|
|||
// this.$nextTick(() => {
|
||||
// this.initChart()
|
||||
// })
|
||||
|
||||
this.getTemperatureListData()
|
||||
// this.getTemperatureListData()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
|
|
@ -206,9 +205,9 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
async getTemperatureListData() {
|
||||
async getTemperatureListData(id) {
|
||||
const { data: res } = await getTemperatureListAPI({
|
||||
typeId: '174435992023806894663',
|
||||
id,
|
||||
})
|
||||
console.log(
|
||||
`%c🔍 深基坑监测 ----> 监测温度变化值趋势(右三) 数据出参 %c`,
|
||||
|
|
@ -240,6 +239,14 @@ export default {
|
|||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
deviceId: {
|
||||
handler(newValue) {
|
||||
this.getTemperatureListData(newValue)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
class="device-item"
|
||||
v-for="(item, index) in deviceList"
|
||||
:key="index"
|
||||
@click="onHandleSelectDevice(index, item.id)"
|
||||
>
|
||||
<img
|
||||
:src="
|
||||
|
|
@ -18,12 +19,12 @@
|
|||
alt=""
|
||||
/>
|
||||
<span
|
||||
:style="item.isOnline == 1 ? 'color:#71C4FF' : ''"
|
||||
:style="activeIndex === index ? 'color:#0ff' : ''"
|
||||
>
|
||||
{{ item.devName }}
|
||||
</span>
|
||||
<span
|
||||
:style="item.isOnline == 1 ? 'color:#71C4FF' : ''"
|
||||
:style="activeIndex === index ? 'color:#0ff' : ''"
|
||||
>
|
||||
{{ item.devCode }}
|
||||
</span>
|
||||
|
|
@ -53,12 +54,13 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
deviceList: [],
|
||||
activeIndex: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getMassConcreteListData() {
|
||||
const { data: res } = await getMassConcreteListAPI({
|
||||
typeId: '174435992023806894663',
|
||||
typeCode: '9000300',
|
||||
})
|
||||
|
||||
console.log(
|
||||
|
|
@ -68,6 +70,13 @@ export default {
|
|||
res,
|
||||
)
|
||||
this.deviceList = res
|
||||
if (res.length > 0) {
|
||||
this.$emit('handleSelectDevice', res[0].id)
|
||||
}
|
||||
},
|
||||
onHandleSelectDevice(index, id) {
|
||||
this.activeIndex = index
|
||||
this.$emit('handleSelectDevice', id)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
methods: {
|
||||
async getDevStatisticsData() {
|
||||
const { data: res } = await getDevStatisticsAPI({
|
||||
typeId: '174435992023806894663',
|
||||
typeCode: '9000300',
|
||||
})
|
||||
|
||||
console.log(
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export default {
|
|||
methods: {
|
||||
async getConcreteAlarmListData() {
|
||||
const { data: res } = await getConcreteAlarmListAPI({
|
||||
typeId: '174435992023806894663',
|
||||
typeCode: '9000300',
|
||||
})
|
||||
console.log(
|
||||
`%c🔍 深基坑监测 ----> 报警信息(右二) 数据出参 %c`,
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
<RightOneModel />
|
||||
</div>
|
||||
<div class="env-3">
|
||||
<LeftTwoModel />
|
||||
<LeftTwoModel @handleSelectDevice="handleSelectDevice" />
|
||||
</div>
|
||||
<div class="env-4">
|
||||
<LeftThreeModel />
|
||||
<LeftThreeModel :deviceId="deviceId" />
|
||||
</div>
|
||||
<div class="env-5">
|
||||
<RightTwoModel />
|
||||
|
|
@ -33,6 +33,16 @@ export default {
|
|||
RightOneModel,
|
||||
RightTwoModel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deviceId: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelectDevice(id) {
|
||||
this.deviceId = id
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,38 +22,78 @@
|
|||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
import { getRealDataByIdAPI } from '@/api/home-space-gas'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
props: {
|
||||
queryId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
gasList: [
|
||||
{
|
||||
name: '一氧化碳',
|
||||
num: 99,
|
||||
num: 0,
|
||||
unit: '/ppm',
|
||||
imgPath: require('@/assets/image/home-space-gas/gas1.png'),
|
||||
},
|
||||
{
|
||||
name: '氧气',
|
||||
num: 99,
|
||||
num: 0,
|
||||
unit: '/%VOL',
|
||||
imgPath: require('@/assets/image/home-space-gas/gas2.png'),
|
||||
},
|
||||
{
|
||||
name: '硫化氢',
|
||||
num: 99,
|
||||
num: 0,
|
||||
unit: '/ppm',
|
||||
imgPath: require('@/assets/image/home-space-gas/gas3.png'),
|
||||
},
|
||||
{
|
||||
name: '甲烷',
|
||||
num: 99,
|
||||
num: 0,
|
||||
unit: '/%',
|
||||
imgPath: require('@/assets/image/home-space-gas/gas4.png'),
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getRealDataByIdData(id) {
|
||||
const { data: res } = await getRealDataByIdAPI({ devId: id })
|
||||
console.log(
|
||||
`%c🔍 有限空间气体监测 ----> 实时变化数据(中一) 数据出参 %c`,
|
||||
'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||
'',
|
||||
res,
|
||||
)
|
||||
|
||||
if (Object.keys(res).length > 0) {
|
||||
for (const key in res) {
|
||||
this.gasList.forEach((item) => {
|
||||
if (item.name === key) {
|
||||
item.num = res[key] || 0
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.gasList.forEach((item) => {
|
||||
item.num = 0
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
queryId: {
|
||||
handler(newValue) {
|
||||
this.getRealDataByIdData(newValue)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<!-- 氧气浓度 -->
|
||||
<div style="height: 100%">
|
||||
<ChartsBox :boxTitle="``">
|
||||
<ChartsBox :boxTitle="`氧气浓度`">
|
||||
<div ref="chartContainer" class="container"> </div>
|
||||
</ChartsBox>
|
||||
</div>
|
||||
|
|
@ -12,11 +12,20 @@ import ChartsBox from '@/components/ChartsBox/index'
|
|||
import * as echarts from 'echarts'
|
||||
// require('echarts/theme/macarons')
|
||||
import 'echarts/theme/macarons'
|
||||
import { getOxygenDataByIdAPI } from '@/api/home-space-gas'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
props: {
|
||||
queryId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
xData: [],
|
||||
yData: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -46,19 +55,18 @@ export default {
|
|||
this.chart.setOption({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
'18：16',
|
||||
'20：16',
|
||||
'23：16',
|
||||
'06：16',
|
||||
'09：16',
|
||||
'15：16',
|
||||
'19：16',
|
||||
'23：16',
|
||||
],
|
||||
data: this.xData,
|
||||
boundaryGap: true,
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: '#fff' },
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
show: true, // 确保显示
|
||||
interval: 0, // 强制显示所有标签
|
||||
fontSize: 12, // 调整字体大小
|
||||
width: 60, // 设置标签宽度
|
||||
overflow: 'truncate', // 超出部分显示为...
|
||||
ellipsis: '...', // 自定义省略符号（可选）
|
||||
},
|
||||
axisLine: { lineStyle: { color: '#4494db' } },
|
||||
splitLine: { show: false },
|
||||
},
|
||||
|
|
@ -93,7 +101,7 @@ export default {
|
|||
name: '年龄分布',
|
||||
type: 'bar',
|
||||
barWidth: '20%', // 控制柱宽
|
||||
data: [10, 20, 16, 19, 21, 20, 16, 19],
|
||||
data: this.yData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
|
|
@ -156,6 +164,39 @@ export default {
|
|||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
async getOxygenDataByIdData(devId) {
|
||||
const { data: res } = await getOxygenDataByIdAPI({
|
||||
attrName: '氧气',
|
||||
devId,
|
||||
})
|
||||
|
||||
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) => e.attrVal)
|
||||
} else {
|
||||
this.xData = ['暂无数据']
|
||||
this.yData = [0]
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
queryId: {
|
||||
handler(newValue) {
|
||||
this.getOxygenDataByIdData(newValue)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,11 +12,20 @@ import ChartsBox from '@/components/ChartsBox/index'
|
|||
import * as echarts from 'echarts'
|
||||
// require('echarts/theme/macarons')
|
||||
import 'echarts/theme/macarons'
|
||||
import { getHydrogenSulfideDataByIdAPI } from '@/api/home-space-gas'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
props: {
|
||||
queryId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
xData: [],
|
||||
yData: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -46,25 +55,24 @@ 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: false },
|
||||
axisLabel: { color: '#4494db' },
|
||||
// axisLabel: { color: '#4494db' },
|
||||
axisLine: { lineStyle: { color: '#4494db' } },
|
||||
splitLine: {
|
||||
// 添加x轴虚线网格线
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
show: true, // 确保显示
|
||||
interval: 0, // 强制显示所有标签
|
||||
fontSize: 12, // 调整字体大小
|
||||
width: 60, // 设置标签宽度
|
||||
overflow: 'truncate', // 超出部分显示为...
|
||||
ellipsis: '...', // 自定义省略符号（可选）
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: { show: false },
|
||||
|
|
@ -117,10 +125,10 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
name: '甲烷浓度',
|
||||
name: '硫化氢浓度',
|
||||
type: 'line',
|
||||
// smooth: true,
|
||||
data: [30, 40, 35, 30, 40, 35, 30, 40, 35],
|
||||
data: this.yData,
|
||||
itemStyle: { color: '#30C9C9' },
|
||||
lineStyle: { color: '#30C9C9', width: 2 },
|
||||
areaStyle: {
|
||||
|
|
@ -171,6 +179,39 @@ export default {
|
|||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
async getHydrogenSulfideDataByIdData(devId) {
|
||||
const { data: res } = await getHydrogenSulfideDataByIdAPI({
|
||||
attrName: '硫化氢',
|
||||
devId,
|
||||
})
|
||||
|
||||
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) => e.attrVal)
|
||||
} else {
|
||||
this.xData = ['暂无数据']
|
||||
this.yData = [0]
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
queryId: {
|
||||
handler(newValue) {
|
||||
this.getHydrogenSulfideDataByIdData(newValue)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,23 +5,28 @@
|
|||
<div class="container">
|
||||
<div class="scroll-container">
|
||||
<div
|
||||
:key="index"
|
||||
class="device-item"
|
||||
v-for="(item, index) in deviceList"
|
||||
:key="index"
|
||||
@click="onHandleSelectDevice(index, item.id)"
|
||||
>
|
||||
<img
|
||||
:src="
|
||||
item.onLine
|
||||
item.isOnline == 1
|
||||
? `${require('@/assets/image/home-space-gas/line_big.png')}`
|
||||
: `${require('@/assets/image/home-space-gas/offline_big.png')}`
|
||||
"
|
||||
alt=""
|
||||
/>
|
||||
<span :style="item.onLine ? 'color:#71C4FF' : ''">
|
||||
{{ item.name }}
|
||||
<span
|
||||
:style="activeIndex === index ? 'color:#0ff' : ''"
|
||||
>
|
||||
{{ item.devName }}
|
||||
</span>
|
||||
<span :style="item.onLine ? 'color:#71C4FF' : ''">
|
||||
{{ item.code }}
|
||||
<span
|
||||
:style="activeIndex === index ? 'color:#0ff' : ''"
|
||||
>
|
||||
{{ item.devCode }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,32 +44,42 @@
|
|||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
import { getHomeSpaceGasListAPI } from '@/api/home-space-gas'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
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 },
|
||||
{ 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 },
|
||||
{ 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 },
|
||||
{ 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 getHomeSpaceGasListData() {
|
||||
const { data: res } = await getHomeSpaceGasListAPI({
|
||||
typeCode: '9000500',
|
||||
})
|
||||
|
||||
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)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getHomeSpaceGasListData()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -73,7 +88,6 @@ export default {
|
|||
height: 100%;
|
||||
padding: 12px 0;
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
|
||||
flex-direction: column; // 改为纵向排列
|
||||
|
||||
|
|
@ -125,7 +139,7 @@ export default {
|
|||
// transform: translateY(10px);
|
||||
|
||||
.device-item {
|
||||
width: calc((100% - 20px) / 6);
|
||||
width: calc((100% - 20px) / 4);
|
||||
margin-right: 4px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
|
|
@ -139,7 +153,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
& .device-item:nth-child(6n) {
|
||||
& .device-item:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,21 @@ import ChartsBox from '@/components/ChartsBox/index'
|
|||
import * as echarts from 'echarts'
|
||||
// require('echarts/theme/macarons')
|
||||
import 'echarts/theme/macarons'
|
||||
import { getMethaneDataByIdAPI } from '@/api/home-space-gas'
|
||||
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
props: {
|
||||
queryId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
xData: [],
|
||||
yData: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -46,25 +56,24 @@ 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: false },
|
||||
axisLabel: { color: '#4494db' },
|
||||
// axisLabel: { color: '#4494db' },
|
||||
axisLine: { lineStyle: { color: '#4494db' } },
|
||||
splitLine: {
|
||||
// 添加x轴虚线网格线
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
show: true, // 确保显示
|
||||
interval: 0, // 强制显示所有标签
|
||||
fontSize: 12, // 调整字体大小
|
||||
width: 60, // 设置标签宽度
|
||||
overflow: 'truncate', // 超出部分显示为...
|
||||
ellipsis: '...', // 自定义省略符号（可选）
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: { show: false },
|
||||
|
|
@ -120,7 +129,7 @@ export default {
|
|||
name: '甲烷浓度',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [30, 40, 35, 45, 50, 32, 20, 13, 49],
|
||||
data: this.yData,
|
||||
itemStyle: { color: '#306FFF' },
|
||||
lineStyle: { color: '#306FFF', width: 2 },
|
||||
areaStyle: {
|
||||
|
|
@ -171,6 +180,39 @@ export default {
|
|||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
async getMethaneDataByIdData(devId) {
|
||||
const { data: res } = await getMethaneDataByIdAPI({
|
||||
attrName: '甲烷',
|
||||
devId,
|
||||
})
|
||||
|
||||
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) => e.attrVal)
|
||||
} else {
|
||||
this.xData = ['暂无数据']
|
||||
this.yData = [0]
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
queryId: {
|
||||
handler(newValue) {
|
||||
this.getMethaneDataByIdData(newValue)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<!-- 一氧化碳浓度 -->
|
||||
<div style="height: 100%">
|
||||
<ChartsBox :boxTitle="``">
|
||||
<ChartsBox :boxTitle="`一氧化碳浓度`">
|
||||
<div ref="chartContainer" class="container"> </div>
|
||||
</ChartsBox>
|
||||
</div>
|
||||
|
|
@ -12,11 +12,20 @@ import ChartsBox from '@/components/ChartsBox/index'
|
|||
import * as echarts from 'echarts'
|
||||
// require('echarts/theme/macarons')
|
||||
import 'echarts/theme/macarons'
|
||||
import { getCarbonMonoxideByIdAPI } from '@/api/home-space-gas'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
props: {
|
||||
queryId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
xData: [],
|
||||
yData: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -46,12 +55,20 @@ export default {
|
|||
this.chart.setOption({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['18：16', '20：16', '23：16', '06：16', '09：16'],
|
||||
data: this.xData,
|
||||
boundaryGap: true,
|
||||
axisTick: { show: false },
|
||||
axisLabel: { color: '#fff' },
|
||||
// axisLabel: { color: '#fff' },
|
||||
axisLine: { lineStyle: { color: '#4494db' } },
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
show: true, // 确保显示
|
||||
interval: 0, // 强制显示所有标签
|
||||
fontSize: 12, // 调整字体大小
|
||||
width: 80, // 设置标签宽度
|
||||
overflow: 'break', // 文字超出时的处理方式
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: { show: false },
|
||||
|
|
@ -81,13 +98,13 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
name: '年龄分布',
|
||||
name: '一氧化碳浓度',
|
||||
type: 'pictorialBar', // 改为象形柱图
|
||||
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z', // 使用三角形符号
|
||||
symbolOffset: [0, 0], // 符号偏移（垂直向上偏移50%）
|
||||
symbolSize: ['80%', '100%'], // 符号尺寸（宽度60%，高度100%）
|
||||
barWidth: '100%',
|
||||
data: [10, 20, 16, 19, 21],
|
||||
data: this.yData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
|
|
@ -135,12 +152,47 @@ export default {
|
|||
})
|
||||
}, 500)
|
||||
},
|
||||
|
||||
async getCarbonMonoxideByIdData(devId) {
|
||||
const { data: res } = await getCarbonMonoxideByIdAPI({
|
||||
attrName: '一氧化碳',
|
||||
devId,
|
||||
})
|
||||
|
||||
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) => e.attrVal)
|
||||
} else {
|
||||
this.xData = ['暂无数据']
|
||||
this.yData = [0]
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
handleResize() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
queryId: {
|
||||
handler(newValue) {
|
||||
this.getCarbonMonoxideByIdData(newValue)
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,179 +12,68 @@
|
|||
|
||||
<script>
|
||||
import ChartsBox from '@/components/ChartsBox/index'
|
||||
|
||||
import { getWarningInfoAPI } from '@/api/home-space-gas'
|
||||
export default {
|
||||
components: { ChartsBox },
|
||||
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>",
|
||||
],
|
||||
],
|
||||
rowNum: 12, //表格行数
|
||||
headerHeight: 35,
|
||||
data: [],
|
||||
rowNum: 15, //表格行数
|
||||
// headerHeight: 60,
|
||||
headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
|
||||
oddRowBGC: '', //奇数行
|
||||
evenRowBGC: '', //偶数行
|
||||
|
||||
columnWidth: [80],
|
||||
align: ['center'],
|
||||
hoverPause: true,
|
||||
waitTime: 5000,
|
||||
waitTime: 3000,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getWarningInfoData() {
|
||||
const { data: res } = await getWarningInfoAPI({
|
||||
typeCode: '9000500',
|
||||
})
|
||||
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, // 更新数据
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getWarningInfoData()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
|
||||
.dv-scr-board {
|
||||
width: 100%;
|
||||
|
|
@ -213,4 +102,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,25 +2,25 @@
|
|||
<!-- 空间气体-->
|
||||
<div class="home-real-name-system">
|
||||
<div class="env-1">
|
||||
<LeftOneModel />
|
||||
<LeftOneModel @handleSelectDevice="handleSelectDevice" />
|
||||
</div>
|
||||
<div class="env-2">
|
||||
<CenterOneModel />
|
||||
<CenterOneModel :queryId="queryId" />
|
||||
</div>
|
||||
<div class="env-3">
|
||||
<RightOneModel />
|
||||
<RightOneModel :queryId="queryId" />
|
||||
</div>
|
||||
<div class="env-4">
|
||||
<LeftTwoModel />
|
||||
<LeftTwoModel :queryId="queryId" />
|
||||
</div>
|
||||
<div class="env-5">
|
||||
<CenterTwoModel />
|
||||
<CenterTwoModel :queryId="queryId" />
|
||||
</div>
|
||||
<div class="env-6">
|
||||
<LeftThreeModel />
|
||||
<LeftThreeModel :queryId="queryId" />
|
||||
</div>
|
||||
<div class="env-7">
|
||||
<CenterThreeModel />
|
||||
<CenterThreeModel :queryId="queryId" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -45,6 +45,16 @@ export default {
|
|||
CenterThreeModel,
|
||||
RightOneModel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryId: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelectDevice(id) {
|
||||
this.queryId = id
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@ module.exports = {
|
|||
open: true,
|
||||
proxy: {
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
// target: 'http://192.168.0.60:38080', // 赵福海
|
||||
target: 'http://192.168.0.38:38080', // 郝志权
|
||||
target: 'http://192.168.0.60:38080', // 赵福海
|
||||
// target: 'http://192.168.0.38:38080', // 郝志权
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: '',
|
||||
|
|
|
|||
Loading…
Reference in New Issue