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

地市大屏接口对接

This commit is contained in:
zzyuan 2025-09-15 17:50:00 +08:00
parent 5853f12ce8
commit 95796fbb84
15 changed files with 732 additions and 690 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/api/screen/cityScreen.js Normal file
View File

@ -0,0 +1,85 @@
import request from '@/utils/request'
// 装备总数、价值、配置率、今日入库数、出库数
export const getBasicHeadApi = (data) => {
return request({
url: '/material-mall/city_screen/getBasicHead',
method: 'GET',
params: data,
})
}
// 装备数量价值
export const equipmentQuantityValueApi = (data) => {
return request({
url: '/material-mall/city_screen/equipmentQuantityValue',
method: 'GET',
params: data,
})
}
// 装备状态
export const equipmentStatusApi = (data) => {
return request({
url: '/material-mall/city_screen/equipmentStatus',
method: 'GET',
params: data,
})
}
// 维保预警
export const maintenanceAlarmApi = (data) => {
return request({
url: '/material-mall/city_screen/maintenanceAlarm',
method: 'GET',
params: data,
})
}
// 退役报警
export const retirementAlarmApi = (data) => {
return request({
url: '/material-mall/city_screen/retirementAlarm',
method: 'GET',
params: data,
})
}
// 装备在用率
export const equipmentInServiceRateApi = (data) => {
return request({
url: '/material-mall/city_screen/equipmentInServiceRate',
method: 'GET',
params: data,
})
}
// 装备周转率
export const equipmentTurnoverRateApi = (data) => {
return request({
url: '/material-mall/city_screen/equipmentTurnoverRate',
method: 'GET',
params: data,
})
}
// 工程在用装备情况
export const equipmentInUseInTheProjectApi = (data) => {
return request({
url: '/material-mall/city_screen/equipmentInUseInTheProject',
method: 'GET',
params: data,
})
}
// 电压等级下拉选
export function getVoltageLevelApi(data) {
return request({
url: '/material-mall/decChange/getVoltageLevel',
method: 'post',
data: data,
})
}

BIN
src/assets/cityScreen/tableHeader2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/assets/cityScreen/tableTr2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

1
src/store/modules/user.js
View File

