Skip to content

Y
yindong-tongbai-automation
Commit 25bf70ae authored by lei's avatar lei
Browse files
Options

add:提升机系统

parent 8b1ba508
Show whitespace changes
Inline Side-by-side
Showing with 2588 additions and 757 deletions
src/api/tyler/screen.js
View file @ 25bf70ae
......@@ -36,10 +36,10 @@ export function stationStatus(query) {
});
}
//近30天报警分析
//30天井下人数变化趋势
export function recentThDaysAlarms(query) {
return request({
url: "/business/screen/per/recentThDaysAlarms",
url: "/business/screen/per/30DaysTrend",
method: "get",
params: query,
});
......@@ -80,3 +80,20 @@ export function eleAll(query) {
params: query,
});
}
//rydw中段基站分析
export function rydwMidStation(query) {
return request({
url: "/business/screen/per/baseStationAnalysis",
method: "get",
params: query,
});
}
//当月人员下井次数排行
export function monthlyRankings(query) {
return request({
url: "/business/screen/per/monthlyRanking",
method: "get",
params: query,
});
}
\ No newline at end of file
src/views/Screen/index.vue
View file @ 25bf70ae
......@@ -19,6 +19,14 @@
v-if="showMenu === 6"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></dlxt>
<tfxt
v-if="showMenu === 5"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></tfxt>
<tsj
v-if="showMenu === 4"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></tsj>
<div class="container">
<!-- 头部 -->
<div class="header por"></div>
......@@ -37,7 +45,7 @@
key=""
:class="showMenu == 2 ? 'active' : ''"
>
<p>环境监测</p>
<p>监测监控</p>
</div>
<div
class="sub-item"
......@@ -57,9 +65,27 @@
</div>
</div>
<div class="sub-header-right">
<div class="sub-item" :class="showMenu == 4 ? 'active' : ''" @click="changeMenu(4)"><p>提升机系统</p></div>
<div class="sub-item" :class="showMenu == 5 ? 'active' : ''" @click="changeMenu(5)"><p>风机系统</p></div>
<div class="sub-item" :class="showMenu == 6 ? 'active' : ''" @click="changeMenu(6)"><p>电力系统</p></div>
<div
class="sub-item"
:class="showMenu == 4 ? 'active' : ''"
@click="changeMenu(4)"
>
<p>提升机系统</p>
</div>
<div
class="sub-item"
:class="showMenu == 5 ? 'active' : ''"
@click="changeMenu(5)"
>
<p>通风系统</p>
</div>
<div
class="sub-item"
:class="showMenu == 6 ? 'active' : ''"
@click="changeMenu(6)"
>
<p>电力系统</p>
</div>
</div>
</div>
......@@ -84,6 +110,8 @@ import hjjc from "./items/hjjc.vue";
import psxt from "./items/psxt.vue";
import home from "./items/home.vue";
import dlxt from "./items/dlxt.vue";
import tfxt from "./items/tfxt.vue";
import tsj from "./items/tsj.vue";
export default {
name: "cockpit",
components: {
......@@ -92,16 +120,18 @@ export default {
hjjc,
psxt,
dlxt,
tfxt,
tsj,
},
data() {
return {
previewUrl: process.env.VUE_APP_API_TARGET,
showMenu: 0,
videoData:null,
videoData: null,
};
},
mounted() {
this.getVideo()
this.getVideo();
if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
screenfull.request();
}
......@@ -109,19 +139,16 @@ export default {
// this.alarm30();
},
methods: {
getVideo(){
getVideo() {
this.videoData = null;
listVideo().then(res => {
listVideo().then((res) => {
this.videoData = this.previewUrl + res.data;
})
});
},
changeMenu(val) {
this.showMenu = val;
},
sysAnalysis(){
},
sysAnalysis() {},
goToSys() {
var link = this.$router.resolve({
path: "/",
......@@ -129,7 +156,7 @@ export default {
window.open(link.href);
return;
},
openVideo(){
openVideo() {
window.open(this.videoData);
return;
},
......@@ -182,7 +209,6 @@ export default {
background: url("~@/assets/images/screen/tit.png") no-repeat center;
background-size: 100%;
margin: 0 auto;
}
.sub-header {
display: flex;
......
src/views/Screen/items/hjjc.vue
View file @ 25bf70ae
......@@ -83,6 +83,48 @@
<!-- 右侧 -->
<div class="sidebar sidebar-right">
<!-- 右上历史数据图组件 -->
<div class="sidebar-item H286 alert-analysis">
<div class="sub-title por">
<span>历史数据图</span>
</div>
<div class="sub-con histrybox">
<div class="histrubox_left">
<div class="echarts_title">
<img
src="../../../assets/images/screen/jianceshebei.png"
alt=""
class="img_class"
/>
<span>环境监测设备</span>
</div>
<div class="chart_bg"></div>
<div id="EchartsPieLeft" class="chart_box"></div>
<div class="chart_number">
<span>42个</span>
<br />
<span>总数</span>
</div>
</div>
<div class="histrubox_right">
<div class="echarts_title">
<img
src="../../../assets/images/screen/shipingshebei.png"
alt=""
class="img_class"
/>
<span>视频监测设备</span>
</div>
<div class="chart_bg_right"></div>
<div id="EchartsPieRight" class="chart_box"></div>
<div class="chart_number_right">
<span>42个</span>
<br />
<span>总数</span>
</div>
</div>
</div>
</div>
<!-- 右中设备监测曲线图 -->
<div class="sidebar-item H286 alert-analysis">
<div class="sub-title por">
<span>历史数据图</span>
......@@ -101,7 +143,7 @@
<div class="left-chart" ref="sssj" id="sssj"></div>
</div>
</div>
<!-- 右中历史数据图组件 -->
<!-- 右下设备监测曲线图 -->
<div class="sidebar-item H286 alert-analysis">
<div class="sub-title por">
<span>历史数据图</span>
......@@ -120,44 +162,6 @@
<div class="left-chart" ref="right" id="rclssj"></div>
</div>
</div>
<!-- 近7日设备监测报警信息 -->
<div class="sidebar-item H286 alert-analysis">
<div class="sub-title por"><span>近7日设备监测报警信息</span></div>
<div class="sub-con sub-con-scroll-table">
<div class="custom-header custom-header2">
<span class="custom-header-item custom-header-item2">名称</span>
<span class="custom-header-item custom-header-item2"
>报警时间</span
>
<span class="custom-header-item custom-header-item2">检测值</span>
</div>
<vue-seamless-scroll
class="warp"
:data="tableData2"
:class-option="classOption2"
@mousewheel.native="handleScrollR"
ref="RightScroll"
>
<ul class="item">
<li
class="table-item custom-item custom-item2"
v-for="(item, i) in tableData2"
:key="i"
>
<span class="custom-item-content custom-item-content2">{{
item.placeName
}}</span>
<span class="custom-item-content custom-item-content2">{{
item.alarmTime
}}</span>
<span class="custom-item-content custom-item-content2">{{
item.value
}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
<!-- 弹窗内容 -->
<transition name="el-fade-in">
......@@ -184,6 +188,9 @@ import {
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";
highcharts3d(Highcharts);
export default {
name: "cockpit",
components: {
......@@ -209,11 +216,6 @@ export default {
},
// 设备定位分类开关
checkList: ["2"],
// 右下滚动 参数
classOption2: {
singleHeight: 47,
hoverStop: true,
},
// 左侧实施数据列表
rightTopLssjData: {
list: [
......@@ -262,14 +264,7 @@ export default {
// 右上设备轮播名称
name: "",
},
// 右下 列表数据
tableData2: [
{
placeName: "",
alarmTime: "",
value: "",
},
],
// 中间图片数据列表
equipmentList: [
{
......@@ -292,6 +287,8 @@ export default {
],
},
],
//highCharts配置
highChartsOption: {},
};
},
mounted() {
......@@ -309,7 +306,435 @@ export default {
this.rcPlayFun(this.rightTopLssjData);
});
getDeviceStatus().then((res) => {
this.equipmentList = res.data;
// this.equipmentList = res.data;
this.equipmentList = [
{
name: "三中码头门",
x: "50",
y: "436",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "三中码头门风速",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "三中码头门风速",
equipmentTy: "风速",
isWarning: 0,
},
],
},
{
name: "二中空压机房",
x: "258",
y: "335",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "二中空压机房co",
equipmentTy: "一氧化碳500",
isWarning: 0,
},
{
equipmentName: "二中空压机房风速",
equipmentTy: "风速",
isWarning: 0,
},
],
},
{
name: "东风井",
x: "816",
y: "176",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "东风井风速",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "东风井开停",
equipmentTy: "开停",
isWarning: 0,
},
],
},
{
name: "二中避险硐室",
x: "75",
y: "318",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "二中避险硐室co",
equipmentTy: "一氧化碳500",
isWarning: 0,
},
{
equipmentName: "二中避险硐室氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "一中避险硐室",
x: "85",
y: "193",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "一中避险硐室co",
equipmentTy: "一氧化碳500",
isWarning: 0,
},
{
equipmentName: "一中避险硐室氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "五中避险硐室",
x: "102",
y: "687",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "五中避险硐室co",
equipmentTy: "一氧化碳500",
isWarning: 0,
},
{
equipmentName: "五中避险硐室氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "四中避险硐室",
x: "96",
y: "561",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "四中避险硐室",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "四中避险硐室",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "四中车场",
x: "53",
y: "557",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "四中车场",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
],
},
{
name: "一中主运输巷",
x: "185",
y: "204",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "一中主运输巷co",
equipmentTy: "一氧化碳500",
isWarning: 0,
},
{
equipmentName: "一中主运输巷风速",
equipmentTy: "风速",
isWarning: 0,
},
],
},
{
name: "二中主运输巷",
x: "187",
y: "331",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "二中主运输巷CO",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "二中主运输巷co",
equipmentTy: "一氧化碳500",
isWarning: 0,
},
{
equipmentName: "二中主运输巷风速",
equipmentTy: "风速",
isWarning: 0,
},
],
},
{
name: "二中中运输巷",
x: "316",
y: "338",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "二中中运输巷风速",
equipmentTy: "风速",
isWarning: 0,
},
],
},
{
name: "三中避险硐室",
x: "93",
y: "441",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "三中避险硐室co",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "三中避险硐室氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "五中车场",
x: "53",
y: "686",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "五中车场一氧化碳",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
],
},
{
name: "一中风机",
x: "145",
y: "199",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "一中风机",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "一中风机氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "一中西采区",
x: "341",
y: "222",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "一中西采区CO",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "一中西采区风速",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "一中西采区风机",
equipmentTy: "开停",
isWarning: 0,
},
{
equipmentName: "一中西采区",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "三中运输巷",
x: "518",
y: "474",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "三中运输巷CO",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "三中运输巷风速",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "三中运输巷风机",
equipmentTy: "开停",
isWarning: 0,
},
{
equipmentName: "三中运输巷氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "三中西采",
x: "566",
y: "499",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "三中西采",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "三中西采",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "三中西采",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "四中运输巷",
x: "206",
y: "584",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "四中运输巷",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "四中运输巷",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "四中运输巷风机",
equipmentTy: "开停",
isWarning: 0,
},
{
equipmentName: "四中运输巷",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "五中运输巷",
x: "166",
y: "707",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "五中运输巷",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "五中运输巷",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "五中运输巷风机",
equipmentTy: "开停",
isWarning: 0,
},
{
equipmentName: "五中运输巷",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "一中运输巷",
x: "367",
y: "208",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "一中运输巷风机",
equipmentTy: "开停",
isWarning: 0,
},
],
},
{
name: "二中西采区",
x: "237",
y: "369",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "二中西采区CO",
equipmentTy: "一氧化碳1000",
isWarning: 0,
},
{
equipmentName: "二中西采区风速",
equipmentTy: "风速",
isWarning: 0,
},
{
equipmentName: "二中西采区氧气",
equipmentTy: "氧气",
isWarning: 0,
},
],
},
{
name: "二中运输巷",
x: "415",
y: "341",
isWarning: 0,
monitorPositionList: [
{
equipmentName: "二中运输巷风机",
equipmentTy: "开停",
isWarning: 0,
},
],
},
];
});
getRecentSevDaysAlarms().then((res) => {
//数据空
......@@ -318,9 +743,97 @@ export default {
getRealData().then((res) => {
this.tableData1 = res.data;
});
//初始化highCharts
this.getHighChartsData();
},
created() {},
methods: {
getHighChartsData() {
this.highChartsOption = {
chart: {
type: "pie", //饼图
options3d: {
enabled: true, //使用3d功能
alpha: 60, //延y轴向内的倾斜角度
beta: 0,
},
backgroundColor: "rgba(64, 158, 255, 0)", // 不显示背景色
// spacingTop: -200, // 增加顶部间距
},
legend: {
enabled: true,
align: "center",
verticalAlign: "middle", // 修正为底部对齐
layout: "vertical", // 水平布局
y: 60, // 下移图例
itemStyle: {
color: "#fff",
fontSize: "12px", // 缩小字体
},
labelFormatter: function () {
return `${this.name}: ${this.y}`; // 在图例中显示数据
},
},
title: {
text: "", //图表的标题文字
},
subtitle: {
text: "", //副标题文字
},
plotOptions: {
pie: {
size: "55%", // 缩小饼图尺寸
allowPointSelect: false, // 允许点击,
cursor: "pointer",
innerSize: "65%", //内圆半径,
showInLegend: false,
center: ["50%", "34%"], // 调整饼图中心位置
depth: 15, //3d饼图的厚度,
dataLabels: {
enabled: false, // 启用数据标签
},
},
},
credits: {
enabled: false,
},
series: [
{
type: "pie",
name: "设备统计",
showInLegend: true,
data: [
{ name: "正常设备", y: 80, color: "RGBA(37, 160, 238, 1)" }, // 高数据部分
{ name: "异常设备", y: 20, color: "RGBA(252, 183, 62, 1)" }, // 低数据部分
],
startAngle: 0, //起始角度,
label: {
show: false,
position: "outside",
formatter: "{b}：{d}%",
normal: {
show: false,
fontSize: 40,
formatter: [" {a|{b}：{d}%}"].join("\n"),
rich: {
a: {
left: 20,
padding: [0, -140, 0, -180],
},
},
},
},
},
],
};
Highcharts.chart("EchartsPieLeft", this.highChartsOption);
this.highChartsOption.series[0].data = [
{ name: "在线", y: 40, color: "#02CD9B" }, // 高数据部分
{ name: "离线", y: 1, color: "RGBA(252, 183, 62, 1)" }, // 低数据部分
];
Highcharts.chart("EchartsPieRight", this.highChartsOption);
},
// 辅助方法：获取字段值
getItemField(item, fieldKey) {
return item[this.fieldMap[fieldKey]] || "";
......@@ -664,25 +1177,6 @@ export default {
this.$refs.sssjControl.yPos = 0;
}
},
// 右侧 鼠标滚动代码
handleScrollR(e) {
// 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变
// e.deltaY是滚动的距离
this.$refs.RightScroll.yPos = this.$refs.RightScroll.yPos - e.deltaY;
// 如果是正数 说明是往上滚
if (this.$refs.RightScroll.yPos > 0) {
this.$refs.RightScroll.yPos = 0;
return;
}
// 如果yPos超过内部实际高度的一半则重新到顶部滚动
// 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果
if (
Math.abs(this.$refs.RightScroll.yPos) >
this.$refs.RightScroll.realBoxHeight / 2
) {
this.$refs.RightScroll.yPos = 0;
}
},
},
filters: {
capitalize: function (value) {
......@@ -701,15 +1195,6 @@ export default {
},
immediate: true,
},
tableData2: {
handler() {
// 数据更改时也要加
this.$nextTick(() => {
this.$refs.RightScroll.reset();
});
},
immediate: true,
},
},
};
</script>
......@@ -731,6 +1216,104 @@ export default {
justify-content: space-between;
padding: 0 30px;
}
.histrybox {
width: 100%;
height: 100%;
display: flex;
/**均分2部分 */
.histrubox_left {
width: 50%;
height: calc(100% - 46px);
.echarts_title {
height: 25px;
text-align: center;
span {
color: rgba(42, 207, 255, 1);
font-weight: 400;
font-size: 16px;
color: #2acfff;
}
}
}
.histrubox_right {
width: 50%;
height: calc(100% - 46px);
.echarts_title {
height: 25px;
text-align: center;
span {
color: rgba(42, 207, 255, 1);
font-weight: 400;
font-size: 16px;
color: #2acfff;
}
}
}
.chart_box {
width: 100%;
height: calc(100% - 25px);
}
.img_class {
width: 29px;
height: 25px;
display: inline-block;
line-height: 25px;
margin-right: 12px;
margin-bottom: -7px;
}
.chart_bg {
position: absolute;
width: 140px;
height: 150px;
background-image: url("~@/assets/images/screen/chart.png");
background-repeat: no-repeat;
background-position: cover;
background-size: 100% 100%;
// -webkit-transform: rotateX(65deg);
transform: rotateX(53deg);
left: 45px;
top: 89px;
}
.chart_bg_right {
position: absolute;
width: 140px;
height: 150px;
background-image: url("~@/assets/images/screen/chart.png");
background-repeat: no-repeat;
background-position: cover;
background-size: 100% 100%;
// -webkit-transform: rotateX(65deg);
transform: rotateX(53deg);
left: 275px;
top: 89px;
}
.chart_number {
position: absolute;
width: 100px;
height: 100px;
top: 109px;
left: 66px;
text-align: center;
span:nth-child(1) {
font-size: 30px;
font-weight: 400;
}
}
.chart_number_right {
position: absolute;
width: 100px;
height: 100px;
top: 109px;
left: 296px;
text-align: center;
span:nth-child(1) {
font-size: 30px;
font-weight: 400;
}
}
}
/* 左右侧边栏 */
.sidebar {
......@@ -862,6 +1445,7 @@ export default {
.main-area {
width: calc(100% - 920px);
background: url("~@/assets/images/screen/bg3.png") no-repeat center;
background-size: contain;
text-align: center;
position: relative;
.dot {
......
src/views/Screen/items/rydw.vue
View file @ 25bf70ae
......@@ -7,16 +7,45 @@
<div class="sub-title por"><span>井下人员实时数据统计</span></div>
<div class="sub-con sub-con1">
<div class="sub-con-left por">
<div><p>带班领导：{{ subStaStatus.leader||0 }}</p></div>
<div>
<p>带班领导：{{ subStaStatus.leader || 0 }}</p>
</div>
</div>
<div class="sub-con-right">
<div><p class="p-out"><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></p></div>
<div><p class="p-out"><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></p></div>
<div>
<p class="p-out">
<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>
</p>
</div>
<div>
<p class="p-out">
<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>
</p>
</div>
</div>
</div>
</div>
<!-- 状态统计组件 -->
<div class="sidebar-item status-box">
......@@ -30,32 +59,53 @@
<div class="sub-title por"><span>井下人员实时状态</span></div>
<div class="sub-con sub-con-scroll-table">
<div class="custom-header">
<span class="custom-header-item" >姓名</span>
<span class="custom-header-item" >分站名称</span>
<span class="custom-header-item" >距离分站</span>
<span class="custom-header-item" >时间</span>
<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>
<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>
<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>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
<!-- 中间 -->
<div class="main-area">
<!-- 人员点位 -->
<div v-for="(subStation,index) in subStationMid" :key="subStation.addressId" class="parent-container">
<div
v-for="(subStation, index) in subStationMid"
:key="`station-${index}-${subStation.addressId}`"
class="parent-container"
>
<div
class="dot"
:class="`dot${index}`"
......@@ -66,46 +116,97 @@
<!-- <p style="font-size: 14px;">{{ subStation.location }}</p> -->
</div>
</div>
</div>
<!-- 右侧 -->
<div class="sidebar sidebar-right">
<!-- 中段基站分析 -->
<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-r">
<div class="sub-con-r-left"></div>
<div class="sub-con-r-right">
<div class="chart-container" id="rightTop" ref="rightTop">
<!-- <div class="sub-con-r-left" ></div> -->
<!-- <div class="sub-con-r-right">
<p><span>分站总数</span><span>---------</span><span>{{ subStaStatusData[0].num }}</span></p>
<p><span>运行中分站</span><span>---------</span><span>{{ subStaStatusData[2].num }}</span></p>
<p><span>休眠中分站</span><span>---------</span><span>{{ subStaStatusData[1].num }}</span></p>
</div> -->
</div>
<div class="legend-container">
<ul>
<li>
<span class="legend-color blue"></span><span>一中基站数</span>
<span class="txtblue">{{
stationData | stationDataValue("一中基站数")
}}</span>
</li>
<li>
<span class="legend-color cyan"></span><span>二中基站数</span>
<span class="txtcyan">{{
stationData | stationDataValue("二中基站数")
}}</span>
</li>
<li>
<span class="legend-color green"></span><span>三中基站数</span>
<span class="txtgreen">{{
stationData | stationDataValue("三中基站数")
}}</span>
</li>
<li>
<span class="legend-color yellow"></span><span>四中基站数</span>
<span class="txtyellow">{{
stationData | stationDataValue("四中基站数")
}}</span>
</li>
<li>
<span class="legend-color orange"></span><span>五中基站数</span>
<span class="txtorange">{{
stationData | stationDataValue("五中基站数")
}}</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 重点区域组件 -->
<!-- 近30天井下人数变化趋势图 -->
<div class="sidebar-item alert-analysis">
<div class="sub-title por"><span>近30天报警分析</span></div>
<div class="sub-title por"><span>近30天井下人数变化趋势图</span></div>
<div class="sub-con">
<div class="left-chart" ref="right" id="right"></div>
</div>
</div>
<!-- 报警信息流 -->
<!-- 当月人员下井次数排行榜 -->
<div class="sidebar-item alert-analysis">
<div class="sub-title por"><span>近7日井下人员报警信息</span></div>
<div class="sub-title por"><span>当月人员下井次数排行榜</span></div>
<div class="sub-con sub-con-scroll-table">
<div class="custom-header custom-header2">
<span class="custom-header-item custom-header-item2" >姓名</span>
<span class="custom-header-item custom-header-item2" >部门</span>
<span class="custom-header-item custom-header-item2" >报警时间</span>
<span class="custom-header-item custom-header-item2" >报警位置</span>
<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">{{
item.serialNumber
}}</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.frequency) }"
></div>
</div>
<vue-seamless-scroll :data="recentSevDaysAlarmsData" class="warp " :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" v-text="item.perName"></span>
<span class="custom-item-content custom-item-content2" v-text="item.departName"></span>
<span class="custom-item-content custom-item-content2" v-text="item.alarmTime"></span>
<span class="custom-item-content custom-item-content2" v-text="item.location"></span>
<span class="custom-item-content custom-item-content2">{{
item.frequency
}}</span>
</li>
</ul>
</vue-seamless-scroll>
......@@ -120,9 +221,15 @@
</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>
......@@ -135,27 +242,63 @@
<span>时间</span>
<span>进入区域</span>
<span>入井时间</span>
</div>
<vue-seamless-scroll :data="perOnlineSituationData" class="warp2 " :class-option="classOption2">
<ul v-if="perOnlineSituationData.length>0">
<li v-for="(item, index) in perOnlineSituationData" :key="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>
<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>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</template>
<script>
......@@ -167,46 +310,72 @@ import {
realTimeStatus,
stationStatus,
recentThDaysAlarms,
recentSevDaysAlarms,
perStationInfo,
perOnlineSituation,
rydwMidStation,
monthlyRankings,
} from "@/api/tyler/screen";
export default {
name: "cockpit",
data() {
return {
dialogTableVisible:false,
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
dialogTableVisible: false,
gridData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
],
realTimeStatusData: [
{ perName: "陈玉强", location: "一中运输巷", distance: 14.21, lastTime: "2025-01-10 14:21:31" },
{
perName: "陈玉强",
location: "一中运输巷",
distance: 14.21,
lastTime: "2025-01-10 14:21:31",
},
],
recentSevDaysAlarmsData: [
{ perName: "陈玉强", departName: "生产部", alarmTime: "2025-01-10 14:21:31", location: "四中车场" },
],
subStaStatus:[],
realTimeDistributionData:[],
subStaStatusData:[
{num:0},
{num:0},
{num:0},
{
serialNumber: "1",
name: "张三",
frequency: "45",
},
{
serialNumber: "1",
name: "张三",
frequency: "32",
},
{
serialNumber: "1",
name: "张三",
frequency: "31",
},
{
serialNumber: "1",
name: "张三",
frequency: "29",
},
],
recentThDaysAlarmsData:[],
subStaStatus: [],
realTimeDistributionData: [],
subStaStatusData: [{ num: 0 }, { num: 0 }, { num: 0 }],
recentThDaysAlarmsData: [],
classOption: {
singleHeight: 47,
hoverStop: true,
......@@ -217,44 +386,48 @@ export default {
hoverStop: true,
autoPlay: true,
},
perOnlineSituationData:[],
subStationMid:[
perOnlineSituationData: [],
subStationMid: [
{
"count": 0,
"location": "一中车场",
"addressId": 1
}
count: 0,
location: "一中车场",
addressId: 1,
},
],
stationPositions: {
1: { left: '84px', top: '206px' },
2: { left: '480px', top: '230px' },
4: { left: '84px', top: '342px' },
5: { left: '148px', top: '360px' },
6: { left: '194px', top: '362px' },
7: { left: '84px', top: '440px' },
8: { left: '200px', top: '470px' },
9: { left: '816px', top: '70px' },//东风井井口
10: { left: '136px', top: '672px' },
11: { left: '84px', top: '540px' },
12: { left: '84px', top: '650px' },
13: { left: '152px', top: '212px' },
14: { left: '74px', top: '88px' },//小高尖井口
15: { left: '342px', top: '230px' },
16: { left: '640px', top: '220px' },
17: { left: '730px', top: '20px' },
18: { left: '265px', top: '377px' },
19: { left: '200px', top: '400px' },
20: { left: '534px', top: '390px' },
21: { left: '675px', top: '367px' },
22: { left: '400px', top: '500px' },
23: { left: '300px', top: '530px' },
24: { left: '500px', top: '518px' },
25: { left: '580px', top: '500px' },
26: { left: '350px', top: '616px' },
27: { left: '252px', top: '590px' },
28: { left: '766px', top: '206px' },
}
1: { left: "84px", top: "206px" },
2: { left: "480px", top: "230px" },
4: { left: "84px", top: "327px" },
5: { left: "148px", top: "335px" },
6: { left: "194px", top: "342px" },
7: { left: "84px", top: "448px" },
8: { left: "200px", top: "470px" },
9: { left: "816px", top: "70px" }, //东风井井口
10: { left: "136px", top: "713px" },
11: { left: "84px", top: "573px" },
12: { left: "84px", top: "703px" },
13: { left: "152px", top: "212px" },
14: { left: "74px", top: "88px" }, //小高尖井口
15: { left: "342px", top: "230px" },
16: { left: "640px", top: "220px" },
17: { left: "730px", top: "20px" },
18: { left: "265px", top: "344px" },
19: { left: "234px", top: "377px" },
20: { left: "534px", top: "356px" },
21: { left: "675px", top: "343px" },
22: { left: "400px", top: "479px" },
23: { left: "317px", top: "528px" },
24: { left: "500px", top: "518px" },
25: { left: "580px", top: "500px" },
26: { left: "350px", top: "609px" },
27: { left: "252px", top: "599px" },
28: { left: "766px", top: "206px" },
},
//中段基站数据
stationData: [
{ value: 5, name: "一中基站数", itemStyle: { color: "#007BFF" } },
],
};
},
mounted() {
......@@ -267,16 +440,33 @@ export default {
this.subStationObj();
this.subStationStatusObj();
this.realTimeStatusList();
this.recentSevDaysAlarmsList();
this.perStationInfoList();
this.getrydwMidStation();
this.getMonthlyRankings();
},
methods: {
//当月人员下井次数排行榜数据
getMonthlyRankings() {
monthlyRankings().then((res) => {
if (res.code !== 200) return;
this.recentSevDaysAlarmsData = res.data;
});
},
//控制进度条宽度
progressWidth(frequency) {
//最大值从recentSevDaysAlarmsData中获取，且保证位数为0
const maxFrequencyData = this.recentSevDaysAlarmsData.reduce(
(max, item) => Math.max(max, Math.ceil(item.frequency / 10) * 10),
0
);
const width = (frequency / maxFrequencyData) * 100 + "%";
return width;
},
// 分站状态分析
subStationObj(){
realTimeStatistics().then(res => {
subStationObj() {
realTimeStatistics().then((res) => {
this.subStaStatus = res.data;
})
});
},
//区域人数实时分布图
async realTimeDistributionList() {
......@@ -284,32 +474,26 @@ export default {
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 => {
realTimeStatusList() {
realTimeStatus().then((res) => {
this.realTimeStatusData = res.data;
})
});
},
// 分站状态分析
subStationStatusObj(){
stationStatus().then(res => {
subStationStatusObj() {
stationStatus().then((res) => {
this.subStaStatusData = res.data;
})
},
//近7日井下人员报警信息
recentSevDaysAlarmsList(){
recentSevDaysAlarms().then(res => {
this.recentSevDaysAlarmsData = res.data;
})
});
},
//中间分站信息
perStationInfoList(){
perStationInfo().then(res => {
perStationInfoList() {
perStationInfo().then((res) => {
this.subStationMid = res.data;
})
});
},
// 辅助方法：获取字段值
getItemField(item, fieldKey) {
......@@ -317,99 +501,114 @@ export default {
},
async areaCharts() {
let that = this;
let myChart = echarts.init(document.getElementById('left1'));
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 ={
let xAxisData = that.realTimeDistributionData.map((item) => item.name);
let yAxisData = that.realTimeDistributionData.map((item) => item.value);
let option = {
title: {
text: "",
x: "center",
y:"4%",
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',
xAxis: [
{
type: "category",
data: xAxisData,
axisLine: {
show:true,
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
color: "rgba(255,255,255,0.12)",
},
},
axisLabel: {
show:true,
show: true,
margin: 10,
color: '#fff',
color: "#fff",
textStyle: {
fontSize: 12
fontSize: 12,
},
},
},
}],
yAxis: [{
],
yAxis: [
{
axisLabel: {
show:true,
formatter: '{value}',
color: '#B7CCDA',
show: true,
formatter: "{value}",
color: "#B7CCDA",
textStyle: {
fontSize: 14
fontSize: 14,
},
},
axisTick:{ //y轴刻度线
show:true,
color: '#e2e9ff',
axisTick: {
//y轴刻度线
show: true,
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,
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
}
}],
series: [{
type: 'bar',
color: "rgba(255,255,255,0.12)",
},
},
},
],
series: [
{
type: "bar",
data: yAxisData,
barWidth: '16px',
barWidth: "16px",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#37BBFF' // 0% 处的颜色
}, {
color: "#37BBFF", // 0% 处的颜色
},
{
offset: 1,
color: '#1C3454' // 100% 处的颜色
}], false),
color: "#1C3454", // 100% 处的颜色
},
],
false
),
// barBorderRadius: [30, 30, 8, 8],
// shadowColor: 'rgba(0,160,221,1)',
// shadowBlur: 4,
}
},
},
label: {
normal: {
......@@ -417,18 +616,17 @@ 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);
setTimeout(() => {
myChart.resize();
}, 600);
},
async recentThDaysAlarmsList() {
......@@ -436,27 +634,21 @@ export default {
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);
}
},
async alarm30(){
//30天井下人数变化趋势
async alarm30() {
let that = this;
await this.recentThDaysAlarmsList();
let salvProName =that.recentThDaysAlarmsData.map(item => item.name);
let salvProValue = that.recentThDaysAlarmsData.map(item => item.num);
let myChart = echarts.init(document.getElementById('right'));
var salvProMax = []; //背景按最大值
for (let i = 0; i < salvProValue.length; i++) {
salvProMax.push(salvProValue[0]);
}
let option ={
console.log(this.recentThDaysAlarmsData, "this.recentThDaysAlarmsData");
let myChart = echarts.init(document.getElementById("right"));
let option = {
grid: {
left: "4%",
right: "0%",
left: "3%",
right: "3%",
bottom: "2%",
top: "2%",
top: "3%",
containLabel: true,
},
tooltip: {
......@@ -464,107 +656,157 @@ export default {
axisPointer: {
type: "none",
},
//显示日期和人数
formatter: function (params) {
return params[0].name + " : " + params[0].value;
let date = params[0].name; // 日期
let value = params[0].value; // 人数
return `${date}<br/>人数: ${value}`;
},
},
xAxis: {
// show: false,
type: "value",
axisLabel: {
show:true,
color: '#B7CCDA',
textStyle: {
fontSize: 14
},
},
axisLine: {
show: false,
},
splitLine: {
type: "category",
data: this.recentThDaysAlarmsData.map((item) => item.name), // 假设日期是字符串类型
axisTick: {
show: false,
},
},
yAxis: [
{
type: "category",
inverse: true,
//隔5个显示
axisLabel: {
show: true,
textStyle: {
interval: 5,
color: "#fff",
fontSize: 14
fontSize: 12,
},
},
yAxis: {
type: "value",
//虚线，取整
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
show: true,
lineStyle: {
color: "#fff",
type: "dashed",
},
data: salvProName,
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: false,
axisLabel: {
textStyle: {
color: "#ffffff",
fontSize: "14",
},
color: "#fff",
fontSize: 12,
},
data: salvProValue,
},
],
series: [
{
name: "值",
type: "bar",
zlevel: 1,
data: this.recentThDaysAlarmsData.map((item) => item.value), // 假设值是数字类型,
type: "line",
stack: "Total",
//线条颜色
itemStyle: {
normal: {
// barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
color: "#37BBFF",
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#1C3454",
color: "rgb(55, 184, 251,0.5)",
},
{
offset: 1,
color: "#37BBFF",
color: "rgb(55, 184, 251,0.1)",
},
]),
},
emphasis: {
focus: "series",
},
},
barWidth: 10,
data: salvProValue,
],
};
myChart.setOption(option);
setTimeout(() => {
myChart.resize();
}, 600);
},
//获取中段基站数据
getrydwMidStation() {
rydwMidStation().then((res) => {
if (res.code !== 200) {
return;
}
// 创建名称映射表;
const stationMap = {
一中: { 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) => ({
value: item.value,
name: item.name + stationMap[item.name].suffix,
itemStyle: { color: stationMap[item.name].color },
}));
this.$nextTick(() => {
console.log(this.stationData);
this.rightTopChart(); // 确保DOM更新后执行
});
});
},
//中段基站分析
rightTopChart() {
let myChart = echarts.init(document.getElementById("rightTop"));
let option = {
polar: {
radius: [30, "90%"],
},
angleAxis: {
max: 10,
startAngle: 90,
show: false, // 显示坐标轴
},
radiusAxis: {
type: "category",
data: this.stationData.map((item) => item.name),
axisLine: {
show: false, // 显示径向轴
lineStyle: {
color: "#fff",
},
},
axisLabel: {
show: false, // 显示分类标签
color: "#fff",
},
},
series: [
// 数值条（实际颜色）
{
name: "背景",
type: "bar",
barWidth: 10,
barGap: "-100%",
data: salvProMax,
coordinateSystem: "polar",
stack: "a",
data: this.stationData.map((d) => d.value),
itemStyle: {
normal: {
color: "rgba(24,31,68,1)",
barBorderRadius: 30,
color: (params) =>
this.stationData[params.dataIndex].itemStyle.color,
},
},
// 背景条（灰色填充）
{
type: "bar",
coordinateSystem: "polar",
stack: "a",
data: this.stationData.map(() => 10), // 每个项总长度10
itemStyle: {
color: "RGBA(28, 57, 92, 0.3)",
},
},
],
};
myChart.setOption(option);
setTimeout(() => {
myChart.resize();
}, 600);
},
//自动滚动
autoScroll() {
......@@ -584,9 +826,9 @@ export default {
},
//停止滚动
cancelScroll() {
window.cancelAnimationFrame(this.scrolltimer3)
window.cancelAnimationFrame(this.scrolltimer3);
},
goToSys(){
goToSys() {
var link = this.$router.resolve({
path: "/",
});
......@@ -597,31 +839,38 @@ export default {
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
if (res.data && res.data.length > 0) {
this.perOnlineSituationData = res.data;
this.dialogTableVisible = true;
}
})
});
},
closeDialog() {
this.dialogTableVisible = false;
this.perOnlineSituationData = []
}
this.perOnlineSituationData = [];
},
},
filters: {
stationDataValue(data, value) {
//当data的name等于value时，返回data的value
return data.find((item) => item.name === value)?.value + "个" || 0;
},
},
};
</script>
<style lang="scss" scoped>
.por{position: relative;}
.sidebar-left{
.por {
position: relative;
}
.sidebar-left {
transform-origin: left center;
transform: scaleX(1) perspective(610px) rotateY(5deg);
}
.sidebar-right{
transform-origin:center right ;
.sidebar-right {
transform-origin: center right;
transform: scaleX(1) perspective(610px) rotateY(-5deg);
}
/* 主体内容 */
......@@ -634,8 +883,7 @@ export default {
// overflow: hidden;
display: flex;
justify-content: space-between;
padding:0 30px;
padding: 0 30px;
}
/* 左右侧边栏 */
......@@ -646,18 +894,22 @@ export default {
// display: flex;
// flex-direction: column;
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-rows: repeat(3, 1fr);
gap: 2px;
margin-top: -10px;
}
.sidebar-item{
.sidebar-item {
width: 100%;
height: 286px;
margin-bottom: 30px;
background: linear-gradient(180deg, rgba(1,33,58,.2) 0%, rgba(8,132,233,.2) 100%);
background: linear-gradient(
180deg,
rgba(1, 33, 58, 0.2) 0%,
rgba(8, 132, 233, 0.2) 100%
);
position: relative;
&::before{
content: '';
&::before {
content: "";
width: 460px;
height: 4px;
position: absolute;
......@@ -667,89 +919,91 @@ export default {
right: 0;
z-index: 20;
}
.sub-title{
.sub-title {
width: 100%;
height: 46px;
background: url("~@/assets/images/screen/title1.png") no-repeat center;
font-weight: bold;
span{
span {
position: absolute;
top:-10px;
left:30px;
top: -10px;
left: 30px;
font-size: 22px;
}
}
.sub-con1{
.sub-con1 {
display: flex;
justify-content: space-evenly;
align-items: center;
.sub-con-left{
div{
.sub-con-left {
div {
margin-top: -40px;
width: 144px;
height: 178px;
background: url("~@/assets/images/screen/icon1.png") no-repeat center;
background-size: contain;
p{
p {
font-size: 18px;
color: #FFFFFF;
background: linear-gradient(180deg, #FFED9B 0%, #FFFFFF 48.9990234375%, #FFE25D 100%);
color: #ffffff;
background: linear-gradient(
180deg,
#ffed9b 0%,
#ffffff 48.9990234375%,
#ffe25d 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
font-weight: bold;
}
}
}
.sub-con-right{
div{
.sub-con-right {
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;
.p-out{
.p-out {
width: 100%;
position: absolute;
left:30px;
top:-16px;
left: 30px;
top: -16px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-right: 50px;
span{
span {
font-size: 30px;
color: #FFD929;
color: #ffd929;
text-indent: 15px;
font-family: 'number';
font-family: "number";
margin-top: -4px;
&::before{
content: '';
&::before {
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;
top: 10px;
z-index: 20;
}
}
}
&:nth-child(1) p.p-out span{
color: #29CAFF;
&:nth-child(1) p.p-out span {
color: #29caff;
}
&:nth-child(2) p.p-out span{
color: #00FFC0;
&:nth-child(2) p.p-out span {
color: #00ffc0;
}
}
}
}
}
......@@ -768,105 +1022,134 @@ export default {
border-radius: 8px;
}
/* 底部信息栏 */
// .footer {
// height: 120px;
// margin-top: 20px;
// background: rgba(0, 72, 143, 0.6);
// border-radius: 8px;
// display: flex;
// align-items: center;
// padding: 0 30px;
// }
.left-chart{
.left-chart {
width: 100%;
height: 14em;
}
.sub-con-scroll-table{
.sub-con-scroll-table {
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.custom-header{
.custom-header {
width: 460px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
text-align: center;
color: #2ED5FF;
color: #2ed5ff;
margin-bottom: 10px;
font-weight: bold;
}
.custom-item{
.custom-item {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
text-align: center;
}
.custom-header-item{
.custom-header-item {
display: flex;
justify-content: center;
align-items: center;
}
.custom-header2{
.custom-header2 {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 3fr 2fr;
text-align: center;
color: #2ED5FF;
color: #2ed5ff;
}
.custom-item2{
.custom-item2 {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 3fr 2fr;
text-align: center;
}
.sub-con-r{
.sub-con-r {
width: 100%;
display: flex;
justify-content: space-evenly;
justify-content: flex-start; // 改为左对齐
align-items: center;
gap: 10px; // 添加间距控制
height: calc(100% - 70px);
.sub-con-r-left{
width: 127px;
height: 161px;
background: url("~@/assets/images/screen/icon3.png") no-repeat center;
background-size: 100%;
.chart-container {
width: 180px;
height: 180px;
margin: 0;
margin-left: 20px;
flex-shrink: 0; // 防止图表容器被压缩
}
.sub-con-r-right{
width: 250px;
.legend-container {
margin-left: 10px; // 缩小左侧间距
text-align: left;
ul {
list-style-type: none; // 新增该属性去除默认点状样式
display: flex;
flex-direction: column;
// gap: 10px;
p{
display: grid;
grid-template-columns: 4fr 4fr 1fr;
font-size: 18px;
line-height: 24px;
color: #BBD7EA;
background-color: rgba(61, 98, 147,.2);
padding:10px 10px;
text-align: justify;
box-sizing: border-box;
span:nth-child(2){
color: rgba(187, 215, 234,.2);
gap: 10px; // 确保垂直间距生效
padding-left: 0; // 移除默认padding
li {
width: 230px;
height: 28px;
background: #173253;
border-radius: 14px;
padding-left: 30px;
line-height: 28px;
.legend-color {
display: inline-block;
width: 15px;
height: 8px;
margin-right: 25px;
margin-bottom: 2px;
}
span:nth-child(2) {
// 选择第二个span
color: #fff; // 示例样式
margin-right: 22px;
}
.blue {
background-color: #007bff;
}
.txtblue {
color: #007bff;
}
.cyan {
background-color: #00cccc;
}
.txtcyan {
color: #00cccc;
}
.green {
background-color: #28a745;
}
.txtgreen {
color: #28a745;
}
.yellow {
background-color: #ffc107;
color: #ffc107;
}
.txtyellow {
color: #ffc107;
}
.orange {
background-color: #ff5733;
color: #ff5733;
}
.txtorange {
color: #ff5733;
}
span:nth-child(3){
font-weight: bold;
font-size: 24px;
color: #BBD7EA;
background: linear-gradient(0deg, #47C5FF 0%, #FDFEFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
.warp {
height: calc(100% - 80px);
width: 460px;
......@@ -877,8 +1160,7 @@ export default {
padding: 0;
margin: 10px auto 0;
width: 100%;
li.custom-item{
li.custom-item {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
......@@ -887,26 +1169,95 @@ export default {
margin-bottom: 5px;
height: 36px;
font-size: 16px;
color: #BBD7EA;
color: #bbd7ea;
position: relative;
background-color: rgba(61, 98, 147,.2);
span{
background-color: rgba(61, 98, 147, 0.2);
span {
display: flex;
justify-content: center;
align-items: center;
}
}
li.custom-item2{
li.custom-item2 {
display: grid;
grid-template-columns: 1fr 1fr 3fr 2fr;
text-align: center;
}
}
}
.parent-container{
.warp_ranking {
height: calc(100% - 80px);
width: 460px;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding-left: 10px;
margin: 10px auto 0;
width: 100%;
li {
&.custom-item {
width: calc(100% - 10px);
display: grid;
grid-template-columns: 0.5fr 1fr 3fr 0.5fr;
text-align: center;
margin-bottom: 5px;
height: 36px;
font-size: 16px;
color: #bbd7ea;
position: relative;
background-color: rgba(61, 98, 147, 0.2);
span {
display: flex;
justify-content: center;
align-items: center;
}
}
&.custom-item2 {
display: grid;
grid-template-columns: 0.2fr 0.5fr 3fr 0.5fr;
text-align: center;
line-height: 36px;
.progressbar {
display: block;
width: 100%;
height: 8px;
margin: auto 0; // 添加垂直居中
background-color: RGBA(29, 47, 71, 1);
.progress {
height: 100%;
background: linear-gradient(270deg, #37bbff 0%, #1c3454 100%);
}
}
}
span:nth-child(1),
span:nth-child(4) {
color: rgba(55, 187, 255, 1);
}
}
/**选中前三个li */
li:nth-child(-n + 3) {
.progressbar {
.progress {
background: linear-gradient(
270deg,
#ffbe23 0%,
rgba(255, 190, 35, 0.05) 100%
);
}
}
/**选中第一个和第二个span */
span:nth-child(1),
span:nth-child(4) {
color: #ffbe23;
}
}
}
}
.parent-container {
position: relative;
}
.dot{
.dot {
width: 42px;
height: 53px;
background: url("~@/assets/images/screen/icon4.png") no-repeat center;
......@@ -914,21 +1265,20 @@ export default {
cursor: pointer;
position: absolute;
z-index: 10;
p{
p {
font-size: 20px;
color: #BBD7EA;
background: linear-gradient(0deg, #47C5FF 0%, #FDFEFF 100%);
color: #bbd7ea;
background: linear-gradient(0deg, #47c5ff 0%, #fdfeff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
text-align: center;
margin: 0;
}
&:hover{
&:hover {
background: url("~@/assets/images/screen/icon5.png") no-repeat center;
background-size: 100%;
z-index: 20;
}
}
......@@ -943,9 +1293,9 @@ export default {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
width: 1262px;
background: linear-gradient(0deg, #062451 0%, #09162D 100%);
box-shadow: 0px 15px 11px 2px rgba(0,20,39,0.31);
border: 2px solid #11B9FF;
background: linear-gradient(0deg, #062451 0%, #09162d 100%);
box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
border: 2px solid #11b9ff;
}
.dia-header {
......@@ -953,30 +1303,30 @@ export default {
justify-content: space-between;
align-items: center;
.dia-tit{
.dia-tit {
width: 1140px;
height: 46px;
font-size: 22px;
color: #FFFFFF;
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;
padding-bottom: 0;
span{
span {
position: absolute;
left: 20px;
top: -14px;
}
}
}
.close-btn {
cursor: pointer;
position: relative;
span{
span {
font-size: 28px;
position: absolute;
left: -20px;
......@@ -986,48 +1336,52 @@ export default {
.dialog-content {
text-align: center;
.sub-info{
.sub-info {
width: 50%;
display: flex;
justify-content: space-between;
align-items: center;
text-indent: 1em;
font-size: 18px;
color: #36FFF8;
color: #36fff8;
}
}
.dia-table-header{
.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 ;
grid-template-columns: 3fr 2fr 2fr 2fr 2fr 2fr 2fr 4fr 2fr 4fr;
text-align: center;
font-size: 16px;
color: #2ED5FF;
color: #2ed5ff;
line-height: 36px;
font-weight: bold;
}
.warp2{
.warp2 {
width: 100%;
max-height: 400px;
overflow: hidden;
ul{
ul {
margin: 0;
padding: 0;
li{
li {
margin-bottom: 20px;
line-height: 40px;
font-size: 18px;
background-color: rgba(61, 98, 147,.2);
background-color: rgba(61, 98, 147, 0.2);
}
}
}
.custom-item3{
.custom-item3 {
width: 100%;
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;
}
.overlay {
......
src/views/Screen/items/tfxt.vue 0 → 100644
View file @ 25bf70ae
<template>
<div class="main-content">
<div class="content">
<!--一中23线风机dom-->
<div class="fengji" style="top: 74px; left: 96px">
<div class="fengji-title">一中23线风机</div>
<div class="fengji-content">
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
</div>
<div class="fengji-button">本地控制</div>
<div class="fengji-msg">
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
<p>设定频率：100HZ</p>
<p>风压：10Kpa</p>
<p>风速：10m/s</p>
<p>风量：m3/s</p>
<p>前轴温：10°℃</p>
<p>后轴温：10°℃</p>
<p>电机温度：10°℃</p>
<p>前振动：10000mm/s</p>
<p>后振动：10000mm/s</p>
</div>
</div>
<div class="arrow-psition" style="top: 132px; left: 300px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 132px; left: 998px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 132px; left: 1398px">
<div class="fengji-arrow"></div>
</div>
<!--一中副扇风机dom-->
<div class="fengji" style="left: 760px; top: 74px">
<div class="fengji-title">一中副扇风机</div>
<div class="fengji-content">
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
</div>
<div class="fengji-button">本地控制</div>
<div class="fengji-msg msg-postion">
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
</div>
</div>
<!--地面空压机-->
<div class="kongya" style="left: 1160px; top: 44px">
<div class="kongya-title">地面空压机</div>
<img src="../../../assets/images/screen/tfxt/device2.png" alt="" />
</div>
<!--东风井风机dom-->
<div class="fengji" style="right: 80px; top: 24px">
<div
class="fengji-title"
style="text-align: right; padding-right: 20px"
>
东风进风机
</div>
<div class="fengji-content">
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
</div>
<div class="fengji-button" style="margin-left: 55px">本地控制</div>
<div class="fengji-msg" style="position: absolute; right: -30px">
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
<p>设定频率：100HZ</p>
<p>风压：10Kpa</p>
<p>风速：10m/s</p>
<p>风量：m3/s</p>
<p>前轴温：10°℃</p>
<p>后轴温：10°℃</p>
<p>电机温度：10°℃</p>
<p>前振动：10000mm/s</p>
<p>后振动：10000mm/s</p>
</div>
</div>
<div class="arrow-psition" style="top: 302px; left: 558px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 302px; left: 758px">
<div class="fengji-arrow"></div>
</div>
<!--二中空压机-->
<div class="kongya" style="left: 360px; top: 274px">
<div class="kongya-title">二中空压机</div>
<img src="../../../assets/images/screen/tfxt/device2.png" alt="" />
</div>
<!--二中副扇风机dom-->
<div class="fengji" style="left: 960px; top: 247px">
<div
class="fengji-title"
style="text-align: right; padding-right: 20px"
>
二中副扇风机
</div>
<div class="fengji-content">
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
</div>
<div class="fengji-button" style="margin-left: 55px">本地控制</div>
<div
class="fengji-msg"
style="position: absolute; right: -190px; top: 20px"
>
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
</div>
</div>
<div class="arrow-psition" style="top: 472px; left: 288px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 472px; left: 888px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 472px; left: 1088px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition bevel" style="top: 472px; left: 1268px">
<div class="fengji-arrow"></div>
</div>
<!--三中副扇风机dom-->
<div class="fengji" style="left: 660px; top: 415px">
<div class="fengji-title">三中副扇风机</div>
<div class="fengji-content">
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
</div>
<div class="fengji-button">本地控制</div>
<div class="fengji-msg msg-postion">
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
</div>
</div>
<!--四中副扇风机dom-->
<div class="fengji" style="left: 1260px; top: 583px">
<div
class="fengji-title"
style="text-align: right; padding-right: 20px"
>
四中副扇风机
</div>
<div class="fengji-content">
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
</div>
<div class="fengji-button" style="margin-left: 55px">本地控制</div>
<div
class="fengji-msg"
style="position: absolute; right: -190px; top: 20px"
>
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
</div>
</div>
<div class="arrow-psition" style="top: 642px; left: 288px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 642px; left: 588px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition" style="top: 642px; left: 888px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition bevel" style="top: 642px; left: 1068px">
<div class="fengji-arrow"></div>
</div>
<!--五中副扇风机dom-->
<div class="fengji" style="left: 600px; top: 750px">
<div class="fengji-title">五中副扇风机</div>
<div class="fengji-content">
<img
src="../../../assets/images/screen/tfxt/device1.png"
alt=""
srcset=""
/>
<div class="fengji-control">
<div class="fengji-icon"></div>
<div class="fengji-lamp"></div>
</div>
</div>
<div class="fengji-button">本地控制</div>
<div class="fengji-msg msg-postion">
<p>电源电压：10V</p>
<p>电机电流：10A</p>
<p>运行频率：100HZ</p>
</div>
</div>
<div class="arrow-psition" style="top: 812px; left: 188px">
<div class="fengji-arrow"></div>
</div>
<div class="arrow-psition bevel" style="top: 812px; left: 868px">
<div class="fengji-arrow"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
props: {},
components: {},
data() {
return {};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
.main-content {
background: url("~@/assets/images/screen/tfxt/bg.png") no-repeat center;
padding-top: 100px;
.content {
width: 100%;
height: 100%;
position: relative;
background: url("~@/assets/images/screen/tfxt/line.png") no-repeat center;
background-size: 90% 95%;
background-position-x: 50px;
.fengji {
position: absolute;
width: 195px;
.fengji-title {
font-weight: 400;
font-size: 20px;
color: #ffd200;
line-height: 30px;
margin: 0;
padding-left: 5px;
}
.fengji-content {
display: flex;
img {
width: 141px;
height: 141px;
padding: 10px 18px;
}
.fengji-control {
padding-top: 16px;
.fengji-icon {
width: 53px;
height: 53px;
background: url("~@/assets/images/screen/tfxt/icon2.png") no-repeat
center;
background-size: 100% 100%;
//需要这个元素做旋转动画，围着自身圆心一直旋转
animation: rotate 2s linear infinite;
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
.fengji-lamp {
width: 53px;
height: 53px;
background: url("~@/assets/images/screen/tfxt/icon4.png") no-repeat
center;
background-size: 100%;
position: relative;
}
}
}
.fengji-button {
width: 140px;
height: 36px;
border-radius: 4px;
border: 2px solid #00d8ff;
font-weight: 400;
font-size: 18px;
color: #ffffff;
line-height: 34px;
text-align: center;
background: #0387c8;
}
.fengji-msg {
padding: 17px;
border: 2px solid #00ccff;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 18px;
color: #11e0ff;
line-height: 28px;
background: #05162b;
margin-top: 15px;
margin-left: -15px;
p {
margin: 0%;
}
&.msg-postion {
position: absolute;
top: 30px;
left: -180px;
}
}
}
.kongya {
position: absolute;
.kongya-title {
font-weight: 400;
font-size: 20px;
color: #ffd200;
line-height: 30px;
margin: 0;
padding-left: 5px;
text-align: center;
}
img {
width: 171px;
height: 76px;
}
}
.arrow-psition {
position: absolute;
.fengji-arrow {
width: 53px;
height: 53px;
position: absolute;
background: url("~@/assets/images/screen/tfxt/icon1.png") no-repeat
center;
//这里制作动画淡入切向右移动100px淡出，
animation: arrow 2s linear infinite;
@keyframes arrow {
0% {
opacity: 0;
transform: translateX(0px);
}
25% {
opacity: 1;
transform: translateX(25px);
}
75% {
transform: translateX(75px);
opacity: 1;
}
100% {
transform: translateX(100px);
opacity: 0;
}
}
}
&.bevel {
// 旋转45度
transform: rotate(-45deg);
}
}
}
}
</style>
src/views/Screen/items/tsj.vue 0 → 100644
View file @ 25bf70ae
<template>
<div class="main-content">
<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">{{ 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">0.00</span>
</div>
</div>
<div class="center">
<div class="center-box">
<div class="dianti-target" style="top: 300px; left: 170px">去井口</div>
<div class="dianti-peizhong" style="top: 150px; left: 365px"></div>
<div class="dianti-box" style="top: 450px; left: 413px"></div>
<div class="dianti-louceng" style="top: 290px; left: 526px">
<div class="louceng-item">一中</div>
<div class="louceng-item">二中</div>
<div class="louceng-item">三中</div>
<div class="louceng-item">四中</div>
<div class="louceng-item">五中</div>
</div>
</div>
</div>
<div class="right">
<div class="right-item-class" v-for="item in rightList" :key="item.name">
<div class="left-item-box">{{ item.name }}</div>
<div class="right-item-box">
<div class="right-item-box-item">{{ item.value1 }}</div>
<div class="right-item-box-item">{{ item.value2 }}</div>
<div class="right-item-box-item">{{ item.value3 }}</div>
<div class="right-item-box-item">{{ item.value4 }}</div>
</div>
</div>
<div class="right-item-botton">
<div class="title">井下人工安全巡检</div>
<div class="right-item-body">
<div class="table-header">
<span>检查人</span>
<span>检查点位</span>
<span>是否正常</span>
<span>日期</span>
</div>
<div class="table-content" v-for="item in tableList" :key="item.name">
<span>{{ item.name }}</span>
<span>{{ item.point }}</span>
<span>{{ item.isNormal }}</span>
<span>{{ item.date }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
props: {},
components: {},
data() {
return {
leftList: [
{ icon: "icon1", name: "主控速度", value: "0.00m/s" },
{ icon: "icon1", name: "编码器速度", value: "0.00m/s" },
{ icon: "icon1", name: "给定速度", value: "0.00m/s" },
{ icon: "icon1", name: "从编码器速度", value: "0.00m/s" },
{ icon: "icon2", name: "主罐位置", value: "0.00m" },
{ icon: "icon2", name: "位置偏差", value: "0.00m" },
{ icon: "icon3", name: "电枢电流", value: "0.00A" },
{ icon: "icon3", name: "磁场电流", value: "-0.08A" },
{ icon: "icon1", name: "运行油压", value: "0.08MPa" },
],
rightList: [
{
name: "硬件条件",
value1: "运行准备",
value2: "主风机启",
value3: "变流器启",
value4: "液压站启",
},
{
name: "安全保护",
value1: "硬件安全",
value2: "软件安全",
value3: "操作台安全",
value4: "轻故障",
},
{
name: "信号方向",
value1: "井口信号",
value2: "信号继电器",
value3: "选择正向",
value4: "选择反向",
},
{
name: "闸回路",
value1: "手动闸",
value2: "工作闸",
value3: "全敞闸",
value4: "一级制动",
},
{
name: "开车回路",
value1: "选低速",
value2: "使能输出",
value3: "装置解封",
value4: "系统减速",
},
],
tableList: [
{
name: "张三",
point: "中段12",
isNormal: "正常",
date: "2023-01-01",
},
{
name: "张三",
point: "中段12",
isNormal: "正常",
date: "2023-01-01",
},
{
name: "张三",
point: "中段12",
isNormal: "正常",
date: "2023-01-01",
},
{
name: "张三",
point: "中段12",
isNormal: "正常",
date: "2023-01-01",
},
{
name: "张三",
point: "中段12",
isNormal: "正常",
date: "2023-01-01",
},
{
name: "张三",
point: "中段12",
isNormal: "正常",
date: "2023-01-01",
},
],
};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
.main-content {
background: url("~@/assets/images/screen/tfxt/bg.png") no-repeat center;
padding-top: 100px;
display: flex; // 新增弹性布局
justify-content: space-between; // 左右两侧贴边
.left {
padding-left: 91px;
padding-top: 70px;
.item-class {
width: 390px;
height: 60px;
border-radius: 10px;
background: url("~@/assets/images/screen/tsj/bg5.png") no-repeat center;
background-size: 100%;
margin-bottom: 20px;
.icon {
width: 50px;
height: 50px;
display: inline-block;
background: url("~@/assets/images/screen/tsj/icon1.png") no-repeat
center;
background-size: 100% 100%;
margin-left: 15px;
vertical-align: middle; // 新增垂直对齐
}
.item-name {
margin-left: 15px;
font-weight: 600;
font-size: 20px;
color: #00feef;
display: inline-block; // 改为行内块
vertical-align: middle; // 新增垂直对齐
width: 170px;
text-align: left;
height: 60px;
line-height: 60px;
// float: left;
}
.item-value {
display: inline-block; // 改为行内块
vertical-align: middle; // 新增垂直对齐
height: 60px;
width: 110px;
font-weight: 600;
font-size: 26px;
color: #ffffff;
margin-right: 15px;
height: 60px;
line-height: 60px; // 新增行高保持垂直居中
text-align: right;
// float: left;
}
}
.left-botton {
width: 390px;
height: 112px;
border-radius: 10px;
background: url("~@/assets/images/screen/tsj/bg6.png") no-repeat center;
background-size: 100% 100%;
display: flex; // 新增弹性布局
align-items: center; // 新增垂直居中
.item-name {
font-weight: 600;
font-size: 26px;
color: #00feef;
display: inline-block; // 改为行内块
vertical-align: middle; // 新增垂直对齐
width: 116px;
height: 72px;
text-align: center;
margin-left: 20px;
border-right: 1px solid #00feef;
margin: 0 auto 0 20px; // 修改外边距
}
.item-value {
font-weight: 600;
font-size: 26px;
color: #ffffff;
display: inline-block;
vertical-align: middle; // 新增垂直对齐
flex: 1; // 新增填充剩余空间
text-align: center;
}
}
}
.center {
width: 826px;
height: 902px;
margin: 0 50px;
padding-top: 70px;
.center-box {
width: 100%;
height: 100%;
background: url("~@/assets/images/screen/tsj/bg1.png") no-repeat center;
background-size: 100% 100%;
position: relative;
.dianti-target {
width: 60px;
height: 250px;
background: #fecb00;
font-size: 30px;
font-weight: 600;
color: #000000;
writing-mode: vertical-rl;
text-align: center;
line-height: 60px;
letter-spacing: 10px;
position: absolute;
}
.dianti-peizhong {
width: 18px;
height: 90px;
background: url("~@/assets/images/screen/tsj/bg4.png") no-repeat center;
background-size: 100% 100%;
position: absolute;
}
.dianti-box {
width: 78px;
height: 78px;
background: url("~@/assets/images/screen/tsj/bg3.png") no-repeat center;
background-size: 100% 100%;
position: absolute;
}
.dianti-louceng {
position: absolute;
.louceng-item {
width: 160px;
height: 40px;
background: #00aadb;
font-weight: 400;
font-size: 24px;
color: #ffffff;
text-align: center;
line-height: 40px;
margin-bottom: 45px;
}
}
}
}
.right {
width: 400px;
padding-top: 70px;
margin-right: 50px;
.right-item-class {
width: 100%;
height: 118px;
background: url("~@/assets/images/screen/tsj/bg6.png") no-repeat center;
background-size: 100% 100%;
display: flex; // 新增弹性布局
align-items: center; // 垂直居中
padding: 0 10px; // 添加左右内边距
margin-bottom: 18px;
.left-item-box {
width: 98px;
height: 98px;
border-radius: 10px;
border: 2px solid #02dbf2;
font-weight: 400;
font-size: 24px;
color: #fecb00;
line-height: 36px;
padding: 10px 22px; // 移除原有padding
margin-right: 10px;
}
.right-item-box {
flex: 1; // 填充剩余空间
display: grid; // 使用网格布局
grid-template-columns: repeat(2, 1fr); // 两列布局
gap: 10px; // 项间距
justify-content: space-between;
.right-item-box-item {
width: 130px;
height: 44px;
border-radius: 8px;
text-align: center;
border: 2px solid #02dbf2;
font-weight: 400;
font-size: 20px;
color: #ffffff;
margin: 0; // 移除原有宽度限制
line-height: 44px; // 垂直居中
&.active {
background: #02dbf2;
color: black;
}
}
}
}
.right-item-botton {
width: 100%;
height: 190px;
background: url("~@/assets/images/screen/tsj/bg7.png") no-repeat center;
background-size: 100% 100%;
overflow: hidden;
.title {
height: 45px;
border-bottom: 1px solid #02f2ea;
margin: 0 10px;
font-weight: 400;
font-size: 22px;
color: #fecb00;
line-height: 45px;
}
.right-item-body {
width: 100%;
margin-top: 8px;
.table-header {
display: grid;
grid-template-columns: 1fr 2fr 2fr 2fr;
color: #02f2ea;
margin: 0px 10px;
span {
text-align: center;
font-size: 16px;
font-weight: 500;
}
}
.table-content {
display: grid;
grid-template-columns: 1fr 2fr 2fr 2fr;
color: #ffffff; // 内容文字颜色
font-size: 16px;
margin: 0px 10px;
span {
text-align: center;
line-height: 30px; // 行高保持垂直居中
&:nth-child(3) {
// 第三列特殊样式
color: #00ff0d; // 正常状态绿色
}
}
// 鼠标悬停效果
&:hover {
background: rgba(2, 242, 234, 0.1);
}
}
}
}
}
}
</style>
src/views/system/waterSysSet/index.vue
View file @ 25bf70ae
......@@ -32,10 +32,18 @@
<el-divider></el-divider>
<!-- 液体高度设置 -->
<div class="section">
<h3>设置液体高度 <el-link type="primary" :underline="false" @click="setDis">设置说明</el-link></h3>
<h3>
设置液体高度
<el-link type="primary" :underline="false" @click="setDis"
>设置说明</el-link
>
</h3>
<!-- 每个水仓的设置 -->
<div v-for="(sump, index) in formData.draPeakSumpVos" :key="sump.sumpId">
<div
v-for="(sump, index) in formData.draPeakSumpVos"
:key="sump.sumpId"
>
<div class="sump-item">
<div class="sump-header">
<span>{{ sump.sumpName }}液位高度（m）：</span>
......@@ -44,19 +52,35 @@
<div class="threshold-inputs">
<div class="threshold-item">
<span>A点值</span>
<el-input v-model="sump.heghtThresholdA" placeholder="请输入A点值" size="small"></el-input>
<el-input
v-model="sump.heghtThresholdA"
placeholder="请输入A点值"
size="small"
></el-input>
</div>
<div class="threshold-item">
<span>B点值</span>
<el-input v-model="sump.heghtThresholdB" placeholder="请输入B点值" size="small"></el-input>
<el-input
v-model="sump.heghtThresholdB"
placeholder="请输入B点值"
size="small"
></el-input>
</div>
<div class="threshold-item">
<span>C点值</span>
<el-input v-model="sump.heghtThresholdC" placeholder="请输入C点值" size="small"></el-input>
<el-input
v-model="sump.heghtThresholdC"
placeholder="请输入C点值"
size="small"
></el-input>
</div>
<div class="threshold-item">
<span>D点值</span>
<el-input v-model="sump.heghtThresholdD" placeholder="请输入D点值" size="small"></el-input>
<el-input
v-model="sump.heghtThresholdD"
placeholder="请输入D点值"
size="small"
></el-input>
</div>
</div>
......@@ -77,7 +101,9 @@
</div>
</div>
<el-divider v-if="index < formData.draPeakSumpVos.length - 1"></el-divider>
<el-divider
v-if="index < formData.draPeakSumpVos.length - 1"
></el-divider>
</div>
</div>
......@@ -99,7 +125,6 @@
<p>液压高度X<=D时，自动关闭水泵。</p>
</div>
</div>
</el-dialog>
</div>
</template>
......@@ -108,18 +133,18 @@
import { peakGetDra, peakEditDra } from "@/api/tyler/sys";
export default {
name: 'AutomationControl',
name: "AutomationControl",
data() {
return {
open: false,
formData: {
status: "1", // 默认开启
peakBeginTime: '',
peakEndTime: '',
draPeakSumpVos: []
peakBeginTime: "",
peakEndTime: "",
draPeakSumpVos: [],
},
timeRange: [],
title:'液位高度设置说明：'
title: "液位高度设置说明：",
};
},
created() {
......@@ -127,13 +152,16 @@ export default {
},
methods: {
getList() {
peakGetDra().then(res => {
peakGetDra().then((res) => {
const data = res.data;
// 保存原始水泵顺序
this.originalPumpOrder = new Map();
data.draPeakSumpVos.forEach((sump, sumpIndex) => {
this.originalPumpOrder.set(sumpIndex, sump.draPeakPumpVos.map(p => p.pumpId));
this.originalPumpOrder.set(
sumpIndex,
sump.draPeakPumpVos.map((p) => p.pumpId)
);
});
// 处理数据时保持原始顺序
......@@ -142,19 +170,19 @@ export default {
const originalOrder = this.originalPumpOrder.get(sumpIndex);
// 按照原始顺序重新排列水泵
originalOrder.forEach(pumpId => {
const found = sump.draPeakPumpVos.find(p => p.pumpId === pumpId);
originalOrder.forEach((pumpId) => {
const found = sump.draPeakPumpVos.find((p) => p.pumpId === pumpId);
if (found) {
orderedPumps.push({
...found,
pumpStatus: parseInt(found.pumpStatus, 10)
pumpStatus: parseInt(found.pumpStatus, 10),
});
}
});
return {
...sump,
draPeakPumpVos: orderedPumps
draPeakPumpVos: orderedPumps,
};
});
......@@ -163,7 +191,7 @@ export default {
});
},
handleStatusChange(value) {
console.log('自动化控制状态已切换为:', value);
console.log("自动化控制状态已切换为:", value);
},
handleTimeRangeChange(value) {
if (value && value.length === 2) {
......@@ -178,24 +206,24 @@ export default {
// 深拷贝时保持数组顺序
const postData = {
...this.formData,
draPeakSumpVos: this.formData.draPeakSumpVos.map(sump => ({
draPeakSumpVos: this.formData.draPeakSumpVos.map((sump) => ({
...sump,
draPeakPumpVos: sump.draPeakPumpVos.map(pump => ({
draPeakPumpVos: sump.draPeakPumpVos.map((pump) => ({
...pump,
pumpStatus: pump.pumpStatus.toString()
}))
}))
pumpStatus: pump.pumpStatus.toString(),
})),
})),
};
peakEditDra(postData).then(res => {
this.$message.success('设置保存成功');
peakEditDra(postData).then((res) => {
this.$message.success("设置保存成功");
this.getList();
});
},
setDis(){
setDis() {
this.open = true;
},
}
},
};
</script>
......@@ -217,9 +245,9 @@ export default {
.control-header {
display: flex;
align-items: center;
justify-content: start;
justify-content: flex-start;
gap: 20px;
span{
span {
font-weight: bold;
}
}
......@@ -268,20 +296,20 @@ export default {
.button-group {
display: flex;
justify-content: start;
justify-content: flex-start;
gap: 15px;
margin-top: 20px;
}
.warter-lev{
.warter-lev {
display: flex;
justify-content: center;
.lev-pic{
.lev-pic {
width: 105px;
height: 343px;
background: url("~@/assets/images/sys/warterSysSet.png") no-repeat center;
background-size: 100%;
}
.lev-content{
.lev-content {
height: 343px;
display: flex;
justify-content: center;
......
vue.config.js
View file @ 25bf70ae
......@@ -91,6 +91,14 @@ module.exports = {
symbolId: 'icon-[name]'
})
.end()
config.module
.rule('highcharts')
.test(/node_modules[\\/]highcharts[\\/].*\.js$/)
.use('babel-loader')
.loader('babel-loader')
.options({
presets: ['@babel/preset-env']
});
config.when(process.env.NODE_ENV !== 'development', config => {
config
......
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