Skip to content

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

fix:大屏人员定位图表时间线处理

parent fc2b3cc7
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 407 deletions
src/views/Screen/items/rydw.vue
View file @ 38357703
......@@ -14,34 +14,22 @@
<div class="sub-con-right">
<div>
<p class="p-out">
<i>系统监控总人数</i
><span class="por">{{
subStaStatus.systemMonitorAllCount || 0
}}</span>
<i>系统监控总人数</i><span class="por">{{ subStaStatus.systemMonitorAllCount || 0 }}</span>
</p>
</div>
<div>
<p class="p-out">
<i>下井总人数</i
><span class="por">{{
subStaStatus.peopleIntoWellCount || 0
}}</span>
<i>下井总人数</i><span class="por">{{ subStaStatus.peopleIntoWellCount || 0 }}</span>
</p>
</div>
<div>
<p class="p-out">
<i>地面井口总人数</i
><span class="por">{{
subStaStatus.groundWellCount || 0
}}</span>
<i>地面井口总人数</i><span class="por">{{ subStaStatus.groundWellCount || 0 }}</span>
</p>
</div>
<div>
<p class="p-out">
<i>重点区域人数</i
><span class="por">{{
subStaStatus.keyAreaPopulation || 0
}}</span>
<i>重点区域人数</i><span class="por">{{ subStaStatus.keyAreaPopulation || 0 }}</span>
</p>
</div>
</div>
......@@ -64,33 +52,13 @@
<span class="custom-header-item">距离分站</span>
<span class="custom-header-item">时间</span>
</div>
<vue-seamless-scroll
:data="realTimeStatusData"
class="warp"
:class-option="classOption"
>
<vue-seamless-scroll :data="realTimeStatusData" class="warp" :class-option="classOption">
<ul>
<li
v-for="(item, index) in realTimeStatusData"
:key="index"
class="custom-item custom-item1"
>
<span
class="custom-item-content custom-item-content1"
v-text="item.perName"
></span>
<span
class="custom-item-content custom-item-content1"
v-text="item.location"
></span>
<span
class="custom-item-content custom-item-content1"
v-text="item.distance"
></span>
<span
class="custom-item-content custom-item-content1"
v-text="item.lastTime"
></span>
<li v-for="(item, index) in realTimeStatusData" :key="index" class="custom-item custom-item1">
<span class="custom-item-content custom-item-content1" v-text="item.perName"></span>
<span class="custom-item-content custom-item-content1" v-text="item.location"></span>
<span class="custom-item-content custom-item-content1" v-text="item.distance"></span>
<span class="custom-item-content custom-item-content1" v-text="item.lastTime"></span>
</li>
</ul>
</vue-seamless-scroll>
......@@ -142,33 +110,23 @@
<ul>
<li>
<span class="legend-color blue"></span><span>一中基站数</span>
<span class="txtblue">{{
stationData | stationDataValue("一中基站数")
}}</span>
<span class="txtblue">{{ stationData | stationDataValue('一中基站数') }}</span>
</li>
<li>
<span class="legend-color cyan"></span><span>二中基站数</span>
<span class="txtcyan">{{
stationData | stationDataValue("二中基站数")
}}</span>
<span class="txtcyan">{{ stationData | stationDataValue('二中基站数') }}</span>
</li>
<li>
<span class="legend-color green"></span><span>三中基站数</span>
<span class="txtgreen">{{
stationData | stationDataValue("三中基站数")
}}</span>
<span class="txtgreen">{{ stationData | stationDataValue('三中基站数') }}</span>
</li>
<li>
<span class="legend-color yellow"></span><span>四中基站数</span>
<span class="txtyellow">{{
stationData | stationDataValue("四中基站数")
}}</span>
<span class="txtyellow">{{ stationData | stationDataValue('四中基站数') }}</span>
</li>
<li>
<span class="legend-color orange"></span><span>五中基站数</span>
<span class="txtorange">{{
stationData | stationDataValue("五中基站数")
}}</span>
<span class="txtorange">{{ stationData | stationDataValue('五中基站数') }}</span>
</li>
</ul>
</div>
......@@ -185,34 +143,15 @@
<div class="sidebar-item alert-analysis">
<div class="sub-title por"><span>当月人员下井次数排行榜</span></div>
<div class="sub-con sub-con-scroll-table">
<vue-seamless-scroll
:data="recentSevDaysAlarmsData"
class="warp_ranking"
:class-option="classOption"
>
<vue-seamless-scroll :data="recentSevDaysAlarmsData" class="warp_ranking" :class-option="classOption">
<ul>
<li
v-for="(item, index) in recentSevDaysAlarmsData"
:key="index"
class="custom-item custom-item2"
>
<span class="custom-item-content custom-item-content2">{{
index + 1
}}</span>
<span class="custom-item-content custom-item-content2">{{
item.name
}}</span>
<div
class="custom-item-content custom-item-content2 progressbar"
>
<div
class="progress"
:style="{ width: progressWidth(item.value) }"
></div>
<li v-for="(item, index) in recentSevDaysAlarmsData" :key="index" class="custom-item custom-item2">
<span class="custom-item-content custom-item-content2">{{ index + 1 }}</span>
<span class="custom-item-content custom-item-content2">{{ item.name }}</span>
<div class="custom-item-content custom-item-content2 progressbar">
<div class="progress" :style="{ width: progressWidth(item.value) }"></div>
</div>
<span class="custom-item-content custom-item-content2">{{
item.value
}}</span>
<span class="custom-item-content custom-item-content2">{{ item.value }}</span>
</li>
</ul>
</vue-seamless-scroll>
......@@ -227,15 +166,9 @@
</div>
<div class="dialog-content">
<div class="sub-info">
<p v-if="perOnlineSituationData.length > 0">
分站名称:{{ perOnlineSituationData[0].locationName }}
</p>
<p v-if="perOnlineSituationData.length > 0">
分站编号:{{ perOnlineSituationData[0].locationId }}
</p>
<p v-if="perOnlineSituationData.length > 0">
分站位置:{{ perOnlineSituationData[0].location }}
</p>
<p v-if="perOnlineSituationData.length > 0">分站名称:{{ perOnlineSituationData[0].locationName }}</p>
<p v-if="perOnlineSituationData.length > 0">分站编号:{{ perOnlineSituationData[0].locationId }}</p>
<p v-if="perOnlineSituationData.length > 0">分站位置:{{ perOnlineSituationData[0].location }}</p>
</div>
<div class="dia-table-header">
<span>卡号</span>
......@@ -249,57 +182,23 @@
<span>进入区域</span>
<span>入井时间</span>
</div>
<vue-seamless-scroll
:data="perOnlineSituationData"
class="warp2"
:class-option="classOption2"
>
<vue-seamless-scroll :data="perOnlineSituationData" class="warp2" :class-option="classOption2">
<ul v-if="perOnlineSituationData.length > 0">
<li
v-for="(item, index) in perOnlineSituationData"
:key="item.cardNumber || index"
class="custom-item custom-item3"
>
<span
class="custom-item-content custom-item-content3"
v-text="item.cardNumber"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.perName"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.departName"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.worName"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.distance"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.localtion"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.fromLoaction"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.lastTime"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.areaName"
></span>
<span
class="custom-item-content custom-item-content3"
v-text="item.entryTime"
></span>
<span class="custom-item-content custom-item-content3" v-text="item.cardNumber"></span>
<span class="custom-item-content custom-item-content3" v-text="item.perName"></span>
<span class="custom-item-content custom-item-content3" v-text="item.departName"></span>
<span class="custom-item-content custom-item-content3" v-text="item.worName"></span>
<span class="custom-item-content custom-item-content3" v-text="item.distance"></span>
<span class="custom-item-content custom-item-content3" v-text="item.localtion"></span>
<span class="custom-item-content custom-item-content3" v-text="item.fromLoaction"></span>
<span class="custom-item-content custom-item-content3" v-text="item.lastTime"></span>
<span class="custom-item-content custom-item-content3" v-text="item.areaName"></span>
<span class="custom-item-content custom-item-content3" v-text="item.entryTime"></span>
</li>
</ul>
</vue-seamless-scroll>
......@@ -308,8 +207,8 @@
</div>
</template>
<script>
import * as echarts from "echarts";
import screenfull from "screenfull";
import * as echarts from 'echarts'
import screenfull from 'screenfull'
import {
realTimeStatistics,
realTimeDistribution,
......@@ -320,40 +219,40 @@ import {
perOnlineSituation,
rydwMidStation,
monthlyRankings,
} from "@/api/tyler/screen";
} from '@/api/tyler/screen'
export default {
name: "rydw",
name: 'rydw',
data() {
return {
dialogTableVisible: false,
gridData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
],
realTimeStatusData: [
{
perName: "陈玉强",
location: "一中运输巷",
perName: '陈玉强',
location: '一中运输巷',
distance: 14.21,
lastTime: "2025-01-10 14:21:31",
lastTime: '2025-01-10 14:21:31',
},
],
recentSevDaysAlarmsData: [],
......@@ -375,93 +274,89 @@ export default {
subStationMid: [
{
count: 0,
location: "一中车场",
location: '一中车场',
addressId: 1,
},
],
stationPositions: {
1: { left: "84px", top: "185px" },
2: { left: "480px", top: "214px" },
4: { left: "84px", top: "315px" },
5: { left: "148px", top: "322px" },
6: { left: "194px", top: "329px" },
7: { left: "84px", top: "440px" },
8: { left: "200px", top: "460px" },
9: { left: "850px", top: "70px" }, //东风井井口
10: { left: "136px", top: "713px" },
11: { left: "84px", top: "573px" },
12: { left: "84px", top: "703px" },
13: { left: "152px", top: "190px" },
14: { left: "74px", top: "88px" }, //小高尖井口
15: { left: "342px", top: "202px" },
16: { left: "640px", top: "203px" },
17: { left: "763px", top: "20px" },
18: { left: "265px", top: "331px" },
19: { left: "247px", top: "364px" },
20: { left: "534px", top: "343px" },
21: { left: "675px", top: "333px" },
22: { left: "400px", top: "470px" },
23: { left: "335px", top: "526px" },
24: { left: "500px", top: "510px" },
25: { left: "580px", top: "478px" },
26: { left: "350px", top: "609px" },
27: { left: "252px", top: "599px" },
28: { left: "766px", top: "188px" },
1: { left: '84px', top: '185px' },
2: { left: '480px', top: '214px' },
4: { left: '84px', top: '315px' },
5: { left: '148px', top: '322px' },
6: { left: '194px', top: '329px' },
7: { left: '84px', top: '440px' },
8: { left: '200px', top: '460px' },
9: { left: '850px', top: '70px' }, //东风井井口
10: { left: '136px', top: '713px' },
11: { left: '84px', top: '573px' },
12: { left: '84px', top: '703px' },
13: { left: '152px', top: '190px' },
14: { left: '74px', top: '88px' }, //小高尖井口
15: { left: '342px', top: '202px' },
16: { left: '640px', top: '203px' },
17: { left: '763px', top: '20px' },
18: { left: '265px', top: '331px' },
19: { left: '247px', top: '364px' },
20: { left: '534px', top: '343px' },
21: { left: '675px', top: '333px' },
22: { left: '400px', top: '470px' },
23: { left: '335px', top: '526px' },
24: { left: '500px', top: '510px' },
25: { left: '580px', top: '478px' },
26: { left: '350px', top: '609px' },
27: { left: '252px', top: '599px' },
28: { left: '766px', top: '188px' },
},
//中段基站数据
stationData: [
{ value: 5, name: "一中基站数", itemStyle: { color: "#007BFF" } },
],
stationData: [{ value: 5, name: '一中基站数', itemStyle: { color: '#007BFF' } }],
timer: null,
};
}
},
mounted() {
if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
screenfull.request();
screenfull.request()
}
this.areaCharts();
this.alarm30();
this.areaCharts()
this.alarm30()
// this.getUnPerRealData()
this.subStationObj();
this.subStationStatusObj();
this.realTimeStatusList();
this.perStationInfoList();
this.getrydwMidStation();
this.getMonthlyRankings();
this.subStationObj()
this.subStationStatusObj()
this.realTimeStatusList()
this.perStationInfoList()
this.getrydwMidStation()
this.getMonthlyRankings()
},
activated() {
this.startTimer();
this.startTimer()
},
deactivated() {
this.clearTimer();
this.clearTimer()
},
beforeDestroy() {
this.clearTimer();
this.clearTimer()
},
methods: {
startTimer() {
this.timer = setInterval(() => {
this.perStationInfoList();
this.subStationObj();
this.getMonthlyRankings();
}, 10000);
this.perStationInfoList()
this.subStationObj()
this.getMonthlyRankings()
}, 10000)
},
clearTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
clearInterval(this.timer)
this.timer = null
}
},
//当月人员下井次数排行榜数据
getMonthlyRankings() {
monthlyRankings().then((res) => {
if (res.code !== 200) return;
this.recentSevDaysAlarmsData = res.data.sort(
(a, b) => b.value - a.value
);
monthlyRankings().then(res => {
if (res.code !== 200) return
this.recentSevDaysAlarmsData = res.data.sort((a, b) => b.value - a.value)
//获取的re.data格式为[{name：张三,value：54}]这样。需要根据value排序，然后value大的在前
});
})
},
//控制进度条宽度
progressWidth(frequency) {
......@@ -469,93 +364,93 @@ export default {
const maxFrequencyData = this.recentSevDaysAlarmsData.reduce(
(max, item) => Math.max(max, Math.ceil(item.value / 10) * 10),
0
);
const width = (frequency / maxFrequencyData) * 100 + "%";
return width;
)
const width = (frequency / maxFrequencyData) * 100 + '%'
return width
},
// 分站状态分析
subStationObj() {
realTimeStatistics().then((res) => {
this.subStaStatus = res.data;
});
realTimeStatistics().then(res => {
this.subStaStatus = res.data
})
},
//区域人数实时分布图
async realTimeDistributionList() {
try {
const res = await realTimeDistribution();
this.realTimeDistributionData = res.data;
const res = await realTimeDistribution()
this.realTimeDistributionData = res.data
} catch (error) {
console.error("Error fetching real-time distribution data:", error);
console.error('Error fetching real-time distribution data:', error)
}
},
//井下人员实时状态
realTimeStatusList() {
realTimeStatus().then((res) => {
this.realTimeStatusData = res.data;
});
realTimeStatus().then(res => {
this.realTimeStatusData = res.data
})
},
// 分站状态分析
subStationStatusObj() {
stationStatus().then((res) => {
this.subStaStatusData = res.data;
});
stationStatus().then(res => {
this.subStaStatusData = res.data
})
},
//中间分站信息
perStationInfoList() {
perStationInfo().then((res) => {
this.subStationMid = res.data;
});
perStationInfo().then(res => {
this.subStationMid = res.data
})
},
// 辅助方法：获取字段值
getItemField(item, fieldKey) {
return item[this.fieldMap[fieldKey]] || "";
return item[this.fieldMap[fieldKey]] || ''
},
async areaCharts() {
let that = this;
let myChart = echarts.init(document.getElementById("left1"));
await this.realTimeDistributionList();
let xAxisData = that.realTimeDistributionData.map((item) => item.name);
let yAxisData = that.realTimeDistributionData.map((item) => item.value);
let that = this
let myChart = echarts.init(document.getElementById('left1'))
await this.realTimeDistributionList()
let xAxisData = that.realTimeDistributionData.map(item => item.name)
let yAxisData = that.realTimeDistributionData.map(item => item.value)
let option = {
title: {
text: "",
x: "center",
y: "4%",
text: '',
x: 'center',
y: '4%',
textStyle: {
color: "#fff",
fontSize: "12",
color: '#fff',
fontSize: '12',
},
subtextStyle: {
color: "#90979c",
fontSize: "12",
color: '#90979c',
fontSize: '12',
},
},
tooltip: {
trigger: "axis",
trigger: 'axis',
axisPointer: {
type: "shadow",
type: 'shadow',
},
},
grid: {
top: "5%",
right: "3%",
left: "8%",
bottom: "12%",
top: '5%',
right: '3%',
left: '8%',
bottom: '12%',
},
xAxis: [
{
type: "category",
type: 'category',
data: xAxisData,
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.12)",
color: 'rgba(255,255,255,0.12)',
},
},
axisLabel: {
show: true,
margin: 10,
color: "#fff",
color: '#fff',
textStyle: {
fontSize: 12,
},
......@@ -566,8 +461,8 @@ export default {
{
axisLabel: {
show: true,
formatter: "{value}",
color: "#B7CCDA",
formatter: '{value}',
color: '#B7CCDA',
textStyle: {
fontSize: 14,
},
......@@ -575,28 +470,28 @@ export default {
axisTick: {
//y轴刻度线
show: true,
color: "#e2e9ff",
color: '#e2e9ff',
},
axisLine: {
show: true,
color: "#e2e9ff",
color: '#e2e9ff',
lineStyle: {
color: "rgba(255,255,255,0.12)",
color: 'rgba(255,255,255,0.12)',
},
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.12)",
color: 'rgba(255,255,255,0.12)',
},
},
},
],
series: [
{
type: "bar",
type: 'bar',
data: yAxisData,
barWidth: "16px",
barWidth: '16px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
......@@ -607,11 +502,11 @@ export default {
[
{
offset: 0,
color: "#37BBFF", // 0% 处的颜色
color: '#37BBFF', // 0% 处的颜色
},
{
offset: 1,
color: "#1C3454", // 100% 处的颜色
color: '#1C3454', // 100% 处的颜色
},
],
false
......@@ -627,152 +522,179 @@ export default {
lineHeight: 20,
width: 10,
height: 20,
backgroundColor: "rgba(0,160,221,0.1)",
backgroundColor: 'rgba(0,160,221,0.1)',
// borderRadius: 200,
},
},
},
],
};
myChart.setOption(option);
}
myChart.setOption(option)
setTimeout(() => {
myChart.resize();
}, 600);
myChart.resize()
}, 600)
},
async recentThDaysAlarmsList() {
try {
const res = await recentThDaysAlarms();
this.recentThDaysAlarmsData = res.data;
const res = await recentThDaysAlarms()
this.recentThDaysAlarmsData = res.data
} catch (error) {
console.error("Error fetching real-time distribution data:", error);
console.error('Error fetching real-time distribution data:', error)
}
},
//30天井下人数变化趋势
async alarm30() {
let that = this;
await this.recentThDaysAlarmsList();
console.log(this.recentThDaysAlarmsData, "this.recentThDaysAlarmsData");
let myChart = echarts.init(document.getElementById("right"));
let that = this
await this.recentThDaysAlarmsList()
console.log(this.recentThDaysAlarmsData, 'this.recentThDaysAlarmsData')
let myChart = echarts.init(document.getElementById('right'))
let option = {
grid: {
left: "3%",
right: "3%",
bottom: "2%",
top: "3%",
left: '3%',
right: '3%',
bottom: '2%',
top: '3%',
containLabel: true,
},
tooltip: {
trigger: "axis",
trigger: 'axis',
axisPointer: {
type: "none",
type: 'none',
},
//显示日期和人数
formatter: function (params) {
let date = params[0].name; // 日期
let value = params[0].value; // 人数
return `${date}<br/>人数: ${value}`;
let date = params[0].name // 日期
let value = params[0].value // 人数
return `${date}<br/>人数: ${value}`
},
},
xAxis: {
type: "category",
data: this.recentThDaysAlarmsData.map((item) => item.name), // 假设日期是字符串类型
type: 'category',
data: this.recentThDaysAlarmsData.map(item => item.name), // 假设日期是字符串类型
axisTick: {
show: false,
},
//隔5个显示
axisLabel: {
interval: 5,
color: "#fff",
interval: function (index, value) {
// 获取数据总长度
const dataLength = that.recentThDaysAlarmsData.length
// 如果数据少于等于4个，全部显示
if (dataLength <= 4) {
return true
}
// 如果数据多于4个，均匀显示4个点
// 计算每个显示点的间隔，确保均匀分布
const step = Math.floor(dataLength / 4)
const remainder = dataLength % 4
// 计算要显示的索引位置
const showIndexes = []
for (let i = 0; i < 4; i++) {
let pos = i * step
// 如果有余数，适当调整位置以更均匀分布
if (i > 0 && remainder > 0) {
pos += Math.floor((i * remainder) / 4)
}
// 确保不超出数组边界
pos = Math.min(pos, dataLength - 1)
showIndexes.push(pos)
}
return showIndexes.includes(index)
},
color: '#fff',
fontSize: 12,
},
},
yAxis: {
type: "value",
type: 'value',
//虚线，取整
splitLine: {
show: true,
lineStyle: {
color: "#fff",
type: "dashed",
color: '#fff',
type: 'dashed',
},
},
axisLabel: {
color: "#fff",
color: '#fff',
fontSize: 12,
},
},
series: [
{
data: this.recentThDaysAlarmsData.map((item) => item.value), // 假设值是数字类型,
type: "line",
stack: "Total",
data: this.recentThDaysAlarmsData.map(item => item.value), // 假设值是数字类型,
type: 'line',
stack: 'Total',
//线条颜色
itemStyle: {
color: "#37BBFF",
color: '#37BBFF',
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(55, 184, 251,0.5)",
color: 'rgb(55, 184, 251,0.5)',
},
{
offset: 1,
color: "rgb(55, 184, 251,0.1)",
color: 'rgb(55, 184, 251,0.1)',
},
]),
},
emphasis: {
focus: "series",
focus: 'series',
},
},
],
};
myChart.setOption(option);
}
myChart.setOption(option)
setTimeout(() => {
myChart.resize();
}, 600);
myChart.resize()
}, 600)
},
//获取中段基站数据
getrydwMidStation() {
rydwMidStation().then((res) => {
rydwMidStation().then(res => {
if (res.code !== 200) {
return;
return
}
// 创建名称映射表;
const stationMap = {
一中: { color: "#007BFF", suffix: "基站数" },
二中: { color: "#00CCCC", suffix: "基站数" },
三中: { color: "#28A745", suffix: "基站数" },
四中: { color: "#FFC107", suffix: "基站数" },
五中: { color: "#FF5733", suffix: "基站数" },
};
一中: { color: '#007BFF', suffix: '基站数' },
二中: { color: '#00CCCC', suffix: '基站数' },
三中: { color: '#28A745', suffix: '基站数' },
四中: { color: '#FFC107', suffix: '基站数' },
五中: { color: '#FF5733', suffix: '基站数' },
}
// 先过滤再转换
this.stationData = res.data
.filter((item) => stationMap[item.name]) // 只保留有配置项的数据
.map((item) => ({
.filter(item => stationMap[item.name]) // 只保留有配置项的数据
.map(item => ({
value: item.value,
name: item.name + stationMap[item.name].suffix,
itemStyle: { color: stationMap[item.name].color },
}));
}))
this.$nextTick(() => {
console.log(this.stationData);
console.log(this.stationData)
this.rightTopChart(); // 确保DOM更新后执行
});
});
this.rightTopChart() // 确保DOM更新后执行
})
})
},
//中段基站分析
rightTopChart() {
let myChart = echarts.init(document.getElementById("rightTop"));
let myChart = echarts.init(document.getElementById('rightTop'))
let option = {
polar: {
radius: [30, "90%"],
radius: [30, '90%'],
},
angleAxis: {
max: 10,
......@@ -780,103 +702,97 @@ export default {
show: false, // 显示坐标轴
},
radiusAxis: {
type: "category",
data: this.stationData.map((item) => item.name),
type: 'category',
data: this.stationData.map(item => item.name),
axisLine: {
show: false, // 显示径向轴
lineStyle: {
color: "#fff",
color: '#fff',
},
},
axisLabel: {
show: false, // 显示分类标签
color: "#fff",
color: '#fff',
},
},
series: [
// 数值条（实际颜色）
{
type: "bar",
coordinateSystem: "polar",
stack: "a",
data: this.stationData.map((d) => d.value),
type: 'bar',
coordinateSystem: 'polar',
stack: 'a',
data: this.stationData.map(d => d.value),
itemStyle: {
color: (params) =>
this.stationData[params.dataIndex].itemStyle.color,
color: params => this.stationData[params.dataIndex].itemStyle.color,
},
},
// 背景条（灰色填充）
{
type: "bar",
coordinateSystem: "polar",
stack: "a",
type: 'bar',
coordinateSystem: 'polar',
stack: 'a',
data: this.stationData.map(() => 10), // 每个项总长度10
itemStyle: {
color: "RGBA(28, 57, 92, 0.3)",
color: 'RGBA(28, 57, 92, 0.3)',
},
},
],
};
myChart.setOption(option);
}
myChart.setOption(option)
},
//自动滚动
autoScroll() {
const divData = this.$refs.scroll_List3;
const divData = this.$refs.scroll_List3
// 拿到表格中承载数据的div元素
divData.scrollTop += 1;
if (
Math.round(divData.clientHeight + divData.scrollTop) + 1 >=
divData.scrollHeight
) {
divData.scrollTop += 1
if (Math.round(divData.clientHeight + divData.scrollTop) + 1 >= divData.scrollHeight) {
// 重置table距离顶部距离
divData.scrollTop = 0;
divData.scrollTop = 0
}
this.scrolltimer3 = window.requestAnimationFrame(
this.autoScroll.bind(this)
);
this.scrolltimer3 = window.requestAnimationFrame(this.autoScroll.bind(this))
},
//停止滚动
cancelScroll() {
window.cancelAnimationFrame(this.scrolltimer3);
window.cancelAnimationFrame(this.scrolltimer3)
},
goToSys() {
var link = this.$router.resolve({
path: "/",
});
window.open(link.href);
return;
path: '/',
})
window.open(link.href)
return
},
getStationStyle(addressId) {
return this.stationPositions[addressId] || {};
return this.stationPositions[addressId] || {}
},
handleStation(addressId) {
perOnlineSituation({ addressId }).then((res) => {
console.log(res, "res");
perOnlineSituation({ addressId }).then(res => {
console.log(res, 'res')
if (res.data && res.data.length > 0) {
this.perOnlineSituationData = res.data;
this.dialogTableVisible = true;
this.perOnlineSituationData = res.data
this.dialogTableVisible = true
}
});
})
},
closeDialog() {
this.dialogTableVisible = false;
this.perOnlineSituationData = [];
this.dialogTableVisible = false
this.perOnlineSituationData = []
},
},
filters: {
stationDataValue(data, value) {
//当data的name等于value时，返回data的value
return data.find((item) => item.name === value)?.value + "个" || 0;
return data.find(item => item.name === value)?.value + '个' || 0
},
leaderFilter(value) {
if (value == "暂无排班") {
return "暂无排班";
if (value == '暂无排班') {
return '暂无排班'
}
return (value || []).join("、");
return (value || []).join('、')
},
},
};
}
</script>
<style lang="scss" scoped>
.por {
......@@ -902,7 +818,7 @@ export default {
justify-content: space-between;
padding: 0 30px;
padding-top: 160px;
background: url("~@/assets/images/screen/bg12.png");
background: url('~@/assets/images/screen/bg12.png');
color: #fff;
}
......@@ -922,18 +838,14 @@ export default {
width: 100%;
height: 286px;
margin-bottom: 30px;
background: linear-gradient(
180deg,
rgba(1, 33, 58, 0.2) 0%,
rgba(8, 132, 233, 0.2) 100%
);
background: linear-gradient(180deg, rgba(1, 33, 58, 0.2) 0%, rgba(8, 132, 233, 0.2) 100%);
position: relative;
&::before {
content: "";
content: '';
width: 460px;
height: 4px;
position: absolute;
background: url("~@/assets/images/screen/bottom.png") no-repeat center;
background: url('~@/assets/images/screen/bottom.png') no-repeat center;
left: 0;
bottom: 0;
right: 0;
......@@ -942,9 +854,9 @@ export default {
.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;
top: -10px;
......@@ -956,23 +868,18 @@ export default {
display: flex;
justify-content: space-evenly;
align-items: center;
font-family: "fangzhengyaoti";
font-family: 'fangzhengyaoti';
.sub-con-left {
div {
margin-top: -40px;
width: 144px;
height: 178px;
background: url("~@/assets/images/screen/icon1.png") no-repeat center;
background: url('~@/assets/images/screen/icon1.png') no-repeat center;
background-size: contain;
p {
font-size: 18px;
color: #ffffff;
background: linear-gradient(
180deg,
#ffed9b 0%,
#ffffff 48.9990234375%,
#ffe25d 100%
);
background: linear-gradient(180deg, #ffed9b 0%, #ffffff 48.9990234375%, #ffe25d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
......@@ -981,13 +888,12 @@ export default {
}
}
.sub-con-right {
font-family: "fangzhengyaoti";
font-family: 'fangzhengyaoti';
div {
width: 243px;
height: 32px;
background: url("~@/assets/images/screen/underline.png") no-repeat
center;
background: url('~@/assets/images/screen/underline.png') no-repeat center;
position: relative;
margin-bottom: 30px;
font-size: 18px;
......@@ -1007,16 +913,15 @@ export default {
font-size: 30px;
color: #ffd929;
text-indent: 15px;
font-family: "number";
font-family: 'number';
margin-top: -4px;
&::before {
content: "";
content: '';
width: 6px;
height: 8px;
position: absolute;
background: url("~@/assets/images/screen/icon2.png") no-repeat
center;
background: url('~@/assets/images/screen/icon2.png') no-repeat center;
left: 5px;
top: 10px;
z-index: 20;
......@@ -1037,7 +942,7 @@ export default {
/* 中间主区域 */
.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: 100%;
text-align: center;
.main-example {
......@@ -1046,7 +951,7 @@ export default {
line-height: 36px;
font-weight: bold;
position: absolute;
font-family: "fangsong";
font-family: 'fangsong';
}
}
......@@ -1062,7 +967,7 @@ export default {
height: 14em;
}
.sub-con-scroll-table {
font-family: "fangzhengyaoti";
font-family: 'fangzhengyaoti';
width: 100%;
height: 100%;
margin: 0 auto;
......@@ -1104,7 +1009,7 @@ export default {
text-align: center;
}
.sub-con-r {
font-family: "fangzhengyaoti";
font-family: 'fangzhengyaoti';
width: 100%;
display: flex;
justify-content: flex-start; // 改为左对齐
......@@ -1276,11 +1181,7 @@ export default {
li:nth-child(-n + 3) {
.progressbar {
.progress {
background: linear-gradient(
270deg,
#ffbe23 0%,
rgba(255, 190, 35, 0.05) 100%
);
background: linear-gradient(270deg, #ffbe23 0%, rgba(255, 190, 35, 0.05) 100%);
}
}
/**选中第一个和第二个span */
......@@ -1297,7 +1198,7 @@ export default {
.dot {
width: 42px;
height: 53px;
background: url("~@/assets/images/screen/icon4.png") no-repeat center;
background: url('~@/assets/images/screen/icon4.png') no-repeat center;
background-size: 100%;
cursor: pointer;
position: absolute;
......@@ -1313,7 +1214,7 @@ export default {
margin: 0;
}
&:hover {
background: url("~@/assets/images/screen/icon5.png") no-repeat center;
background: url('~@/assets/images/screen/icon5.png') no-repeat center;
background-size: 100%;
z-index: 20;
}
......@@ -1346,8 +1247,7 @@ export default {
font-size: 22px;
color: #ffffff;
font-weight: bold;
background: url("~@/assets/images/screen/underline-dia.png") no-repeat
center;
background: url('~@/assets/images/screen/underline-dia.png') no-repeat center;
background-size: 100%;
position: relative;
margin-bottom: 0;
......@@ -1386,11 +1286,7 @@ export default {
.dia-table-header {
width: 100%;
height: 36px;
background: linear-gradient(
0deg,
rgba(31, 169, 255, 0.5) 0%,
rgba(31, 169, 255, 0.03) 100%
);
background: linear-gradient(0deg, rgba(31, 169, 255, 0.5) 0%, rgba(31, 169, 255, 0.03) 100%);
display: grid;
grid-template-columns: 3fr 2fr 2fr 2fr 2fr 2fr 2fr 4fr 2fr 4fr;
text-align: center;
......
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