@ -114,6 +114,7 @@ const user = {
return getInfo()
.then(res => {
const user = res.user
sessionStorage.setItem('companyId', res.user.companyId)
const avatar = user.avatar ? user.avatar : require('@/assets/images/profile.jpg')
commit('SET_ROLES', res.roles && res.roles.length > 0 ? res.roles : ['ROLE_DEFAULT'])
commit('SET_PERMISSIONS', res.permissions)

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

@ -2,27 +2,42 @@
<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==2?'topTab2 fs-24 active2':'topTab2 fs-24'" @click="changTab(2)">变电</div>
<div :class="tabIndex==3?'topTab3 fs-24 active3':'topTab3 fs-24'" @click="changTab(3)">电缆</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">10</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">10</span>
<span class="num">{{useNum}}</span>
<span class="unit">台</span>
</div>
</div>
@ -38,26 +53,26 @@
</div>
<div class="tableBox">
<div class="tableTr" v-for="(item,index) in tableList" :key="index">
<div class="tableTd" style="width: 10%;">
<div class="tableTd" style="width: 10%;font-weight: 800;">
{{ index+1 }}
</div>
<div class="tableTd" style="width: 25%;">
{{ item.major }}
{{ item.projectName }}
</div>
<div class="tableTd" style="width: 20%;">
{{ item.devicesNum }}
{{ item.useNum }}
</div>
<div class="tableTd">
{{ item.amount }}
{{ (item.investAmount/10000).toFixed(2) }}
</div>
<div class="tableTd">
{{ item.person }}
{{ item.scenePersonNum }}
</div>
<div class="tableTd">
{{ item.riskLevel }}
</div>
<div class="tableTd">
{{ item.geography }}
{{ item.geoFeature }}
</div>
</div>
</div>
@ -67,110 +82,67 @@
</template>
<script>
import { equipmentInUseInTheProjectApi,getVoltageLevelApi } from "@/api/screen/cityScreen";
export default {
data() {
return {
tabIndex:1,
tableList:[
{
major:"变电站工程",
devicesNum:"15",
amount:"2289",
person:89,
riskLevel:5,
geography:"平原",
},
{
major:"变电站工程",
devicesNum:"15",
amount:"2289",
person:89,
riskLevel:5,
geography:"平原",
},
{
major:"变电站工程",
devicesNum:"15",
amount:"2289",
person:89,
riskLevel:5,
geography:"平原",
},
{
major:"变电站工程",
devicesNum:"15",
amount:"2289",
person:89,
riskLevel:5,
geography:"平原",
},
{
major:"变电站工程",
devicesNum:"15",
amount:"2289",
person:89,
riskLevel:5,
geography:"平原",
},
{
major:"变电站工程",
devicesNum:"15",
amount:"2289",
person:89,
riskLevel:5,
geography:"平原",
},
{
major:"变电站工程",
devicesNum:"15",
amount:"2289",
person:89,
riskLevel:5,
geography:"平原",
},
{
major:"变电站工程",
devicesNum:"15",
amount:"2289",
person:89,
riskLevel:5,
geography:"平原",
},
{
major:"变电站工程",
devicesNum:"15",
amount:"2289",
person:89,
riskLevel:5,
geography:"平原",
},
{
major:"变电站工程",
devicesNum:"15",
amount:"2289",
person:89,
riskLevel:5,
geography:"平原",
},
{
major:"变电站工程",
devicesNum:"15",
amount:"2289",
person:89,
riskLevel:5,
geography:"平原",
},
]
total:0,
useNum:0,
tableList:[],
selectId:"",
options:[]
}
},
created() {
},
mounted() {
this.getVoltageLevel()
this.getEquipmentInUseInTheProject()
},
methods: {
changeSelect(){
console.log(this.selectId)
this.getEquipmentInUseInTheProject()
},
changTab(index){
this.tabIndex=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)
}
}
});
}
},
}
</script>
@ -194,6 +166,30 @@ export default {
top: 23%;
left: 8%;
}
.select-view{
width: 15%;
height: 54%;
position: absolute;
top: 21%;
right: 2%;
}
.select-box {
width: 70%; /*设置宽度确保内容 和 下拉icon的距离*/
height: 75%;
background: #113F67;
color: #ccc;
border: none;
border-radius: 10%;
border-color: #113F67;
font-size: 20px;
/*清除select聚焦时候的边框颜色*/
outline: none;
option {
font-size: 20px;
border: none;
}
}
.content-view{
width: 100%;
height: 85%;
@ -267,8 +263,8 @@ export default {
color: #ccc;
}
.icon{
width: 60px;
height: 60px;
width: 70px;
height: 70px;
}
.tableHeader{
@ -281,12 +277,12 @@ export default {
}
.tableBox{
width: 100%;
height: 78%;
height: 76%;
overflow-y: auto;
}
.tableTr{
width: 100%;
height: 12%;
height: 18%;
background-image: url("../../../../../assets/cityScreen/tableTr.png");
background-size: 100% 100%;
margin-bottom: 2px;
@ -313,7 +309,22 @@ export default {
justify-content: center;
font-size: 24px;
}
@media screen and (min-width: 1920px) {
::-webkit-scrollbar{
width: 4px;
height: 4px;
}
//定义背景颜色和圆角
::-webkit-scrollbar-thumb{
border-radius: 1em;
background-color: rgba(50,50,50,.3);
}
//定义滚动条轨道 内阴影+圆角
::-webkit-scrollbar-track{
border-radius: 1em;
background-color: rgba(50,50,50,.1);
}
@media screen and (min-width: 1080px) {
.title{
font-size: 10px;
}
@ -326,20 +337,26 @@ export default {
margin: 0 2px;
}
.unit{
font-size: 10px;
font-size: 8px;
}
.icon{
width: 30px;
height: 30px;
width: 35px;
height: 35px;
}
.text{
font-size: 10px;
}
.tableTd{
font-size: 10px;
font-size: 8px;
}
.fs-24{
font-size: 10px;
font-size: 8px;
}
.select-box {
font-size: 10px;
option {
font-size: 10px;
}
}
}
@media screen and (min-width: 3000px) {
@ -347,22 +364,22 @@ export default {
font-size: 24px;
}
.header{
font-size: 24px;
font-size: 26px;
}
.num{
color: #83D3F8;
font-size: 24px;
font-size: 26px;
margin: 0 10px;
}
.unit{
font-size: 20px;
font-size: 16px;
}
.icon{
width: 60px;
height: 60px;
width: 70px;
height: 70px;
}
.text{
font-size: 20px;
font-size: 26px;
}
.tableTd{
font-size: 24px;
@ -370,6 +387,12 @@ export default {
.fs-24{
font-size: 24px;
}
.select-box {
font-size: 20px;
option {
font-size: 20px;
}
}
}

197
src/views/screen/cityScreen/components/equiQuantity/index.vue
View File

@ -17,30 +17,32 @@
</div>
<div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
<div class="num">
<span style="font-weight: 700;">50</span>
<span style="font-weight: 700;">{{lineData.deviceQuantity}}</span>
<span class="unit">台</span>
</div>
<div class="num">
<span style="font-weight: 700;">0.027</span>
<span class="unit">亿元</span>
<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 id="lineChartOne" style="width: 100%;height: 20%;"></div>
<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;">30</span>
<span class="unit2">73%</span>
<span style="font-weight: 700;">{{lineData.fiveYearCount}}</span>
<span class="unit2">{{lineData.fiveYearRatio}}%</span>
</div>
<div class="num2" style="color: #00FEFC;">
<span class="unit2" style="color: #00FEFC;">5-10年</span>
<span style="font-weight: 700;">15</span>
<span class="unit2" style="color: #00FEFC;">23%</span>
<span style="font-weight: 700;">{{lineData.fiveToTenYearCount}}</span>
<span class="unit2" style="color: #00FEFC;">{{lineData.fiveToTenYearRatio}}%</span>
</div>
<div class="num2" style="color: #00FEFC;">
<span class="unit2" style="color: #1E8DFF;">10年以上</span>
<span style="font-weight: 700;">15</span>
<span class="unit2" style="color: #1E8DFF;">0%</span>
<span style="font-weight: 700;">{{lineData.aboveTenYearCount}}</span>
<span class="unit2" style="color: #1E8DFF;">{{lineData.aboveTenYearRatio}}%</span>
</div>
</div>
</div>
@ -55,30 +57,32 @@
</div>
<div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
<div class="num">
<span style="font-weight: 700;">50</span>
<span style="font-weight: 700;">{{bdData.deviceQuantity}}</span>
<span class="unit">台</span>
</div>
<div class="num">
<span style="font-weight: 700;">0.027</span>
<span class="unit">亿元</span>
<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>
<div id="lineChartTwo" style="width: 100%;height: 20%;"></div>
<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;">30</span>
<span class="unit2">73%</span>
<span style="font-weight: 700;">{{bdData.fiveYearCount}}</span>
<span class="unit2">{{bdData.fiveYearRatio}}%</span>
</div>
<div class="num2" style="color: #00FEFC;">
<span class="unit2" style="color: #00FEFC;">5-10年</span>
<span style="font-weight: 700;">15</span>
<span class="unit2" style="color: #00FEFC;">23%</span>
<span style="font-weight: 700;">{{bdData.fiveToTenYearCount}}</span>
<span class="unit2" style="color: #00FEFC;">{{bdData.fiveToTenYearRatio}}%</span>
</div>
<div class="num2" style="color: #00FEFC;">
<span class="unit2" style="color: #1E8DFF;">10年以上</span>
<span style="font-weight: 700;">15</span>
<span class="unit2" style="color: #1E8DFF;">0%</span>
<span style="font-weight: 700;">{{bdData.aboveTenYearCount}}</span>
<span class="unit2" style="color: #1E8DFF;">{{bdData.aboveTenYearRatio}}%</span>
</div>
</div>
</div>
@ -93,30 +97,32 @@
</div>
<div style="width: 100%;height: 40%;display: flex;justify-content: space-between;align-items: center;">
<div class="num">
<span style="font-weight: 700;">50</span>
<span style="font-weight: 700;">{{dlData.deviceQuantity}}</span>
<span class="unit">台</span>
</div>
<div class="num">
<span style="font-weight: 700;">0.027</span>
<span class="unit">亿元</span>
<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>
<div id="lineChartThree" style="width: 100%;height: 20%;"></div>
<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;">30</span>
<span class="unit2">73%</span>
<span style="font-weight: 700;">{{dlData.fiveYearCount}}</span>
<span class="unit2">{{dlData.fiveYearRatio}}%</span>
</div>
<div class="num2" style="color: #00FEFC;">
<span class="unit2" style="color: #00FEFC;">5-10年</span>
<span style="font-weight: 700;">15</span>
<span class="unit2" style="color: #00FEFC;">23%</span>
<span style="font-weight: 700;">{{dlData.fiveToTenYearCount}}</span>
<span class="unit2" style="color: #00FEFC;">{{dlData.fiveToTenYearRatio}}%</span>
</div>
<div class="num2" style="color: #00FEFC;">
<span class="unit2" style="color: #1E8DFF;">10年以上</span>
<span style="font-weight: 700;">15</span>
<span class="unit2" style="color: #1E8DFF;">0%</span>
<span style="font-weight: 700;">{{dlData.aboveTenYearCount}}</span>
<span class="unit2" style="color: #1E8DFF;">{{dlData.aboveTenYearRatio}}%</span>
</div>
</div>
@ -129,46 +135,107 @@
</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
}
},
created() {
},
mounted() {
this.InitEChartsOne()
this.InitEChartsTwo()
this.lineChartThree()
// 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()
});
},
InitEChartsOne() {
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
var legendData = [
{ name: '5年', data: 30 },
{ name: '5-10年', data: 15 },
{ name: '10年以上', data: 15 }
];
var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF'];
var seriesList = [];
for (var i = 0; i < legendData.length; i++) {
seriesList.push({
type: 'bar',
stack: '2',
legendHoverLink: false,
barWidth: 6,
data: [
{
value: legendData[i].data,
itemStyle: {
color: colorList[i],
},
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,
@ -200,9 +267,9 @@ export default {
InitEChartsTwo() {
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
var legendData = [
{ name: '5年', data: 30 },
{ name: '5-10年', data: 15 },
{ name: '10年以上', data: 15 }
{ 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 = [];
@ -211,7 +278,7 @@ export default {
type: 'bar',
stack: '2',
legendHoverLink: false,
barWidth: 6,
barWidth: this.barWidth,
data: [
{
value: legendData[i].data,
@ -246,16 +313,16 @@ export default {
],
series: seriesList,
};
this.myCharts1 = echarts.init(document.querySelector('#lineChartTwo'));
this.myCharts1.setOption(option)
this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'));
this.myCharts2.setOption(option)
// });
},
lineChartThree() {
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
var legendData = [
{ name: '5年', data: 30 },
{ name: '5-10年', data: 15 },
{ name: '10年以上', data: 15 }
{ 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 = [];
@ -264,7 +331,7 @@ export default {
type: 'bar',
stack: '2',
legendHoverLink: false,
barWidth: 6,
barWidth: this.barWidth,
data: [
{
value: legendData[i].data,
@ -299,8 +366,8 @@ export default {
],
series: seriesList,
};
this.myCharts1 = echarts.init(document.querySelector('#lineChartThree'));
this.myCharts1.setOption(option)
this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'));
this.myCharts3.setOption(option)
// });
},
},
@ -369,7 +436,7 @@ export default {
margin-right: 8px;
margin-left: 8px;
}
@media screen and (min-width: 1920px) {
@media screen and (min-width: 1080px) {
.title{
font-size: 10px;
}

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

@ -12,11 +12,13 @@
</div>
</template>
<script>
<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],
@ -27,8 +29,7 @@ export default {
created() {
},
mounted() {
mounted() {
console.log(window.innerWidth, window.innerHeight);
if(window.innerWidth<3000){
this.barWidth=20
@ -41,7 +42,17 @@ export default {
},
methods: {
InitEChartsOne() {
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
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,
@ -52,7 +63,7 @@ export default {
borderColor: "transparent"
},
xAxis: {
data: ['在用', '在库', '在修', '共享'],
data: xData,
axisTick: {
show: false
},
@ -130,12 +141,12 @@ export default {
fontSize: this.fontSize,
color: '#ccc',
formatter: function(params) {
console.log(params)
var str = "" + params.value + "\n\n";
// console.log(params)
var str = params.value+ "/" + rateData[params.dataIndex]+"%";
return str;
},
},
data:[220, 182, 191, 234]
data:yData
},
{
"name": "",
@ -188,14 +199,14 @@ export default {
opacity: 1,
color:'#2B9CCC',
},
"data": [220, 182, 191, 234]
"data": yData
},
]
};
this.myCharts1 = echarts.init(document.querySelector('#lineChartFour'));
this.myCharts1.setOption(option)
// });
this.myCharts4 = echarts.init(document.querySelector('#lineChartFour'));
this.myCharts4.setOption(option)
});
},
},
}
@ -229,12 +240,9 @@ export default {
width: 100%;margin-bottom: 10px;color: #A9C4F8;text-align: center;
font-size: 24px;
}
@media screen and (min-width: 1920px) {
@media screen and (min-width: 1080px) {
.title{
font-size: 10px;
position: absolute;
top: 42%;
left: 18%;
}
.text{
font-size: 10px;
@ -244,9 +252,6 @@ export default {
@media screen and (min-width: 3000px) {
.title{
font-size: 24px;
position: absolute;
top: 42%;
left: 18%;
}
.text{
font-size: 24px;

142
src/views/screen/cityScreen/components/equiTurnover/index.vue
View File

@ -15,9 +15,6 @@
</div>
<div class="tableBox">
<div class="tableTr" v-for="(item,index) in tableList" :key="index">
<div class="tableTd">
{{ index+1 }}
</div>
<div class="tableTd">
{{ item.major }}
</div>
@ -25,13 +22,13 @@
{{ item.mainProcess }}
</div>
<div class="tableTd">
{{ item.subProcess }}
{{ item.subprocess }}
</div>
<div class="tableTd">
{{ item.equipment }}
{{ item.deviceName }}
</div>
<div class="tableTd">
{{ item.maintenanceStatus }}
{{ item.turnoverRate }}
</div>
</div>
</div>
@ -40,106 +37,28 @@
</template>
<script>
import { equipmentTurnoverRateApi } from "@/api/screen/cityScreen";
export default {
data() {
return {
tableList:[
{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装塔材吊装塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
},
{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装塔材吊装塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
},{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
},{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
},{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
},{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
},{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
},{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
},{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
},{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
},{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
},{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
},{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
},{
major:"变电站工程",
mainProcess:"组塔施工",
subProcess:"塔材吊装",
equipment:"牵引机",
maintenanceStatus:"2.25次/年",
}
]
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
}
});
}
},
}
</script>
@ -178,19 +97,21 @@ export default {
}
.tableBox{
width: 100%;
height: 88%;
height: 84%;
overflow-y: auto;
}
.tableTr{
width: 100%;
height: 12%;
height: 16%;
background-image: url("../../../../../assets/cityScreen/tableTr.png");
background-size: 100% 100%;
margin-bottom: 2px;
display: flex;
cursor: pointer;
}
.tableTd{
width: 20%;
width: 18%;
margin: 0 1%;
height: 100%;
display: flex;
align-items: center;
@ -203,14 +124,29 @@ export default {
}
.header{
color: #72B1F1;
width: 20%;
width: 18%;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-size: 26px;
}
@media screen and (min-width: 1920px) {
::-webkit-scrollbar{
width: 4px;
height: 4px;
}
//定义背景颜色和圆角
::-webkit-scrollbar-thumb{
border-radius: 1em;
background-color: rgba(50,50,50,.3);
}
//定义滚动条轨道 内阴影+圆角
::-webkit-scrollbar-track{
border-radius: 1em;
background-color: rgba(50,50,50,.1);
}
@media screen and (min-width: 1080px) {
.title{
font-size: 10px;
}
@ -218,7 +154,7 @@ export default {
font-size: 10px;
}
.tableTd{
font-size: 10px;
font-size: 8px;
}
}
@media screen and (min-width: 3000px) {
@ -226,7 +162,7 @@ export default {
font-size: 24px;
}
.header{
font-size: 24px;
font-size: 26px;
}
.tableTd{
font-size: 24px;

49
src/views/screen/cityScreen/components/equiUse/index.vue
View File

@ -8,19 +8,19 @@
<div class="content-view">
<img src="../../../../../assets/cityScreen/usingBg.png" style="width: 80%;height: 100%;position: absolute;top: 0;left: 15%;" />
<div class="all-box">
<div>60%</div>
<div>{{allRate}}%</div>
<div class="title2">总体在用率</div>
</div>
<div class="bd-box">
<div>60%</div>
<div>{{rate1}}%</div>
<div class="title3">变电装备在用率</div>
</div>
<div class="line-box">
<div>60%</div>
<div>{{rate2}}%</div>
<div class="title3">线路装备在用率</div>
</div>
<div class="cable-box">
<div>60%</div>
<div>{{rate3}}%</div>
<div class="title3">电缆装备在用率</div>
</div>
@ -29,17 +29,32 @@
</template>
<script>
import { equipmentInServiceRateApi } from "@/api/screen/cityScreen";
export default {
data() {
return {
return {
allRate:0,
rate1:0,
rate2:0,
rate3:0
}
},
created() {
},
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>
@ -104,7 +119,7 @@ export default {
font-size: 28px;
font-weight: 800;
position: absolute;
top:38%;
top:39%;
left: 12%;
}
.line-box{
@ -118,7 +133,7 @@ export default {
font-size: 28px;
font-weight: 800;
position: absolute;
top:19%;
top:20%;
right: 0%;
}
.cable-box{
@ -132,21 +147,21 @@ export default {
font-size: 28px;
font-weight: 800;
position: absolute;
top:74%;
top:73%;
right: 0%;
}
@media screen and (min-width: 1920px) {
@media screen and (min-width: 1080px) {
.title{
font-size: 10px;
}
.title2{
font-size: 10px;
padding-top: 5px;
font-size: 8px;
padding-top: 2px;
}
.title3{
font-size: 10px;
padding-top: 10px;
font-size: 8px;
padding-top: 12px;
}
.all-box{
font-size: 12px;
@ -171,7 +186,7 @@ export default {
}
.title3{
font-size: 20px;
padding-top: 30px;
padding-top: 28px;
}
.all-box{
font-size: 28px;

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

@ -9,81 +9,65 @@
<div style="width: 100%;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">10</span>
<span class="num">{{totalNum}}</span>
<span class="unit">台</span>
</div>
<div style="width: 100%;height: 85%;overflow-y: auto;">
<el-table :data="tableList">
<el-table-column label="序号" align="center" type="index"></el-table-column>
<el-table-column label="工序" align="center" prop="process"/>
<el-table-column label="设备" align="center" prop="equipment"/>
<el-table-column label="维保情况" align="center" prop="maintenanceStatus"/>
</el-table>
<div class="tableHeader">
<div class="header" style="width: 15%;">序号</div>
<div class="header" style="width: 30%;">工序</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: 15%;">
{{ index+1 }}
</div>
<div class="tableTd" style="width: 30%;">
{{ 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>
</template>
<script>
import { maintenanceAlarmApi } from "@/api/screen/cityScreen";
export default {
data() {
return {
tableList:[
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
]
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
}
});
}
},
}
</script>
@ -127,70 +111,72 @@ export default {
color: #ccc;
}
.icon{
width: 60px;
height: 60px;
}
/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
background-color: transparent !important;
border: 1px solid rgba(3, 40, 70, 0.9) !important;
}
/*去除底边框*/
::v-deep.el-table td.el-table__cell {
border: 0;
}
::v-deep.el-table th.el-table__cell.is-leaf {
border: 0;
}
::v-deep.el-table::before {
height: 0;
width: 70px;
height: 70px;
}
/* 滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 6px;
height: 6px;
.tableHeader{
width: 100%;
height: 12%;
background-color: #082D6E;
opacity: 0.8;
display: flex;
align-items: center;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #2893cc;
border-radius: 3px;
.tableBox{
width: 100%;
height: 84%;
overflow-y: auto;
}
.tableTr{
width: 100%;
height: 16%;
// background-image: url("../../../../../assets/cityScreen/tableTr2.png");
// background-size: 100% 100%;
border-bottom: 1px dashed #eee;
margin-bottom: 2px;
display: flex;
cursor: pointer;
}
.tableTd{
width: auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header{
color: #ccc;
width: 25%;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
}
/* 标题行 */
::v-deep .el-table__header-wrapper {
/* border: 1px solid #15c0ff !important; */
background-color: rgba(65, 129, 255, 0.4);
::-webkit-scrollbar{
width: 4px;
height: 4px;
}
//定义背景颜色和圆角
::-webkit-scrollbar-thumb{
border-radius: 1em;
background-color: rgba(50,50,50,.3);
}
//定义滚动条轨道 内阴影+圆角
::-webkit-scrollbar-track{
border-radius: 1em;
background-color: rgba(50,50,50,.1);
}
::v-deep .el-table .cell {
// color: #15c0ff !important;
color: #fff;
font-size: 10px!important;
}
::v-deep .el-table th.el-table__cell > .cell {
color: #e1f1fe !important;
font-size: 10px!important;
}
/* 高亮当前行 */
::v-deep .el-table__body tr.current-row > td {
background-color: #15c0ff20 !important;
}
::v-deep .el-table__body tr.current-row .cell {
color: #ffffff !important;
}
::v-deep .el-table__body tr:hover > td {
background-color: #15c0ff20 !important;
}
@media screen and (min-width: 1920px) {
@media screen and (min-width: 1080px) {
.title{
font-size: 10px;
}
@ -200,23 +186,20 @@ export default {
margin: 0 2px;
}
.unit{
font-size: 10px;
font-size: 8px;
}
.icon{
width: 30px;
height: 30px;
width: 35px;
height: 35px;
}
.text{
font-size: 10px;
}
::v-deep .el-table .cell {
// color: #15c0ff !important;
color: #fff;
font-size: 10px!important;
}
::v-deep .el-table th.el-table__cell > .cell {
color: #e1f1fe !important;
font-size: 10px!important;
.header{
font-size: 10px;
}
.tableTd{
font-size: 8px;
}
}
@media screen and (min-width: 3000px) {
@ -229,23 +212,20 @@ export default {
margin: 0 10px;
}
.unit{
font-size: 20px;
font-size: 16px;
}
.icon{
width: 60px;
height: 60px;
width: 70px;
height: 70px;
}
.text{
font-size: 20px;
font-size: 26px;
}
::v-deep .el-table .cell {
// color: #15c0ff !important;
color: #fff;
font-size: 20px!important;
}
::v-deep .el-table th.el-table__cell > .cell {
color: #e1f1fe !important;
font-size: 20px!important;
.header{
font-size: 26px;
}
.tableTd{
font-size: 24px;
}
}

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

@ -8,17 +8,33 @@
<div class="content-view">
<div style="width: 100%;height: 12%;display: flex;align-items: center;justify-content: center;">
<img src="../../../../../assets/cityScreen/icon2.png" class="icon" />
<span class="text" style="">退役预警总数:</span>
<span class="num">10</span>
<span class="label" style="">退役预警总数:</span>
<span class="num">{{totalNum}}</span>
<span class="unit">台</span>
</div>
<div style="width: 100%;height: 85%;overflow-y: auto;">
<el-table :data="tableList">
<el-table-column label="序号" align="center" type="index"></el-table-column>
<el-table-column label="工序" align="center" prop="process"/>
<el-table-column label="设备" align="center" prop="equipment"/>
<el-table-column label="预警情况" align="center" prop="maintenanceStatus"/>
</el-table>
<div class="tableHeader">
<div class="header" style="width: 15%;">序号</div>
<div class="header" style="width: 30%;">工序</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: 15%;">
{{ index+1 }}
</div>
<div class="tableTd" style="width: 30%;">
{{ item.procedureName }}
</div>
<div class="tableTd" style="width: 30%;">
{{ item.deviceName }}
</div>
<div class="tableTd" style="width: 25%;color: #E3C54E;">
{{ item.situation }}
</div>
</div>
</div>
</div>
</div>
@ -26,65 +42,28 @@
</template>
<script>
import { retirementAlarmApi } from "@/api/screen/cityScreen";
export default {
data() {
return {
tableList:[
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
{
process:"组塔施工",
equipment:"抱杆",
maintenanceStatus:"正常",
},
]
totalNum:0,
tableList:[]
}
},
created() {
},
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>
@ -92,7 +71,7 @@ export default {
.content{
width: 100%;
height: 100%;
background-image: url("../../../../../assets/cityScreen/maintenanceBg.png");
background-image: url("../../../../../assets/cityScreen/retireBg.png");
background-size: 110% 100%;
}
@ -113,9 +92,9 @@ export default {
height: 85%;
padding-left: 8%;
}
.text{
.label{
color: #C0C2C6;
font-size: 26px;
font-size: 24px;
}
.num{
color: #83D3F8;
@ -128,67 +107,58 @@ export default {
color: #ccc;
}
.icon{
width: 60px;
height: 60px;
}
/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
background-color: transparent !important;
border: 1px solid rgba(3, 40, 70, 0.9) !important;
}
/*去除底边框*/
::v-deep.el-table td.el-table__cell {
border: 0;
}
::v-deep.el-table th.el-table__cell.is-leaf {
border: 0;
}
::v-deep.el-table::before {
height: 0;
width: 70px;
height: 70px;
}
/* 滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 6px;
height: 6px;
.tableHeader{
width: 100%;
height: 12%;
background-color: #082D6E;
opacity: 0.8;
display: flex;
align-items: center;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #2893cc;
border-radius: 3px;
.tableBox{
width: 100%;
height: 84%;
overflow-y: auto;
}
.tableTr{
width: 100%;
height: 16%;
border-bottom: 1px dashed #eee;
// background-image: url("../../../../../assets/cityScreen/tableTr2.png");
// background-size: 100% 100%;
margin-bottom: 2px;
display: flex;
cursor: pointer;
}
.tableTd{
width: auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header{
color: #ccc;
width: 25%;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
}
/* 标题行 */
::v-deep .el-table__header-wrapper {
/* border: 1px solid #15c0ff !important; */
background-color: rgba(65, 129, 255, 0.4);
}
::v-deep .el-table .cell {
// color: #15c0ff !important;
color: #fff;
}
::v-deep .el-table th.el-table__cell > .cell {
color: #e1f1fe !important;
}
/* 高亮当前行 */
::v-deep .el-table__body tr.current-row > td {
background-color: #15c0ff20 !important;
}
::v-deep .el-table__body tr.current-row .cell {
color: #ffffff !important;
}
::v-deep .el-table__body tr:hover > td {
background-color: #15c0ff20 !important;
}
@media screen and (min-width: 1920px) {
@media screen and (min-width: 1080px) {
.title{
font-size: 10px;
}
@ -198,23 +168,20 @@ export default {
margin: 0 2px;
}
.unit{
font-size: 10px;
font-size: 8px;
}
.icon{
width: 30px;
height: 30px;
width: 35px;
height: 35px;
}
.text{
.label{
font-size: 10px;
}
::v-deep .el-table .cell {
// color: #15c0ff !important;
color: #fff;
font-size: 10px!important;
}
::v-deep .el-table th.el-table__cell > .cell {
color: #e1f1fe !important;
font-size: 10px!important;
.header{
font-size: 10px;
}
.tableTd{
font-size: 8px;
}
}
@media screen and (min-width: 3000px) {
@ -227,23 +194,20 @@ export default {
margin: 0 10px;
}
.unit{
font-size: 20px;
font-size: 16px;
}
.icon{
width: 60px;
height: 60px;
width: 70px;
height: 70px;
}
.text{
font-size: 20px;
.label{
font-size: 26px;
}
::v-deep .el-table .cell {
// color: #15c0ff !important;
color: #fff;
font-size: 20px!important;
}
::v-deep .el-table th.el-table__cell > .cell {
color: #e1f1fe !important;
font-size: 20px!important;
.header{
font-size: 26px;
}
.tableTd{
font-size: 24px;
}
}

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

@ -4,7 +4,7 @@
<div class="item-box" style="right: -8%;">
<div class="title">装备总量</div>
<div class="num">
<span style="font-weight: 600;">73</span>
<span style="font-weight: 600;">{{totalCount}}</span>
<span class="unit">台</span>
</div>
</div>
@ -14,8 +14,10 @@
<div class="item-box" style="right: -10%;">
<div class="title">装备总价值</div>
<div class="num">
<span style="font-weight: 600;">0.027</span>
<span class="unit">亿元</span>
<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>
@ -23,7 +25,7 @@
<div class="item-box" style="right: -8%;">
<div class="title">装备配置率</div>
<div class="num">
<span style="font-weight: 600;">100</span>
<span style="font-weight: 600;">{{allocationRate}}</span>
<span class="unit">%</span>
</div>
</div>
@ -31,18 +33,31 @@
</div>
</template>
<script>
<script>
import { getBasicHeadApi } from "@/api/screen/cityScreen";
export default {
data() {
return {
totalCount:0,
totalValue:0,
allocationRate:0,
}
},
created() {
},
created() {},
mounted() {
this.getBasicHeader()
},
methods: {
getBasicHeader(){
getBasicHeadApi({companyId:sessionStorage.getItem('companyId')}).then(response => {
console.log(response,'getBasicHeadApi')
if(response.code==200){
this.totalCount=response.data.totalCount
this.totalValue=response.data.totalValue
this.allocationRate=response.data.allocationRate
}
});
}
},
}
</script>
@ -93,7 +108,7 @@ export default {
margin-left: 10px;
}
@media screen and (min-width: 1920px) {
@media screen and (min-width: 1080px) {
.title{
font-size: 12px;
}

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

@ -4,7 +4,7 @@
<div class="item-box" style="right: -12%;">
<div class="title">今日入库</div>
<div class="num">
<span style="font-weight: 600;">5</span>
<span style="font-weight: 600;">{{enterNum}}</span>
<span class="unit">台</span>
</div>
</div>
@ -13,7 +13,7 @@
<div class="item-box" style="right: 8%;">
<div class="title">今日出库</div>
<div class="num">
<span style="font-weight: 600;">10</span>
<span style="font-weight: 600;">{{outNum}}</span>
<span class="unit">台</span>
</div>
</div>
@ -22,17 +22,27 @@
</template>
<script>
import { getBasicHeadApi } from "@/api/screen/cityScreen";
export default {
data() {
return {
enterNum:0,
outNum:0,
}
},
created() {
},
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>
@ -81,7 +91,7 @@ export default {
margin-left: 10px;
}
@media screen and (min-width: 1920px) {
@media screen and (min-width: 1080px) {
.title{
font-size: 12px;
}

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

@ -78,7 +78,7 @@ export default {
background-size: 100% 100%;
display: flex;
}
@media screen and (min-width: 1920px) {
@media screen and (min-width: 1080px) {
.main-view {
height: 60vh;
}
@ -98,6 +98,7 @@ export default {
.center_view{
width: 36%;
height: 100%;
border: 1px solid red;
}
.right_view{
@ -106,6 +107,19 @@ export default {
padding: 2%;
// border: 1px solid red;
}
::-webkit-scrollbar{
width: 4px;
height: 4px;
}
//定义背景颜色和圆角
::-webkit-scrollbar-thumb{
border-radius: 1em;
background-color: rgba(50,50,50,.3);
}
//定义滚动条轨道 内阴影+圆角
::-webkit-scrollbar-track{
border-radius: 1em;
background-color: rgba(50,50,50,.1);
}
</style>

73
src/views/screen/cityScreen/temp.vue
View File

@ -1,73 +0,0 @@
<template>
<div class="content">
<div class="content-title">
<div class="title">
装备数量价值
</div>
</div>
<div class="content-view">
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
},
mounted() {
},
methods: {
},
}
</script>
<style lang="scss" scoped>
.content{
width: 100%;
height: 100%;
}
.content-title{
width: 105%;
height: 20%;
margin-top: -4%;
margin-left: -8%;
position: relative;
color: #78D6FF;
}
.title{
font-size: 24px;
position: absolute;
top: 42%;
left: 18%;
}
.content-view{
width: 100%;
height: 85%;
}
@media screen and (min-width: 1920px) {
.title{
font-size: 10px;
position: absolute;
top: 42%;
left: 18%;
}
}
@media screen and (min-width: 3000px) {
.title{
font-size: 24px;
position: absolute;
top: 42%;
left: 18%;
}
}
</style>