Skip to content

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

fix:大屏监测监控空数据处理，提升机巡检记录接口对接

parent 8cd4d727
Hide whitespace changes
Inline Side-by-side
Showing with 308 additions and 437 deletions
src/api/tyler/jst.js
View file @ a8971bb3
......@@ -26,3 +26,11 @@ export function getElevatorTimes(query) {
params: query,
});
}
// 获取提升机巡检数据
export function getRecentFive(query) {
return request({
url: "business/screen/ele/recentFive",
method: "get",
params: query,
});
}
src/views/Screen/items/hjjc.vue
View file @ a8971bb3
......@@ -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>
......@@ -65,13 +53,9 @@
:class="item.isWarning == 1 ? 'active' : ''"
:style="{ left: item.x + 'px', top: item.y + 'px' }"
>
<div class="dot1" @click="">
<div class="dot1">
<div class="tip-box">
<p
v-for="(iitem, l) in item.monitorPositionList"
:key="l + 'ccc'"
:class="iitem.isWarning == 1 ? 'active' : ''"
>
<p v-for="(iitem, l) in item.monitorPositionList" :key="l + 'ccc'" :class="iitem.isWarning == 1 ? 'active' : ''">
{{ iitem.equipmentName }}
<span></span>
</p>
......@@ -109,11 +93,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 +106,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>
......@@ -151,10 +127,7 @@
</div>
<div class="sub-con">
<div class="sub-con">
<span
v-for="(item, i) in rightTopLssjData.list"
:key="i + 'aab'"
:class="i == rightTopLssjData.mark ? 'active' : ''"
<span v-for="(item, i) in rightTopLssjData.list" :key="i + 'aab'" :class="i == rightTopLssjData.mark ? 'active' : ''"
>{{ item.name }}
<p class="subscript"></p>
</span>
......@@ -170,10 +143,7 @@
</div>
<div class="sub-con">
<div class="sub-con">
<span
v-for="(item, i) in rightCenterLssjData.list"
:key="i + 'abb'"
:class="i == rightCenterLssjData.mark ? 'active' : ''"
<span v-for="(item, i) in rightCenterLssjData.list" :key="i + 'abb'" :class="i == rightCenterLssjData.mark ? 'active' : ''"
>{{ item.name }}
<p class="subscript"></p>
</span>
......@@ -203,26 +173,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";
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 +194,10 @@ export default {
return {
// 设备实施数据弹窗
upWindowData: {
upWindowActive: "",
upWindowActive: '',
upWindowVisible: false,
title: "",
date: "2025-03-19",
title: '',
date: '2025-03-19',
},
// 左边列表数据
tableData1: [],
......@@ -245,12 +208,12 @@ export default {
autoPlay: true,
},
// 设备定位分类开关
checkList: ["2", "1"],
checkList: ['2', '1'],
// 右侧上部分历史数据
rightTopLssjData: {
list: [
{
name: "",
name: '',
value: [
{
data: {
......@@ -266,13 +229,13 @@ export default {
},
],
mark: 0,
name: "",
name: '',
},
// 右侧中间历史数据
rightCenterLssjData: {
list: [
{
name: "",
name: '',
value: [
{
data: {
......@@ -288,7 +251,7 @@ export default {
},
],
mark: 0,
name: "",
name: '',
},
// 设备列表
equipmentList: [],
......@@ -297,8 +260,8 @@ export default {
// 视频弹窗
video: {
upWindowVisible: false,
title: "",
videoUrl: "",
title: '',
videoUrl: '',
},
player: null,
//highCharts配置
......@@ -316,10 +279,10 @@ export default {
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() {
......@@ -330,10 +293,10 @@ export default {
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,
......@@ -345,11 +308,9 @@ export default {
},
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();
......@@ -361,11 +322,7 @@ 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 || [];
......@@ -373,7 +330,6 @@ export default {
this.rightCenterLssjData.list = rcDataRes.data || [];
this.rcPlayFun(this.rightCenterLssjData);
// 处理设备状态
this.handleDeviceStatus(deviceStatusRes.data);
......@@ -381,14 +337,14 @@ export default {
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 }));
this.tableData1 = res.data.map(el => ({ ...el, value: el.value }));
},
async initDeviceStatusNum() {
......@@ -404,10 +360,8 @@ export default {
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,
......@@ -419,29 +373,25 @@ export default {
},
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) => {
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/WebRtcStreamer.exe");
.catch(error =>
this.$confirm('需要启动/安装WebRtcStreamer才能播放视频，是否现在安装？', '提示', {
confirmButtonText: '安装',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
window.open('/webrtcstreamer/webrtc-streamer.exe'); // 确保webrtc-streamer.exe的路径正确 在pulic/webrtcstreamer目录下
})
);
},
......@@ -454,38 +404,38 @@ export default {
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}`;
},
},
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 },
},
......@@ -493,19 +443,19 @@ 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,
......@@ -514,12 +464,12 @@ export default {
],
};
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)" },
{ name: '在线', y: value[1].online, color: '#02CD9B' },
{ 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) {
......@@ -536,61 +486,61 @@ export default {
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,
},
],
......@@ -602,8 +552,8 @@ export default {
// 保存实例引用
this.chartInstances[id] = myChart;
this.$on("hook:deactivated", () => {
if (myChart && myChart !== "" && myChart !== undefined) {
this.$on('hook:deactivated', () => {
if (myChart && myChart !== '' && myChart !== undefined) {
myChart.dispose();
}
myChart = null;
......@@ -612,26 +562,25 @@ export default {
// 右上图表轮播
rtPlayFun(data) {
this.clearTimer("rtPlayTimer");
if (!data || !data.list || !data.list.length) {
console.error('数据格式错误或数据为空');
return;
}
this.clearTimer('rtPlayTimer');
let i = 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.timers.rtPlayTimer = setInterval(() => {
if (i < data.list.length) {
if (
Array.isArray(data.list[i].value) &&
l < data.list[i].value.length
) {
if (Array.isArray(data.list[i].value) && l < data.list[i].value.length) {
this.updateRtChart(i, l);
l++;
} else {
......@@ -647,35 +596,40 @@ export default {
updateRtChart(i, l) {
const data = this.rightTopLssjData.list;
this.rightTopLssjData.mark = i;
this.rightTopLssjData.name = data[i].value[l].name;
this.initEchartBox(
"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%", containLabel: true }
);
if (data && data.length) {
this.rightTopLssjData.mark = i;
this.rightTopLssjData.name = data[i].value[l].name;
this.initEchartBox('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%',
containLabel: true,
});
}
},
// 右中图表轮播
rcPlayFun(data) {
this.clearTimer("rcPlayTimer");
if (!data || !data.list || !data.list.length) {
console.error('数据格式错误或数据为空');
return;
}
this.clearTimer('rcPlayTimer');
let i = 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.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,
......@@ -685,14 +639,11 @@ export default {
this.timers.rcPlayTimer = setInterval(() => {
if (i < data.list.length) {
if (
Array.isArray(data.list[i].value) &&
l < data.list[i].value.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;
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,
......@@ -723,15 +674,15 @@ 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) => {
getDeviceData({ id: item.id }).then(res => {
if (res.code === 200) {
this.upWindowData.upWindowActive = i;
this.upWindowData.upWindowVisible = true;
......@@ -739,27 +690,27 @@ export default {
this.upWindowData.date = res.data.day;
this.classOption.autoPlay = false;
let threshold = 0;
res.data.envScreenEditDto.forEach((i) => {
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.initEchartBox('chartBox', xData, yData, threshold, 0, grid);
} else {
this.$message.error("数据请求失败！");
this.$message.error('数据请求失败！');
}
});
},
closeUpWindow() {
this.upWindowData.upWindowActive = "";
this.upWindowData.upWindowActive = '';
this.upWindowData.upWindowVisible = false;
this.classOption.autoPlay = true;
this.$refs.sssjControl._startMove();
},
goToSys() {
var link = this.$router.resolve({ path: "/" });
var link = this.$router.resolve({ path: '/' });
window.open(link.href);
return;
},
......@@ -770,22 +721,19 @@ export default {
this.$refs.sssjControl.yPos = 0;
return;
}
if (
Math.abs(this.$refs.sssjControl.yPos) >
this.$refs.sssjControl.realBoxHeight / 2
) {
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 === "关") {
if (value === null || value === undefined) return '--';
if (value === '开' || value === '关') {
return value;
}
const parsedValue = Number(value);
return isNaN(parsedValue) ? "--" : parsedValue.toFixed(1);
return isNaN(parsedValue) ? '--' : parsedValue.toFixed(1);
},
},
};
......@@ -801,20 +749,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;
......@@ -842,7 +786,7 @@ $spacing: 16px;
justify-content: space-between;
padding: 0 $spacing;
padding-top: 16vh;
background: url("~@/assets/images/screen/bg12.png");
background: url('~@/assets/images/screen/bg12.png');
color: #fff;
min-height: 100vh;
box-sizing: border-box;
......@@ -890,7 +834,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%;
......@@ -950,9 +894,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;
......@@ -1007,12 +951,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%;
......@@ -1024,7 +963,7 @@ $spacing: 16px;
width: 100%;
height: 100%;
overflow: hidden;
font-family: "fangzhengyaoti";
font-family: 'fangzhengyaoti';
ul {
list-style: none;
......@@ -1047,7 +986,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: 10px;
text-align: center;
......@@ -1061,7 +1000,7 @@ $spacing: 16px;
line-height: 36px;
font-weight: bold;
position: absolute;
font-family: "fangsong";
font-family: 'fangsong';
}
.dot {
......@@ -1070,7 +1009,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;
......@@ -1100,8 +1039,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;
}
......@@ -1116,8 +1054,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;
......@@ -1125,11 +1062,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;
}
}
}
......@@ -1140,18 +1076,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;
}
}
......@@ -1172,7 +1105,7 @@ $spacing: 16px;
color: #fdfeff;
font-size: 16px;
font-weight: 500;
font-family: "fangzhengyaoti";
font-family: 'fangzhengyaoti';
}
}
}
......@@ -1189,7 +1122,7 @@ $spacing: 16px;
.sub-con {
height: 2em;
width: 100%;
font-family: "fangzhengyaoti";
font-family: 'fangzhengyaoti';
span {
float: left;
......@@ -1208,8 +1141,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;
}
}
}
......@@ -1253,11 +1185,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 {
......@@ -1276,11 +1204,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;
}
......@@ -1302,7 +1226,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%;
}
......@@ -1345,7 +1269,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;
......@@ -1365,8 +1289,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/Screen/items/tsj.vue
View file @ a8971bb3
......@@ -4,21 +4,13 @@
<div class="left">
<div class="item-class" v-for="item in leftList" :key="item.name">
<i class="icon" :class="item.icon"></i>
<span class="item-name" :style="{ color: item.color }">{{
item.name
}}</span>
<span class="item-name" :style="{ color: item.color }">{{ item.name }}</span>
<span class="item-value">{{ item.value }}</span>
</div>
<div class="left-botton">
<span class="item-name">主控<br />位置</span>
<span class="item-value">
<count-to
:start-val="0"
:end-val="Number(zgposition)"
:duration="860"
:decimals="2"
separator=","
/>
<count-to :start-val="0" :end-val="Number(zgposition)" :duration="860" :decimals="2" separator="," />
</span>
</div>
</div>
......@@ -28,26 +20,15 @@
<div class="center-box">
<div class="dianti-target" :style="targetStyle">{{ displayTrend }}</div>
<div class="dianti-number">
<p
v-for="(item, index) in elevatorTimes"
:key="'diantiNmuber' + index"
>
<p v-for="(item, index) in elevatorTimes" :key="'diantiNmuber' + index">
<span>{{ item.name }}</span
>：<span>{{ item.value }}</span>
</p>
</div>
<div class="dianti-peizhong" :style="counterweightStyle"></div>
<div
class="dianti-box"
:class="{ active: isMoving }"
:style="elevatorStyle"
></div>
<div class="dianti-box" :class="{ active: isMoving }" :style="elevatorStyle"></div>
<div class="dianti-louceng" style="top: 290px; left: 526px">
<div
class="louceng-item"
v-for="(floor, index) in floors"
:key="index"
>
<div class="louceng-item" v-for="(floor, index) in floors" :key="index">
{{ floor }}
</div>
</div>
......@@ -56,21 +37,12 @@
<!-- 右侧状态区 -->
<div class="right">
<div
class="right-item-class"
v-for="(item, index) in rightList"
:key="'right-' + index"
>
<div class="right-item-class" v-for="(item, index) in rightList" :key="'right-' + index">
<div class="left-item-box">{{ item.name }}</div>
<div class="right-item-box">
<div
class="right-item-box-item"
v-for="(value, subIndex) in [
item.value1,
item.value2,
item.value3,
item.value4,
]"
v-for="(value, subIndex) in [item.value1, item.value2, item.value3, item.value4]"
:key="'value-' + index + '-' + subIndex"
:class="{ active: value.status == 1 }"
>
......@@ -79,22 +51,16 @@
</div>
</div>
<div class="right-item-botton">
<div class="title">井下人工安全巡检</div>
<div class="title">提升机巡检记录</div>
<div class="right-item-body">
<div class="table-header">
<span v-for="(header, index) in tableHeaders" :key="index">{{
header
}}</span>
<span v-for="(header, index) in tableHeaders" :key="index">{{ header }}</span>
</div>
<div
class="table-content"
v-for="(item, index) in tableList"
:key="'table-' + index"
>
<span>{{ item.name }}</span>
<span>{{ item.point }}</span>
<span>{{ item.isNormal }}</span>
<span>{{ item.date }}</span>
<div class="table-content" v-for="(item, index) in tableList" :key="'table-' + index">
<span>{{ item.user_name }}</span>
<span>{{ item.device_name }}</span>
<span>{{ item.device_state == 0 ? '正常' : '异常' }}</span>
<span>{{ parseTime(item.polling_data, '{y}-{m}-{d}') }}</span>
</div>
</div>
</div>
......@@ -103,12 +69,12 @@
</template>
<script>
import CountTo from "vue-count-to";
import { getElevatorData, getElevatorTimes } from "@/api/tyler/jst";
import CountTo from 'vue-count-to';
import { getElevatorData, getElevatorTimes, getRecentFive } from '@/api/tyler/jst';
// 修改位置配置常量（添加中间点容差）
const POSITIONS = [
{
name: "去井口",
name: '去井口',
value: 0,
depth: 0,
glposy: 76,
......@@ -116,7 +82,7 @@ const POSITIONS = [
range: [-205, 0],
},
{
name: "去一中",
name: '去一中',
value: 1,
depth: 410,
glposy: 253,
......@@ -124,7 +90,7 @@ const POSITIONS = [
range: [-430, -206],
},
{
name: "去二中",
name: '去二中',
value: 2,
depth: 450,
glposy: 338,
......@@ -132,7 +98,7 @@ const POSITIONS = [
range: [-470, -431],
},
{
name: "去三中",
name: '去三中',
value: 3,
depth: 490,
glposy: 422,
......@@ -140,7 +106,7 @@ const POSITIONS = [
range: [-510, -471],
},
{
name: "去四中",
name: '去四中',
value: 4,
depth: 530,
glposy: 506,
......@@ -148,7 +114,7 @@ const POSITIONS = [
range: [-550, -511],
},
{
name: "去五中",
name: '去五中',
value: 5,
depth: 570,
glposy: 596,
......@@ -163,18 +129,10 @@ export default {
// 数据列表
leftList: [],
rightList: [],
tableList: [
{
name: "zhangsan",
point: "123",
isNormal: "正常",
date: "2023-01-01",
},
],
tableList: [],
// 电梯状态
zgposition: 0,
zgtrend: "待命",
zgtrend: '待命',
isMoving: false,
// 动画控制
......@@ -186,33 +144,31 @@ export default {
targetPos: null,
// 静态配置
floors: ["一中", "二中", "三中", "四中", "五中"],
tableHeaders: ["检查人", "检查点位", "是否正常", "日期"],
floors: ['一中', '二中', '三中', '四中', '五中'],
tableHeaders: ['检查人', '检查设备', '是否正常', '日期'],
elevatorTimes: [],
};
},
computed: {
// 电梯状态显示
displayTrend() {
return this.zgtrend.includes("待命")
? `${this.zgtrend}`
: `前往：${this.zgtrend}`;
return this.zgtrend.includes('待命') ? `${this.zgtrend}` : `前往：${this.zgtrend}`;
},
// 电梯目标样式
targetStyle() {
return {
top: "300px",
left: "170px",
backgroundColor: this.zgtrend.includes("待命") ? "#999" : "#fecb00",
top: '300px',
left: '170px',
backgroundColor: this.zgtrend.includes('待命') ? '#999' : '#fecb00',
};
},
// 电梯位置样式
elevatorStyle() {
return this.calculatePosition("glposy");
return this.calculatePosition('glposy');
},
// 配重位置样式
counterweightStyle() {
return this.calculatePosition("pzposy");
return this.calculatePosition('pzposy');
},
},
watch: {},
......@@ -229,6 +185,8 @@ export default {
mounted() {
this.initPositions();
this.startAutoUpdate();
// 获取巡检记录
this.getInspectionRecords();
},
methods: {
// 初始化位置数据
......@@ -239,65 +197,45 @@ export default {
// 计算当前位置
calculatePosition(type) {
if (!POSITIONS.length) return { top: "450px", left: "428px" };
if (!POSITIONS.length) return { top: '450px', left: '428px' };
const currentDepth = Number(this.zgposition) || 0;
// 添加安全判断
const position =
(this.zgtrend === "待命"
? this.findNearestPosition(currentDepth)
: this.calculateMovingPosition(type, currentDepth)) || POSITIONS[0];
const position = (this.zgtrend === '待命' ? this.findNearestPosition(currentDepth) : this.calculateMovingPosition(type, currentDepth)) || POSITIONS[0];
return {
top: `${position[type] || POSITIONS[0][type]}px`, // 添加默认值
left: type === "glposy" ? "428px" : "365px",
left: type === 'glposy' ? '428px' : '365px',
};
},
// 加强查找方法的安全性
findNearestPosition(depth) {
console.log(depth, "当前深度");
console.log(depth, '当前深度');
// 处理负数区间匹配
const rangeMatch = POSITIONS.find(
(p) => depth >= p.range[0] && depth <= p.range[1]
);
console.log("负数区间匹配结果:", rangeMatch?.name);
const rangeMatch = POSITIONS.find(p => depth >= p.range[0] && depth <= p.range[1]);
console.log('负数区间匹配结果:', rangeMatch?.name);
if (rangeMatch) return rangeMatch;
console.log("区间匹配结果:", rangeMatch?.name);
console.log('区间匹配结果:', rangeMatch?.name);
// 无区间匹配时找最近深度（使用原始深度值）
return POSITIONS.reduce(
(prev, curr) =>
Math.abs(curr.depth - Math.abs(depth)) <
Math.abs(prev.depth - Math.abs(depth))
? curr
: prev,
POSITIONS[0]
);
return POSITIONS.reduce((prev, curr) => (Math.abs(curr.depth - Math.abs(depth)) < Math.abs(prev.depth - Math.abs(depth)) ? curr : prev), POSITIONS[0]);
},
// 查找最近楼层
// 统一后的查找方法
findNearestPosition(depth) {
console.log("当前深度:", depth);
console.log('当前深度:', depth);
// 优先匹配区间范围
const rangeMatch = POSITIONS.find(
(p) => depth >= p.range[0] && depth <= p.range[1]
);
console.log("区间匹配结果:", rangeMatch?.name);
const rangeMatch = POSITIONS.find(p => depth >= p.range[0] && depth <= p.range[1]);
console.log('区间匹配结果:', rangeMatch?.name);
if (rangeMatch) return rangeMatch;
// 无区间匹配时找最近深度
return POSITIONS.reduce(
(prev, curr) =>
Math.abs(curr.depth - depth) < Math.abs(prev.depth - depth)
? curr
: prev,
POSITIONS[0]
);
return POSITIONS.reduce((prev, curr) => (Math.abs(curr.depth - depth) < Math.abs(prev.depth - depth) ? curr : prev), POSITIONS[0]);
},
// 计算移动中的位置
......@@ -306,16 +244,11 @@ export default {
// 添加位置强制更新
this.currentPos = nearest;
this.targetPos = this.targetPos;
const progress = Math.min(
1,
Math.abs(currentDepth - nearest.depth) /
Math.abs(this.targetPos.depth - nearest.depth)
);
const progress = Math.min(1, Math.abs(currentDepth - nearest.depth) / Math.abs(this.targetPos.depth - nearest.depth));
return {
...nearest,
[type]:
nearest[type] + (this.targetPos[type] - nearest[type]) * progress,
[type]: nearest[type] + (this.targetPos[type] - nearest[type]) * progress,
};
},
......@@ -330,9 +263,9 @@ export default {
// 获取数据
async getdata() {
let obj = {
Shift: "当班次数",
Today: "当日次数",
Month: "当月次数",
Shift: '当班次数',
Today: '当日次数',
Month: '当月次数',
};
try {
const res = await getElevatorData();
......@@ -344,7 +277,7 @@ export default {
//获取提升机次数
const res2 = await getElevatorTimes();
if (res2.code === 200) {
this.elevatorTimes = res2.data.map((e) => {
this.elevatorTimes = res2.data.map(e => {
return {
name: obj[e.name],
value: e.value,
......@@ -352,7 +285,7 @@ export default {
});
}
} catch (error) {
console.error("数据获取失败:", error);
console.error('数据获取失败:', error);
}
},
......@@ -361,107 +294,107 @@ export default {
// 左侧数据列表
this.leftList = [
{
icon: "icon1",
name: "主控速度",
icon: 'icon1',
name: '主控速度',
value: `${Number(data.mainSpeed).toFixed(2)}m/s`,
color: "#00FEEF",
color: '#00FEEF',
},
{
icon: "icon1",
name: "编码器速度",
icon: 'icon1',
name: '编码器速度',
value: `${Number(data.coderSpeed).toFixed(2)}m/s`,
color: "#00FEEF",
color: '#00FEEF',
},
{
icon: "icon1",
name: "给定速度",
icon: 'icon1',
name: '给定速度',
value: `${Number(data.givenSpeed).toFixed(2)}m/s`,
color: "#00FEEF",
color: '#00FEEF',
},
{
icon: "icon1",
name: "从编码器速度",
icon: 'icon1',
name: '从编码器速度',
value: `${Number(data.givenSpeed).toFixed(2)}m/s`,
color: "#00FEEF",
color: '#00FEEF',
},
{
icon: "icon2",
name: "主罐位置",
icon: 'icon2',
name: '主罐位置',
value: `${Number(data.position).toFixed(2)}m`,
color: "#26DEFF",
color: '#26DEFF',
},
{
icon: "icon2",
name: "位置偏差",
icon: 'icon2',
name: '位置偏差',
value: `${Number(data.locationDeviation).toFixed(2)}m`,
color: "#26DEFF",
color: '#26DEFF',
},
{
icon: "icon3",
name: "电枢电流",
icon: 'icon3',
name: '电枢电流',
value: `${Number(data.motorCurrent).toFixed(2)}A`,
color: "#FECB00",
color: '#FECB00',
},
{
icon: "icon3",
name: "磁场电流",
icon: 'icon3',
name: '磁场电流',
value: `${Number(data.runningPressure).toFixed(2)}A`,
color: "#FECB00",
color: '#FECB00',
},
{
icon: "icon1",
name: "运行油压",
icon: 'icon1',
name: '运行油压',
value: `${Number(data.controlPosition).toFixed(2)}MPa`,
color: "#3AFF7B",
color: '#3AFF7B',
},
];
// 右侧数据列表
this.rightList = [
{
name: "硬件条件",
value1: { name: "运行准备", status: data.runPrepare },
name: '硬件条件',
value1: { name: '运行准备', status: data.runPrepare },
value2: { name: "主风机启", status: data.mainFan },
value3: { name: "变流器启", status: data.transformer },
value2: { name: '主风机启', status: data.mainFan },
value3: { name: '变流器启', status: data.transformer },
value4: {
name: "液压站启",
name: '液压站启',
status: data.hydraulicStation,
},
},
{
name: "安全保护",
name: '安全保护',
value1: {
name: "硬件安全",
name: '硬件安全',
status: data.hardwareSecurity,
},
value2: {
name: "软件安全",
name: '软件安全',
status: data.hardwareSecurity,
},
value3: { name: "操作台安全", status: data.consoleSafety },
value4: { name: "轻故障", status: data.minorMalfunction },
value3: { name: '操作台安全', status: data.consoleSafety },
value4: { name: '轻故障', status: data.minorMalfunction },
},
{
name: "信号方向",
value1: { name: "井口信号", status: data.wellheadSignal },
value2: { name: "信号继电器", status: data.signalRelay },
value3: { name: "选择正向", status: data.chooseForward },
value4: { name: "选择反向", status: data.chooseReverse },
name: '信号方向',
value1: { name: '井口信号', status: data.wellheadSignal },
value2: { name: '信号继电器', status: data.signalRelay },
value3: { name: '选择正向', status: data.chooseForward },
value4: { name: '选择反向', status: data.chooseReverse },
},
{
name: "闸回路",
value1: { name: "手动闸", status: data.manualGate },
value2: { name: "工作闸", status: data.workGate },
value3: { name: "全敞闸", status: data.openGate },
value4: { name: "一级制动", status: data.firstBraking },
name: '闸回路',
value1: { name: '手动闸', status: data.manualGate },
value2: { name: '工作闸', status: data.workGate },
value3: { name: '全敞闸', status: data.openGate },
value4: { name: '一级制动', status: data.firstBraking },
},
{
name: "开车回路",
value1: { name: "选低速", status: data.lowSpeed },
value2: { name: "使能输出", status: data.enableOutput },
value3: { name: "装置解封", status: data.deviceUnsealed },
value4: { name: "系统减速", status: data.systemSlowdown },
name: '开车回路',
value1: { name: '选低速', status: data.lowSpeed },
value2: { name: '使能输出', status: data.enableOutput },
value3: { name: '装置解封', status: data.deviceUnsealed },
value4: { name: '系统减速', status: data.systemSlowdown },
},
];
......@@ -481,9 +414,7 @@ export default {
this.zgtrend = `待命(${nearest.name})`;
this.isMoving = false;
} else {
this.targetPos =
POSITIONS.find((item) => item.value == data.currentAction) ||
POSITIONS[0];
this.targetPos = POSITIONS.find(item => item.value == data.currentAction) || POSITIONS[0];
this.zgtrend = this.targetPos.name;
this.isMoving = true;
}
......@@ -526,14 +457,28 @@ export default {
this.animationId = null;
}
},
// 提升机巡检记录
async getInspectionRecords() {
try {
const response = await getRecentFive();
console.log('response:', response);
if (response.code === 200) {
this.tableList = response.data;
} else {
console.error('获取巡检记录失败:', response.message);
}
} catch (error) {
console.error('获取巡检记录时发生错误:', error);
}
},
},
};
</script>
<style scoped lang="scss">
.main-content {
font-family: "fangsong";
background: url("~@/assets/images/screen/tfxt/bg.png") no-repeat center;
font-family: 'fangsong';
background: url('~@/assets/images/screen/tfxt/bg.png') no-repeat center;
padding-top: 100px;
display: flex; // 新增弹性布局
justify-content: space-between; // 左右两侧贴边
......@@ -544,7 +489,7 @@ export default {
width: 390px;
height: 60px;
border-radius: 10px;
background: url("~@/assets/images/screen/tsj/bg5.png") no-repeat center;
background: url('~@/assets/images/screen/tsj/bg5.png') no-repeat center;
background-size: 100%;
margin-bottom: 20px;
.icon {
......@@ -554,18 +499,15 @@ export default {
margin-left: 15px;
vertical-align: middle; // 新增垂直对齐
&.icon1 {
background: url("~@/assets/images/screen/tsj/icon1.png") no-repeat
center;
background: url('~@/assets/images/screen/tsj/icon1.png') no-repeat center;
background-size: 100% 100%;
}
&.icon2 {
background: url("~@/assets/images/screen/tsj/icon2.png") no-repeat
center;
background: url('~@/assets/images/screen/tsj/icon2.png') no-repeat center;
background-size: 100% 100%;
}
&.icon3 {
background: url("~@/assets/images/screen/tsj/icon3.png") no-repeat
center;
background: url('~@/assets/images/screen/tsj/icon3.png') no-repeat center;
background-size: 100% 100%;
}
}
......@@ -601,7 +543,7 @@ export default {
width: 390px;
height: 112px;
border-radius: 10px;
background: url("~@/assets/images/screen/tsj/bg6.png") no-repeat center;
background: url('~@/assets/images/screen/tsj/bg6.png') no-repeat center;
background-size: 100% 100%;
display: flex; // 新增弹性布局
align-items: center; // 新增垂直居中
......@@ -637,7 +579,7 @@ export default {
.center-box {
width: 100%;
height: 100%;
background: url("~@/assets/images/screen/tsj/bg1.png") no-repeat center;
background: url('~@/assets/images/screen/tsj/bg1.png') no-repeat center;
background-size: 100% 100%;
position: relative;
.dianti-target {
......@@ -664,7 +606,7 @@ export default {
.dianti-peizhong {
width: 18px;
height: 90px;
background: url("~@/assets/images/screen/tsj/bg4.png") no-repeat center;
background: url('~@/assets/images/screen/tsj/bg4.png') no-repeat center;
background-size: 100% 100%;
position: absolute;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
......@@ -672,20 +614,19 @@ export default {
.dianti-box {
width: 46px;
height: 78px;
background: url("~@/assets/images/screen/tsj/bg3.png") no-repeat center;
background: url('~@/assets/images/screen/tsj/bg3.png') no-repeat center;
background-size: 100% 100%;
position: absolute;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
&.active {
&::before {
content: "";
content: '';
width: 16px;
height: 26px;
position: absolute;
top: 0;
left: 0;
background: url("~@/assets/images/screen/tsj/icon5.png") no-repeat
center;
background: url('~@/assets/images/screen/tsj/icon5.png') no-repeat center;
background-size: 100% 100%;
}
}
......@@ -723,7 +664,7 @@ export default {
.right-item-class {
width: 100%;
height: 118px;
background: url("~@/assets/images/screen/tsj/bg6.png") no-repeat center;
background: url('~@/assets/images/screen/tsj/bg6.png') no-repeat center;
background-size: 100% 100%;
display: flex; // 新增弹性布局
align-items: center; // 垂直居中
......@@ -759,8 +700,7 @@ export default {
margin: 0; // 移除原有宽度限制
line-height: 40px; // 垂直居中
&.active {
background: url("~@/assets/images/screen/tsj/button.png") no-repeat
center;
background: url('~@/assets/images/screen/tsj/button.png') no-repeat center;
background-size: 100% 100%;
line-height: 40px; // 垂直居中
color: black;
......@@ -771,7 +711,7 @@ export default {
.right-item-botton {
width: 100%;
height: 190px;
background: url("~@/assets/images/screen/tsj/bg7.png") no-repeat center;
background: url('~@/assets/images/screen/tsj/bg7.png') no-repeat center;
background-size: 100% 100%;
overflow: hidden;
.title {
......
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