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

代码提交

This commit is contained in:
jiang 2025-11-24 18:26:32 +08:00
parent 7e88459809
commit cfbe0e496b
17 changed files with 1939 additions and 1762 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/cityScreen/1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/images/cityScreen/2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/images/cityScreen/4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/images/cityScreen/5.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/images/cityScreen/6.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/assets/images/cityScreen/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

18
src/views/screen/cityScreen/components/countryMap/index.vue
View File

@ -180,10 +180,10 @@ export default {
map: 'dishi',
type: 'map',
aspectScale: 1,
zoom: this.zoom,
zoom: 1,
roam: false, // 是否允许缩放
animationDurationUpdate: 0,
layoutSize: '80%',
layoutSize: '60%',
layoutCenter: ['50%', '56%'],
itemStyle: {
normal: {
@ -191,8 +191,8 @@ export default {
show: false,
},
areaColor: this.sendMapColor, //地图颜色
opacity: 0.7,
borderColor: '#38EAF6', //地图边框颜色
opacity: 0.5,
borderColor: '#7ef638', //地图边框颜色
borderWidth: 1, //地图边框宽度
shadowColor: 'none',
shadowBlur: 10,
@ -231,14 +231,14 @@ export default {
aspectScale: 1,
roam: false, // 是否允许缩放
animationDurationUpdate: 0,
zoom: this.zoom,
layoutSize: '80%',
zoom: 1,
layoutSize: '60%',
layoutCenter: ['50%', '58%'],
itemStyle: {
areaColor: '#5785AE',
borderColor: '#5785AE',
borderWidth: 1,
opacity: 0.3,
opacity: 0.5,
color: '#fff',
},
zlevel: -1,
@ -371,8 +371,8 @@ export default {
// 放大1.2倍
transform: scale(1.3);
#mapEcharts {
width: 100%;
height: 100%;
width: 90%;
height: 90%;
}
#mapEcharts2 {
width: 100%;

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

@ -1,348 +1,376 @@
<template>
<div class="content">
<div class="content-title">
<div class="title"> 工程在用装备情况 </div>
<div class="select-view">
<select v-model="selectId" @change="changeSelect" class="select-box">
<option v-for="item in options" :key="item.value" :value="item.value">
{{ item.label }}
</option>
</select>
<!-- <el-select v-model="value" placeholder="请选择" popper-class="popperView">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select> -->
</div>
</div>
<div class="content-view">
<div class="topView">
<div
style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between"
>
<div :class="tabIndex == 1 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(1)"
>线路</div
>
<div :class="tabIndex == 3 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(3)"
>变电</div
>
<div :class="tabIndex == 2 ? 'topTab3 fs-24 active3' : 'topTab3 fs-24'" @click="changTab(2)"
>电缆</div
>
</div>
<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">
<img src="../../../../../assets/cityScreen/icon3.png" class="icon" />
<span class="text" style="">项目数:</span>
<span class="num">{{ total }}</span>
<span class="unit">个</span>
</div>
<div style="width: 50%; height: 12%; display: flex; align-items: center; justify-content: center">
<img src="../../../../../assets/cityScreen/icon1.png" class="icon" />
<span class="text" style="">在用装备数:</span>
<span class="num">{{ useNum }}</span>
<span class="unit">台</span>
</div>
</div>
</div>
<div class="tableHeader">
<div class="header" style="width: 10%">排名</div>
<div class="header" style="width: 25%">工程名称</div>
<div class="header" style="width: 20%">在用装备数(台)</div>
<div class="header">投资额(万元)</div>
<div class="header">现场人员(人)</div>
<div class="header">风险等级</div>
<div class="header">地理特征</div>
</div>
<div class="tableBox">
<div class="tableTr" v-for="(item, index) in tableList" :key="index">
<div class="tableTd" style="width: 10%; font-weight: 800">
{{ index + 1 }}
</div>
<div class="tableTd" style="width: 25%">
{{ item.projectName }}
</div>
<div class="tableTd" style="width: 20%">
{{ item.useNum }}
</div>
<div class="tableTd">
{{ (item.investAmount / 10000).toFixed(2) }}
</div>
<div class="tableTd">
{{ item.scenePersonNum }}
</div>
<div class="tableTd">
{{ item.riskLevel }}
</div>
<div class="tableTd">
{{ item.geoFeature }}
</div>
</div>
</div>
</div>
<div class="content">
<div class="content-title">
<div class="select-view">
<select v-model="selectId" @change="changeSelect" class="select-box">
<option v-for="item in options" :key="item.value" :value="item.value">
{{ item.label }}
</option>
</select>
</div>
</div>
<div class="content-view">
<div class="topView">
<div
style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between"
>
<div :class="tabIndex == 1 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(1)"
>线路
</div
>
<div :class="tabIndex == 3 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(3)"
>变电
</div
>
<div :class="tabIndex == 2 ? 'topTab3 fs-24 active3' : 'topTab3 fs-24'" @click="changTab(2)"
>电缆
</div
>
</div>
<div
style="width: 60%; 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">
<img src="../../../../../assets/cityScreen/icon3.png" class="icon"/>
<span class="text" style="">项目数:</span>
<span class="num">{{ total }}</span>
<span class="unit">个</span>
</div>
<div style="width: 50%; height: 12%; display: flex; align-items: center; justify-content: center">
<img src="../../../../../assets/cityScreen/icon1.png" class="icon"/>
<span class="text" style="">在用装备数:</span>
<span class="num">{{ useNum }}</span>
<span class="unit">台</span>
</div>
</div>
</div>
<div class="tableHeader">
<div class="header" style="width: 5%">排名</div>
<div class="header" style="width: 15%">工程名称</div>
<div class="header" style="width: 20%">在用装备数(台)</div>
<div class="header" style="width: 15%">投资额(万元)</div>
<div class="header" style="width: 15%">现场人员(人)</div>
<div class="header" style="width: 15%">风险等级</div>
<div class="header" style="width: 15%">地理特征</div>
</div>
<div class="tableBox">
<div class="tableTr" v-for="(item, index) in tableList" :key="index">
<div class="tableTd" style="width: 5%; font-weight: 800">
{{ index + 1 }}
</div>
<div class="tableTd" style="width: 15%">
{{ item.projectName }}
</div>
<div class="tableTd" style="width: 20%">
{{ item.useNum }}
</div>
<div class="tableTd" style="width: 15%">
{{ (item.investAmount / 10000).toFixed(2) }}
</div>
<div class="tableTd" style="width: 15%">
{{ item.scenePersonNum }}
</div>
<div class="tableTd" style="width: 15%">
{{ item.riskLevel }}
</div>
<div class="tableTd" style="width: 15%">
{{ item.geoFeature }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { equipmentInUseInTheProjectApi, getVoltageLevelApi } from '@/api/screen/cityScreen'
export default {
data() {
return {
tabIndex: 1,
total: 0,
useNum: 0,
tableList: [],
selectId: '',
options: [],
}
data() {
return {
tabIndex: 1,
total: 0,
useNum: 0,
tableList: [],
selectId: '',
options: []
}
},
created() {
},
mounted() {
this.getVoltageLevel()
this.getEquipmentInUseInTheProject()
},
methods: {
changeSelect() {
console.log(this.selectId)
this.getEquipmentInUseInTheProject()
},
created() {},
mounted() {
this.getVoltageLevel()
this.getEquipmentInUseInTheProject()
changTab(index) {
this.tabIndex = index
this.selectId = ''
this.getEquipmentInUseInTheProject()
},
methods: {
changeSelect() {
console.log(this.selectId)
this.getEquipmentInUseInTheProject()
},
changTab(index) {
this.tabIndex = index
this.selectId = ''
this.getEquipmentInUseInTheProject()
},
getEquipmentInUseInTheProject() {
let param = {
companyId: sessionStorage.getItem('companyId'),
typeId: this.tabIndex,
voltageLevel: this.selectId,
}
console.log(param)
equipmentInUseInTheProjectApi(param).then((response) => {
console.log(response, 'equipmentInUseInTheProjectApi')
if (response.code == 200) {
this.total = response.data.total
this.useNum = response.data.useNum
this.tableList = response.data.list
}
})
},
getVoltageLevel() {
getVoltageLevelApi({}).then((response) => {
console.log(response, 'getVoltageLevelApi')
if (response.code == 200) {
if (response.data && response.data.length > 0) {
response.data.forEach((item) => {
let obj = {
label: item.voltage + 'kV',
value: item.voltage,
}
this.options.push(obj)
})
// this.$set(this,'selectId',response.data[0].voltage)
}
}
})
},
getEquipmentInUseInTheProject() {
let param = {
companyId: sessionStorage.getItem('companyId'),
typeId: this.tabIndex,
voltageLevel: this.selectId
}
console.log(param)
equipmentInUseInTheProjectApi(param).then((response) => {
console.log(response, 'equipmentInUseInTheProjectApi')
if (response.code == 200) {
this.total = response.data.total
this.useNum = response.data.useNum
this.tableList = response.data.list
}
})
},
getVoltageLevel() {
getVoltageLevelApi({}).then((response) => {
console.log(response, 'getVoltageLevelApi')
if (response.code == 200) {
if (response.data && response.data.length > 0) {
response.data.forEach((item) => {
let obj = {
label: item.voltage + 'kV',
value: item.voltage
}
this.options.push(obj)
})
// this.$set(this,'selectId',response.data[0].voltage)
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
@font-face {
font-family: 'DIN';
src: url('../../../../../assets/font-family/DS-Digital/DS-TITle.ttf');
}
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
// background-image: url('../../../../../assets/cityScreen/engineerUsingBg.png');
// background-repeat: no-repeat;
// background-size: 100% 100%;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
// background-image: url('../../../../../assets/cityScreen/engineerUsingBg.png');
// background-repeat: no-repeat;
// background-size: 100% 100%;
}
.content-title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
// height: 18%;
position: relative;
// color: #78d6ff;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
// height: 18%;
position: relative;
background: url('../../../../../assets/images/cityScreen/8.png') no-repeat;
background-size: 100% 100%;
// color: #78d6ff;
}
.title {
width: 100%;
height: 38px;
padding-left: 9%;
letter-spacing: 2px;
background: url('../../../../../assets/images/cityScreen/2.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
font-family: 'PingFang SC';
font-weight: 600;
color: #78d6ff;
line-height: 38px;
width: 100%;
height: 38px;
padding-left: 9%;
letter-spacing: 2px;
font-size: 18px;
font-family: 'DIN';
font-weight: 600;
color: #78d6ff;
line-height: 38px;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.select-view {
width: 20%;
height: 36px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
margin-left: 330px;
width: 25%;
height: 36px;
}
.select-box {
width: 80%; /*设置宽度确保内容 和 下拉icon的距离*/
height: 75%;
background: #113f67;
color: #ccc;
border: none;
border-radius: 10%;
border-color: #113f67;
width: 80%; /*设置宽度确保内容 和 下拉icon的距离*/
height: 75%;
background: #113f67;
color: #ccc;
margin-top: 5px;
border-radius: 10%;
border-color: #113f67;
font-size: 16px;
/*清除select聚焦时候的边框颜色*/
outline: none;
option {
font-size: 16px;
/*清除select聚焦时候的边框颜色*/
outline: none;
option {
font-size: 16px;
border: none;
}
border: none;
}
}
.content-view {
width: 100%;
height: 85%;
width: 100%;
height: 85%;
}
.topView {
width: 100%;
height: 16%;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 16%;
display: flex;
justify-content: space-between;
align-items: center;
}
.fs-24 {
font-size: 16px;
font-size: 16px;
}
.topTab1 {
width: 33%;
height: 80%;
color: #45adf1;
background-image: url('../../../../../assets/cityScreen/tab11.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
width: 33%;
height: 80%;
color: #45adf1;
background-image: url('../../../../../assets/cityScreen/tab11.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
}
.topTab2 {
width: 33%;
height: 80%;
color: #45adf1;
background-image: url('../../../../../assets/cityScreen/tab21.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
width: 33%;
height: 80%;
color: #45adf1;
background-image: url('../../../../../assets/cityScreen/tab21.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
}
.topTab3 {
width: 33%;
height: 80%;
color: #45adf1;
background-image: url('../../../../../assets/cityScreen/tab31.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
width: 33%;
height: 80%;
color: #45adf1;
background-image: url('../../../../../assets/cityScreen/tab31.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
}
.active1 {
background-image: url('../../../../../assets/cityScreen/tab12.png');
background-image: url('../../../../../assets/cityScreen/tab12.png');
}
.active2 {
background-image: url('../../../../../assets/cityScreen/tab22.png');
background-image: url('../../../../../assets/cityScreen/tab22.png');
}
.active3 {
background-image: url('../../../../../assets/cityScreen/tab32.png');
background-image: url('../../../../../assets/cityScreen/tab32.png');
}
.text {
color: #c0c2c6;
font-size: 14px;
color: #c0c2c6;
font-size: 10px;
}
.num {
color: #83d3f8;
font-size: 14px;
font-weight: 600;
margin: 0 10px;
color: #fcfac4;
font-size: 20px;
font-weight: bold;
opacity: 0.9; /* 轻微透明感 */
text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* 关键：模糊效果 */
letter-spacing: 2px; /* 可选：调整数字间距 */
margin: 0 10px;
}
.unit {
font-size: 16px;
color: #ccc;
font-size: 8px;
color: #ccc;
}
.icon {
width: 70px;
height: 70px;
width: 40px;
height: 40px;
margin-top: 5px;
}
.tableHeader {
width: 100%;
height: 12%;
background-image: url('../../../../../assets/cityScreen/tableHeader.png');
background-size: 100% 100%;
display: flex;
align-items: center;
width: 100%;
height: 12%;
background-image: url('../../../../../assets/cityScreen/tableHeader.png');
background-size: 100% 100%;
display: flex;
align-items: center;
}
.tableBox {
width: 100%;
height: 76%;
overflow-y: auto;
width: 100%;
height: 76%;
overflow-y: auto;
}
.tableTr {
width: 100%;
height: 18%;
background-image: url('../../../../../assets/cityScreen/tableTr.png');
background-size: 100% 100%;
margin-bottom: 2px;
display: flex;
width: 100%;
height: 18%;
background-image: url('../../../../../assets/cityScreen/tableTr.png');
background-size: 100% 100%;
margin-bottom: 2px;
display: flex;
}
.tableTd {
width: 15%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 15%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header {
color: #72b1f1;
width: 15%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #72b1f1;
width: 15%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
width: 4px;
height: 4px;
}
//定义背景颜色和圆角
::-webkit-scrollbar-thumb {
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.3);
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.3);
}
//定义滚动条轨道 内阴影+圆角
::-webkit-scrollbar-track {
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.1);
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.1);
}
// @media screen and (min-width: 1080px) {

824
src/views/screen/cityScreen/components/equQuantity/index.vue
View File

@ -1,468 +1,504 @@
<template>
<div class="content">
<div class="content-title"> 装备数量价值 </div>
<div class="content-view">
<div class="content-view-item">
<img src="../../../../../assets/cityScreen/quantityIcon1.png" />
<div class="item-content">
<div class="item-title"> 线路装备 </div>
<div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
<div class="num">
<span style="font-weight: 700">{{ lineData.deviceQuantity }}</span>
<span class="unit">台</span>
</div>
<div class="num">
<div class="content">
<div class="content-title"></div>
<div class="content-view">
<div class="content-view-item" style="padding-top: 12px;">
<img src="../../../../../assets/cityScreen/quantityIcon1.png"/>
<div class="item-content">
<div class="item-title"> 线路装备</div>
<div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
<div class="num">
<span style="font-weight: 700">{{ lineData.deviceQuantity }}</span>
<span class="unit">台</span>
</div>
<div class="num">
<span style="font-weight: 700" v-if="lineData.totalValue > 99999999">{{
(lineData.totalValue / 100000000).toFixed(3)
}}</span>
<span style="font-weight: 700" v-else>{{ (lineData.totalValue / 10000).toFixed(2) }}</span>
<span class="unit" v-if="lineData.totalValue > 99999999">亿元</span>
<span class="unit" v-else>万元</span>
</div>
</div>
<div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
<div class="num2">
<span class="unit2">5年</span>
<span style="font-weight: 700; padding: 0 2px">{{ lineData.fiveYearCount }}</span>
<span class="unit2">{{ lineData.fiveYearRatio || 0 }}%</span>
</div>
<div class="num2" style="color: #00fefc; margin-left: 8px">
<span class="unit2" style="color: #00fefc">5-10年</span>
<span style="font-weight: 700; padding: 0 2px">{{ lineData.fiveToTenYearCount }}</span>
<span class="unit2" style="color: #00fefc">{{ lineData.fiveToTenYearRatio || 0 }}%</span>
</div>
<div class="num2" style="color: #1e8dff">
<span class="unit2" style="color: #1e8dff">10年以上</span>
<span style="font-weight: 700; padding: 0 2px">{{ lineData.aboveTenYearCount }}</span>
<span class="unit2" style="color: #1e8dff">{{ lineData.aboveTenYearRatio || 0 }}%</span>
</div>
</div>
</div>
}}</span>
<span style="font-weight: 700" v-else>{{ (lineData.totalValue / 10000).toFixed(2) }}</span>
<span class="unit" v-if="lineData.totalValue > 99999999">亿元</span>
<span class="unit" v-else>万元</span>
</div>
<div class="content-view-item">
<img src="../../../../../assets/cityScreen/quantityIcon2.png" />
<div class="item-content">
<div class="item-title"> 变电装备 </div>
<div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
<div class="num">
<span style="font-weight: 700">{{ bdData.deviceQuantity }}</span>
<span class="unit">台</span>
</div>
<div class="num">
</div>
<div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
<div class="num2">
<span class="unit2">5年</span>
<span style="font-weight: 700; padding: 0 2px">{{ lineData.fiveYearCount }}</span>
<span class="unit2" style="font-size: 13px">{{ lineData.fiveYearRatio || 0 }}%</span>
</div>
<div class="num2" style="color: #00fefc; margin-left: 8px">
<span class="unit2" style="color: #00fefc">5-10年</span>
<span style="font-weight: 700; padding: 0 2px">{{ lineData.fiveToTenYearCount }}</span>
<span class="unit2" style="color: #00fefc;font-size: 13px">{{ lineData.fiveToTenYearRatio || 0 }}%</span>
</div>
<div class="num2" style="color: #1e8dff">
<span class="unit2" style="color: #1e8dff">10年以上</span>
<span style="font-weight: 700; padding: 0 2px">{{ lineData.aboveTenYearCount }}</span>
<span class="unit2" style="color: #1e8dff;font-size: 13px">{{ lineData.aboveTenYearRatio || 0 }}%</span>
</div>
</div>
</div>
</div>
<div class="content-view-item">
<img src="../../../../../assets/cityScreen/quantityIcon3.png"/>
<div class="item-content">
<div class="item-title"> 变电装备</div>
<div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
<div class="num">
<span style="font-weight: 700">{{ bdData.deviceQuantity }}</span>
<span class="unit">台</span>
</div>
<div class="num">
<span style="font-weight: 700" v-if="bdData.totalValue > 99999999">{{
(bdData.totalValue / 100000000).toFixed(3)
}}</span>
<span style="font-weight: 700" v-else>{{ (bdData.totalValue / 10000).toFixed(2) }}</span>
<span class="unit" v-if="bdData.totalValue > 99999999">亿元</span>
<span class="unit" v-else>万元</span>
</div>
</div>
}}</span>
<span style="font-weight: 700" v-else>{{ (bdData.totalValue / 10000).toFixed(2) }}</span>
<span class="unit" v-if="bdData.totalValue > 99999999">亿元</span>
<span class="unit" v-else>万元</span>
</div>
</div>
<div
style="
<div
style="
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
"
>
<div class="num2">
<span class="unit2">5年</span>
<span style="font-weight: 700; padding: 0 2px">{{ bdData.fiveYearCount }}</span>
<span class="unit2">{{ bdData.fiveYearRatio }}%</span>
</div>
<div class="num2" style="color: #00fefc; margin-left: 8px">
<span class="unit2" style="color: #00fefc">5-10年</span>
<span style="font-weight: 700; padding: 0 2px">{{ bdData.fiveToTenYearCount }}</span>
<span class="unit2" style="color: #00fefc">{{ bdData.fiveToTenYearRatio || 0 }}%</span>
</div>
<div class="num2" style="color: #1e8dff">
<span class="unit2" style="color: #1e8dff">10年以上</span>
<span style="font-weight: 700 padding: 0 2px">{{ bdData.aboveTenYearCount }}</span>
<span class="unit2" style="color: #1e8dff">{{ bdData.aboveTenYearRatio || 0 }}%</span>
</div>
</div>
</div>
>
<div class="num2">
<span class="unit2">5年</span>
<span style="font-weight: 700; padding: 0 2px">{{ bdData.fiveYearCount }}</span>
<span class="unit2" style="font-size: 13px">{{ bdData.fiveYearRatio }}%</span>
</div>
<div class="content-view-item">
<img src="../../../../../assets/cityScreen/quantityIcon3.png" />
<div class="item-content">
<div class="item-title"> 电缆装备 </div>
<div
style="
<div class="num2" style="color: #00fefc; margin-left: 8px">
<span class="unit2" style="color: #00fefc">5-10年</span>
<span style="font-weight: 700; padding: 0 2px">{{ bdData.fiveToTenYearCount }}</span>
<span class="unit2" style="color: #00fefc;font-size: 13px">{{ bdData.fiveToTenYearRatio || 0 }}%</span>
</div>
<div class="num2" style="color: #1e8dff">
<span class="unit2" style="color: #1e8dff">10年以上</span>
<span style="font-weight: 700;padding: 0 2px">{{ bdData.aboveTenYearCount }}</span>
<span class="unit2" style="color: #1e8dff;font-size: 13px">{{ bdData.aboveTenYearRatio || 0 }}%</span>
</div>
</div>
</div>
</div>
<div class="content-view-item">
<img src="../../../../../assets/cityScreen/quantityIcon2.png"/>
<div class="item-content">
<div class="item-title"> 电缆装备</div>
<div
style="
width: 100%;
height: 40%;
display: flex;
justify-content: space-between;
align-items: center;
"
>
<div class="num">
<span style="font-weight: 700">{{ dlData.deviceQuantity }}</span>
<span class="unit">台</span>
</div>
<div class="num">
>
<div class="num">
<span style="font-weight: 700">{{ dlData.deviceQuantity }}</span>
<span class="unit">台</span>
</div>
<div class="num">
<span style="font-weight: 700" v-if="dlData.totalValue > 99999999">{{
(dlData.totalValue / 100000000).toFixed(3)
}}</span>
<span style="font-weight: 700" v-else>{{ (dlData.totalValue / 10000).toFixed(2) }}</span>
<span class="unit" v-if="dlData.totalValue > 99999999">亿元</span>
<span class="unit" v-else>万元</span>
</div>
</div>
}}</span>
<span style="font-weight: 700" v-else>{{ (dlData.totalValue / 10000).toFixed(2) }}</span>
<span class="unit" v-if="dlData.totalValue > 99999999">亿元</span>
<span class="unit" v-else>万元</span>
</div>
</div>
<div
style="
<div
style="
width: 100%;
height: 40%;
display: flex;
justify-content: space-between;
align-items: center;
"
>
<div class="num2">
<span class="unit2">5年</span>
<span style="font-weight: 700; padding: 0 2px">{{ dlData.fiveYearCount }}</span>
<span class="unit2">{{ dlData.fiveYearRatio }}%</span>
</div>
<div class="num2" style="color: #00fefc; margin-left: 8px">
<span class="unit2" style="color: #00fefc">5-10年</span>
<span style="font-weight: 700; padding: 0 2px">{{ dlData.fiveToTenYearCount }}</span>
<span class="unit2" style="color: #00fefc">{{ dlData.fiveToTenYearRatio }}%</span>
</div>
<div class="num2" style="color: #1e8dff">
<span class="unit2" style="color: #1e8dff">10年以上</span>
<span style="font-weight: 700; padding: 0 2px">{{ dlData.aboveTenYearCount }}</span>
<span class="unit2" style="color: #1e8dff">{{ dlData.aboveTenYearRatio }}%</span>
</div>
</div>
</div>
>
<div class="num2">
<span class="unit2">5年</span>
<span style="font-weight: 700; padding: 0 2px">{{ dlData.fiveYearCount }}</span>
<span class="unit2" style="font-size: 13px">{{ dlData.fiveYearRatio }}%</span>
</div>
<div class="num2" style="color: #00fefc; margin-left: 8px">
<span class="unit2" style="color: #00fefc">5-10年</span>
<span style="font-weight: 700; padding: 0 2px">{{ dlData.fiveToTenYearCount }}</span>
<span class="unit2" style="color: #00fefc;font-size: 13px">{{ dlData.fiveToTenYearRatio }}%</span>
</div>
<div class="num2" style="color: #1e8dff">
<span class="unit2" style="color: #1e8dff">10年以上</span>
<span style="font-weight: 700; padding: 0 2px">{{ dlData.aboveTenYearCount }}</span>
<span class="unit2" style="color: #1e8dff;font-size: 13px">{{ dlData.aboveTenYearRatio }}%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { equipmentQuantityValueApi } from '@/api/screen/cityScreen'
import * as echarts from 'echarts'
export default {
data() {
return {
barWidth: 6,
myCharts1: null,
myCharts2: null,
myCharts3: null,
dataList: [],
lineData: {
aboveTenYearCount: 0,
aboveTenYearRatio: 0,
fiveToTenYearCount: 0,
fiveToTenYearRatio: 0,
fiveYearCount: 0,
fiveYearRatio: 0,
totalValue: 0, //价值
deviceQuantity: 0, //数量
}, //0
dlData: {
aboveTenYearCount: 0,
aboveTenYearRatio: 0,
fiveToTenYearCount: 0,
fiveToTenYearRatio: 0,
fiveYearCount: 0,
fiveYearRatio: 0,
totalValue: 0, //价值
deviceQuantity: 0, //数量
}, //1
bdData: {
aboveTenYearCount: 0,
aboveTenYearRatio: 0,
fiveToTenYearCount: 0,
fiveToTenYearRatio: 0,
fiveYearCount: 0,
fiveYearRatio: 0,
totalValue: 0, //价值
deviceQuantity: 0, //数量
}, //2
data() {
return {
barWidth: 6,
myCharts1: null,
myCharts2: null,
myCharts3: null,
dataList: [],
lineData: {
aboveTenYearCount: 0,
aboveTenYearRatio: 0,
fiveToTenYearCount: 0,
fiveToTenYearRatio: 0,
fiveYearCount: 0,
fiveYearRatio: 0,
totalValue: 0, //价值
deviceQuantity: 0 //数量
}, //0
dlData: {
aboveTenYearCount: 0,
aboveTenYearRatio: 0,
fiveToTenYearCount: 0,
fiveToTenYearRatio: 0,
fiveYearCount: 0,
fiveYearRatio: 0,
totalValue: 0, //价值
deviceQuantity: 0 //数量
}, //1
bdData: {
aboveTenYearCount: 0,
aboveTenYearRatio: 0,
fiveToTenYearCount: 0,
fiveToTenYearRatio: 0,
fiveYearCount: 0,
fiveYearRatio: 0,
totalValue: 0, //价值
deviceQuantity: 0 //数量
} //2
}
},
created() {
},
mounted() {
// console.log(window.innerWidth, window.innerHeight);
if (window.innerWidth < 3000) {
this.barWidth = 3
}
this.getEquipmentQuantity()
},
methods: {
getEquipmentQuantity() {
equipmentQuantityValueApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'equipmentQuantityValueApi')
if (response.code == 200) {
this.dataList = response.data
this.dataList.forEach((item) => {
if (item.deviceType == 0) {
this.lineData = item
}
if (item.deviceType == 1) {
this.dlData = item
}
if (item.deviceType == 2) {
this.bdData = item
}
})
}
this.InitEChartsOne()
this.InitEChartsTwo()
this.lineChartThree()
})
},
created() {},
mounted() {
// console.log(window.innerWidth, window.innerHeight);
if (window.innerWidth < 3000) {
this.barWidth = 3
}
this.getEquipmentQuantity()
InitEChartsOne() {
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
var legendData = [
{ name: '5年', data: this.lineData.fiveYearCount },
{ name: '5-10年', data: this.lineData.fiveToTenYearCount },
{ name: '10年以上', data: this.lineData.aboveTenYearCount }
]
var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
var seriesList = []
for (var i = 0; i < legendData.length; i++) {
seriesList.push({
type: 'bar',
stack: '2',
legendHoverLink: false,
barWidth: this.barWidth,
data: [
{
value: legendData[i].data,
itemStyle: {
color: colorList[i]
}
}
]
})
}
var option = {
grid: {
show: true,
left: '0%',
right: '0%',
top: '0%',
bottom: '0%',
borderColor: 'transparent'
},
// backgroundColor: '#fff',
xAxis: {
show: false
},
yAxis: [
{
inverse: true,
data: [''],
axisLine: {
show: false
}
}
],
series: seriesList
}
this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'))
this.myCharts1.setOption(option)
// });
},
methods: {
getEquipmentQuantity() {
equipmentQuantityValueApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'equipmentQuantityValueApi')
if (response.code == 200) {
this.dataList = response.data
this.dataList.forEach((item) => {
if (item.deviceType == 0) {
this.lineData = item
}
if (item.deviceType == 1) {
this.dlData = item
}
if (item.deviceType == 2) {
this.bdData = item
}
})
}
this.InitEChartsOne()
this.InitEChartsTwo()
this.lineChartThree()
})
InitEChartsTwo() {
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
var legendData = [
{ name: '5年', data: this.bdData.fiveYearCount },
{ name: '5-10年', data: this.bdData.fiveToTenYearCount },
{ name: '10年以上', data: this.bdData.aboveTenYearCount }
]
var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
var seriesList = []
for (var i = 0; i < legendData.length; i++) {
seriesList.push({
type: 'bar',
stack: '2',
legendHoverLink: false,
barWidth: this.barWidth,
data: [
{
value: legendData[i].data,
itemStyle: {
color: colorList[i]
}
}
]
})
}
var option = {
grid: {
show: true,
left: '0%',
right: '0%',
top: '0%',
bottom: '0%',
borderColor: 'transparent'
},
InitEChartsOne() {
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
var legendData = [
{ name: '5年', data: this.lineData.fiveYearCount },
{ name: '5-10年', data: this.lineData.fiveToTenYearCount },
{ name: '10年以上', data: this.lineData.aboveTenYearCount },
]
var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
var seriesList = []
for (var i = 0; i < legendData.length; i++) {
seriesList.push({
type: 'bar',
stack: '2',
legendHoverLink: false,
barWidth: this.barWidth,
data: [
{
value: legendData[i].data,
itemStyle: {
color: colorList[i],
},
},
],
})
}
var option = {
grid: {
show: true,
left: '0%',
right: '0%',
top: '0%',
bottom: '0%',
borderColor: 'transparent',
},
// backgroundColor: '#fff',
xAxis: {
show: false,
},
yAxis: [
{
inverse: true,
data: [''],
axisLine: {
show: false,
},
},
],
series: seriesList,
}
this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'))
this.myCharts1.setOption(option)
// });
// backgroundColor: '#fff',
xAxis: {
show: false
},
InitEChartsTwo() {
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
var legendData = [
{ name: '5年', data: this.bdData.fiveYearCount },
{ name: '5-10年', data: this.bdData.fiveToTenYearCount },
{ name: '10年以上', data: this.bdData.aboveTenYearCount },
]
var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
var seriesList = []
for (var i = 0; i < legendData.length; i++) {
seriesList.push({
type: 'bar',
stack: '2',
legendHoverLink: false,
barWidth: this.barWidth,
data: [
{
value: legendData[i].data,
itemStyle: {
color: colorList[i],
},
},
],
})
yAxis: [
{
inverse: true,
data: [''],
axisLine: {
show: false
}
var option = {
grid: {
show: true,
left: '0%',
right: '0%',
top: '0%',
bottom: '0%',
borderColor: 'transparent',
},
// backgroundColor: '#fff',
xAxis: {
show: false,
},
yAxis: [
{
inverse: true,
data: [''],
axisLine: {
show: false,
},
},
],
series: seriesList,
}
this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'))
this.myCharts2.setOption(option)
// });
},
lineChartThree() {
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
var legendData = [
{ name: '5年', data: this.dlData.fiveYearCount },
{ name: '5-10年', data: this.dlData.fiveToTenYearCount },
{ name: '10年以上', data: this.dlData.aboveTenYearCount },
]
var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
var seriesList = []
for (var i = 0; i < legendData.length; i++) {
seriesList.push({
type: 'bar',
stack: '2',
legendHoverLink: false,
barWidth: this.barWidth,
data: [
{
value: legendData[i].data,
itemStyle: {
color: colorList[i],
},
},
],
})
}
var option = {
grid: {
show: true,
left: '0%',
right: '0%',
top: '0%',
bottom: '0%',
borderColor: 'transparent',
},
// backgroundColor: '#fff',
xAxis: {
show: false,
},
yAxis: [
{
inverse: true,
data: [''],
axisLine: {
show: false,
},
},
],
series: seriesList,
}
this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'))
this.myCharts3.setOption(option)
// });
},
}
],
series: seriesList
}
this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'))
this.myCharts2.setOption(option)
// });
},
lineChartThree() {
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
var legendData = [
{ name: '5年', data: this.dlData.fiveYearCount },
{ name: '5-10年', data: this.dlData.fiveToTenYearCount },
{ name: '10年以上', data: this.dlData.aboveTenYearCount }
]
var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
var seriesList = []
for (var i = 0; i < legendData.length; i++) {
seriesList.push({
type: 'bar',
stack: '2',
legendHoverLink: false,
barWidth: this.barWidth,
data: [
{
value: legendData[i].data,
itemStyle: {
color: colorList[i]
}
}
]
})
}
var option = {
grid: {
show: true,
left: '0%',
right: '0%',
top: '0%',
bottom: '0%',
borderColor: 'transparent'
},
// backgroundColor: '#fff',
xAxis: {
show: false
},
yAxis: [
{
inverse: true,
data: [''],
axisLine: {
show: false
}
}
],
series: seriesList
}
this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'))
this.myCharts3.setOption(option)
// });
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
padding: 6px;
display: flex;
flex-direction: column;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
@font-face {
font-family: 'DIN';
src: url('../../../../../assets/font-family/DS-Digital/DS-TITle.ttf');
}
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.content-title {
width: 100%;
height: 38px;
padding-left: 12%;
letter-spacing: 2px;
background: url('../../../../../assets/images/cityScreen/6.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
font-family: 'PingFang SC';
font-weight: 600;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 38px;
padding-left: 12%;
letter-spacing: 2px;
background: url('../../../../../assets/images/cityScreen/6.png') no-repeat;
background-size: 100% 100%;
font-size: 38px;
font-family: 'PingFang SC';
color: #78d6ff;
line-height: 44px;
span{
font-family: 'DIN';
color: #78d6ff;
line-height: 38px;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.content-view {
width: 100%;
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
// height: 80%;
// padding-left: 8%;
}
.content-view-item {
width: 100%;
height: 33.33%;
flex: 1;
display: flex;
align-items: center;
img {
transform: scale(0.8);
}
.item-content {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
// height: 80%;
// padding-left: 8%;
justify-content: space-around;
}
}
.content-view-item {
width: 100%;
height: 33.33%;
flex: 1;
display: flex;
align-items: center;
img {
transform: scale(0.8);
}
.item-content {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
.item-title {
width: 100%;
// height: 30%;
padding: 2px 0 2px 10px;
background-image: url('../../../../../assets/cityScreen/equiQuantityTitle.png');
background-size: 100% 100%;
font-size: 14px;
color: #fff;
letter-spacing: 2px;
width: 100%;
// height: 30%;
padding: 2px 0 2px 10px;
background-image: url('../../../../../assets/cityScreen/equiQuantityTitle.png');
background-size: 100% 100%;
font-size: 12px;
color: #fff;
letter-spacing: 2px;
}
.title2 {
font-size: 20px;
color: #fff;
font-size: 20px;
color: #fff;
}
.num {
color: #83d3f8;
font-size: 14px;
font-family: 'DIN';
color: #83d3f8;
font-size: 18px;
-webkit-background-clip: text;
letter-spacing: 2px;
font-style: italic;
font-weight: bold;
background-clip: text;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-text-fill-color: transparent;
}
.unit {
font-size: 14px;
color: #ccc;
margin-left: 10px;
font-size: 10px;
color: #ccc;
margin-left: 5px;
}
.num2 {
color: #83d3f8;
font-size: 14px;
color: #83d3f8;
font-size: 13px;
}
.unit2 {
font-size: 14px;
color: #ccc;
// margin-right: 8px;
// margin-left: 8px;
font-size: 8px;
color: #ccc;
margin-right: 4px;
margin-left: 4px;
}
// @media screen and (min-width: 1080px) {
// .title {
// font-size: 10px;

450
src/views/screen/cityScreen/components/equStatus/index.vue
View File

@ -1,243 +1,261 @@
<template>
<div class="content">
<div class="content-title"> 装备状态 </div>
<div class="content-view">
<div id="lineChartFour" style="width: 100%; height: 92%"></div>
<div class="text">备注说明：在用装备包含共享装备。</div>
</div>
<div class="content">
<div class="content-title"><span style="margin-top: -5px;">装备状态</span></div>
<div class="content-view">
<div id="lineChartFour" style="width: 100%; height: 85%"></div>
<div class="text">备注说明：在用装备包含共享装备。</div>
</div>
</div>
</template>
<script>
import { equipmentStatusApi } from '@/api/screen/cityScreen'
import * as echarts from 'echarts'
export default {
data() {
return {
myCharts4: null,
barWidth: 40,
size: [40, 20],
Offset1: [-0, 10],
Offset2: [-0, -10],
fontSize: 20,
}
},
created() {},
mounted() {
console.log(window.innerWidth, window.innerHeight)
if (window.innerWidth < 3000) {
this.barWidth = 20
this.size = [20, 5]
this.Offset1 = [-0, 3]
this.Offset2 = [-0, -3]
this.fontSize = 10
}
this.InitEChartsOne()
},
methods: {
InitEChartsOne() {
equipmentStatusApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'equipmentStatusApi')
var dataList = response.data || []
var xData = []
var yData = []
var rateData = []
dataList.forEach((item) => {
xData.push(item.name)
yData.push(item.num)
rateData.push(item.rate)
})
var option = {
grid: {
show: true,
left: '10%',
right: '2%',
top: '12%',
bottom: '12%',
borderColor: 'transparent',
data() {
return {
myCharts4: null,
barWidth: 40,
size: [40, 20],
Offset1: [-0, 10],
Offset2: [-0, -10],
fontSize: 20
}
},
created() {
},
mounted() {
console.log(window.innerWidth, window.innerHeight)
if (window.innerWidth < 3000) {
this.barWidth = 20
this.size = [20, 5]
this.Offset1 = [-0, 3]
this.Offset2 = [-0, -3]
this.fontSize = 10
}
this.InitEChartsOne()
},
methods: {
InitEChartsOne() {
equipmentStatusApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'equipmentStatusApi')
var dataList = response.data || []
var xData = []
var yData = []
var rateData = []
dataList.forEach((item) => {
xData.push(item.name)
yData.push(item.num)
rateData.push(item.rate)
})
var option = {
grid: {
show: true,
left: '10%',
right: '2%',
top: '12%',
bottom: '12%',
borderColor: 'transparent'
},
xAxis: {
data: xData,
axisTick: {
show: false
},
axisLine: {
show: true
},
axisLabel: {
interval: 0,
textStyle: {
color: '#ccc',
fontSize: this.fontSize
},
margin: 10 //刻度标签与轴线之间的距离。
}
},
yAxis: {
// name:"单位：t",
nameTextStyle: {
color: '#ccc',
fontSize: this.fontSize
},
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true
},
axisLabel: {
textStyle: {
color: '#ccc',
fontSize: this.fontSize
}
}
},
series: [
{
type: 'bar',
barWidth: this.barWidth,
z: 10,
itemStyle: {
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: '#217CA7'
},
xAxis: {
data: xData,
axisTick: {
show: false,
},
axisLine: {
show: true,
},
axisLabel: {
interval: 0,
textStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
margin: 10, //刻度标签与轴线之间的距离。
},
{
offset: 0.5,
color: '#217CA7'
},
yAxis: {
// name:"单位：t",
nameTextStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
splitLine: {
show: false,
},
axisTick: {
show: true,
},
axisLine: {
show: true,
},
axisLabel: {
textStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
},
{
offset: 0.5,
color: '#2B9CCC'
},
series: [
{
type: 'bar',
barWidth: this.barWidth,
z: 10,
itemStyle: {
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: '#217CA7',
},
{
offset: 0.5,
color: '#217CA7',
},
{
offset: 0.5,
color: '#2B9CCC',
},
{
offset: 1,
color: '#2B9CCC',
},
],
},
},
label: {
show: true,
position: 'top',
offset: 0,
fontSize: this.fontSize,
color: '#ccc',
formatter: function (params) {
// console.log(params)
var str = params.value + '/' + rateData[params.dataIndex] + '%'
return str
},
},
data: yData,
},
{
name: '',
barWidth: this.barWidth,
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: this.size,
symbolOffset: this.Offset1,
z: 1,
itemStyle: {
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: '#217CA7',
},
{
offset: 0.5,
color: '#217CA7',
},
{
offset: 0.5,
color: '#2B9CCC',
},
{
offset: 1,
color: '#2B9CCC',
},
],
},
},
data: [1, 1, 1, 1],
},
{
name: '',
barWidth: this.barWidth,
type: 'pictorialBar',
symbol: 'diamond',
symbolPosition: 'end',
symbolSize: this.size,
symbolOffset: this.Offset2,
z: 50,
itemStyle: {
opacity: 1,
color: '#2B9CCC',
},
data: yData,
},
],
{
offset: 1,
color: '#2B9CCC'
}
]
}
this.myCharts4 = echarts.init(document.querySelector('#lineChartFour'))
this.myCharts4.setOption(option)
})
},
},
},
label: {
show: true,
position: 'top',
offset: 0,
fontSize: this.fontSize,
color: '#ccc',
formatter: function(params) {
// console.log(params)
var str = params.value + '/' + rateData[params.dataIndex] + '%'
return str
}
},
data: yData
},
{
name: '',
barWidth: this.barWidth,
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: this.size,
symbolOffset: this.Offset1,
z: 1,
itemStyle: {
color: {
x: 1,
y: 0,
x2: 0,
y2: 0,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: '#217CA7'
},
{
offset: 0.5,
color: '#217CA7'
},
{
offset: 0.5,
color: '#2B9CCC'
},
{
offset: 1,
color: '#2B9CCC'
}
]
}
},
data: [1, 1, 1, 1]
},
{
name: '',
barWidth: this.barWidth,
type: 'pictorialBar',
symbol: 'diamond',
symbolPosition: 'end',
symbolSize: this.size,
symbolOffset: this.Offset2,
z: 50,
itemStyle: {
opacity: 1,
color: '#2B9CCC'
},
data: yData
}
]
}
this.myCharts4 = echarts.init(document.querySelector('#lineChartFour'))
this.myCharts4.setOption(option)
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
@font-face {
font-family: 'DIN';
src: url('../../../../../assets/font-family/DS-Digital/DS-TITle.ttf');
}
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content-title {
width: 100%;
height: 38px;
line-height: 38px;
padding-left: 12%;
letter-spacing: 2px;
background: url('../../../../../assets/images/cityScreen/7.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
font-family: 'PingFang SC';
font-weight: 600;
width: 100%;
height: 38px;
padding-left: 12%;
letter-spacing: 2px;
background: url('../../../../../assets/images/cityScreen/7.png') no-repeat;
background-size: 100% 100%;
font-size: 24px;
font-family: 'PingFang SC';
color: #78d6ff;
line-height: 38px;
span {
font-family: 'DIN';
color: #78d6ff;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.content-view {
width: 100%;
flex: 1;
width: 100%;
flex: 1;
}
.text {
width: 100%;
// margin-bottom: 10px;
color: #a9c4f8;
text-align: center;
font-size: 14px;
width: 100%;
// margin-bottom: 10px;
color: #a9c4f8;
text-align: center;
margin-top: 10px;
font-size: 12px;
}
// @media screen and (min-width: 1080px) {
// .title {
// font-size: 10px;

277
src/views/screen/cityScreen/components/equTurnover/index.vue
View File

@ -1,161 +1,174 @@
<template>
<div class="content">
<div class="content-title"> 装备周转率 </div>
<div class="content-view">
<div class="tableHeader">
<div class="header" style="width: 30%">专业</div>
<div class="header" style="width: 20%">主工序</div>
<div class="header" style="width: 15%">子工序</div>
<div class="header" style="width: 20%">装备名称</div>
<div class="header" style="width: 15%">周转率</div>
</div>
<div class="tableBox">
<div class="tableTr" v-for="(item, index) in tableList" :key="index">
<div class="tableTd" style="width: 30%">
{{ item.major }}
</div>
<div class="tableTd" style="width: 20%">
{{ item.mainProcess }}
</div>
<div class="tableTd" style="width: 15%">
{{ item.subprocess }}
</div>
<div class="tableTd" style="width: 20%">
{{ item.deviceName }}
</div>
<div class="tableTd" style="width: 15%">
{{ item.turnoverRate }}
</div>
</div>
</div>
<div class="content">
<div class="content-title"></div>
<div class="content-view">
<div class="tableHeader">
<div class="header" style="width: 30%">专业</div>
<div class="header" style="width: 20%">主工序</div>
<div class="header" style="width: 15%">子工序</div>
<div class="header" style="width: 20%">装备名称</div>
<div class="header" style="width: 15%">周转率</div>
</div>
<div class="tableBox">
<div class="tableTr" v-for="(item, index) in tableList" :key="index">
<div class="tableTd" style="width: 30%">
{{ item.major }}
</div>
<div class="tableTd" style="width: 20%">
{{ item.mainProcess }}
</div>
<div class="tableTd" style="width: 15%">
{{ item.subprocess }}
</div>
<div class="tableTd" style="width: 20%">
{{ item.deviceName }}
</div>
<div class="tableTd" style="width: 15%">
{{ item.turnoverRate }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { equipmentTurnoverRateApi } from '@/api/screen/cityScreen'
export default {
data() {
return {
tableList: [],
data() {
return {
tableList: []
}
},
created() {
},
mounted() {
this.getEquipmentTurnoverRate()
},
methods: {
getEquipmentTurnoverRate() {
equipmentTurnoverRateApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'equipmentTurnoverRateApi')
if (response.code == 200) {
this.tableList = response.data.list
}
},
created() {},
mounted() {
this.getEquipmentTurnoverRate()
},
methods: {
getEquipmentTurnoverRate() {
equipmentTurnoverRateApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'equipmentTurnoverRateApi')
if (response.code == 200) {
this.tableList = response.data.list
}
})
},
},
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
}
.content-title {
width: 100%;
height: 38px;
padding-left: 12%;
letter-spacing: 2px;
background: url('../../../../../assets/images/cityScreen/2.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
font-family: 'PingFang SC';
font-weight: 600;
color: #78d6ff;
line-height: 38px;
width: 100%;
height: 38px;
padding-left: 10%;
letter-spacing: 2px;
background: url('../../../../../assets/images/cityScreen/2.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
font-family: 'PingFang SC';
font-weight: 600;
color: #78d6ff;
line-height: 38px;
}
.title {
font-size: 16px;
position: absolute;
top: 35%;
left: 18%;
color: #78d6ff;
font-weight: 800;
}
.content-view {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
// width: 100%;
// height: 85%;
// padding-left: 8%;
}
.tableHeader {
width: 100%;
padding: 4px 0;
background-image: url('../../../../../assets/cityScreen/tableHeader.png');
background-size: 100% 100%;
display: flex;
align-items: center;
}
.tableBox {
width: 100%;
flex: 1;
overflow-y: auto;
// height: 84%;
// overflow-y: auto;
}
.tableTr {
width: 100%;
height: 16%;
background-image: url('../../../../../assets/cityScreen/tableTr.png');
background-size: 100% 100%;
// margin-bottom: 2px;
display: flex;
align-items: center;
cursor: pointer;
}
.tableTd {
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #ccc;
text-align: center;
box-sizing: border-box;
}
.header {
color: #72b1f1;
height: 100%;
// margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
text-align: center;
.title {
font-size: 16px;
position: absolute;
top: 35%;
left: 18%;
color: #78d6ff;
font-weight: 800;
}
.content-view {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
// width: 100%;
// height: 85%;
// padding-left: 8%;
}
.tableHeader {
width: 100%;
height: 32px;
padding: 4px 0;
background-image: url('../../../../../assets/cityScreen/tableHeader.png');
background-size: 100% 100%;
display: flex;
align-items: center;
}
.tableBox {
width: 100%;
flex: 1;
overflow-y: auto;
// height: 84%;
// overflow-y: auto;
}
.tableTr {
width: 100%;
height: 31px;
background-image: url('../../../../../assets/cityScreen/tableTr.png');
background-size: 100% 100%;
// margin-bottom: 2px;
display: flex;
align-items: center;
cursor: pointer;
}
.tableTd {
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #ccc;
text-align: center;
box-sizing: border-box;
}
.header {
color: #72b1f1;
height: 100%;
// margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
text-align: center;
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
width: 4px;
height: 4px;
}
//定义背景颜色和圆角
::-webkit-scrollbar-thumb {
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.3);
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.3);
}
//定义滚动条轨道 内阴影+圆角
::-webkit-scrollbar-track {
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.1);
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.1);
}
// @media screen and (min-width: 1080px) {
// .title {
// font-size: 10px;

241
src/views/screen/cityScreen/components/equUse/index.vue
View File

@ -1,149 +1,158 @@
<template>
<div class="content">
<div class="content-title"> 装备在用率 </div>
<div class="content-view">
<div class="all-box">
<div>{{ allRate }}%</div>
<div class="title2">总体在用率</div>
</div>
<div class="bd-box">
<div>{{ rate1 }}%</div>
<div class="title3">变电装备在用率</div>
</div>
<div class="line-box">
<div>{{ rate2 }}%</div>
<div class="title3">线路装备在用率</div>
</div>
<div class="cable-box">
<div>{{ rate3 }}%</div>
<div class="title3">电缆装备在用率</div>
</div>
</div>
<div class="content">
<div class="content-title"></div>
<div class="content-view">
<div class="all-box">
<div style="font-size: 20px">{{ allRate }}%</div>
<div class="title2">总体在用率</div>
</div>
<div class="bd-box">
<div style="font-size: 16px">{{ rate1 }}%</div>
<div class="title3">变电装备在用率</div>
</div>
<div class="line-box">
<div style="font-size: 16px">{{ rate2 }}%</div>
<div class="title3">线路装备在用率</div>
</div>
<div class="cable-box">
<div style="font-size: 16px">{{ rate3 }}%</div>
<div class="title3">电缆装备在用率</div>
</div>
</div>
</div>
</template>
<script>
import { equipmentInServiceRateApi } from '@/api/screen/cityScreen'
export default {
data() {
return {
allRate: 0,
rate1: 0,
rate2: 0,
rate3: 0,
data() {
return {
allRate: 0,
rate1: 0,
rate2: 0,
rate3: 0
}
},
created() {
},
mounted() {
this.getEquipmentInServiceRate()
},
methods: {
getEquipmentInServiceRate() {
equipmentInServiceRateApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'equipmentInServiceRateApi')
if (response.code == 200) {
this.allRate = response.data[3].rate
this.rate1 = response.data[0].rate
this.rate2 = response.data[1].rate
this.rate3 = response.data[2].rate
}
},
created() {},
mounted() {
this.getEquipmentInServiceRate()
},
methods: {
getEquipmentInServiceRate() {
equipmentInServiceRateApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'equipmentInServiceRateApi')
if (response.code == 200) {
this.allRate = response.data[3].rate
this.rate1 = response.data[0].rate
this.rate2 = response.data[1].rate
this.rate3 = response.data[2].rate
}
})
},
},
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
width: 100%;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
.content-title {
width: 100%;
height: 38px;
padding-left: 12%;
letter-spacing: 2px;
background: url('../../../../../assets/images/cityScreen/1.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
font-family: 'PingFang SC';
font-weight: 600;
color: #78d6ff;
line-height: 38px;
width: 100%;
height: 38px;
padding-left: 10%;
letter-spacing: 2px;
background: url('../../../../../assets/images/cityScreen/1.png') no-repeat;
background-size: 100% 100%;
font-size: 18px;
font-family: 'PingFang SC';
font-weight: 600;
color: #78d6ff;
line-height: 38px;
}
.title {
font-size: 16px;
position: absolute;
top: 35%;
left: 18%;
font-size: 16px;
position: absolute;
top: 35%;
left: 18%;
}
.content-view {
width: 50%;
height: 85%;
position: relative;
background: url('../../../../../assets/cityScreen/usingBg.png') no-repeat center center;
background-size: 100% 100%;
width: 70%;
height: 85%;
position: relative;
background: url('../../../../../assets/cityScreen/usingBg.png') no-repeat center center;
background-size: 100% 100%;
}
.title2 {
font-size: 14px;
padding-top: 40%;
color: #ccc;
font-size: 12px;
padding-top: 40%;
color: #ccc;
}
.title3 {
color: #ccc;
font-size: 14px;
padding-top: 22%;
color: #ccc;
font-size: 12px;
padding-top: 22%;
}
.all-box {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
color: #fff;
font-size: 16px;
font-weight: 800;
position: absolute;
top: 50%;
left: 45%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
color: #fff;
font-weight: 800;
position: absolute;
top: 50%;
left: 46%;
}
.bd-box {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
color: #63c7dc;
font-size: 16px;
font-weight: 800;
position: absolute;
top: 42%;
left: 1%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
color: #63c7dc;
font-size: 16px;
font-weight: 800;
position: absolute;
top: 40%;
left: 2%;
}
.line-box {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
color: #9eabfe;
font-size: 16px;
font-weight: 800;
position: absolute;
top: 20%;
right: 0%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
color: #9eabfe;
font-size: 16px;
font-weight: 800;
position: absolute;
top: 20%;
right: 2%;
}
.cable-box {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
color: #8cfed7;
font-size: 16px;
font-weight: 800;
position: absolute;
top: 73%;
right: 0%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
color: #8cfed7;
font-size: 16px;
font-weight: 800;
position: absolute;
top: 73%;
right: 2%;
}
// @media screen and (min-width: 1080px) {

327
src/views/screen/cityScreen/components/maintenance/index.vue
View File

@ -1,203 +1,228 @@
<template>
<div class="content-1">
<div class="content-title"> 维保预警 </div>
<div class="content-view">
<div class="content-view-item">
<img src="../../../../../assets/cityScreen/icon1.png" />
<span class="text" style="">装备预警总数:</span>
<span class="num">{{ totalNum }}</span>
<span class="unit">台</span>
</div>
<div class="table-container">
<div class="tableHeader">
<div class="header" style="width: 10%">序号</div>
<div class="header" style="width: 35%">工序</div>
<div class="header" style="width: 30%">设备</div>
<div class="header" style="width: 25%">维保情况</div>
</div>
<div class="tableBox">
<div class="tableTr" v-for="(item, index) in tableList" :key="index">
<div class="tableTd" style="width: 10%">
{{ index + 1 }}
</div>
<div class="tableTd" style="width: 35%">
{{ item.procedureName }}
</div>
<div class="tableTd" style="width: 30%">
{{ item.deviceName }}
</div>
<div class="tableTd" style="width: 25%">
<span v-if="item.situation == '已超期'" style="color: red">{{ item.situation }}</span>
<span v-else>{{ item.situation }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="content-1">
<div class="content-title">
<div class="content-view-item">
<span class="text">装备预警总数:</span>
<span class="num">&nbsp;{{ totalNum }}</span>
<span class="unit">台</span>
</div>
<span></span>
</div>
<div class="content-view">
<div class="table-container">
<div class="tableHeader">
<div class="header" style="width: 5%">序号</div>
<div class="header" style="width: 35%">工序</div>
<div class="header" style="width: 30%">设备</div>
<div class="header" style="width: 30%">维保情况</div>
</div>
<div class="tableBox">
<div class="tableTr" v-for="(item, index) in tableList" :key="index">
<div class="tableTd" style="width: 5%">
{{ index + 1 }}
</div>
<div class="tableTd" style="width: 35%">
{{ item.procedureName }}
</div>
<div class="tableTd" style="width: 30%">
{{ item.deviceName }}
</div>
<div class="tableTd" style="width: 30%">
<span v-if="item.situation == '已超期'" style="color: red">{{ item.situation }}</span>
<span v-else>{{ item.situation }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { maintenanceAlarmApi } from '@/api/screen/cityScreen'
export default {
data() {
return {
totalNum: 0,
tableList: [],
data() {
return {
totalNum: 0,
tableList: []
}
},
created() {
},
mounted() {
this.getMaintenanceAlarm()
},
methods: {
getMaintenanceAlarm() {
maintenanceAlarmApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'maintenanceAlarmApi')
if (response.code == 200) {
this.totalNum = response.data.total
this.tableList = response.data.list
}
},
created() {},
mounted() {
this.getMaintenanceAlarm()
},
methods: {
getMaintenanceAlarm() {
maintenanceAlarmApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'maintenanceAlarmApi')
if (response.code == 200) {
this.totalNum = response.data.total
this.tableList = response.data.list
}
})
},
},
})
}
}
}
</script>
<style lang="scss" scoped>
.content-1 {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content-title {
width: 100%;
height: 38px;
line-height: 38px;
padding-left: 12%;
letter-spacing: 2px;
background: url('../../../../../assets/images/cityScreen/5.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
font-family: 'PingFang SC';
font-weight: 600;
color: #78d6ff;
}
.title {
font-size: 16px;
position: absolute;
top: 35%;
left: 18%;
letter-spacing: 2px;
font-family: 'PingFang SC';
}
.content-view {
width: 100%;
height: 82%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
// padding-left: 8%;
.content-title {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
height: 38px;
line-height: 38px;
padding-left: 10%;
letter-spacing: 2px;
background: url('../../../../../assets/images/cityScreen/5.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
font-family: 'PingFang SC';
font-weight: 600;
color: #78d6ff;
}
.title {
font-size: 16px;
position: absolute;
top: 35%;
left: 18%;
letter-spacing: 2px;
font-family: 'PingFang SC';
}
.content-view {
width: 100%;
height: 80%;
flex: 1;
margin-top: 5px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content-view-item {
display: flex;
align-items: center;
justify-content: center;
margin-left: 215px;
display: flex;
align-items: center;
justify-content: center;
img {
height: 42px;
}
img {
height: 50px;
margin-top: 15px;
}
}
.text {
color: #c0c2c6;
font-size: 16px;
color: #c0c2c6;
font-size: 12px;
}
.num {
color: #83d3f8;
font-size: 16px;
font-weight: 600;
color: #fcfac4;
font-size: 20px;
margin: 0 5px;
font-weight: bold;
opacity: 0.9; /* 轻微透明感 */
text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* 关键：模糊效果 */
}
.unit {
font-size: 16px;
color: #ccc;
font-size: 8px;
color: #ccc;
margin-top: 10px;
}
.icon {
// width: 70px;
// height: 70px;
transform: scale(0.8);
// width: 70px;
// height: 70px;
transform: scale(0.8);
}
.table-container {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: hidden;
flex: 1;
display: flex;
flex-direction: column;
overflow-y: hidden;
}
.tableHeader {
width: 100%;
height: 20%;
background-color: #082d6e;
opacity: 0.8;
display: flex;
align-items: center;
width: 100%;
height: 15%;
background-color: #082d6e;
opacity: 0.8;
font-size: 10px;
display: flex;
align-items: center;
}
.tableBox {
width: 100%;
flex: 1;
overflow-y: auto;
width: 100%;
flex: 1;
overflow-y: auto;
}
.tableTr {
width: 100%;
height: 32%;
// background-image: url("../../../../../assets/cityScreen/tableTr2.png");
// background-size: 100% 100%;
/* border-bottom: 1px dashed #eee; */
display: flex;
cursor: pointer;
width: 100%;
height: 30%;
font-size: 11px;
// background-image: url("../../../../../assets/cityScreen/tableTr2.png");
// background-size: 100% 100%;
border-bottom: 1px dashed rgba(238, 238, 238, 0.56);
display: flex;
cursor: pointer;
}
.tableTd {
width: auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header {
color: #ccc;
padding: 4px 0;
width: 25%;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #ccc;
padding: 4px 0;
width: 25%;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
width: 4px;
height: 4px;
}
//定义背景颜色和圆角
::-webkit-scrollbar-thumb {
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.3);
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.3);
}
//定义滚动条轨道 内阴影+圆角
::-webkit-scrollbar-track {
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.1);
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.1);
}
// @media screen and (min-width: 1080px) {

305
src/views/screen/cityScreen/components/retire/index.vue
View File

@ -1,190 +1,217 @@
<template>
<div class="content">
<div class="content-title"> 退役预警 </div>
<div class="content-view">
<div class="content-view-item">
<img src="../../../../../assets/cityScreen/icon2.png" />
<span class="label" style="">退役预警总数:</span>
<span class="num">{{ totalNum }}</span>
<span class="unit">台</span>
</div>
<div class="table-container">
<div class="tableHeader">
<div class="header" style="width: 10%">序号</div>
<div class="header" style="width: 30%">工序</div>
<div class="header" style="width: 25%">设备</div>
<div class="header" style="width: 35%">预警情况</div>
</div>
<div class="tableBox">
<div class="tableTr" v-for="(item, index) in tableList" :key="index">
<div class="tableTd" style="width: 10%">
{{ index + 1 }}
</div>
<div class="tableTd" style="width: 30%">
{{ item.procedureName }}
</div>
<div class="tableTd" style="width: 25%">
{{ item.deviceName }}
</div>
<div class="tableTd" style="width: 35%; color: #e3c54e">
{{ item.situation }}
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="content-title">
<div class="content-view-item">
<span class="label" style="">退役预警总数:</span>
<span class="num">{{ totalNum }}</span>
<span class="unit">台</span>
</div>
<span></span>
</div>
<div class="content-view">
<div class="table-container">
<div class="tableHeader">
<div class="header" style="width: 5%">序号</div>
<div class="header" style="width: 30%">工序</div>
<div class="header" style="width: 25%">设备</div>
<div class="header" style="width: 40%">预警情况</div>
</div>
<div class="tableBox">
<div class="tableTr" v-for="(item, index) in tableList" :key="index">
<div class="tableTd" style="width: 5%">
{{ index + 1 }}
</div>
<div class="tableTd" style="width: 30%">
{{ item.procedureName }}
</div>
<div class="tableTd" style="width: 25%">
{{ item.deviceName }}
</div>
<div class="tableTd" style="width: 40%; color: #e3c54e">
{{ item.situation }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { retirementAlarmApi } from '@/api/screen/cityScreen'
export default {
data() {
return {
totalNum: 0,
tableList: [],
data() {
return {
totalNum: 0,
tableList: []
}
},
created() {
},
mounted() {
this.getRetirementAlarm()
},
methods: {
getRetirementAlarm() {
retirementAlarmApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'retirementAlarmApi')
if (response.code == 200) {
this.totalNum = response.data.total
this.tableList = response.data.list
}
},
created() {},
mounted() {
this.getRetirementAlarm()
},
methods: {
getRetirementAlarm() {
retirementAlarmApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'retirementAlarmApi')
if (response.code == 200) {
this.totalNum = response.data.total
this.tableList = response.data.list
}
})
},
},
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content-title {
width: 100%;
height: 38px;
line-height: 38px;
padding-left: 12%;
letter-spacing: 2px;
background: url('../../../../../assets/images/cityScreen/4.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
font-family: 'PingFang SC';
font-weight: 600;
color: #78d6ff;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
height: 38px;
line-height: 38px;
padding-left: 10%;
letter-spacing: 2px;
background: url('../../../../../assets/images/cityScreen/4.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
font-family: 'PingFang SC';
font-weight: 600;
color: #78d6ff;
}
.title {
font-size: 16px;
position: absolute;
top: 35%;
left: 18%;
letter-spacing: 2px;
font-family: 'PingFang SC';
font-size: 16px;
position: absolute;
top: 35%;
left: 18%;
letter-spacing: 2px;
font-family: 'PingFang SC';
}
.content-view {
width: 100%;
height: 82%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 5px;
width: 100%;
height: 82%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
// padding-left: 8%;
// padding-left: 8%;
}
.content-view-item {
display: flex;
align-items: center;
justify-content: center;
display: flex;
margin-left: 210px;
align-items: center;
justify-content: center;
img {
height: 42px;
}
img {
height: 50px;
margin-top: 15px;
}
}
.label {
color: #c0c2c6;
font-size: 16px;
color: #c0c2c6;
font-size: 10px;
}
.num {
color: #83d3f8;
font-size: 16px;
font-weight: 600;
margin: 0 10px;
color: #fcfac4;
font-size: 20px;
margin: 0 5px;
font-weight: bold;
opacity: 0.9; /* 轻微透明感 */
text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* 关键：模糊效果 */
}
.unit {
font-size: 16px;
color: #ccc;
font-size: 8px;
color: #ccc;
margin-top: 5px;
}
// .icon {
// width: 70px;
// height: 70px;
// }
.table-container {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: hidden;
flex: 1;
display: flex;
flex-direction: column;
overflow-y: hidden;
}
.tableHeader {
width: 100%;
height: 20%;
background-color: #082d6e;
opacity: 0.8;
display: flex;
align-items: center;
width: 100%;
height: 15%;
background-color: #082d6e;
opacity: 0.8;
font-size: 10px;
display: flex;
align-items: center;
}
.tableBox {
width: 100%;
flex: 1;
overflow-y: auto;
width: 100%;
flex: 1;
overflow-y: auto;
}
.tableBox::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
display: none; /* Chrome, Safari, Opera */
}
.tableTr {
width: 100%;
height: 31%;
// background-image: url("../../../../../assets/cityScreen/tableTr2.png");
// background-size: 100% 100%;
// margin-bottom: 2px;
/* border-bottom: 1px dashed #eee; */
display: flex;
cursor: pointer;
width: 100%;
height: 31%;
font-size: 11px;
// background-image: url("../../../../../assets/cityScreen/tableTr2.png");
// background-size: 100% 100%;
// margin-bottom: 2px;
border-bottom: 1px dashed rgba(238, 238, 238, 0.56);
display: flex;
cursor: pointer;
}
.tableTd {
width: auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header {
color: #ccc;
padding: 4px 0;
width: 25%;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #ccc;
padding: 4px 0;
width: 25%;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
// @media screen and (min-width: 1080px) {

274
src/views/screen/cityScreen/components/topIcons/index.vue
View File

@ -1,47 +1,47 @@
<template>
<div class="content">
<div v-for="item in itemList" :key="item.keyValue" class="iconItem-box">
<img :src="item.icon" alt="" />
<div class="content">
<div v-for="item in itemList" :key="item.keyValue" class="iconItem-box">
<img :src="item.icon" alt="" />
<div class="value">
<span> {{ item.title }} </span>
<span>
<div class="value">
<span> {{ item.title }} </span>
<span>
{{ basicHeadData[item.keyValue] }} <i> {{ item.unit }} </i>
</span>
</div>
</div>
<!-- <div class="iconItem">
<div class="item-box" style="right: -8%">
<div class="title">装备总量</div>
<div class="num">
<span style="font-weight: 600">{{ totalCount }}</span>
<span class="unit">台</span>
</div>
</div>
</div>
<div class="iconItem">
<div class="item-box" style="right: -10%">
<div class="title">装备总价值</div>
<div class="num">
<span style="font-weight: 600" v-if="totalValue > 99999999">{{
(totalValue / 100000000).toFixed(3)
}}</span>
<span style="font-weight: 600" v-else>{{ (totalValue / 10000).toFixed(2) }}</span>
<span class="unit" v-if="totalValue > 99999999">亿元</span>
<span class="unit" v-else>万元</span>
</div>
</div>
</div>
<div class="iconItem">
<div class="item-box" style="right: -8%">
<div class="title">装备配置率</div>
<div class="num">
<span style="font-weight: 600">{{ allocationRate }}</span>
<span class="unit">%</span>
</div>
</div>
</div> -->
</div>
</div>
<!-- <div class="iconItem">
<div class="item-box" style="right: -8%">
<div class="title">装备总量</div>
<div class="num">
<span style="font-weight: 600">{{ totalCount }}</span>
<span class="unit">台</span>
</div>
</div>
</div>
<div class="iconItem">
<div class="item-box" style="right: -10%">
<div class="title">装备总价值</div>
<div class="num">
<span style="font-weight: 600" v-if="totalValue > 99999999">{{
(totalValue / 100000000).toFixed(3)
}}</span>
<span style="font-weight: 600" v-else>{{ (totalValue / 10000).toFixed(2) }}</span>
<span class="unit" v-if="totalValue > 99999999">亿元</span>
<span class="unit" v-else>万元</span>
</div>
</div>
</div>
<div class="iconItem">
<div class="item-box" style="right: -8%">
<div class="title">装备配置率</div>
<div class="num">
<span style="font-weight: 600">{{ allocationRate }}</span>
<span class="unit">%</span>
</div>
</div>
</div> -->
</div>
</template>
<script>
@ -51,116 +51,122 @@ import Icon2 from '@/assets/images/cityScreen/icon-2.png'
import Icon3 from '@/assets/images/cityScreen/icon-3.png'
export default {
data() {
return {
// totalCount: 0,
// totalValue: 0,
// allocationRate: 0,
basicHeadData: {
totalCount: 0,
totalValue: 0,
allocationRate: 0,
},
data() {
return {
// totalCount: 0,
// totalValue: 0,
// allocationRate: 0,
basicHeadData: {
totalCount: 0,
totalValue: 0,
allocationRate: 0
},
itemList: [
{
title: '装备数量',
icon: Icon1,
unit: '台',
keyValue: 'totalCount',
},
{
title: '装备总价值',
icon: Icon2,
unit: '万元',
keyValue: 'totalValue',
},
{
title: '装备配置率',
icon: Icon3,
unit: '%',
keyValue: 'allocationRate',
},
],
itemList: [
{
title: '装备数量',
icon: Icon1,
unit: '台',
keyValue: 'totalCount'
},
{
title: '装备总价值',
icon: Icon2,
unit: '万元',
keyValue: 'totalValue'
},
{
title: '装备配置率',
icon: Icon3,
unit: '%',
keyValue: 'allocationRate'
}
]
}
},
created() {
},
mounted() {
this.getBasicHeader()
},
methods: {
getBasicHeader() {
getBasicHeadApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'getBasicHeadApi')
if (response.code == 200) {
this.basicHeadData.totalCount = response.data.totalCount
this.basicHeadData.totalValue = this.formatMoney(response.data.totalValue)
this.basicHeadData.allocationRate = response.data.allocationRate
this.formatMoney(response.data.totalValue)
}
})
},
created() {},
mounted() {
this.getBasicHeader()
},
methods: {
getBasicHeader() {
getBasicHeadApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
console.log(response, 'getBasicHeadApi')
if (response.code == 200) {
this.basicHeadData.totalCount = response.data.totalCount
this.basicHeadData.totalValue = this.formatMoney(response.data.totalValue)
this.basicHeadData.allocationRate = response.data.allocationRate
this.formatMoney(response.data.totalValue)
}
})
},
// 金额格式化 以及单位
formatMoney(money) {
if (money > 99999999) {
this.itemList[1].unit = '亿元'
return (money / 100000000).toFixed(3)
} else {
this.itemList[1].unit = '万元'
return (money / 10000).toFixed(2)
}
},
},
// 金额格式化 以及单位
formatMoney(money) {
if (money > 99999999) {
this.itemList[1].unit = '亿元'
return (money / 100000000).toFixed(3)
} else {
this.itemList[1].unit = '万元'
return (money / 10000).toFixed(2)
}
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
background: url('../../../../../assets/images/cityScreen/left-1-bg.png') no-repeat center center;
width: 100%;
height: 100%;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-around;
background: url('../../../../../assets/images/cityScreen/left-1-bg.png') no-repeat center center;
background-size: 100% 100%;
.iconItem-box {
background: url('../../../../../assets/images/cityScreen/left-1-1-bg.png') no-repeat center center;
background-size: 100% 100%;
display: flex;
width: 100%;
height: 90%;
flex: 1;
align-items: center;
justify-content: center;
}
.iconItem-box {
display: flex;
flex: 1;
justify-content: center;
.value {
margin-left: -5px;
display: flex;
align-items: flex-start;
flex-direction: column;
img {
transform: scale(1.5);
}
& span:first-child {
margin-bottom: 3%;
color: #fff;
font-size: 14px;
}
.value {
display: flex;
align-items: center;
flex-direction: column;
width: 50%;
background: url('../../../../../assets/images/cityScreen/left-1-1-bg.png') no-repeat center center;
background-size: 100% 100%;
padding-top: 5%;
& span:first-child {
margin-bottom: 3%;
color: #fff;
font-size: 16px;
}
& span:last-child {
color: #fcfac4;
font-size: 18px;
}
i {
font-style: normal;
font-size: 12px;
color: #fff;
margin-top: 5px;
}
& span:last-child {
color: #fcfac4;
font-size: 20px;
font-weight: bold;
opacity: 0.9; /* 轻微透明感 */
text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* 关键：模糊效果 */
letter-spacing: 2px; /* 可选：调整数字间距 */
}
i {
font-style: normal;
font-size: 8px;
color: #fff;
margin-top: 5px;
}
}
}
// .iconItem {
// width: 25%;
// height: 100%;

189
src/views/screen/cityScreen/components/topIconsTwo/index.vue
View File

@ -1,127 +1,114 @@
<template>
<div class="content">
<div v-for="item in itemList" :key="item.keyValue" class="iconItem-box">
<img :src="item.icon" alt="" />
<div class="content">
<div v-for="item in itemList" :key="item.keyValue" class="iconItem-box">
<img :src="item.icon" alt=""/>
<div class="value">
<span> {{ item.title }} </span>
<span>
{{ basicHeadData[item.keyValue] }} <i> {{ item.unit }} </i>
<div class="value">
<span> {{ item.title }} </span>
<span>
{{ !basicHeadData[item.keyValue] ? '0' : basicHeadData[item.keyValue]}} <i> {{ item.unit }} </i>
</span>
</div>
</div>
<!-- <div class="iconItem">
<div class="item-box" style="right: -12%">
<div class="title">今日入库</div>
<div class="num">
<span style="font-weight: 600">{{ enterNum }}</span>
<span class="unit">台</span>
</div>
</div>
</div>
<div class="iconItem">
<div class="item-box" style="right: 8%">
<div class="title">今日出库</div>
<div class="num">
<span style="font-weight: 600">{{ outNum }}</span>
<span class="unit">台</span>
</div>
</div>
</div> -->
</div>
</div>
</div>
</template>
<script>
import { getBasicHeadApi } from '@/api/screen/cityScreen'
import Icon1 from '@/assets/images/cityScreen/今日出库.png'
import Icon2 from '@/assets/images/cityScreen/out.png'
export default {
data() {
return {
enterNum: 0,
outNum: 0,
basicHeadData: {
enterNum: 0,
outNum: 0,
},
itemList: [
{
title: '今日入库',
icon: Icon1,
unit: '台',
keyValue: 'enterNum',
},
{
title: '今日出库',
icon: Icon2,
unit: '台',
keyValue: 'totalValue',
},
],
}
},
created() {},
mounted() {
this.getBasicHeader()
},
methods: {
getBasicHeader() {
getBasicHeadApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
if (response.code == 200) {
this.enterNum = response.data.enterNum
this.outNum = response.data.outNum
}
})
data() {
return {
enterNum: 0,
outNum: 0,
basicHeadData: {
enterNum: 0,
outNum: 0
},
itemList: [
{
title: '今日入库',
icon: Icon1,
unit: '台',
keyValue: 'enterNum'
},
},
{
title: '今日出库',
icon: Icon2,
unit: '台',
keyValue: 'totalValue'
}
]
}
},
created() {
},
mounted() {
this.getBasicHeader()
},
methods: {
getBasicHeader() {
getBasicHeadApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
if (response.code == 200) {
this.enterNum = response.data.enterNum
this.outNum = response.data.outNum
}
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-around;
background: url('../../../../../assets/images/cityScreen/left-1-bg.png') no-repeat center center;
background-size: 100% 100%;
.iconItem-box {
display: flex;
flex: 1;
justify-content: center;
background: url('../../../../../assets/images/cityScreen/left-1-1-bg.png') no-repeat center center;
background-size: 100% 100%;
}
.value {
display: flex;
align-items: center;
justify-content: space-around;
background: url('../../../../../assets/images/cityScreen/left-1-bg.png') no-repeat center center;
background-size: 100% 100%;
flex-direction: column;
width: 50%;
.iconItem-box {
display: flex;
flex: 1;
justify-content: center;
padding-top: 5%;
img {
transform: scale(1.5);
}
& span:first-child {
margin-bottom: 3%;
color: #fff;
font-size: 14px;
}
.value {
display: flex;
align-items: center;
flex-direction: column;
width: 50%;
background: url('../../../../../assets/images/cityScreen/left-1-1-bg.png') no-repeat center center;
background-size: 100% 100%;
padding-top: 5%;
& span:first-child {
margin-bottom: 3%;
color: #fff;
font-size: 16px;
}
& span:last-child {
color: #fcfac4;
font-size: 18px;
}
i {
font-style: normal;
font-size: 12px;
color: #fff;
margin-top: 5px;
}
& span:last-child {
color: #fcfac4;
font-size: 20px;
font-weight: bold;
opacity: 0.9; /* 轻微透明感 */
text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* 关键：模糊效果 */
letter-spacing: 2px; /* 可选：调整数字间距 */
}
i {
font-style: normal;
font-size: 8px;
color: #fff;
margin-top: 5px;
}
}
}
// @media screen and (min-width: 1080px) {

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

@ -1,42 +1,42 @@
<template>
<!-- 城市大屏 -->
<div class="city-screen-container" id="cityScreenContainer">
<div class="left_view">
<!-- <TopIcons /> -->
<div class="left_1">
<TopIcons />
</div>
<div class="left_2">
<EquQuantity />
</div>
<div class="left_5">
<EquStatus />
</div>
<div class="left_3">
<Maintenance />
</div>
<div class="left_6">
<Retire />
</div>
</div>
<div class="center_view">
<CountryMap />
</div>
<div class="right_view">
<div class="right_1">
<TopIconsTwo />
</div>
<div class="right_2">
<EquUse />
</div>
<div class="right_3">
<EquTurnover />
</div>
<div class="right_4">
<EngineerUsing />
</div>
</div>
<!-- 城市大屏 -->
<div class="city-screen-container" id="cityScreenContainer">
<div class="left_view">
<!-- <TopIcons /> -->
<div class="left_1">
<TopIcons/>
</div>
<div class="left_2">
<EquQuantity/>
</div>
<div class="left_5">
<EquStatus/>
</div>
<div class="left_3">
<Maintenance/>
</div>
<div class="left_6">
<Retire/>
</div>
</div>
<div class="center_view">
<CountryMap/>
</div>
<div class="right_view">
<div class="right_1">
<TopIconsTwo/>
</div>
<div class="right_2">
<EquUse/>
</div>
<div class="right_3">
<EquTurnover/>
</div>
<div class="right_4">
<EngineerUsing/>
</div>
</div>
</div>
</template>
<script>
@ -51,34 +51,36 @@ import EquUse from './components/equUse/index.vue'
import EquTurnover from './components/equTurnover/index.vue'
import EngineerUsing from './components/engineerUsing/index.vue'
import autofit from 'autofit.js'
export default {
name: 'cityScreen',
// mixins: [drawMixin],
components: {
TopIcons,
EquQuantity,
EquStatus,
Maintenance,
Retire,
CountryMap,
TopIconsTwo,
EquUse,
EquTurnover,
EngineerUsing,
},
data() {
return {}
},
created() {},
mounted() {
autofit.init({
designHeight: 1080,
designWidth: 1920,
renderDom: '#cityScreenContainer',
resize: true,
})
},
methods: {},
name: 'cityScreen',
// mixins: [drawMixin],
components: {
TopIcons,
EquQuantity,
EquStatus,
Maintenance,
Retire,
CountryMap,
TopIconsTwo,
EquUse,
EquTurnover,
EngineerUsing
},
data() {
return {}
},
created() {
},
mounted() {
autofit.init({
designHeight: 1080,
designWidth: 1920,
renderDom: '#cityScreenContainer',
resize: true
})
},
methods: {}
}
</script>
<style lang="scss" scoped>
@ -86,65 +88,91 @@ export default {
font-family: 'Alibaba-PuHuiTi-Regular';
src: url('../../../assets/font-family/alibaba/Alibaba-PuHuiTi-Regular.ttf');
}
.city-screen-container {
width: 100%;
height: 100%;
font-size: 16px;
padding: 60px 1% 6px;
display: grid;
grid-template-rows: 100%;
grid-template-columns: 34% 32% 34%;
background: url('../../../assets/images/cityScreen/bg.jpg') no-repeat center center;
background-size: 100% 100%;
font-family: 'Alibaba-PuHuiTi-Regular';
width: 100%;
height: 100%;
font-size: 16px;
padding: 60px 3.5% 6px;
display: grid;
grid-template-rows: 100%;
grid-template-columns: 25% 50% 25%;
background: url('../../../assets/images/cityScreen/bg.jpg') no-repeat center center;
background-size: 100% 100%;
font-family: 'Alibaba-PuHuiTi-Regular';
}
.left_view {
display: grid;
gap: 10px;
grid-template-rows: repeat(16, 1fr);
display: grid;
padding-bottom: 6%;
gap: 10px;
grid-template-rows: repeat(10, 1fr);
}
.right_view {
display: grid;
gap: 10px;
grid-template-rows: repeat(16, 1fr);
display: grid;
gap: 10px;
padding-bottom: 6%;
grid-template-rows: repeat(10, 1fr);
}
.left_1 {
grid-row: 1 / 2;
grid-column: 1 / 2;
width: 100%;
height: 92px;
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.left_2 {
grid-row: 2 / 6;
grid-column: 1 / 2;
width: 100%;
height: 274px;
grid-row: 2 / 6;
grid-column: 1 / 2;
}
.left_5 {
grid-row: 6 / 10;
grid-column: 1 / 2;
width: 100%;
height: 269px;
grid-row: 6 / 10;
grid-column: 1 / 2;
}
.left_3 {
grid-row: 10 / 13;
grid-column: 1 / 2;
width: 100%;
height: 150px;
grid-row: 10 / 13;
grid-column: 1 / 2;
}
.left_6 {
grid-row: 13 / 17;
grid-column: 1 / 2;
width: 100%;
height: 150px;
grid-row: 13 / 17;
grid-column: 1 / 2;
}
.right_1 {
grid-row: 1 / 2;
width: 100%;
height: 92px;
grid-row: 1 / 2;
}
.right_2 {
grid-row: 2 / 7;
display: flex;
width: 100%;
height: 306px;
grid-row: 2 / 7;
display: flex;
}
.right_3 {
grid-row: 7 / 12;
display: flex;
height: 306px;
grid-row: 7 / 12;
display: flex;
}
.right_4 {
grid-row: 12 / 17;
display: flex;
height: 306px;
grid-row: 12 / 17;
display: flex;
}
</style>