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