Skip to content

Y
yindong-tongbai-automation
Commit 94f14cb7 authored by forevertyler's avatar forevertyler
Browse files
Options

add:电力系统

parent 789bd382
Hide whitespace changes
Inline Side-by-side
Showing with 243 additions and 258 deletions
src/api/tyler/screen.js
View file @ 94f14cb7
......@@ -70,4 +70,13 @@ export function perOnlineSituation(query) {
method: "get",
params: query,
});
}
//电力系统大屏
export function eleAll(query) {
return request({
url: "/business/screen/ele/all",
method: "get",
params: query,
});
}
\ No newline at end of file
src/views/Screen/index.vue
View file @ 94f14cb7
......@@ -8,12 +8,17 @@
v-if="showMenu === 3"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></psxt>
<v-scale-screen
ref="scale-screen"
width="1920"
height="1080"
:fullScreen="true"
>
<dlxt
v-if="showMenu === 6"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></dlxt>
<div class="container">
<!-- 头部 -->
<div class="header por">银洞坡金矿智能化综合管控平台</div>
......@@ -51,9 +56,9 @@
</div>
</div>
<div class="sub-header-right">
<div class="sub-item"><p>提升机系统</p></div>
<div class="sub-item"><p>风机系统</p></div>
<div class="sub-item"><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>
......@@ -75,6 +80,7 @@ import rydw from "./items/rydw.vue";
import hjjc from "./items/hjjc.vue";
import psxt from "./items/psxt.vue";
import home from "./items/home.vue";
import dlxt from "./items/dlxt.vue";
export default {
name: "cockpit",
components: {
......@@ -82,6 +88,7 @@ export default {
rydw,
hjjc,
psxt,
dlxt,
},
data() {
return {
......@@ -99,259 +106,7 @@ export default {
changeMenu(val) {
this.showMenu = val;
},
// // 辅助方法：获取字段值
// getItemField(item, fieldKey) {
// return item[this.fieldMap[fieldKey]] || "";
// },
// areaCharts(){
// let that = this;
// let myChart = echarts.init(document.getElementById('left1'));
// let xAxisData =['中段1','中段2','中段3','中段4','中段5',];
// let yAxisData = [20,10,34,22,18];
// let option ={
// title: {
// text: "",
// x: "center",
// y:"4%",
// textStyle: {
// color: '#fff',
// fontSize: '12'
// },
// subtextStyle: {
// color: '#90979c',
// fontSize: '12',
// },
// },
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
// },
// grid: {
// top: '5%',
// right: '3%',
// left: '15%',
// bottom: '10%'
// },
// xAxis: [{
// type: 'category',
// data: xAxisData,
// axisLine: {
// show:true,
// lineStyle: {
// color: 'rgba(255,255,255,0.12)'
// }
// },
// axisLabel: {
// show:true,
// margin: 10,
// color: '#e2e9ff',
// textStyle: {
// fontSize: 12
// },
// },
// }],
// yAxis: [{
// // name: '单位：人',
// axisLabel: {
// show:true,
// formatter: '{value}',
// color: '#e2e9ff',
// },
// axisTick:{ //y轴刻度线
// show:true,
// color: '#e2e9ff',
// },
// axisLine: {
// show: true,
// color: '#e2e9ff',
// lineStyle: {
// color: 'rgba(255,255,255,0.12)'
// }
// },
// splitLine: {
// show:true,
// lineStyle: {
// color: 'rgba(255,255,255,0.12)'
// }
// }
// }],
// series: [{
// type: 'bar',
// data: yAxisData,
// barWidth: '16px',
// itemStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(0,244,255,1)' // 0% 处的颜色
// }, {
// offset: 1,
// color: 'rgba(0,77,167,1)' // 100% 处的颜色
// }], false),
// barBorderRadius: [30, 30, 8, 8],
// shadowColor: 'rgba(0,160,221,1)',
// shadowBlur: 4,
// }
// },
// label: {
// normal: {
// show: false,
// lineHeight: 20,
// width: 10,
// height: 20,
// backgroundColor: 'rgba(0,160,221,0.1)',
// borderRadius: 200,
// }
// }
// }]
// }
// myChart.setOption(option);
// setTimeout(() => {
// myChart.resize();
// }, 600);
// },
// alarm30(){
// let that = this;
// let myChart = echarts.init(document.getElementById('right'));
// var salvProName = [
// "超时报警",
// "超员报警",
// "限制区报警",
// "工作异常报警",
// "井下人员报警",
// "通讯报警",
// ];
// var salvProValue = [239, 181, 154, 144, 135,100 ];
// var salvProMax = []; //背景按最大值
// for (let i = 0; i < salvProValue.length; i++) {
// salvProMax.push(salvProValue[0]);
// }
// let option ={
// grid: {
// left: "2%",
// right: "2%",
// bottom: "2%",
// top: "2%",
// containLabel: true,
// },
// tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "none",
// },
// formatter: function (params) {
// return params[0].name + " : " + params[0].value;
// },
// },
// xAxis: {
// show: false,
// type: "value",
// },
// yAxis: [
// {
// type: "category",
// inverse: true,
// axisLabel: {
// show: true,
// textStyle: {
// color: "#fff",
// },
// },
// splitLine: {
// show: false,
// },
// axisTick: {
// show: false,
// },
// axisLine: {
// show: false,
// },
// data: salvProName,
// },
// {
// type: "category",
// inverse: true,
// axisTick: "none",
// axisLine: "none",
// show: true,
// axisLabel: {
// textStyle: {
// color: "#ffffff",
// fontSize: "12",
// },
// },
// data: salvProValue,
// },
// ],
// series: [
// {
// name: "值",
// type: "bar",
// zlevel: 1,
// itemStyle: {
// normal: {
// barBorderRadius: 30,
// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// {
// offset: 0,
// color: "rgb(57,89,255,1)",
// },
// {
// offset: 1,
// color: "rgb(46,200,207,1)",
// },
// ]),
// },
// },
// barWidth: 10,
// data: salvProValue,
// },
// {
// name: "背景",
// type: "bar",
// barWidth: 10,
// barGap: "-100%",
// data: salvProMax,
// itemStyle: {
// normal: {
// color: "rgba(24,31,68,1)",
// barBorderRadius: 30,
// },
// },
// },
// ],
// };
// myChart.setOption(option);
// setTimeout(() => {
// myChart.resize();
// }, 600);
// },
// //自动滚动
// autoScroll() {
// const divData = this.$refs.scroll_List3;
// // 拿到表格中承载数据的div元素
// divData.scrollTop += 1;
// if (
// Math.round(divData.clientHeight + divData.scrollTop) + 1 >=
// divData.scrollHeight
// ) {
// // 重置table距离顶部距离
// divData.scrollTop = 0;
// }
// this.scrolltimer3 = window.requestAnimationFrame(
// this.autoScroll.bind(this)
// );
// },
// //停止滚动
// cancelScroll() {
// window.cancelAnimationFrame(this.scrolltimer3)
// },
goToSys() {
var link = this.$router.resolve({
path: "/",
......
src/views/Screen/items/dlxt.vue
View file @ 94f14cb7
<template>
<div>
电力系统
<div class="home">
<div id="dlxt">
<div class="dlxt-change">
<span @click="changeBtn(1)" :class="showBtn == 1 ? 'active' : ''">XX变电站</span>
<span @click="changeBtn(2)" :class="showBtn == 2 ? 'active' : ''">XX变电站</span>
</div>
<div class="dlxt-bg dlxt-bg1">
<div class="dlxt-val dlxt-val1" :style="{ color: getColor('1') }">●{{getLabel('1')}}</div>
<div class="dlxt-val dlxt-val2" :style="{ color: getColor('2') }">●{{getLabel('2')}}</div>
<div class="dlxt-val dlxt-val3" :style="{ color: getColor('3') }">●{{getLabel('3')}}</div>
<div class="dlxt-val dlxt-val4" :style="{ color: getColor('1') }">●{{getLabel('1')}}</div>
<div class="dlxt-val dlxt-val5" :style="{ color: getColor('2') }">●{{getLabel('2')}}</div>
<div class="dlxt-val dlxt-val6" :style="{ color: getColor('3') }">●{{getLabel('3')}}</div>
<div v-for="(item,index) in eleName" class="dlxt-tit" :class="`dlxt-tit${index+1}`"><p>{{ item }}</p></div>
<div v-for="i in 6" class="dlxt-list" :class="`dlxt-list${i}`">
<p><span>{{ 'la' }}</span>:<span>{{ '6.00' }}</span><span>{{ 'A' }}</span></p>
<p><span>{{ 'lc' }}</span>:<span>{{ '6.00' }}</span><span>{{ 'A' }}</span></p>
<p><span>{{ 'P' }}</span>:<span>{{ '6.00' }}</span><span>{{ 'kW' }}</span></p>
<p><span>{{ 'Q' }}</span>:<span>{{ '6.00' }}</span><span>{{ 'kVar' }}</span></p>
<p><span>{{ 'COS' }}</span>:<span>{{ '6.00' }}</span><span>{{ '' }}</span></p>
<p><span>{{ 'Ep' }}</span>:<span>{{ '6.00' }}</span><span>{{ 'kWh' }}</span></p>
<p><span>{{ 'Eq' }}</span>:<span>{{ '6.00' }}</span><span>{{ 'kVarh' }}</span></p>
</div>
</div>
</div>
</div>
</div>
</template>
\ No newline at end of file
</template>
<script>
import {
eleAll,
} from "@/api/tyler/screen";
export default {
name: "dlxt",
dicts: ['power_val'],
data() {
return {
showBtn:1,
eleName:['35KV进线柜','35KVPT柜','35KV主变出线柜','13AH金采柜','14AH金沙柜','15AH金沙柜'],
colors: ['#20F09F', '#00FCFF', '#00C6FF'],
eleAllData:[],
};
},
created() {
this.eleAllList();
},
methods: {
changeBtn(val) {
this.showBtn = val;
if(val==1){
this.eleName = ['35KV进线柜','35KVPT柜','35KV主变出线柜','13AH金采柜','14AH金沙柜','15AH金沙柜']
}else if(val == 2){
this.eleName = ['35KV进线柜2','35KVPT柜2','35KV主变出线柜','13AH金采柜','14AH金沙柜','15AH金沙柜']
}
},
getLabel(value) {
const item = this.dict.type.power_val.find(item => item.value === value);
return item ? item.label : '暂无数据';
},
getColor(value) {
const index = this.dict.type.power_val.findIndex(item => item.value === value);
return index !== -1 && this.colors[index] ? this.colors[index] : '#fff';
},
//获取
eleAllList(){
eleAll().then(res => {
this.eleAllData = res.data
console.log(res.data,'res.data')
})
},
},
};
</script>
<style scoped lang="scss">
p{margin: 0;padding: 0;}
.home {
width: 100%;
height: 100%;
background: url("~@/assets/images/screen/psxt/bg.png") no-repeat center;
background-size: 100%;
padding-top: 160px;
overflow: hidden;
pointer-events: auto;
#dlxt{
.dlxt-change{
width: 100%;
height: 36px;
display: flex;
justify-content: center;
color:#fff;
align-items: center;
margin-bottom: 32px;
span{
display: flex;
justify-content: center;
align-items: center;
width: 124px;
height: 36px;
font-size: 20px;
font-weight: bold;
background-color: rgba(10, 30, 54,.5);
border: 1px solid #00FCFF;
cursor: pointer;
&.active{
background: linear-gradient(0deg, #1679B6 0%, #00DEE9 100%);
border: 1px solid #00FCFF;
}
}
}
.dlxt-bg{
width: 1830px;
height: 792px;
margin: 0 auto;
background: url("~@/assets/images/screen/dlxt/bg2.png") no-repeat center;
background-size: 100%;
color:#fff;
position: relative;
.dlxt-val{
position: absolute;
top:100px;
}
.dlxt-tit{
position: absolute;
top:270px;
width: 230px;
height: 38px;
background: url("~@/assets/images/screen/dlxt/title.png") no-repeat center;
background-size: 100%;
p{
font-weight: bold;
font-size: 20px;
color: #FFFFFF;
line-height: 38px;
text-align: center;
background: linear-gradient(180deg, #FFFFFF 0%, #00CBFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.dlxt-list{
width: 180px;
border: 2px solid #00CCFF;
padding: 13px 20px;
box-sizing: border-box;
position: absolute;
top:340px;
display: flex;
flex-direction: column;
font-weight: 400;
font-size: 18px;
color: #11E0FF;
line-height: 30px;
}
}
.dlxt-bg1{
.dlxt-val1{
left:190px;
}
.dlxt-val2{
left:490px;
}
.dlxt-val3{
left:790px;
}
.dlxt-val4{
left:970px;
}
.dlxt-val5{
left:1270px;
}
.dlxt-val6{
left:1570px;
}
.dlxt-tit1{
left: 6px;
}
.dlxt-tit2{
left: 300px;
}
.dlxt-tit3{
left: 600px;
}
.dlxt-tit4{
left: 1000px;
}
.dlxt-tit5{
left: 1300px;
}
.dlxt-tit6{
left: 1600px;
}
.dlxt-list1{
left: 30px;
}
.dlxt-list2{
left: 330px;
}
.dlxt-list3{
left: 630px;
}
.dlxt-list4{
left: 1030px;
}
.dlxt-list5{
left: 1330px;
}
.dlxt-list6{
left: 1630px;
}
}
}
}
</style>
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