1026 lines
30 KiB
Vue
1026 lines
30 KiB
Vue
<template>
|
|
<div class="right_wraper">
|
|
<div class="item_wraper flexbetween">
|
|
<div class="l_item_wraper">
|
|
<div class="title_wraper">
|
|
<p>设备产能利用</p>
|
|
</div>
|
|
<div class="content_wraper">
|
|
<div class="echart_wraper">
|
|
<div id="new_home_echart_6" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="l_item_wraper">
|
|
<div class="title_wraper">
|
|
<p>设备运行统计</p>
|
|
</div>
|
|
<div class="content_wraper relative">
|
|
<div class="pie_wraper_2">
|
|
<div class="echart_wraper">
|
|
<div id="new_home_echart_7" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="pie_legend">
|
|
<div class="pie_legend_item" v-for="(e, i) in stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
|
|
<p class="pie_legend_txt_1">{{ e.stateName }}</p>
|
|
<div class="pie_legend_txt_wraper">
|
|
<p class="pie_legend_txt_2">{{ e.status }}</p>
|
|
<p class="pie_legend_txt_3">{{ e.rate }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item_wraper flexbetween">
|
|
<div class="l_item_wraper">
|
|
<div class="title_wraper">
|
|
<p>工序设备状态</p>
|
|
</div>
|
|
<div class="content_wraper">
|
|
<div class="echart_wraper">
|
|
<div id="new_home_echart_8" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="l_item_wraper">
|
|
<div class="title_wraper">
|
|
<p>30天故障-TOP10</p>
|
|
</div>
|
|
<div class="content_wraper content_wraper_1">
|
|
<div class="echart_wraper">
|
|
<div id="new_home_echart_9" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item_wraper">
|
|
<div class="title_wraper">
|
|
<p>设备工单生产</p>
|
|
</div>
|
|
<div class="content_wraper">
|
|
<div class="scroll_wrap">
|
|
<ul class="scroll_tab_1">
|
|
<li>工序</li>
|
|
<li>设备号</li>
|
|
<li>设备名称</li>
|
|
<li>状态</li>
|
|
<li>生产工单</li>
|
|
<li>BOM号</li>
|
|
<li>物料</li>
|
|
<li>数量</li>
|
|
<li>开始时间</li>
|
|
</ul>
|
|
<div class="scroll_container_1">
|
|
<vue-seamless-scroll :data="deviceWorkOrder" :class-option="defaultOption1">
|
|
<ul class="scroll-ul_1">
|
|
<li v-for="(e, i) in deviceWorkOrder" :key="i">
|
|
<div class="scroll-ul_1_div">{{e.process}}</div>
|
|
<div class="scroll-ul_1_div">{{e.deviceCode}}</div>
|
|
<div class="scroll-ul_1_div">{{e.deviceName}}</div>
|
|
<div class="scroll-ul_1_div">
|
|
<span class="state" :class="'state_' + e.status"></span>
|
|
<p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p>
|
|
</div>
|
|
<div class="scroll-ul_1_div">{{e.workOrder}}</div>
|
|
<div class="scroll-ul_1_div">{{e.bom}}</div>
|
|
<div class="scroll-ul_1_div">{{e.material}}</div>
|
|
<div class="scroll-ul_1_div">{{e.qty}}</div>
|
|
<div class="scroll-ul_1_div">{{e.startTime}}</div>
|
|
</li>
|
|
</ul>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import { homepageDataRight } from '@js/mork2.js'
|
|
import { homepageDataRight } from '@js/getData2.js'
|
|
import bg1 from '@img/bg1.png'
|
|
import bg2 from '@img/bg2.png'
|
|
import bg3 from '@img/bg3.png'
|
|
import bg4 from '@img/bg4.png'
|
|
import pointerImg from '@img/pointer.png'
|
|
export default {
|
|
data () {
|
|
return {
|
|
interTime: this.$store.getters.setTime,
|
|
timer: null,
|
|
chart7Timer: null,
|
|
chart9Timer: null,
|
|
capacityRate: [], // 设备产能利用
|
|
stateStatistics: {}, // 设备运行统计
|
|
deviceWorkOrder: [], // 设备工单生产
|
|
areaDeviceStatus: [{process: '混料'}, {process: '压制'}, {process: '干燥'}, {process: '包装'}], // 工序设备状态
|
|
top10Of30Days: [] // 30天故障top10
|
|
}
|
|
},
|
|
computed: {
|
|
defaultOption1 () {
|
|
return {
|
|
step: 0.4, // 数值越大速度滚动越快
|
|
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
this._homepageDataRight()
|
|
this.refresh()
|
|
},
|
|
beforeDestroy () {
|
|
clearInterval(this.timer)
|
|
clearInterval(this.chart7Timer)
|
|
clearInterval(this.chart9Timer)
|
|
},
|
|
methods: {
|
|
refresh () {
|
|
this.timer = setInterval(() => {
|
|
this._homepageDataRight()
|
|
}, this.interTime)
|
|
},
|
|
async _homepageDataRight () {
|
|
let res = await homepageDataRight()
|
|
clearInterval(this.chart7Timer)
|
|
clearInterval(this.chart9Timer)
|
|
this.capacityRate = [...res.capacityRate]
|
|
res.stateStatistics.fourState.map(el => {
|
|
let rate = Number(el.status) * 100 / Number(res.stateStatistics.count)
|
|
rate = rate.toFixed(2) + '%'
|
|
this.$set(el, 'rate', rate)
|
|
})
|
|
this.stateStatistics = res.stateStatistics
|
|
this.deviceWorkOrder = [...res.deviceWorkOrder]
|
|
this.areaDeviceStatus.map((e, i) => {
|
|
if (i === 0) {
|
|
this.$set(e, 'running', res.areaDeviceStatus.mix.running)
|
|
this.$set(e, 'pausing', res.areaDeviceStatus.mix.pausing)
|
|
this.$set(e, 'shutdown', res.areaDeviceStatus.mix.shutdown)
|
|
this.$set(e, 'inTrouble', res.areaDeviceStatus.mix.inTrouble)
|
|
}
|
|
if (i === 1) {
|
|
this.$set(e, 'running', res.areaDeviceStatus.press.running)
|
|
this.$set(e, 'pausing', res.areaDeviceStatus.press.pausing)
|
|
this.$set(e, 'shutdown', res.areaDeviceStatus.press.shutdown)
|
|
this.$set(e, 'inTrouble', res.areaDeviceStatus.press.inTrouble)
|
|
}
|
|
if (i === 2) {
|
|
this.$set(e, 'running', res.areaDeviceStatus.dry.running)
|
|
this.$set(e, 'pausing', res.areaDeviceStatus.dry.pausing)
|
|
this.$set(e, 'shutdown', res.areaDeviceStatus.dry.shutdown)
|
|
this.$set(e, 'inTrouble', res.areaDeviceStatus.dry.inTrouble)
|
|
}
|
|
if (i === 3) {
|
|
this.$set(e, 'running', res.areaDeviceStatus.sort.running)
|
|
this.$set(e, 'pausing', res.areaDeviceStatus.sort.pausing)
|
|
this.$set(e, 'shutdown', res.areaDeviceStatus.sort.shutdown)
|
|
this.$set(e, 'inTrouble', res.areaDeviceStatus.sort.inTrouble)
|
|
}
|
|
})
|
|
this.top10Of30Days = [...res.top10Of30Days]
|
|
this.top10Of30Days.map((e, i) => {
|
|
this.$set(e, 'sort', i + 1)
|
|
})
|
|
this.top10Of30Days = this.top10Of30Days.reverse()
|
|
this.setEchart1()
|
|
this.setEchart2()
|
|
this.setEchart3()
|
|
this.setEchart4()
|
|
},
|
|
setEchart1 () {
|
|
let img = {pointerImg: pointerImg}
|
|
let cdata = []
|
|
this.capacityRate.map(el => {
|
|
cdata.push({name: el.device_name, data: Number(el.numerical).toFixed(0)})
|
|
})
|
|
let centerArr = [['25%', '38%'], ['75%', '38%'], ['25%', '89%'], ['75%', '89%']]
|
|
let topArr = ['39%', '39%', '90%', '90%']
|
|
let leftArr = ['0%', '50%', '0%', '50%']
|
|
let titleArr = []
|
|
let seriesArr = []
|
|
cdata.forEach((item, index) => {
|
|
titleArr.push({
|
|
text: item.name,
|
|
top: topArr[index],
|
|
left: leftArr[index],
|
|
textAlign: 'left',
|
|
textStyle: {
|
|
color: '#AEC3DC',
|
|
fontSize: 16
|
|
}
|
|
})
|
|
seriesArr.push({
|
|
name: item.name,
|
|
type: 'gauge',
|
|
radius: '63%',
|
|
startAngle: 180,
|
|
endAngle: 0,
|
|
min: 0,
|
|
max: 100,
|
|
splitNumber: 5,
|
|
center: centerArr[index],
|
|
pointer: {// 仪表盘指针
|
|
icon: 'image://' + img.pointerImg,
|
|
width: 24,
|
|
height: 88,
|
|
length: '90%',
|
|
offsetCenter: [0, 10]
|
|
},
|
|
axisLine: { // 坐标轴线
|
|
lineStyle: {
|
|
width: 10,
|
|
color: [
|
|
[1 / 5, '#67D470'],
|
|
[7 / 10, '#1980EA'],
|
|
[4 / 5, '#13448B'],
|
|
[1, '#324C66']
|
|
]
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
color: '#3A578D',
|
|
fontSize: 14,
|
|
fontFamily: 'SourceHanSansCN-Regular',
|
|
distance: -8
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
splitNumber: 5,
|
|
distance: 0,
|
|
lineStyle: {
|
|
color: '#fff', // 用颜色渐变函数不起作用
|
|
width: 1
|
|
},
|
|
length: -4
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
distance: 0,
|
|
lineStyle: {
|
|
color: '#fff',
|
|
width: 1
|
|
},
|
|
length: -12
|
|
},
|
|
title: {
|
|
show: false
|
|
},
|
|
detail: {
|
|
fontSize: 20,
|
|
fontFamily: 'YouSheBiaoTiHei',
|
|
color: '#D5F2FF',
|
|
align: 'right',
|
|
offsetCenter: ['100%', 15],
|
|
valueAnimation: true,
|
|
formatter: '{value}' + '%'
|
|
},
|
|
data: [{
|
|
value: item.data
|
|
}]
|
|
})
|
|
seriesArr.push({
|
|
type: 'gauge',
|
|
radius: '40%',
|
|
startAngle: 180,
|
|
endAngle: 0,
|
|
center: centerArr[index],
|
|
splitLine: { // 表盘上的轴线
|
|
show: false
|
|
},
|
|
axisLabel: { // 表盘上的刻度数值文字
|
|
show: false
|
|
},
|
|
axisTick: { // 表盘上的刻度线
|
|
show: false
|
|
},
|
|
axisLine: { // 坐标轴线
|
|
lineStyle: {
|
|
width: 16,
|
|
color: [
|
|
[1, '#20406A']
|
|
]
|
|
}
|
|
},
|
|
z: 1
|
|
})
|
|
})
|
|
let option = {
|
|
grid: {
|
|
top: 55,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
title: titleArr,
|
|
series: seriesArr
|
|
}
|
|
if (document.getElementById('new_home_echart_6') == null) {
|
|
return
|
|
}
|
|
this.$echarts.dispose(document.getElementById('new_home_echart_6'))
|
|
let echart = this.$echarts.init(document.getElementById('new_home_echart_6'))
|
|
echart.setOption(option)
|
|
window.addEventListener('resize', () => {
|
|
echart.resize()
|
|
})
|
|
},
|
|
setEchart2 () {
|
|
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
|
|
let seriesData = this.stateStatistics.fourState
|
|
seriesData.map((el, i) => {
|
|
el.value = el.status
|
|
el.name = el.stateName
|
|
})
|
|
let total = this.stateStatistics.count
|
|
let option = {
|
|
color: colors,
|
|
grid: {
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
title: {
|
|
text: `{a|总数}\n{b|${total}}`,
|
|
x: 'center',
|
|
y: '39%',
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
fontSize: 16,
|
|
lineHeight: 20,
|
|
color: '#A8C3E6',
|
|
fontFamily: 'SourceHanSansCN-Regular'
|
|
},
|
|
b: {
|
|
fontSize: 30,
|
|
lineHeight: 36,
|
|
color: '#DBE7F6',
|
|
fontFamily: 'YouSheBiaoTiHei'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '设备运行统计',
|
|
type: 'pie',
|
|
radius: ['61%', '69%'],
|
|
center: ['50%', '50%'],
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
borderColor: 'RGBA(27, 58, 98, .5)',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
selectedMode: 'single',
|
|
selectedOffset: 20,
|
|
data: seriesData
|
|
}]
|
|
}
|
|
if (document.getElementById('new_home_echart_7') == null) {
|
|
return
|
|
}
|
|
this.$echarts.dispose(document.getElementById('new_home_echart_7'))
|
|
let echart = this.$echarts.init(document.getElementById('new_home_echart_7'))
|
|
echart.setOption(option)
|
|
// let bu = 0
|
|
// this.chart7Timer = setInterval(() => {
|
|
// if (bu > seriesData.length - 1) {
|
|
// bu = 0
|
|
// }
|
|
// echart.dispatchAction({
|
|
// type: 'select', // 默认显示江苏的提示框
|
|
// seriesIndex: 0, // 这行不能省
|
|
// dataIndex: bu
|
|
// })
|
|
// bu++
|
|
// }, 2000)
|
|
window.addEventListener('resize', () => {
|
|
echart.resize()
|
|
})
|
|
},
|
|
setEchart3 () {
|
|
let barName = []
|
|
let barData1 = []
|
|
let barData2 = []
|
|
let barData3 = []
|
|
let barData4 = []
|
|
this.areaDeviceStatus.map(el => {
|
|
barName.push(el.process)
|
|
barData1.push(el.running)
|
|
barData2.push(el.pausing)
|
|
barData3.push(el.shutdown)
|
|
barData4.push(el.inTrouble)
|
|
})
|
|
let option = {
|
|
grid: {
|
|
top: 55,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
top: '0',
|
|
right: '0',
|
|
textStyle: {
|
|
color: '#9BB9DD',
|
|
fontSize: 16,
|
|
lineHeight: 16
|
|
},
|
|
itemGap: 30,
|
|
itemWidth: 8,
|
|
itemHeight: 8,
|
|
data: [{name: '运行', itemStyle: {color: '#1980EA'}}, {name: '待机', itemStyle: {color: '#67D470'}}, {name: '关机', itemStyle: {color: '#B4C9EF'}}, {name: '故障', itemStyle: {color: '#EF5252'}}]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#3C5787'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
color: '#7591B2',
|
|
fontSize: 16,
|
|
lineHeight: 16,
|
|
fontFamily: 'SourceHanSansCN-Regular',
|
|
margin: 10
|
|
},
|
|
data: barName
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitNumber: 4,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#B5C5D4',
|
|
fontSize: 16,
|
|
fontFamily: 'SourceHanSansCN-Regular'
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: [4, 3],
|
|
color: '#455C86'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '运行',
|
|
type: 'pictorialBar',
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: 2,
|
|
symbol: 'rect',
|
|
symbolClip: true,
|
|
symbolSize: [9, 4],
|
|
symbolPosition: 'center',
|
|
symbolOffset: [-24, 0],
|
|
itemStyle: {
|
|
color: '#1980EA'
|
|
},
|
|
data: barData1
|
|
},
|
|
{
|
|
name: '待机',
|
|
type: 'pictorialBar',
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: 2,
|
|
symbol: 'rect',
|
|
symbolClip: true,
|
|
symbolSize: [9, 4],
|
|
symbolPosition: 'center',
|
|
symbolOffset: [-9, 0],
|
|
itemStyle: {
|
|
color: '#67D470'
|
|
},
|
|
data: barData2
|
|
},
|
|
{
|
|
name: '关机',
|
|
type: 'pictorialBar',
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: 2,
|
|
symbol: 'rect',
|
|
symbolClip: true,
|
|
symbolSize: [9, 4],
|
|
symbolPosition: 'center',
|
|
symbolOffset: [9, 0],
|
|
itemStyle: {
|
|
color: '#B4C9EF'
|
|
},
|
|
data: barData3
|
|
},
|
|
{
|
|
name: '故障',
|
|
type: 'pictorialBar',
|
|
symbolRepeat: 'fixed',
|
|
symbolMargin: 2,
|
|
symbol: 'rect',
|
|
symbolClip: true,
|
|
symbolSize: [9, 4],
|
|
symbolPosition: 'center',
|
|
symbolOffset: [24, 0],
|
|
itemStyle: {
|
|
color: '#EF5252'
|
|
},
|
|
data: barData4
|
|
}
|
|
]
|
|
}
|
|
if (document.getElementById('new_home_echart_8') == null) {
|
|
return
|
|
}
|
|
this.$echarts.dispose(document.getElementById('new_home_echart_8'))
|
|
let echart = this.$echarts.init(document.getElementById('new_home_echart_8'))
|
|
echart.setOption(option)
|
|
window.addEventListener('resize', () => {
|
|
echart.resize()
|
|
})
|
|
},
|
|
setEchart4 () {
|
|
let ydata = []
|
|
let xdata = []
|
|
let total = 0
|
|
this.top10Of30Days.map(el => {
|
|
total = Math.max(total, Number(el.count))
|
|
})
|
|
let data = []
|
|
this.top10Of30Days.map(el => {
|
|
ydata.push(el.device_name)
|
|
xdata.push({name: el.device_name, value: el.count, sort: el.sort})
|
|
data.push({value: total, num: el.count})
|
|
})
|
|
let img = {
|
|
bg1: bg1,
|
|
bg2: bg2,
|
|
bg3: bg3,
|
|
bg4: bg4
|
|
}
|
|
let colorArray = [
|
|
{
|
|
top: '#537BCB',
|
|
bottom: '#ADC0E6'
|
|
},
|
|
{
|
|
top: '#537BCB',
|
|
bottom: '#ADC0E6'
|
|
},
|
|
{
|
|
top: '#537BCB',
|
|
bottom: '#ADC0E6'
|
|
},
|
|
{
|
|
top: '#537BCB',
|
|
bottom: '#ADC0E6'
|
|
},
|
|
{
|
|
top: '#537BCB',
|
|
bottom: '#ADC0E6'
|
|
},
|
|
{
|
|
top: '#537BCB',
|
|
bottom: '#ADC0E6'
|
|
},
|
|
{
|
|
top: '#537BCB',
|
|
bottom: '#ADC0E6'
|
|
},
|
|
{
|
|
top: '#6B4C43',
|
|
bottom: '#B8A590'
|
|
},
|
|
{
|
|
top: '#3261FB',
|
|
bottom: '#6BB5FB'
|
|
}, {
|
|
top: '#8C620F',
|
|
bottom: '#C7B51C'
|
|
}
|
|
]
|
|
let option = {
|
|
grid: {
|
|
top: 13,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ydata,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
max: total
|
|
},
|
|
series: [{
|
|
type: 'bar',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: '#FFFFFF',
|
|
borderWidth: 5
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: [-2, -32],
|
|
formatter: (value) => {
|
|
let o = value.data
|
|
if (o.sort === 1) {
|
|
return '{one|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
|
|
} else if (o.sort === 2) {
|
|
return '{two|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
|
|
} else if (o.sort === 3) {
|
|
return '{three|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
|
|
} else {
|
|
return '{four|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
|
|
}
|
|
},
|
|
rich: {
|
|
// 第一名
|
|
one: {
|
|
backgroundColor: {
|
|
image: img.bg1
|
|
},
|
|
color: '#fff',
|
|
width: 60,
|
|
height: 32,
|
|
fontSize: 16,
|
|
lineHeight: 16,
|
|
align: 'center',
|
|
fontFamily: 'YouSheBiaoTiHei'
|
|
},
|
|
// 第二名
|
|
two: {
|
|
backgroundColor: {
|
|
image: img.bg2
|
|
},
|
|
color: '#fff',
|
|
width: 60,
|
|
height: 32,
|
|
fontSize: 16,
|
|
lineHeight: 16,
|
|
align: 'center',
|
|
fontFamily: 'YouSheBiaoTiHei'
|
|
},
|
|
// 第三名
|
|
three: {
|
|
backgroundColor: {
|
|
image: img.bg3
|
|
},
|
|
color: '#fff',
|
|
width: 60,
|
|
height: 32,
|
|
fontSize: 16,
|
|
lineHeight: 16,
|
|
align: 'center',
|
|
fontFamily: 'YouSheBiaoTiHei'
|
|
},
|
|
four: {
|
|
backgroundColor: {
|
|
image: img.bg4
|
|
},
|
|
color: '#fff',
|
|
width: 60,
|
|
height: 32,
|
|
fontSize: 16,
|
|
lineHeight: 16,
|
|
align: 'center',
|
|
fontFamily: 'YouSheBiaoTiHei'
|
|
},
|
|
a: {
|
|
color: '#AEC3DC',
|
|
height: 32,
|
|
fontSize: 16,
|
|
lineHeight: 16,
|
|
padding: [0, 0, 0, 7],
|
|
fontFamily: 'SourceHanSansCN-Regular'
|
|
}
|
|
}
|
|
},
|
|
barWidth: 3,
|
|
itemStyle: {
|
|
color: (params) => {
|
|
let num = colorArray.length
|
|
return {
|
|
type: 'linear',
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArray[params.dataIndex % num].top
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArray[params.dataIndex % num].top
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: colorArray[params.dataIndex % num].bottom
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArray[params.dataIndex % num].top
|
|
}
|
|
]
|
|
// globalCoord: false
|
|
}
|
|
}
|
|
},
|
|
data: xdata
|
|
}, {
|
|
name: '背景',
|
|
type: 'bar',
|
|
barWidth: 3,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
color: '#fff'
|
|
},
|
|
z: 1,
|
|
label: {
|
|
show: true,
|
|
position: 'insideTopRight',
|
|
offset: [0, -32],
|
|
formatter: (value) => {
|
|
return '{a|' + value.data.num + '}'
|
|
},
|
|
rich: {
|
|
a: {
|
|
height: 32,
|
|
fontSize: 20,
|
|
lineHeight: 20,
|
|
align: 'left',
|
|
fontFamily: 'YouSheBiaoTiHei',
|
|
color: '#E1F6FF'
|
|
}
|
|
}
|
|
},
|
|
data: data
|
|
}],
|
|
dataZoom: [
|
|
{
|
|
yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
|
|
show: false, // 是否显示滑动条，不影响使用
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
|
startValue: 9, // 从头开始。
|
|
endValue: 6 // 展示到第几个。
|
|
}
|
|
]
|
|
}
|
|
if (document.getElementById('new_home_echart_9') == null) {
|
|
return
|
|
}
|
|
this.$echarts.dispose(document.getElementById('new_home_echart_9'))
|
|
let echart = this.$echarts.init(document.getElementById('new_home_echart_9'))
|
|
echart.setOption(option)
|
|
this.chart9Timer = setInterval(() => {
|
|
if (option.dataZoom[0].endValue === 0) {
|
|
option.dataZoom[0].endValue = 6
|
|
option.dataZoom[0].startValue = 9
|
|
} else {
|
|
option.dataZoom[0].endValue = option.dataZoom[0].endValue - 1
|
|
option.dataZoom[0].startValue = option.dataZoom[0].startValue - 1
|
|
}
|
|
echart.setOption(option)
|
|
}, 2000)
|
|
window.addEventListener('resize', () => {
|
|
echart.resize()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@style/mixin'
|
|
.right_wraper
|
|
_wh(100%, 100%)
|
|
.item_wraper
|
|
_wh(100%, calc((100% - 40px) / 3))
|
|
margin-bottom 20px
|
|
&:last-child
|
|
margin-bottom 0
|
|
.l_item_wraper
|
|
_wh(calc(50% - 15.5px), 100%)
|
|
.title_wraper
|
|
background center / 100% url('../../../../images/bg-title_2.png') no-repeat
|
|
.content_wraper
|
|
padding 20px
|
|
background center / 100% url('../../../../images/bg-m_2.png') no-repeat
|
|
.title_wraper
|
|
_wh(100%, 42px)
|
|
background center / 100% url('../../../../images/bg-title_1.png') no-repeat
|
|
padding 6px 44px
|
|
p
|
|
font-size 24px
|
|
font-family: 'YouSheBiaoTiHei';
|
|
font-weight: 400;
|
|
color: transparent;
|
|
line-height 24px
|
|
background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
.content_wraper
|
|
_wh(100%, calc(100% - 42px))
|
|
background center / 100% url('../../../../images/bg-m_1.png') no-repeat
|
|
.echart_wraper
|
|
_wh(100%, 100%)
|
|
.scroll_wrap
|
|
_wh(100%, 100%)
|
|
padding 20px 20px 5px 20px
|
|
.scroll_tab_1
|
|
_wh(100%, 38px)
|
|
background center / 100% url('../../../../images/table-bg_1.png') no-repeat
|
|
li
|
|
float left
|
|
width 10%
|
|
_font(16px,38px,#AFBED8,,center)
|
|
font-family: 'SourceHanSansCN-Regular';
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
word-wrap break-word
|
|
word-break break-all
|
|
white-space nowrap
|
|
padding 0 5px
|
|
overflow hidden
|
|
box-sizing border-box
|
|
&:nth-child(1)
|
|
width 5%
|
|
&:nth-child(2)
|
|
width 12%
|
|
&:nth-child(3)
|
|
width 14%
|
|
&:nth-child(4)
|
|
width 9%
|
|
&:nth-child(5)
|
|
width 10%
|
|
&:nth-child(7)
|
|
width 19%
|
|
&:nth-child(9)
|
|
width 11%
|
|
.state
|
|
display block
|
|
_wh(20px, 14px)
|
|
.state_name
|
|
width calc(100% - 20px)
|
|
.scroll_container_1
|
|
width 100%
|
|
height calc(100% - 38px)
|
|
overflow hidden
|
|
.scroll-ul_1
|
|
li
|
|
_wh(100%, 40px)
|
|
border-bottom 1px solid rgba(122,159,224,0.17)
|
|
&:nth-child(even)
|
|
background rgba(31,46,73,0.7)
|
|
&:nth-child(odd)
|
|
background rgba(31,46,73,0.55)
|
|
.scroll-ul_1_div
|
|
float left
|
|
_wh(10%, 39px)
|
|
_fj(row, center)
|
|
_font(16px, 16px, #B2BBD7,,center)
|
|
font-family: 'SourceHanSansCN-Regular';
|
|
font-style: italic;
|
|
word-wrap break-word
|
|
word-break break-all
|
|
// white-space nowrap
|
|
padding 0 5px
|
|
overflow hidden
|
|
&:nth-child(1)
|
|
width 5%
|
|
&:nth-child(2)
|
|
width 12%
|
|
&:nth-child(3)
|
|
width 14%
|
|
&:nth-child(4)
|
|
width 9%
|
|
&:nth-child(5)
|
|
width 10%
|
|
&:nth-child(7)
|
|
width 19%
|
|
&:nth-child(9)
|
|
width 11%
|
|
.state
|
|
display block
|
|
_wh(20px, 14px)
|
|
.state_name
|
|
width calc(100% - 20px)
|
|
.pie_wraper_2
|
|
position absolute
|
|
top 17px
|
|
left 0
|
|
_wh(222px, 222px)
|
|
background center / 100% auto url('../../../../images/pie-bg_2.png') no-repeat
|
|
.pie_legend
|
|
_wh(calc(100% - 200px), 100%)
|
|
margin-left 200px
|
|
_fj(row,)
|
|
flex-wrap: wrap
|
|
.pie_legend_item
|
|
width 50%
|
|
padding 0 0px 2px 20px
|
|
.pie_legend_item_bg_1
|
|
background top left / 18px auto url('../../../../images/fk_1.png') no-repeat
|
|
.pie_legend_item_bg_2
|
|
background top left / 18px auto url('../../../../images/fk_2.png') no-repeat
|
|
.pie_legend_item_bg_3
|
|
background top left / 18px auto url('../../../../images/fk_3.png') no-repeat
|
|
.pie_legend_item_bg_4
|
|
background top left / 18px auto url('../../../../images/fk_5.png') no-repeat
|
|
.pie_legend_item_bg_5
|
|
background top left / 18px auto url('../../../../images/fk_4.png') no-repeat
|
|
.pie_legend_item_bg_6
|
|
background top left / 18px auto url('../../../../images/fk_6.png') no-repeat
|
|
.pie_legend_item_bg_7
|
|
background top left / 18px auto url('../../../../images/fk_7.png') no-repeat
|
|
.pie_legend_txt_1
|
|
font-size: 16px;
|
|
line-height: 16px
|
|
font-family: 'SourceHanSansCN-Regular';
|
|
color: #9BB9DD;
|
|
margin-bottom 8px
|
|
.pie_legend_txt_wraper
|
|
width 100%
|
|
.pie_legend_txt_2
|
|
font-size 20px
|
|
line-height: 20px
|
|
font-family: 'YouSheBiaoTiHei'
|
|
color: transparent;
|
|
background: linear-gradient(0deg, #E5F2FC 0%, #CDEAFC 53.3154296875%, #A0DBFC 100%);
|
|
filter: drop-shadow(rgba(5,28,55,0.42) 0px 2px 8px);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
margin-bottom 8px
|
|
.pie_legend_txt_3
|
|
font-size: 16px;
|
|
line-height: 16px
|
|
font-family: 'SourceHanSansCN-Regular';
|
|
color: #9BB9DD;
|
|
opacity: 0.5;
|
|
.content_wraper_1
|
|
padding-bottom: 0
|
|
.echart_wraper
|
|
height calc(100% + 21px)
|
|
</style>
|