269 lines
9.2 KiB
Vue
269 lines
9.2 KiB
Vue
<template>
|
||
<div class="content">
|
||
<div class="content-title">
|
||
<div class="title">
|
||
装备状态
|
||
</div>
|
||
</div>
|
||
<div class="content-view">
|
||
<div id="lineChartFour" style="width: 100%;height: 90%;"></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: '18%',
|
||
right: '10%',
|
||
top: '20%',
|
||
bottom: '15%',
|
||
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',
|
||
},
|
||
{
|
||
offset: .5,
|
||
color: '#217CA7'
|
||
},
|
||
{
|
||
offset: .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: .5,
|
||
color: '#217CA7'
|
||
},
|
||
{
|
||
offset: .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%;
|
||
background-image: url("../../../../../assets/cityScreen/equiStatusBg.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.content-title{
|
||
width: 100%;
|
||
height: 18%;
|
||
position: relative;
|
||
color: #78D6FF;
|
||
}
|
||
.title{
|
||
font-size: 24px;
|
||
position: absolute;
|
||
top: 42%;
|
||
left: 18%;
|
||
font-family: DS-TITLE;
|
||
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%;
|
||
height: 85%;
|
||
padding-left: 8%;
|
||
}
|
||
.text{
|
||
width: 100%;margin-bottom: 10px;color: #A9C4F8;text-align: center;
|
||
font-size: 24px;
|
||
}
|
||
@media screen and (min-width: 1080px) {
|
||
.title{
|
||
font-size: 10px;
|
||
}
|
||
.text{
|
||
font-size: 10px;
|
||
}
|
||
|
||
}
|
||
@media screen and (min-width: 3000px) {
|
||
.title{
|
||
font-size: 24px;
|
||
}
|
||
.text{
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|