Skip to content

Y
yindong-tongbai-automation
Commit 06c531f9 authored by sxl's avatar sxl 💬
Browse files
Options

更新环境配置和页面组件 

- 更新 .env.development 环境配置
- 修改 hjjc-config.js 配置文件
- 更新 hjjc.vue 组件
- 优化 dailyInspection/index.vue 巡检页面
parent 38357703
Show whitespace changes
Inline Side-by-side
Showing with 265 additions and 329 deletions
src/views/Screen/items/hjjc-config.js
View file @ 06c531f9
...@@ -230,9 +230,21 @@ export const EQUIPMENT_POSITIONS = [ ...@@ -230,9 +230,21 @@ export const EQUIPMENT_POSITIONS = [
// 摄像头位置配置 // 摄像头位置配置
export const CAMERA_POSITIONS = [ export const CAMERA_POSITIONS = [
{ status: 1, x: 50, y: 150, name: '一中码头门' }, { status: 1, x: 50, y: 150, name: '一中码头门' },
{ status: 1, x: 230, y: 165, name: '一中车场' },
{ status: 1, x: 120, y: 158, name: '一中避硐室' },
{ status: 1, x: 53, y: 277, name: '二中码头门' }, { status: 1, x: 53, y: 277, name: '二中码头门' },
{ status: 1, x: 82, y: 282, name: '二中水泵房' }, { status: 1, x: 82, y: 282, name: '二中水泵房' },
{ status: 1, x: 113, y: 287, name: '二中避险硐室' }, { status: 1, x: 113, y: 287, name: '二中避险硐室' },
{ status: 1, x: 152, y: 294, name: '二中空压机房' }, { status: 1, x: 152, y: 294, name: '二中空压机房' },
{ status: 1, x: 71, y: 411, name: '三中码头门' } { status: 1, x: 71, y: 411, name: '三中码头门' },
]; { status: 1, x: 130, y: 420, name: '三中车场' },
\ No newline at end of file { status: 1, x: 160, y: 423, name: '三中风机' },
{ status: 1, x: 130, y: 555, name: '四中车场' },
{ status: 1, x: 160, y: 560, name: '四中避硐室' },
{ status: 1, x: 180, y: 565, name: '四中码头门' },
{ status: 1, x: 80, y: 690, name: '五中车场' },
{ status: 1, x: 133, y: 694, name: '五中码头门' },
{ status: 1, x: 200, y: 710, name: '五中避硐室' },
{ status: 1, x: 230, y: 714, name: '五中水泵房1' },
]
\ No newline at end of file
src/views/Screen/items/hjjc.vue
View file @ 06c531f9
...@@ -7,12 +7,7 @@ ...@@ -7,12 +7,7 @@
<div class="sidebar-item H917"> <div class="sidebar-item H917">
<div class="sub-title por"><span>环境监测实时数据 </span></div> <div class="sub-title por"><span>环境监测实时数据 </span></div>
<div class="table-box"> <div class="table-box">
<vue-seamless-scroll <vue-seamless-scroll ref="sssjControl" :data="tableData1" :class-option="classOption" class="warp">
ref="sssjControl"
:data="tableData1"
:class-option="classOption"
class="warp"
>
<ul class="item"> <ul class="item">
<div <div
:class="upWindowData.upWindowActive === i ? 'active' : ''" :class="upWindowData.upWindowActive === i ? 'active' : ''"
...@@ -24,21 +19,14 @@ ...@@ -24,21 +19,14 @@
<li class="table-item"> <li class="table-item">
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="6" class="jz"> <el-col :span="6" class="jz">
<img <img class="img-class" :src="require(`@/assets/images/screen/hjjc/${item.typeId}.png`)" />
class="img-class"
:src="
require(`@/assets/images/screen/hjjc/${item.typeId}.png`)
"
/>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<p class="device-name">{{ item.tpName }}</p> <p class="device-name">{{ item.tpName }}</p>
<p class="device-time">{{ item.time }}</p> <p class="device-time">{{ item.time }}</p>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<p class="device-value"> <p class="device-value">{{ item.value | capitalize }}{{ item.unit }}</p>
{{ item.value | capitalize }}{{ item.unit }}
</p>
</el-col> </el-col>
</el-row> </el-row>
</li> </li>
...@@ -109,11 +97,7 @@ ...@@ -109,11 +97,7 @@
<div class="sub-con histrybox"> <div class="sub-con histrybox">
<div class="histrubox_left"> <div class="histrubox_left">
<div class="echarts_title"> <div class="echarts_title">
<img <img src="../../../assets/images/screen/jianceshebei.png" alt="" class="img_class" />
src="../../../assets/images/screen/jianceshebei.png"
alt=""
class="img_class"
/>
<span>环境监测设备</span> <span>环境监测设备</span>
</div> </div>
<div class="chart_bg"></div> <div class="chart_bg"></div>
...@@ -126,11 +110,7 @@ ...@@ -126,11 +110,7 @@
</div> </div>
<div class="histrubox_right"> <div class="histrubox_right">
<div class="echarts_title"> <div class="echarts_title">
<img <img src="../../../assets/images/screen/shipingshebei.png" alt="" class="img_class" />
src="../../../assets/images/screen/shipingshebei.png"
alt=""
class="img_class"
/>
<span>视频监测设备</span> <span>视频监测设备</span>
</div> </div>
<div class="chart_bg_right"></div> <div class="chart_bg_right"></div>
...@@ -203,26 +183,19 @@ ...@@ -203,26 +183,19 @@
</div> </div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from 'echarts'
import { import { getRealData, getRtData, getDeviceStatus, getDeviceData, getRcData, getDeviceStatusNum } from '@/api/tyler/hjjc'
getRealData, import { listVideoTable } from '@/api/tyler/videoTable'
getRtData, import ScrollTable from '@/components/Tyler/ScrollTable.vue'
getDeviceStatus, import screenfull from 'screenfull'
getDeviceData, import vueSeamlessScroll from 'vue-seamless-scroll'
getRcData, import Highcharts from 'highcharts/highcharts'
getDeviceStatusNum, import highcharts3d from 'highcharts/highcharts-3d'
} from "@/api/tyler/hjjc"; import { EQUIPMENT_POSITIONS, CAMERA_POSITIONS } from './hjjc-config'
import { listVideoTable } from "@/api/tyler/videoTable"; highcharts3d(Highcharts)
import ScrollTable from "@/components/Tyler/ScrollTable.vue";
import screenfull from "screenfull";
import vueSeamlessScroll from "vue-seamless-scroll";
import Highcharts from "highcharts/highcharts";
import highcharts3d from "highcharts/highcharts-3d";
import { EQUIPMENT_POSITIONS, CAMERA_POSITIONS } from "./hjjc-config";
highcharts3d(Highcharts);
export default { export default {
name: "cockpit", name: 'cockpit',
components: { components: {
ScrollTable, ScrollTable,
vueSeamlessScroll, vueSeamlessScroll,
...@@ -231,10 +204,10 @@ export default { ...@@ -231,10 +204,10 @@ export default {
return { return {
// 设备实施数据弹窗 // 设备实施数据弹窗
upWindowData: { upWindowData: {
upWindowActive: "", upWindowActive: '',
upWindowVisible: false, upWindowVisible: false,
title: "", title: '',
date: "2025-03-19", date: '2025-03-19',
}, },
// 左边列表数据 // 左边列表数据
tableData1: [], tableData1: [],
...@@ -245,12 +218,12 @@ export default { ...@@ -245,12 +218,12 @@ export default {
autoPlay: true, autoPlay: true,
}, },
// 设备定位分类开关 // 设备定位分类开关
checkList: ["2", "1"], checkList: ['2', '1'],
// 右侧上部分历史数据 // 右侧上部分历史数据
rightTopLssjData: { rightTopLssjData: {
list: [ list: [
{ {
name: "", name: '',
value: [ value: [
{ {
data: { data: {
...@@ -266,13 +239,13 @@ export default { ...@@ -266,13 +239,13 @@ export default {
}, },
], ],
mark: 0, mark: 0,
name: "", name: '',
}, },
// 右侧中间历史数据 // 右侧中间历史数据
rightCenterLssjData: { rightCenterLssjData: {
list: [ list: [
{ {
name: "", name: '',
value: [ value: [
{ {
data: { data: {
...@@ -288,7 +261,7 @@ export default { ...@@ -288,7 +261,7 @@ export default {
}, },
], ],
mark: 0, mark: 0,
name: "", name: '',
}, },
// 设备列表 // 设备列表
equipmentList: [], equipmentList: [],
...@@ -297,8 +270,8 @@ export default { ...@@ -297,8 +270,8 @@ export default {
// 视频弹窗 // 视频弹窗
video: { video: {
upWindowVisible: false, upWindowVisible: false,
title: "", title: '',
videoUrl: "", videoUrl: '',
}, },
player: null, player: null,
//highCharts配置 //highCharts配置
...@@ -311,49 +284,47 @@ export default { ...@@ -311,49 +284,47 @@ export default {
timers: {}, timers: {},
// ECharts实例管理 // ECharts实例管理
chartInstances: {}, chartInstances: {},
}; }
}, },
computed: { computed: {
// 优化：计算属性替代v-if+v-for // 优化：计算属性替代v-if+v-for
filteredEquipmentList() { filteredEquipmentList() {
return this.equipmentList.filter((item) => this.checkList.includes("2")); return this.equipmentList.filter(item => this.checkList.includes('2'))
}, },
filteredCameraList() { filteredCameraList() {
return this.cameraList.filter((item) => this.checkList.includes("1")); return this.cameraList.filter(item => this.checkList.includes('1'))
}, },
}, },
mounted() { mounted() {
if (screenfull && screenfull.enabled && !screenfull.isFullscreen) { if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
screenfull.request(); screenfull.request()
} }
this.initPageData(); this.initPageData()
this.initvideoPlayer(); this.initvideoPlayer()
}, },
created() { created() {
listVideoTable().then((res) => { listVideoTable().then(res => {
if (res.code === 200) { if (res.code === 200) {
this.cameraList = res.rows.map((el) => { this.cameraList = res.rows.map(el => {
const camera = CAMERA_POSITIONS.find((c) => c.name === el.cameraName); const camera = CAMERA_POSITIONS.find(c => c.name === el.cameraName)
return { return {
...el, ...el,
x: camera?.x || 0, x: camera?.x || 0,
y: camera?.y || 0, y: camera?.y || 0,
};
});
} }
}); })
}
})
}, },
beforeDestroy() { beforeDestroy() {
// 清理所有定时器 // 清理所有定时器
Object.values(this.timers).forEach((timer) => clearInterval(timer)); Object.values(this.timers).forEach(timer => clearInterval(timer))
// 销毁所有图表实例 // 销毁所有图表实例
Object.values(this.chartInstances).forEach((instance) => Object.values(this.chartInstances).forEach(instance => instance.dispose())
instance.dispose()
);
// 清理播放器 // 清理播放器
if (this.player) { if (this.player) {
this.player.disconnect(); this.player.disconnect()
this.player = null; this.player = null
} }
}, },
methods: { methods: {
...@@ -361,130 +332,120 @@ export default { ...@@ -361,130 +332,120 @@ export default {
async initPageData() { async initPageData() {
try { try {
// 并行请求关键数据 // 并行请求关键数据
const [rtDataRes, rcDataRes, deviceStatusRes] = await Promise.all([ const [rtDataRes, rcDataRes, deviceStatusRes] = await Promise.all([getRtData(), getRcData(), getDeviceStatus()])
getRtData(),
getRcData(),
getDeviceStatus(),
]);
// 处理历史数据 // 处理历史数据
this.rightTopLssjData.list = rtDataRes.data || []; this.rightTopLssjData.list = rtDataRes.data || []
this.rtPlayFun(this.rightTopLssjData); this.rtPlayFun(this.rightTopLssjData)
this.rightCenterLssjData.list = rcDataRes.data || []; this.rightCenterLssjData.list = rcDataRes.data || []
this.rcPlayFun(this.rightCenterLssjData); this.rcPlayFun(this.rightCenterLssjData)
// 处理设备状态 // 处理设备状态
this.handleDeviceStatus(deviceStatusRes.data); this.handleDeviceStatus(deviceStatusRes.data)
// 串行请求次要数据 // 串行请求次要数据
await this.initRealData(); await this.initRealData()
await this.initDeviceStatusNum(); await this.initDeviceStatusNum()
} catch (error) { } catch (error) {
console.error("页面初始化失败:", error); console.error('页面初始化失败:', error)
this.$message.error("数据加载失败，请刷新页面重试"); this.$message.error('数据加载失败，请刷新页面重试')
} }
}, },
async initRealData() { async initRealData() {
const res = await getRealData(); const res = await getRealData()
this.tableData1 = res.data.map((el) => ({ ...el, value: el.value })); this.tableData1 = res.data.map(el => ({ ...el, value: el.value }))
}, },
async initDeviceStatusNum() { async initDeviceStatusNum() {
const res = await getDeviceStatusNum(); const res = await getDeviceStatusNum()
if (res.code === 200) { if (res.code === 200) {
this.deviceStatusNum = { this.deviceStatusNum = {
total: res.data[0].online + res.data[0].offline, total: res.data[0].online + res.data[0].offline,
cameraTotal: res.data[1].online + res.data[1].offline, cameraTotal: res.data[1].online + res.data[1].offline,
}; }
this.getHighChartsData(res.data); this.getHighChartsData(res.data)
} }
}, },
handleDeviceStatus(apiData) { handleDeviceStatus(apiData) {
if (apiData && apiData.length) { if (apiData && apiData.length) {
this.equipmentList = apiData.map((apiItem) => { this.equipmentList = apiData.map(apiItem => {
const localItem = EQUIPMENT_POSITIONS.find( const localItem = EQUIPMENT_POSITIONS.find(xy => xy.name === apiItem.name)
(xy) => xy.name === apiItem.name
);
return { return {
...apiItem, ...apiItem,
x: localItem?.x || 0, x: localItem?.x || 0,
y: localItem?.y || 0, y: localItem?.y || 0,
monitorPositionList: apiItem.monitorPositionList || [], monitorPositionList: apiItem.monitorPositionList || [],
}; }
}); })
} }
}, },
initvideoPlayer() { initvideoPlayer() {
this.player = new WebRtcStreamer("player", "http://127.0.0.1:8000"); this.player = new WebRtcStreamer('player', 'http://127.0.0.1:8000')
}, },
// 查看视频 // 查看视频
lookVideo(item, i) { lookVideo(item, i) {
fetch("http://localhost:8000/api/version") fetch('http://localhost:8000/api/version')
.then((response) => { .then(response => {
this.video.upWindowVisible = true; this.video.upWindowVisible = true
this.video.title = item.cameraName; this.video.title = item.cameraName
this.video.videoUrl = item.cameraUrl; this.video.videoUrl = item.cameraUrl
this.player.connect(this.video.videoUrl); this.player.connect(this.video.videoUrl)
}) })
.catch((error) => .catch(error =>
this.$confirm( this.$confirm('需要启动/安装WebRtcStreamer才能播放视频，是否现在安装？', '提示', {
"需要启动/安装WebRtcStreamer才能播放视频，是否现在安装？", confirmButtonText: '安装',
"提示", cancelButtonText: '取消',
{ type: 'warning',
confirmButtonText: "安装", }).then(() => {
cancelButtonText: "取消", window.open('/webrtcstreamer/webrtc-streamer.exe') // 确保webrtc-streamer.exe的路径正确 在pulic/webrtcstreamer目录下
type: "warning",
}
).then(() => {
window.open("/webrtcstreamer/webrtc-streamer.exe"); // 确保webrtc-streamer.exe的路径正确 在pulic/webrtcstreamer目录下
}) })
); )
}, },
closeVideoUpWindow() { closeVideoUpWindow() {
this.video.upWindowVisible = false; this.video.upWindowVisible = false
this.player.disconnect(); this.player.disconnect()
}, },
getHighChartsData(value = []) { getHighChartsData(value = []) {
this.highChartsOption = { this.highChartsOption = {
chart: { chart: {
type: "pie", type: 'pie',
options3d: { options3d: {
enabled: true, enabled: true,
alpha: 60, alpha: 60,
beta: 0, beta: 0,
}, },
backgroundColor: "rgba(64, 158, 255, 0)", backgroundColor: 'rgba(64, 158, 255, 0)',
}, },
legend: { legend: {
enabled: true, enabled: true,
align: "center", align: 'center',
verticalAlign: "middle", verticalAlign: 'middle',
layout: "vertical", layout: 'vertical',
y: 60, y: 60,
itemStyle: { itemStyle: {
color: "#fff", color: '#fff',
fontSize: "12px", fontSize: '12px',
}, },
labelFormatter: function () { labelFormatter: function () {
return `${this.name}: ${this.y}`; return `${this.name}: ${this.y}`
}, },
}, },
title: { text: "" }, title: { text: '' },
subtitle: { text: "" }, subtitle: { text: '' },
plotOptions: { plotOptions: {
pie: { pie: {
size: "55%", size: '55%',
allowPointSelect: false, allowPointSelect: false,
cursor: "pointer", cursor: 'pointer',
innerSize: "65%", innerSize: '65%',
showInLegend: false, showInLegend: false,
center: ["50%", "34%"], center: ['50%', '34%'],
depth: 15, depth: 15,
dataLabels: { enabled: false }, dataLabels: { enabled: false },
}, },
...@@ -492,243 +453,237 @@ export default { ...@@ -492,243 +453,237 @@ export default {
credits: { enabled: false }, credits: { enabled: false },
series: [ series: [
{ {
type: "pie", type: 'pie',
name: "设备统计", name: '设备统计',
showInLegend: true, showInLegend: true,
data: [ data: [
{ {
name: "正常设备", name: '正常设备',
y: value[0].online, y: value[0].online,
color: "RGBA(37, 160, 238, 1)", color: 'RGBA(37, 160, 238, 1)',
}, },
{ {
name: "异常设备", name: '异常设备',
y: value[0].offline, y: value[0].offline,
color: "RGBA(252, 183, 62, 1)", color: 'RGBA(252, 183, 62, 1)',
}, },
], ],
startAngle: 0, startAngle: 0,
label: { show: false }, label: { show: false },
}, },
], ],
}; }
Highcharts.chart("EchartsPieLeft", this.highChartsOption); Highcharts.chart('EchartsPieLeft', this.highChartsOption)
this.highChartsOption.series[0].data = [ this.highChartsOption.series[0].data = [
{ name: "在线", y: value[1].online, color: "#02CD9B" }, { name: '在线', y: value[1].online, color: '#02CD9B' },
{ name: "离线", y: value[1].offline, color: "RGBA(252, 183, 62, 1)" }, { name: '离线', y: value[1].offline, color: 'RGBA(252, 183, 62, 1)' },
]; ]
Highcharts.chart("EchartsPieRight", this.highChartsOption); Highcharts.chart('EchartsPieRight', this.highChartsOption)
}, },
initEchartBox(id, xData = [], yData = [], mkData = 28, step = 4, grid) { initEchartBox(id, xData = [], yData = [], mkData = 28, step = 4, grid) {
// 销毁旧实例 // 销毁旧实例
if (this.chartInstances[id]) { if (this.chartInstances[id]) {
this.chartInstances[id].dispose(); this.chartInstances[id].dispose()
} }
let myChart = echarts.init(document.getElementById(id)); let myChart = echarts.init(document.getElementById(id))
let maxData = yData.length ? Math.ceil(Math.max(...yData)) : 0; let maxData = yData.length ? Math.ceil(Math.max(...yData)) : 0
let minData = yData.length ? Math.floor(Math.min(...yData)) : 0; let minData = yData.length ? Math.floor(Math.min(...yData)) : 0
let option = { let option = {
grid: grid, grid: grid,
xAxis: { xAxis: {
show: true, show: true,
type: "category", type: 'category',
boundaryGap: false, boundaryGap: false,
data: xData, data: xData,
axisLabel: { axisLabel: {
show: true, show: true,
interval: step, interval: step,
textStyle: { color: "#FFFFFF", fontSize: 16 }, textStyle: { color: '#FFFFFF', fontSize: 16 },
}, },
axisTick: { alignWithLabel: true }, axisTick: { alignWithLabel: true },
splitLine: { splitLine: {
lineStyle: { type: "dashed", opacity: 0.5 }, lineStyle: { type: 'dashed', opacity: 0.5 },
show: true, show: true,
}, },
}, },
yAxis: { yAxis: {
type: "value", type: 'value',
max: mkData > maxData ? mkData : maxData, max: mkData > maxData ? mkData : maxData,
min: minData, min: minData,
boundaryGap: false, boundaryGap: false,
axisTick: { alignWithLabel: true }, axisTick: { alignWithLabel: true },
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { color: "#FFFFFF", fontSize: 16 }, textStyle: { color: '#FFFFFF', fontSize: 16 },
}, },
splitLine: { splitLine: {
lineStyle: { type: "dashed", opacity: 0.5 }, lineStyle: { type: 'dashed', opacity: 0.5 },
show: true, show: true,
}, },
}, },
series: [ series: [
{ {
type: "line", type: 'line',
stack: "Total", stack: 'Total',
smooth: 0.2, smooth: 0.2,
lineStyle: { width: 2, color: "#35B1F3" }, lineStyle: { width: 2, color: '#35B1F3' },
markLine: { markLine: {
data: [ data: [
{ {
name: "警戒线", name: '警戒线',
yAxis: mkData, yAxis: mkData,
label: { show: false }, label: { show: false },
}, },
], ],
symbol: ["none", "none"], symbol: ['none', 'none'],
lineStyle: { color: "red", width: 2 }, lineStyle: { color: 'red', width: 2 },
}, },
showSymbol: false, showSymbol: false,
areaStyle: { areaStyle: {
opacity: 0.8, opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgb(55, 184, 251,0.5)" }, { offset: 0, color: 'rgb(55, 184, 251,0.5)' },
{ offset: 1, color: "rgb(55, 184, 251,0.1)" }, { offset: 1, color: 'rgb(55, 184, 251,0.1)' },
]), ]),
}, },
emphasis: { focus: "series" }, emphasis: { focus: 'series' },
data: yData, data: yData,
}, },
], ],
}; }
myChart.setOption(option); myChart.setOption(option)
setTimeout(() => myChart.resize(), 600); setTimeout(() => myChart.resize(), 600)
// 保存实例引用 // 保存实例引用
this.chartInstances[id] = myChart; this.chartInstances[id] = myChart
this.$on("hook:deactivated", () => { this.$on('hook:deactivated', () => {
if (myChart && myChart !== "" && myChart !== undefined) { if (myChart && myChart !== '' && myChart !== undefined) {
myChart.dispose(); myChart.dispose()
} }
myChart = null; myChart = null
}); })
}, },
// 右上图表轮播 // 右上图表轮播
rtPlayFun(data) { rtPlayFun(data) {
if (!data || !data.list || !data.list.length) { if (!data || !data.list || !data.list.length) {
console.error("数据格式错误或数据为空"); console.error('数据格式错误或数据为空')
return; return
} }
this.clearTimer("rtPlayTimer"); this.clearTimer('rtPlayTimer')
let i = 0, let i = 0,
l = 0; l = 0
const grid = { const grid = {
left: "4%", left: '4%',
right: "5%", right: '5%',
bottom: "4%", bottom: '4%',
top: "7%", top: '7%',
containLabel: true, containLabel: true,
}; }
// 初始化首次渲染 // 初始化首次渲染
this.updateRtChart(0, 0); this.updateRtChart(0, 0)
this.timers.rtPlayTimer = setInterval(() => { this.timers.rtPlayTimer = setInterval(() => {
if (i < data.list.length) { if (i < data.list.length) {
if ( if (Array.isArray(data.list[i].value) && l < data.list[i].value.length) {
Array.isArray(data.list[i].value) && this.updateRtChart(i, l)
l < data.list[i].value.length l++
) {
this.updateRtChart(i, l);
l++;
} else { } else {
l = 0; l = 0
i++; i++
} }
} else { } else {
i = 0; i = 0
l = 0; l = 0
} }
}, 15000); }, 15000)
}, },
updateRtChart(i, l) { updateRtChart(i, l) {
const data = this.rightTopLssjData.list; const data = this.rightTopLssjData.list
if (data && data.length) { if (data && data.length) {
this.rightTopLssjData.mark = i; this.rightTopLssjData.mark = i
this.rightTopLssjData.name = data[i].value[l].name; this.rightTopLssjData.name = data[i].value[l].name
this.initEchartBox( this.initEchartBox(
"sssj", 'sssj',
data[i].value[l].value.xData.data, data[i].value[l].value.xData.data,
data[i].value[l].value.yData.data, data[i].value[l].value.yData.data,
data[i].value[l].value.yData.alarm, data[i].value[l].value.yData.alarm,
4, 4,
{ {
left: "4%", left: '4%',
right: "5%", right: '5%',
bottom: "4%", bottom: '4%',
top: "7%", top: '7%',
containLabel: true, containLabel: true,
} }
); )
} }
}, },
// 右中图表轮播 // 右中图表轮播
rcPlayFun(data) { rcPlayFun(data) {
if (!data || !data.list || !data.list.length) { if (!data || !data.list || !data.list.length) {
console.error("数据格式错误或数据为空"); console.error('数据格式错误或数据为空')
return; return
} }
this.clearTimer("rcPlayTimer"); this.clearTimer('rcPlayTimer')
let i = 0, let i = 0,
l = 0; l = 0
const grid = { const grid = {
left: "4%", left: '4%',
right: "5%", right: '5%',
bottom: "4%", bottom: '4%',
top: "7%", top: '7%',
containLabel: true, containLabel: true,
}; }
this.rightCenterLssjData.mark = i; this.rightCenterLssjData.mark = i
this.rightCenterLssjData.name = data.list[i].value[l].name; this.rightCenterLssjData.name = data.list[i].value[l].name
this.initEchartBox( this.initEchartBox(
"rclssj", 'rclssj',
data.list[i].value[l].value.xData.data, data.list[i].value[l].value.xData.data,
data.list[i].value[l].value.yData.data, data.list[i].value[l].value.yData.data,
data.list[i].value[l].value.yData.alarm, data.list[i].value[l].value.yData.alarm,
4, 4,
grid grid
); )
this.timers.rcPlayTimer = setInterval(() => { this.timers.rcPlayTimer = setInterval(() => {
if (i < data.list.length) { if (i < data.list.length) {
if ( if (Array.isArray(data.list[i].value) && l < data.list[i].value.length) {
Array.isArray(data.list[i].value) && this.rightCenterLssjData.mark = i
l < data.list[i].value.length this.rightCenterLssjData.name = data.list[i].value[l].name
) {
this.rightCenterLssjData.mark = i;
this.rightCenterLssjData.name = data.list[i].value[l].name;
this.initEchartBox( this.initEchartBox(
"rclssj", 'rclssj',
data.list[i].value[l].value.xData.data, data.list[i].value[l].value.xData.data,
data.list[i].value[l].value.yData.data, data.list[i].value[l].value.yData.data,
data.list[i].value[l].value.yData.alarm, data.list[i].value[l].value.yData.alarm,
4, 4,
grid grid
); )
l++; l++
} else { } else {
l = 0; l = 0
i++; i++
} }
} else { } else {
i = 0; i = 0
l = 0; l = 0
} }
}, 15000); }, 15000)
}, },
// 清除定时器 // 清除定时器
clearTimer(timerName) { clearTimer(timerName) {
if (this.timers[timerName]) { if (this.timers[timerName]) {
clearInterval(this.timers[timerName]); clearInterval(this.timers[timerName])
this.timers[timerName] = null; this.timers[timerName] = null
} }
}, },
...@@ -736,72 +691,69 @@ export default { ...@@ -736,72 +691,69 @@ export default {
lookRealData(item, i) { lookRealData(item, i) {
let grid = { let grid = {
left: 0, left: 0,
right: "1.7%", right: '1.7%',
bottom: "4%", bottom: '4%',
top: "7%", top: '7%',
containLabel: true, containLabel: true,
}; }
let xData = []; let xData = []
let yData = []; let yData = []
getDeviceData({ id: item.id }).then((res) => { getDeviceData({ id: item.id }).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.upWindowData.upWindowActive = i; this.upWindowData.upWindowActive = i
this.upWindowData.upWindowVisible = true; this.upWindowData.upWindowVisible = true
this.upWindowData.title = item.tpName; this.upWindowData.title = item.tpName
this.upWindowData.date = res.data.day; this.upWindowData.date = res.data.day
this.classOption.autoPlay = false; this.classOption.autoPlay = false
let threshold = 0; let threshold = 0
res.data.envScreenEditDto.forEach((i) => { res.data.envScreenEditDto.forEach(i => {
xData.push(i.time); xData.push(i.time)
yData.push(i.value); yData.push(i.value)
}); })
threshold = res.data.threshold || 0; threshold = res.data.threshold || 0
this.initEchartBox("chartBox", xData, yData, threshold, 0, grid); this.initEchartBox('chartBox', xData, yData, threshold, 0, grid)
} else { } else {
this.$message.error("数据请求失败！"); this.$message.error('数据请求失败！')
} }
}); })
}, },
closeUpWindow() { closeUpWindow() {
this.upWindowData.upWindowActive = ""; this.upWindowData.upWindowActive = ''
this.upWindowData.upWindowVisible = false; this.upWindowData.upWindowVisible = false
this.classOption.autoPlay = true; this.classOption.autoPlay = true
this.$refs.sssjControl._startMove(); this.$refs.sssjControl._startMove()
}, },
goToSys() { goToSys() {
var link = this.$router.resolve({ path: "/" }); var link = this.$router.resolve({ path: '/' })
window.open(link.href); window.open(link.href)
return; return
}, },
handleScroll(e) { handleScroll(e) {
this.$refs.sssjControl.yPos = this.$refs.sssjControl.yPos - e.deltaY; this.$refs.sssjControl.yPos = this.$refs.sssjControl.yPos - e.deltaY
if (this.$refs.sssjControl.yPos > 0) { if (this.$refs.sssjControl.yPos > 0) {
this.$refs.sssjControl.yPos = 0; this.$refs.sssjControl.yPos = 0
return; return
} }
if ( if (Math.abs(this.$refs.sssjControl.yPos) > this.$refs.sssjControl.realBoxHeight / 2) {
Math.abs(this.$refs.sssjControl.yPos) > this.$refs.sssjControl.yPos = 0
this.$refs.sssjControl.realBoxHeight / 2
) {
this.$refs.sssjControl.yPos = 0;
} }
}, },
}, },
filters: { filters: {
capitalize(value) { capitalize(value) {
if (value === null || value === undefined) return "--"; if (value === null || value === undefined) return '--'
if (value === "开" || value === "关") { if (value === '开' || value === '关') {
return value; return value
} }
const parsedValue = Number(value); const parsedValue = Number(value)
return isNaN(parsedValue) ? "--" : parsedValue.toFixed(1); return isNaN(parsedValue) ? '--' : parsedValue.toFixed(1)
}, },
}, },
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 变量定义 // 变量定义
...@@ -814,20 +766,16 @@ $spacing: 16px; ...@@ -814,20 +766,16 @@ $spacing: 16px;
@mixin sidebar-item { @mixin sidebar-item {
width: 100%; width: 100%;
margin-bottom: $spacing; margin-bottom: $spacing;
background: linear-gradient( background: linear-gradient(180deg, $bg-color 0%, rgba(8, 132, 233, 0.2) 100%);
180deg,
$bg-color 0%,
rgba(8, 132, 233, 0.2) 100%
);
position: relative; position: relative;
border-radius: $border-radius; border-radius: $border-radius;
&::before { &::before {
content: ""; content: '';
width: 460px; width: 460px;
height: 4px; height: 4px;
position: absolute; position: absolute;
background: url("~@/assets/images/screen/title1.png") no-repeat center; background: url('~@/assets/images/screen/title1.png') no-repeat center;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
...@@ -855,7 +803,7 @@ $spacing: 16px; ...@@ -855,7 +803,7 @@ $spacing: 16px;
justify-content: space-between; justify-content: space-between;
padding: 0 $spacing; padding: 0 $spacing;
padding-top: 173px; padding-top: 173px;
background: url("~@/assets/images/screen/bg12.png"); background: url('~@/assets/images/screen/bg12.png');
color: #fff; color: #fff;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
...@@ -903,7 +851,7 @@ $spacing: 16px; ...@@ -903,7 +851,7 @@ $spacing: 16px;
position: absolute; position: absolute;
width: 140px; width: 140px;
height: 150px; height: 150px;
background-image: url("~@/assets/images/screen/chart.png"); background-image: url('~@/assets/images/screen/chart.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: cover; background-position: cover;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -963,9 +911,9 @@ $spacing: 16px; ...@@ -963,9 +911,9 @@ $spacing: 16px;
.sub-title { .sub-title {
width: 100%; width: 100%;
height: 46px; height: 46px;
background: url("~@/assets/images/screen/title1.png") no-repeat center; background: url('~@/assets/images/screen/title1.png') no-repeat center;
font-weight: bold; font-weight: bold;
font-family: "fangsong"; font-family: 'fangsong';
span { span {
position: absolute; position: absolute;
...@@ -1020,12 +968,7 @@ $spacing: 16px; ...@@ -1020,12 +968,7 @@ $spacing: 16px;
font-weight: 500; font-weight: 500;
font-size: 28px; font-size: 28px;
color: #ffffff; color: #ffffff;
background: linear-gradient( background: linear-gradient(0deg, #3cbffa 0%, #ffffff 56.005859375%, #e2f6ff 100%);
0deg,
#3cbffa 0%,
#ffffff 56.005859375%,
#e2f6ff 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
width: 100%; width: 100%;
...@@ -1037,7 +980,7 @@ $spacing: 16px; ...@@ -1037,7 +980,7 @@ $spacing: 16px;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-family: "fangzhengyaoti"; font-family: 'fangzhengyaoti';
ul { ul {
list-style: none; list-style: none;
...@@ -1060,7 +1003,7 @@ $spacing: 16px; ...@@ -1060,7 +1003,7 @@ $spacing: 16px;
/* 中间主区域 */ /* 中间主区域 */
.main-area { .main-area {
width: calc(100% - 920px); width: calc(100% - 920px);
background: url("~@/assets/images/screen/bg3.png") no-repeat center; background: url('~@/assets/images/screen/bg3.png') no-repeat center;
background-size: contain; background-size: contain;
background-position-y: 0px; background-position-y: 0px;
text-align: center; text-align: center;
...@@ -1074,7 +1017,7 @@ $spacing: 16px; ...@@ -1074,7 +1017,7 @@ $spacing: 16px;
line-height: 36px; line-height: 36px;
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
font-family: "fangsong"; font-family: 'fangsong';
} }
.dot { .dot {
...@@ -1083,7 +1026,7 @@ $spacing: 16px; ...@@ -1083,7 +1026,7 @@ $spacing: 16px;
position: absolute; position: absolute;
top: 100px; top: 100px;
left: 500px; left: 500px;
background: url("~@/assets/images/screen/hjjc/icon8.png") no-repeat center; background: url('~@/assets/images/screen/hjjc/icon8.png') no-repeat center;
.dot1 { .dot1 {
position: relative; position: relative;
...@@ -1113,8 +1056,7 @@ $spacing: 16px; ...@@ -1113,8 +1056,7 @@ $spacing: 16px;
display: none; display: none;
width: 16px; width: 16px;
height: 16px; height: 16px;
background: url("~@/assets/images/screen/hjjc/icon10.png") no-repeat background: url('~@/assets/images/screen/hjjc/icon10.png') no-repeat center;
center;
margin-bottom: -3px; margin-bottom: -3px;
} }
...@@ -1129,8 +1071,7 @@ $spacing: 16px; ...@@ -1129,8 +1071,7 @@ $spacing: 16px;
} }
&:hover { &:hover {
background: url("~@/assets/images/screen/hjjc/icon8_hover.png") no-repeat background: url('~@/assets/images/screen/hjjc/icon8_hover.png') no-repeat center;
center;
.tip-box { .tip-box {
display: block; display: block;
...@@ -1138,11 +1079,10 @@ $spacing: 16px; ...@@ -1138,11 +1079,10 @@ $spacing: 16px;
} }
&.active { &.active {
background: url("~@/assets/images/screen/hjjc/icon9.png") no-repeat center; background: url('~@/assets/images/screen/hjjc/icon9.png') no-repeat center;
&:hover { &:hover {
background: url("~@/assets/images/screen/hjjc/icon9_hover.png") background: url('~@/assets/images/screen/hjjc/icon9_hover.png') no-repeat center;
no-repeat center;
} }
} }
} }
...@@ -1153,18 +1093,15 @@ $spacing: 16px; ...@@ -1153,18 +1093,15 @@ $spacing: 16px;
position: absolute; position: absolute;
top: 100px; top: 100px;
left: 500px; left: 500px;
background: url("~@/assets/images/screen/hjjc/icon_normal.png") no-repeat background: url('~@/assets/images/screen/hjjc/icon_normal.png') no-repeat center;
center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: url("~@/assets/images/screen/hjjc/icon_hover.png") no-repeat background: url('~@/assets/images/screen/hjjc/icon_hover.png') no-repeat center;
center;
} }
&.offline { &.offline {
background: url("~@/assets/images/screen/hjjc/icon_click.png") no-repeat background: url('~@/assets/images/screen/hjjc/icon_click.png') no-repeat center;
center;
} }
} }
...@@ -1185,7 +1122,7 @@ $spacing: 16px; ...@@ -1185,7 +1122,7 @@ $spacing: 16px;
color: #fdfeff; color: #fdfeff;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
font-family: "fangzhengyaoti"; font-family: 'fangzhengyaoti';
} }
} }
} }
...@@ -1202,7 +1139,7 @@ $spacing: 16px; ...@@ -1202,7 +1139,7 @@ $spacing: 16px;
.sub-con { .sub-con {
height: 2em; height: 2em;
width: 100%; width: 100%;
font-family: "fangzhengyaoti"; font-family: 'fangzhengyaoti';
span { span {
float: left; float: left;
...@@ -1221,8 +1158,7 @@ $spacing: 16px; ...@@ -1221,8 +1158,7 @@ $spacing: 16px;
.subscript { .subscript {
height: 19px; height: 19px;
width: 100%; width: 100%;
background: url("~@/assets/images/screen/hjjc/icon7.png") no-repeat background: url('~@/assets/images/screen/hjjc/icon7.png') no-repeat center;
center;
} }
} }
} }
...@@ -1266,11 +1202,7 @@ $spacing: 16px; ...@@ -1266,11 +1202,7 @@ $spacing: 16px;
line-height: 36px; line-height: 36px;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
background: linear-gradient( background: linear-gradient(0deg, rgba(61, 98, 147, 0.35) 0%, rgba(61, 98, 147, 0.03) 100%);
0deg,
rgba(61, 98, 147, 0.35) 0%,
rgba(61, 98, 147, 0.03) 100%
);
} }
.warp { .warp {
...@@ -1289,11 +1221,7 @@ $spacing: 16px; ...@@ -1289,11 +1221,7 @@ $spacing: 16px;
display: grid; display: grid;
grid-template-columns: 1.5fr 2.2fr 1.3fr; grid-template-columns: 1.5fr 2.2fr 1.3fr;
text-align: center; text-align: center;
background: linear-gradient( background: linear-gradient(0deg, rgba(61, 98, 147, 0.35) 0%, rgba(61, 98, 147, 0.03) 100%);
0deg,
rgba(61, 98, 147, 0.35) 0%,
rgba(61, 98, 147, 0.03) 100%
);
margin-top: 11px; margin-top: 11px;
} }
...@@ -1315,7 +1243,7 @@ $spacing: 16px; ...@@ -1315,7 +1243,7 @@ $spacing: 16px;
.sub-con-r-left { .sub-con-r-left {
width: 127px; width: 127px;
height: 161px; height: 161px;
background: url("~@/assets/images/screen/icon3.png") no-repeat center; background: url('~@/assets/images/screen/icon3.png') no-repeat center;
background-size: 100%; background-size: 100%;
} }
...@@ -1358,7 +1286,7 @@ $spacing: 16px; ...@@ -1358,7 +1286,7 @@ $spacing: 16px;
width: 1360px; width: 1360px;
height: 480px; height: 480px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: url("~@/assets/images/screen/hjjc/popup.png") no-repeat; background: url('~@/assets/images/screen/hjjc/popup.png') no-repeat;
background-size: 1377px 501px; background-size: 1377px 501px;
box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31); box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
padding: 28px 37px; padding: 28px 37px;
...@@ -1378,8 +1306,7 @@ $spacing: 16px; ...@@ -1378,8 +1306,7 @@ $spacing: 16px;
width: 1271px; width: 1271px;
height: 37px; height: 37px;
margin: 0px; margin: 0px;
background: url("~@/assets/images/screen/hjjc/title-popup.png") no-repeat background: url('~@/assets/images/screen/hjjc/title-popup.png') no-repeat center;
center;
background-size: 100%; background-size: 100%;
font-weight: 500; font-weight: 500;
font-size: 22px; font-size: 22px;
......
src/views/inspection/patrol/dailyInspection/index.vue
View file @ 06c531f9
...@@ -457,9 +457,6 @@ export default { ...@@ -457,9 +457,6 @@ export default {
if (this.form.inspectionType == 0) { if (this.form.inspectionType == 0) {
// 地点类型，根据部门获取地点 // 地点类型，根据部门获取地点
this.getLocationByDept(val.deptId) this.getLocationByDept(val.deptId)
} else if (this.form.inspectionType == 1) {
// 设备类型，根据部门获取设备
this.getDeviceByDept(val.deptId)
} }
}, },
/** 查询用户列表 */ /** 查询用户列表 */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment