Joe
1 year ago
6 changed files with 289 additions and 14 deletions
@ -0,0 +1,102 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
export const lineChartOption = { |
|||
color: ["#2AD9FD"], |
|||
xAxis: { |
|||
name: "日", |
|||
type: "category", |
|||
// boundaryGap: ["15%", "15%"],
|
|||
nameTextStyle: { |
|||
color: "#2AD9FD", |
|||
align: "right", |
|||
fontSize: 15, |
|||
padding: [0, -15, 0, 0], |
|||
}, |
|||
boundaryGap: false, |
|||
data: ["1", "5", "10", "15", "20", "25", "30"], |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#668598", |
|||
}, |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: 51, |
|||
top: 15, |
|||
bottom: 24, |
|||
right: 36, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
backgroundColor: "rgba(0,0,0,0.36)", |
|||
borderWidth: 0, |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
formatter: "{b}：{c}", |
|||
// formatter: function([axisData]) {
|
|||
// console.log(axisData)
|
|||
// let str = axisData.name + ' ' + axisData.data + '辆</br>';
|
|||
// // params.forEach(item => {
|
|||
// // if (item.seriesName === '供温' || item.seriesName === '回温') {
|
|||
// // str += item.marker + item.seriesName + ' : ' + item.data.value + ' ℃' + '</br>';
|
|||
// // } else if (item.seriesName === '压力值(Mpa)') {
|
|||
// // // 柱状图渐变时设置marker
|
|||
// // item.marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#6C50F3;"></span>';
|
|||
// // str += item.marker + item.seriesName + ' : ' + item.data.value + ' m';
|
|||
// // }
|
|||
// // });
|
|||
// return str;
|
|||
// }
|
|||
}, |
|||
yAxis: { |
|||
max: 100, |
|||
type: "value", |
|||
// nameGap: 24,
|
|||
splitLine: { |
|||
lineStyle: { |
|||
type: [6, 9], |
|||
color: "rgba(255,255,255, .3)", |
|||
// dashOffset: [10, 10],
|
|||
// cap: 21,
|
|||
// width: 2
|
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
formatter: "{value} %", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [0, 90, 65, 90, 45, 36, 27], |
|||
type: "line", |
|||
showSymbol: false, |
|||
smooth: true, |
|||
lineStyle: { |
|||
color: "#2AD9FD", |
|||
}, |
|||
areaStyle: { |
|||
opacity: 0.8, |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgb(90, 227, 255, .9)", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(42,217,253,0)", |
|||
}, |
|||
]), |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
@ -0,0 +1,23 @@ |
|||
<template> |
|||
<div class='chart LineChart' ref="LineChartRef" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
import { lineChartOption } from "./chart" |
|||
|
|||
export default { |
|||
name: 'LineChart', |
|||
mounted() { |
|||
const chartIns = echarts.init(this.$refs.LineChartRef); |
|||
chartIns.setOption(lineChartOption); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.LineChart { |
|||
flex: 1; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<Dialog v-model="obverseVisible" title="智能设备箱"> |
|||
<Video class="video-stream" :pileNum="dialogData.stakeMark" /> |
|||
|
|||
<div class="SmartDevice"> |
|||
<ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs"> |
|||
<ElTabPane label="详细设计" name="first"> |
|||
<Descriptions :list="list" :data="data" style="gap: 18px" /> |
|||
</ElTabPane> |
|||
<ElTabPane label="设备参数" name="second">设备参数</ElTabPane> |
|||
<ElTabPane label="在线统计率" name="third"> |
|||
<LineChart v-if="activeName === 'third'" /> |
|||
</ElTabPane> |
|||
</ElTabs> |
|||
</div> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index.vue"; |
|||
import Button from "@screen/components/Buttons/Button.vue" |
|||
import Descriptions from '@screen/components/Descriptions.vue'; |
|||
import Video from "@screen/components/Video" |
|||
import LineChart from './components/LineChart/index.vue'; |
|||
|
|||
import { getRoadInfoByStakeMark, getOrganizationName, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
|||
import { dialogDelayVisible } from "./../mixin" |
|||
|
|||
// 广播发布 |
|||
export default { |
|||
name: 'SmartDevice', |
|||
mixins: [dialogDelayVisible], |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
Descriptions, |
|||
LineChart, |
|||
Video |
|||
}, |
|||
data() { |
|||
return { |
|||
activeName: 'first', |
|||
releaseVisible: false, |
|||
data: { |
|||
deviceName: "LH24", |
|||
roadName: "G35济泽高速", |
|||
stakeMark: "k094+079", |
|||
direction: "1", |
|||
organizationName: "山东高速济南发展公司", |
|||
brand: "XXX厂家", |
|||
deviceState: "0", |
|||
}, |
|||
list: [ |
|||
{ |
|||
label: '设备名称', |
|||
key: "deviceName", |
|||
}, |
|||
{ |
|||
label: '设备桩号', |
|||
key: "stakeMark", |
|||
}, |
|||
{ |
|||
label: '道路名称', |
|||
key: "roadName", |
|||
}, |
|||
{ |
|||
label: '设备方向', |
|||
key: "direction", |
|||
enum: "CameraDirectionEnum" |
|||
}, |
|||
{ |
|||
label: '设备状态', |
|||
key: "deviceState", |
|||
enum: "DeviceTypeEnum" |
|||
}, |
|||
{ |
|||
label: '设备厂商', |
|||
key: "brand", |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
async created() { |
|||
this.data = { ...this.dialogData, roadName: null } |
|||
|
|||
getProduct(this.dialogData.productId) |
|||
.then(data => { |
|||
this.dialogData.brand = data.brand; |
|||
}) |
|||
|
|||
getOrganizationName(this.dialogData.iotDeviceId) |
|||
.then(data => { |
|||
this.dialogData.organizationName = data?.organizationName; |
|||
}) |
|||
|
|||
const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark); |
|||
console.log("%c [ roadInfo ]-103-「index.vue」", "font-size:15px; background:#36347c; color:#7a78c0;", roadInfo.roadName); |
|||
|
|||
if (roadInfo) this.data.roadName = roadInfo.roadName; |
|||
}, |
|||
methods: { |
|||
handleClickTabs() { } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.SmartDevice { |
|||
width: 600px; |
|||
height: 240px; |
|||
color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.camera-video { |
|||
flex: 1.5; |
|||
} |
|||
|
|||
.tabs { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
::v-deep { |
|||
.el-tabs__content { |
|||
flex: 1; |
|||
|
|||
.el-tab-pane { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
margin-top: 12px; |
|||
display: flex; |
|||
gap: 9px; |
|||
align-items: center; |
|||
justify-content: end; |
|||
|
|||
>div { |
|||
font-size: 16px; |
|||
padding: 6px 12px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue