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