bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地级大屏页面初始化3

This commit is contained in:
zzyuan 2025-09-15 10:49:50 +08:00
parent 26c4fc819a
commit 5853f12ce8
3 changed files with 68 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/screen/cityScreen/components/engineerUsing/index.vue
View File

@ -8,9 +8,9 @@
<div class="content-view"> <div class="content-view">
<div class="topView"> <div class="topView">
<div style="width: 25%;height: 100%;display: flex;align-items: center;justify-content: space-between;"> <div style="width: 25%;height: 100%;display: flex;align-items: center;justify-content: space-between;">
<div class="topTab1 fs-24">线路</div> <div :class="tabIndex==1?'topTab1 fs-24 active1':'topTab1 fs-24'" @click="changTab(1)">线路</div>
<div class="topTab2 fs-24">变电</div> <div :class="tabIndex==2?'topTab2 fs-24 active2':'topTab2 fs-24'" @click="changTab(2)">变电</div>
<div class="topTab3 fs-24">电缆</div> <div :class="tabIndex==3?'topTab3 fs-24 active3':'topTab3 fs-24'" @click="changTab(3)">电缆</div>
</div> </div>
<div style="width: 45%;height: 100%;display: flex;align-items: center;justify-content: space-between;"> <div style="width: 45%;height: 100%;display: flex;align-items: center;justify-content: space-between;">
<div style="width: 50%;height: 12%;display: flex;align-items: center;justify-content: center;"> <div style="width: 50%;height: 12%;display: flex;align-items: center;justify-content: center;">
@ -70,6 +70,7 @@
export default { export default {
data() { data() {
return { return {
tabIndex:1,
tableList:[ tableList:[
{ {
major:"变电站工程", major:"变电站工程",
@ -162,12 +163,14 @@ export default {
] ]
} }
}, },
created() { created() {
}, },
mounted() { mounted() {
}, },
methods: { methods: {
changTab(index){
this.tabIndex=index
}
}, },
} }
</script> </script>
@ -198,7 +201,7 @@ export default {
} }
.topView{ .topView{
width: 100%; width: 100%;
height: 20%; height: 16%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -239,7 +242,15 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.active1{
background-image: url("../../../../../assets/cityScreen/tab12.png");
}
.active2{
background-image: url("../../../../../assets/cityScreen/tab22.png");
}
.active3{
background-image: url("../../../../../assets/cityScreen/tab32.png");
}
.text{ .text{
color: #C0C2C6; color: #C0C2C6;
@ -270,7 +281,7 @@ export default {
} }
.tableBox{ .tableBox{
width: 100%; width: 100%;
height: 68%; height: 78%;
overflow-y: auto; overflow-y: auto;
} }
.tableTr{ .tableTr{

86
src/views/screen/cityScreen/components/equiStatus/index.vue
View File

@ -21,6 +21,7 @@ export default {
size:[40, 20], size:[40, 20],
Offset1:[-0, 10], Offset1:[-0, 10],
Offset2:[-0, -10], Offset2:[-0, -10],
fontSize:20
} }
}, },
created() { created() {
@ -32,8 +33,9 @@ export default {
if(window.innerWidth<3000){ if(window.innerWidth<3000){
this.barWidth=20 this.barWidth=20
this.size=[20, 5] this.size=[20, 5]
this.Offset1=[-0, 2] this.Offset1=[-0, 3]
this.Offset2=[-0, -2] this.Offset2=[-0, -3]
this.fontSize=10
} }
this.InitEChartsOne() this.InitEChartsOne()
}, },
@ -41,6 +43,14 @@ export default {
InitEChartsOne() { InitEChartsOne() {
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => { // getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
var option = { var option = {
grid: {
show: true,
left: '10%',
right: '10%',
top: '20%',
bottom: '15%',
borderColor: "transparent"
},
xAxis: { xAxis: {
data: ['在用', '在库', '在修', '共享'], data: ['在用', '在库', '在修', '共享'],
axisTick: { axisTick: {
@ -52,17 +62,17 @@ export default {
axisLabel: { axisLabel: {
interval: 0, interval: 0,
textStyle: { textStyle: {
color: '#fff', color: '#ccc',
fontSize: 12, fontSize: this.fontSize,
}, },
margin: 26, //刻度标签与轴线之间的距离。 margin: 10, //刻度标签与轴线之间的距离。
}, },
}, },
yAxis: { yAxis: {
// name:"单位：t", // name:"单位：t",
nameTextStyle:{ nameTextStyle:{
color: '#fff', color: '#ccc',
fontSize:15, fontSize:this.fontSize ,
}, },
splitLine: { splitLine: {
show: false, show: false,
@ -75,8 +85,8 @@ export default {
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#fff', color: '#ccc',
fontSize: 10, fontSize: this.fontSize,
}, },
} }
}, },
@ -117,8 +127,8 @@ export default {
show: true, show: true,
position: 'top', position: 'top',
offset: 0, offset: 0,
fontSize: 10, fontSize: this.fontSize,
color: '#fff', color: '#ccc',
formatter: function(params) { formatter: function(params) {
console.log(params) console.log(params)
var str = "" + params.value + "\n\n"; var str = "" + params.value + "\n\n";
@ -136,34 +146,34 @@ export default {
"symbolOffset": this.Offset1, "symbolOffset": this.Offset1,
"z": 1, "z": 1,
itemStyle: { itemStyle: {
color: { color: {
x: 1, x: 1,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 0, y2: 0,
type: "linear", type: "linear",
global: false, global: false,
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#217CA7', color: '#217CA7',
}, },
{ {
offset: .5, offset: .5,
color: '#217CA7' color: '#217CA7'
}, },
{ {
offset: .5, offset: .5,
color: '#2B9CCC' color: '#2B9CCC'
}, },
{ {
offset: 1, offset: 1,
color: '#2B9CCC' color: '#2B9CCC'
} }
], ],
}, },
}, },
"data": [1, 1, 1, 1] "data": [1, 1, 1, 1]
}, },
{ {
"name": "", "name": "",

2
src/views/screen/cityScreen/index.vue
View File

@ -80,7 +80,7 @@ export default {
} }
@media screen and (min-width: 1920px) { @media screen and (min-width: 1920px) {
.main-view { .main-view {
height: 50vh; height: 60vh;
} }
} }
@media screen and (min-width: 3300px) { @media screen and (min-width: 3300px) {