263 lines
9.0 KiB
Vue
263 lines
9.0 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: '10%',
|
|||
|
|
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%;
|
|||
|
|
}
|
|||
|
|
.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>
|