You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
989 lines
29 KiB
Vue
989 lines
29 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="headTitle">数字化注塑车间管控中心</div>
|
|
<div class="text1" style="top: 11.8%;left: 4.5%;letter-spacing: 0.3vw">
|
|
<span>工单总数:</span>
|
|
<span style="color: #fff;letter-spacing: 0.2vw"> {{
|
|
form.isSimulate ? form.text1 : orderWorkStatisticsData.totalCount
|
|
}}</span>
|
|
<span style="color: #fff;letter-spacing: 0.2vw">个</span>
|
|
</div>
|
|
<div class="text1" style="top: 11.8%;left: 19%;letter-spacing: 0.5vw">
|
|
<span>已完成:</span>
|
|
<span style="color: #43FC36;letter-spacing: 0.2vw"> {{
|
|
form.isSimulate ? form.text2 : orderWorkStatisticsData.completeCount
|
|
}}</span>
|
|
<span style="color: #fff;letter-spacing: 0.2vw">个</span>
|
|
</div>
|
|
<div class="text1" style="top: 11.8%;left: 33.8%;letter-spacing: 0.5vw">
|
|
<span>完成率:</span>
|
|
<span style="color: #43FC35;letter-spacing: 0.2vw"> {{
|
|
form.isSimulate ? form.text3 : orderWorkStatisticsData.completeRate
|
|
}}</span>
|
|
<span style="color: #fff;letter-spacing: 0.2vw">%</span>
|
|
</div>
|
|
<div class="text1" style="top: 11.8%;left: 48.2%;letter-spacing: 0.3vw">
|
|
<span>停机工单:</span>
|
|
<span style="color: #EF0506;letter-spacing: 0.2vw"> {{
|
|
form.isSimulate ? form.text4 : orderWorkStatisticsData.stopCount
|
|
}}</span>
|
|
<span style="color: #fff;letter-spacing: 0.2vw">个</span>
|
|
</div>
|
|
<div class="text1" style="top: 11.8%;left: 62.9%;letter-spacing: 0.1vw">
|
|
<span>平均响应时间:</span>
|
|
<span style="color: #ECB808;letter-spacing: 0.2vw"> {{
|
|
form.isSimulate ? form.text5 : (parseFloat(repairTimeStatisticsData.avgResponseTime) > 1000 ? '无响应' : repairTimeStatisticsData.avgResponseTime)
|
|
}}</span>
|
|
<span style="color: #fff;letter-spacing: 0.2vw">min</span>
|
|
</div>
|
|
<div class="text1" style="top: 11.8%;left: 84%;letter-spacing: 0.1vw">
|
|
<span>平均维修时间:</span>
|
|
<span style="color: #E10806;letter-spacing: 0.2vw"> {{
|
|
form.isSimulate ? form.text6 : repairTimeStatisticsData.avgRepairTime
|
|
}}</span>
|
|
<span style="color: #fff;letter-spacing: 0.2vw">H</span>
|
|
</div>
|
|
<div class="text2" style="top: 19.7%;left: 11%;">设备保养执行情况</div>
|
|
<div class="text2" style="top: 19.7%;left: 42.5%;">设备巡检执行情况</div>
|
|
<div class="text2" style="top: 19.7%;left: 74.5%;">故障原因统计TOP5</div>
|
|
<div class="text2" style="top: 59.7%;left: 13%;">报警数量曲线(最近30天)</div>
|
|
<div class="text2" style="top: 59.7%;left: 74.5%;">机台产量TOP5</div>
|
|
<div class="text3" style="top: 31%;left: 20.9%;">计划保养</div>
|
|
<div class="text3" style="top: 31%;left: 27.5%">已保养</div>
|
|
<div class="text3" style="top: 42.5%;left: 18.8%;">待保养</div>
|
|
<div class="text3" style="top: 42.5%;left: 24.6%;">保养中</div>
|
|
<div class="text3" style="top: 42.5%;left: 30.3%;">待验证</div>
|
|
<div class="text4" style="top: 34.3%;left: 20.9%;font-size: 1vw">
|
|
{{ form.isSimulate ? form.text7 : maintStatisticsData.planCount }}单
|
|
</div>
|
|
<div class="text4" style="top: 34.3%;left: 27.5%;font-size: 1vw">
|
|
{{ form.isSimulate ? form.text8 : maintStatisticsData.completeCount }}单
|
|
</div>
|
|
<div class="text4" style="top: 45.6%;left: 18.8%;">
|
|
{{ form.isSimulate ? form.text9 : maintStatisticsData.waitingCount }}% / <span style="font-size: 0.6vw">{{
|
|
form.isSimulate ? form.text10 : maintStatisticsData.waitingRate
|
|
}}单</span></div>
|
|
<div class="text4" style="top: 45.6%;left: 24.6%;">{{
|
|
form.isSimulate ? form.text11 : maintStatisticsData.doingCount
|
|
}}% / <span
|
|
style="font-size: 0.6vw">{{ form.isSimulate ? form.text12 : maintStatisticsData.doingRate }}单</span></div>
|
|
<div class="text4" style="top: 45.6%;left: 30.3%;">
|
|
{{ form.isSimulate ? form.text13 : maintStatisticsData.verifyCount }}% / <span
|
|
style="font-size: 0.6vw">{{ form.isSimulate ? form.text14 : maintStatisticsData.verifyRate }}单</span></div>
|
|
<div class="chart1">
|
|
<div class="title"><span style="font-size: 1.5vw;font-weight: 800">{{
|
|
form.isSimulate ? form.text15 : maintStatisticsData.completeRate
|
|
}}</span>%
|
|
</div>
|
|
<div class="subTitle">完成率</div>
|
|
<Chart ref="chart1"></Chart>
|
|
</div>
|
|
<div class="chart2">
|
|
<div class="deviceNum">应检设备<span style="color: #56BDFF;font-weight: 800;margin-left: 1vw">{{
|
|
form.isSimulate ? form.text16 : inspectStatisticsData.deviceCount
|
|
}}台</span></div>
|
|
<div class="title"><span style="font-size: 1.5vw;font-weight: 800">{{
|
|
form.isSimulate ? form.text17 : inspectStatisticsData.completeRate
|
|
}}</span>%
|
|
</div>
|
|
<div class="subTitle">完成率</div>
|
|
<Chart ref="chart2"></Chart>
|
|
</div>
|
|
<div class="chart3">
|
|
<Chart ref="chart3"></Chart>
|
|
</div>
|
|
<div class="chart4">
|
|
<Chart ref="chart4"></Chart>
|
|
</div>
|
|
<div class="toggle">
|
|
<div class="btn">
|
|
<el-button type="primary" @click="toggle = !toggle">切换显示</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="repairTimes">
|
|
<div class="expendImg" v-if="toggle"></div>
|
|
<div class="item" v-for="(i,k) in form.isSimulate ? form.chart2 :productionTop5Data " v-else>
|
|
<div class="num">{{ k + 1 }}</div>
|
|
<div class="deviceName">{{ form.isSimulate ? i.value1 : i.deviceName }}</div>
|
|
<div class="schedule">
|
|
<div class="progressBar" :style="{width: (form.isSimulate ? i.value2 :i.percent ) + '%'}"></div>
|
|
</div>
|
|
<div class="times">{{ form.isSimulate ? i.value3 : i.production }}个</div>
|
|
</div>
|
|
</div>
|
|
<div class="config">
|
|
<el-button class="btn" @click="configDialogVisible = true">配置</el-button>
|
|
</div>
|
|
<el-dialog
|
|
v-if="isData"
|
|
title="提示"
|
|
:visible.sync="configDialogVisible"
|
|
width="70%">
|
|
<el-form :inline="true" :model="form" label-width="120px">
|
|
<el-form-item label="是否使用模拟数据">
|
|
<el-switch
|
|
v-model="form.isSimulate"
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949">
|
|
</el-switch>
|
|
</el-form-item>
|
|
<el-form-item label="工单总数">
|
|
<el-input v-model="form.text1" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="已完成">
|
|
<el-input v-model="form.text2" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="完成率">
|
|
<el-input v-model="form.text3" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="停机工单">
|
|
<el-input v-model="form.text4" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="平均响应时间">
|
|
<el-input v-model="form.text5" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="平均维修时间">
|
|
<el-input v-model="form.text6" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="计划保养数量">
|
|
<el-input v-model="form.text7" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="已保养数量">
|
|
<el-input v-model="form.text8" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="待保养比例">
|
|
<el-input v-model="form.text9" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="待保养数量">
|
|
<el-input v-model="form.text10" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="保养中比例">
|
|
<el-input v-model="form.text11" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="保养中数量">
|
|
<el-input v-model="form.text12" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="待验证比例">
|
|
<el-input v-model="form.text13" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="待验证数量">
|
|
<el-input v-model="form.text14" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="设备保养完成率">
|
|
<el-input @change="chartInit" v-model="form.text15" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="应检设备">
|
|
<el-input v-model="form.text16" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="设备巡检完成率">
|
|
<el-input v-model="form.text17" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="实验设备数量">
|
|
<el-input-number @change="chartInit" :controls="false" v-model="form.value1"
|
|
autocomplete="off"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="未检设备数量">
|
|
<el-input-number @change="chartInit" :controls="false" v-model="form.value2"
|
|
autocomplete="off"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="正常设备数量">
|
|
<el-input-number @change="chartInit" :controls="false" v-model="form.value3"
|
|
autocomplete="off"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="异常设备数量">
|
|
<el-input-number @change="chartInit" :controls="false" v-model="form.value4"
|
|
autocomplete="off"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="维护故障占比">
|
|
<el-input-number @change="chartInit" :controls="false" v-model="form.value5"
|
|
autocomplete="off"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="运行故障占比">
|
|
<el-input-number @change="chartInit" :controls="false" v-model="form.value6"
|
|
autocomplete="off"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="自然故障占比">
|
|
<el-input-number @change="chartInit" :controls="false" v-model="form.value7"
|
|
autocomplete="off"></el-input-number>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="故障数量" class="fullLine">
|
|
<el-table
|
|
:data="form.chart1"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="date"
|
|
label="日期">
|
|
<template slot-scope="scope">
|
|
<el-input @change="chartInit" v-model="form.chart1[scope.$index].value1" autocomplete="off"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="数量"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-input @change="chartInit" v-model="form.chart1[scope.$index].value2" autocomplete="off"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div>
|
|
<i class="el-icon-circle-plus-outline" @click="chartInit(); form.chart1.push({
|
|
value1: '1',
|
|
value2: 1})" style="font-size: 24px"></i>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="备件消耗费用" class="fullLine">
|
|
<el-table
|
|
:data="form.chart2"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="date"
|
|
label="设备名称">
|
|
<template slot-scope="scope">
|
|
<el-input @change="chartInit" v-model="form.chart2[scope.$index].value1" autocomplete="off"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="百分比"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-input @change="chartInit" v-model="form.chart2[scope.$index].value2" autocomplete="off"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="次数"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-input @change="chartInit" v-model="form.chart2[scope.$index].value3" autocomplete="off"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div>
|
|
<i class="el-icon-circle-plus-outline" @click="chartInit(); form.chart2.push({
|
|
value1: '1',
|
|
value2: 1,
|
|
value3: 1,})" style="font-size: 24px"></i>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="configDialogVisible = false">预 览</el-button>
|
|
<el-button type="primary" @click="save">保 存</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
import Chart from "@/components/board/Chart.vue";
|
|
import * as echarts from "echarts";
|
|
import {getSimulateData} from "@/api/board/getData";
|
|
import {updateCustomData} from "@/api/base/customData";
|
|
import {Message} from "element-ui";
|
|
import {getDeviceStatusStatistics} from "@/api/baseDeviceParamVal/val";
|
|
import {
|
|
getDeviceStatusDistribution, getFaultSourceDistribution, getFaultTrendList,
|
|
getInspectStatistics,
|
|
getMaintStatistics,
|
|
getOrderWorkStatistics, getProductionTop5,
|
|
getRepairTimeStatistics
|
|
} from "@/api/board/board5";
|
|
import Log from "@/views/monitor/job/log.vue";
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
export default {
|
|
components: {
|
|
Chart
|
|
},
|
|
name: "Liner",
|
|
data() {
|
|
return {
|
|
// form: {
|
|
// text1: '08',
|
|
// text2: '07',
|
|
// text3: '90',
|
|
// text4: '00',
|
|
// text5: '123.45',
|
|
// text6: '0.25',
|
|
// text7: '3',
|
|
// text8: '2',
|
|
// text9: '0',
|
|
// text10: '0',
|
|
// text11: '0',
|
|
// text12: '0',
|
|
// text13: '33.33',
|
|
// text14: '1',
|
|
// text15: '66.6',
|
|
// text16: '20',
|
|
// text17: '66',
|
|
// value1: 37,
|
|
// value2: 24,
|
|
// value3: 22,
|
|
// value4: 10,
|
|
// value5: 36,
|
|
// value6: 30,
|
|
// value7: 34,
|
|
// chart1: Array(20).fill(0).map((i, k) => {
|
|
// return {
|
|
// value1: '' + k,
|
|
// value2: Math.ceil(Math.floor(Math.random() * 5)),
|
|
// }
|
|
// }),
|
|
// chart2: Array(5).fill(0).map((i, k) => {
|
|
// return {
|
|
// value1: 'SC-228NE',
|
|
// value2: Math.ceil(Math.floor(Math.random() * 100)),
|
|
// value3: Math.ceil(Math.floor(Math.random() * 10)),
|
|
// }
|
|
// }),
|
|
// },
|
|
form: {},
|
|
configDialogVisible: false,
|
|
toggle: false,
|
|
isData: false,
|
|
row: {},
|
|
orderWorkStatisticsData: {},
|
|
repairTimeStatisticsData: {},
|
|
maintStatisticsData: {},
|
|
inspectStatisticsData: {},
|
|
deviceStatusDistributionData: {},
|
|
faultSourceDistributionData: {},
|
|
faultTrendList: [],
|
|
productionTop5Data: []
|
|
}
|
|
},
|
|
async mounted() {
|
|
getSimulateData({customCode: 'board-2' || '', customType: 1}).then(val => {
|
|
this.row = val.rows[0]
|
|
this.form = JSON.parse(val.rows[0].customData);
|
|
this.isData = true
|
|
})
|
|
await this.getData()
|
|
setInterval(async () => {
|
|
await this.getData()
|
|
}, 1000 * 60 * 10)
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
await getOrderWorkStatistics().then(res => {
|
|
this.orderWorkStatisticsData = res.data
|
|
})
|
|
await getRepairTimeStatistics().then(res => {
|
|
this.repairTimeStatisticsData = res.data
|
|
})
|
|
await getMaintStatistics().then(res => {
|
|
this.maintStatisticsData = res.data
|
|
})
|
|
await getInspectStatistics().then(res => {
|
|
this.inspectStatisticsData = res.data
|
|
})
|
|
await getDeviceStatusDistribution().then(res => {
|
|
this.deviceStatusDistributionData = res.data
|
|
})
|
|
await getFaultSourceDistribution().then(res => {
|
|
this.faultSourceDistributionData = res.data
|
|
})
|
|
await getFaultTrendList().then(res => {
|
|
this.faultTrendList = res.data
|
|
})
|
|
await getProductionTop5().then(res => {
|
|
this.productionTop5Data = res.data
|
|
})
|
|
this.chartInit()
|
|
},
|
|
chartInit() {
|
|
let data = [
|
|
{
|
|
value: this.form.isSimulate ? this.form.value1 : this.deviceStatusDistributionData.experimentPercent,
|
|
name: '实验设备',
|
|
index: 0,
|
|
itemStyle: {
|
|
color: '#24ACFF',
|
|
borderColor: '#000',
|
|
borderWidth: 2
|
|
},
|
|
},
|
|
{
|
|
value: this.form.isSimulate ? this.form.value2 : this.deviceStatusDistributionData.uncheckedPercent,
|
|
name: '未检设备',
|
|
index: 1,
|
|
itemStyle: {
|
|
color: '#3CFD96',
|
|
borderColor: '#000',
|
|
borderWidth: 2
|
|
},
|
|
},
|
|
{
|
|
value: this.form.isSimulate ? this.form.value3 : this.deviceStatusDistributionData.normalPercent,
|
|
name: '正常设备',
|
|
index: 2,
|
|
itemStyle: {
|
|
color: '#FEE924',
|
|
borderColor: '#000',
|
|
borderWidth: 2
|
|
},
|
|
},
|
|
{
|
|
value: this.form.isSimulate ? this.form.value4 : this.deviceStatusDistributionData.abnormalPercent,
|
|
index: 3,
|
|
name: '异常设备',
|
|
itemStyle: {
|
|
color: '#FE6624',
|
|
borderColor: '#000',
|
|
borderWidth: 2
|
|
},
|
|
},
|
|
]
|
|
let chartData = [
|
|
{
|
|
value: this.form.isSimulate ? this.form.value5 : this.faultSourceDistributionData.maintainPercent,
|
|
name: '维护故障',
|
|
index: 0,
|
|
itemStyle: {
|
|
color: '#35DF7C',
|
|
borderColor: '#000',
|
|
borderWidth: 2
|
|
},
|
|
},
|
|
{
|
|
value: this.form.isSimulate ? this.form.value6 : this.faultSourceDistributionData.runningPercent,
|
|
name: '运行故障',
|
|
index: 1,
|
|
itemStyle: {
|
|
color: '#24ACFF',
|
|
borderColor: '#000',
|
|
borderWidth: 2
|
|
},
|
|
},
|
|
{
|
|
value: this.form.isSimulate ? this.form.value7 : this.faultSourceDistributionData.naturalPercent,
|
|
name: '自然故障',
|
|
index: 2,
|
|
itemStyle: {
|
|
color: '#EDE943',
|
|
borderColor: '#000',
|
|
borderWidth: 2
|
|
},
|
|
},
|
|
]
|
|
this.$refs.chart1.setData({
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
label: {
|
|
show: false,
|
|
},
|
|
center: ["50%", "50%"],
|
|
radius: ['75%', '81%'],
|
|
clockwise: false,
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{
|
|
value: Math.min(parseFloat(this.form.isSimulate ? this.form.text15 : (this.maintStatisticsData.completeRate)), 100),
|
|
name: '合格数',
|
|
itemStyle: {
|
|
color: '#00AFFF'
|
|
},
|
|
},
|
|
{
|
|
value: Math.max((100 - parseFloat((this.form.isSimulate ? this.form.text15 : this.maintStatisticsData.completeRate))), 0),
|
|
name: '不合格数',
|
|
itemStyle: {
|
|
color: '#0000'
|
|
},
|
|
},
|
|
]
|
|
},
|
|
]
|
|
})
|
|
const rich1 = {};
|
|
data.forEach(item => {
|
|
rich1[`val_${item.index}`] = {color: item.itemStyle.color, fontWeight: 'bold', fontSize: 1.2 * vw};
|
|
});
|
|
this.$refs.chart2.setData({
|
|
legend: {
|
|
type: 'scroll',
|
|
orient: 'vertical',
|
|
y: 'center',
|
|
x: '55%',
|
|
icon: 'circle',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 0.9 * vw,
|
|
lineHeight: 1.5 * vw,
|
|
rich: {
|
|
...rich1
|
|
}
|
|
},
|
|
data: data.map((item) => item.name),
|
|
formatter: (params) => {
|
|
let itemData = data.find(item => item.name === params)
|
|
return `${params} {val_${itemData.index}|${itemData.value}%}`
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
label: {
|
|
show: false,
|
|
},
|
|
center: ["23%", "50%"],
|
|
radius: ['75%', '85%'],
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: data
|
|
},
|
|
{
|
|
type: "pie",
|
|
label: {
|
|
show: false,
|
|
},
|
|
center: ["23%", "50%"],
|
|
radius: ['55%', '75%'],
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: data.map(item => {
|
|
return {
|
|
...item,
|
|
name: '',
|
|
itemStyle: {
|
|
...item.itemStyle,
|
|
color: item.itemStyle.color + '44',
|
|
}
|
|
}
|
|
})
|
|
},
|
|
]
|
|
})
|
|
this.$refs.chart2.on(['legendselectchanged', (params) => {
|
|
this.$refs.chart2.chart.dispatchAction({
|
|
type: 'legendSelect',
|
|
name: params.name
|
|
})
|
|
}])
|
|
this.$refs.chart2.on(['mousemove', (params) => {
|
|
if (params.seriesType !== 'pie') return
|
|
this.$refs.chart2.chart.dispatchAction({
|
|
type: 'downplay'
|
|
})
|
|
this.$refs.chart2.chart.dispatchAction({
|
|
type: 'highlight',
|
|
seriesIndex: 0,
|
|
dataIndex: params.dataIndex
|
|
})
|
|
}])
|
|
this.$refs.chart2.on(['mouseout', (params) => {
|
|
if (params.seriesType !== 'pie') return
|
|
|
|
this.$refs.chart2.chart.dispatchAction({
|
|
type: 'downplay',
|
|
})
|
|
}])
|
|
const rich = {};
|
|
chartData.forEach(item => {
|
|
rich[`val_${item.index}`] = {color: item.itemStyle.color, fontWeight: 'bold', fontSize: 1.2 * vw};
|
|
});
|
|
this.$refs.chart3.setData({
|
|
legend: {
|
|
type: 'scroll',
|
|
orient: 'vertical',
|
|
y: 'center',
|
|
x: '60%',
|
|
icon: 'circle',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 0.9 * vw,
|
|
lineHeight: 1.8 * vw,
|
|
rich: {
|
|
...rich,
|
|
}
|
|
},
|
|
data: chartData.map((item) => item.name),
|
|
formatter: (params) => {
|
|
let itemData = chartData.find(item => item.name === params)
|
|
let str = `${params} {val_${itemData.index}|${itemData.value}%}`
|
|
return str
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
label: {
|
|
show: false,
|
|
},
|
|
roseType: 'radius',
|
|
center: ["27%", "50%"],
|
|
radius: ['60%', '85%'],
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: chartData
|
|
},
|
|
]
|
|
})
|
|
|
|
this.$refs.chart4.setData({
|
|
xAxis: {
|
|
data: this.form.isSimulate ? this.form.chart1.map(e => e.value1) : this.faultTrendList.map(e => e.dateValue),
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#377097',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
fontSize: 14,
|
|
color: '#4C95C1',
|
|
},
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
lineStyle: {
|
|
color: '#37709799',
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
alignWithLabel: true,
|
|
lineStyle: {
|
|
color: '#37709799',
|
|
type: 'dashed',
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#377097',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
fontSize: 14,
|
|
color: '#4C95C1',
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
alignWithLabel: true,
|
|
lineStyle: {
|
|
color: '#37709799',
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
alignWithLabel: true,
|
|
lineStyle: {
|
|
color: '#37709799',
|
|
type: 'dashed',
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
top: 20,
|
|
right: 20,
|
|
bottom: 40,
|
|
left: 50
|
|
},
|
|
series: [
|
|
{
|
|
type: "line",
|
|
symbolSize: 6,
|
|
symbol: 'circle',
|
|
itemStyle: {
|
|
color: '#68CCFE', // 点填充颜色
|
|
borderColor: '#FBFFFA', // 点边框颜色
|
|
borderWidth: 2 // 边框宽度
|
|
},
|
|
lineStyle: {
|
|
color: '#66C0F2', // 折线颜色
|
|
width: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
data: this.form.isSimulate ? this.form.chart1.map(e => e.value2) : this.faultTrendList.map(e => e.faultCount),
|
|
},
|
|
]
|
|
})
|
|
},
|
|
save() {
|
|
updateCustomData({
|
|
...this.row,
|
|
customData: JSON.stringify(this.form)
|
|
}).then(res => {
|
|
Message({message: '保存成功', type: 'success'})
|
|
this.configDialogVisible = false
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
.headTitle {
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
font-size: 1.5vw;
|
|
color: #d6eaed;
|
|
letter-spacing: 0.3vw;
|
|
}
|
|
|
|
.app-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-image: url("../../../assets/board/boardBg4.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.text1 {
|
|
position: absolute;
|
|
transform: translateY(-50%);
|
|
letter-spacing: 0.2vw;
|
|
font-size: 1.25vw;
|
|
color: #69CBFF;
|
|
}
|
|
|
|
.text2 {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
letter-spacing: 0.2vw;
|
|
font-size: 1.2vw;
|
|
color: #fff;
|
|
}
|
|
|
|
.text3 {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
letter-spacing: 0.1vw;
|
|
font-size: 0.8vw;
|
|
color: #fff;
|
|
}
|
|
|
|
.text4 {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 0.9vw;
|
|
color: #FEFEFD;
|
|
}
|
|
|
|
.chart1 {
|
|
position: absolute;
|
|
top: 28.4%;
|
|
left: 4.85%;
|
|
width: 10.4%;
|
|
height: 18.5%;
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: 51%;
|
|
left: 50%;
|
|
transform: translate(-50%, calc(-100% - 0.4vw));
|
|
color: #55BCFE;
|
|
font-size: 1.1vw;
|
|
letter-spacing: 0.2vw;
|
|
}
|
|
|
|
.subTitle {
|
|
position: absolute;
|
|
top: 51%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #55BCFE;
|
|
font-size: 0.8vw;
|
|
}
|
|
}
|
|
|
|
.chart2 {
|
|
position: absolute;
|
|
top: 27.6%;
|
|
left: 37.75%;
|
|
width: 27%;
|
|
height: 22.1%;
|
|
|
|
.deviceNum {
|
|
position: absolute;
|
|
top: 0%;
|
|
left: 55%;
|
|
color: #fff;
|
|
font-size: 1vw;
|
|
letter-spacing: 0.1vw;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: 51%;
|
|
left: 23%;
|
|
transform: translate(-50%, calc(-100% - 0.4vw));
|
|
color: #55BCFE;
|
|
font-size: 1.1vw;
|
|
letter-spacing: 0.2vw;
|
|
}
|
|
|
|
.subTitle {
|
|
position: absolute;
|
|
top: 51%;
|
|
left: 23%;
|
|
transform: translateX(-50%);
|
|
color: #55BCFE;
|
|
font-size: 0.8vw;
|
|
}
|
|
}
|
|
|
|
.chart3 {
|
|
position: absolute;
|
|
top: 27.6%;
|
|
left: 68.05%;
|
|
width: 27%;
|
|
height: 22.1%;
|
|
|
|
}
|
|
|
|
.chart4 {
|
|
position: absolute;
|
|
top: 62.5%;
|
|
left: 3.35%;
|
|
width: 62%;
|
|
height: 32.6%;
|
|
}
|
|
|
|
.repairTimes {
|
|
position: absolute;
|
|
top: 62.7%;
|
|
left: 66.3%;
|
|
width: 30.4%;
|
|
height: 32.5%;
|
|
|
|
.expendImg {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 15.2vw;
|
|
height: 9.55vw;
|
|
transform: translate(-50%, -50%);
|
|
background-image: url("../../../assets/board/expendImg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.item {
|
|
width: 100%;
|
|
height: 20%;
|
|
position: relative;
|
|
|
|
.num {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 8%;
|
|
width: 1vw;
|
|
height: 1vw;
|
|
font-size: 0.8vw;
|
|
text-align: center;
|
|
transform: translate(-50%, -50%);
|
|
line-height: calc(1vw - 2px);
|
|
color: #1B61D8;
|
|
background-color: #092C52;
|
|
border: 1px solid #0D598F;
|
|
}
|
|
|
|
.deviceName {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 15%;
|
|
font-size: 0.8vw;
|
|
transform: translateY(-50%);
|
|
color: #fff;
|
|
}
|
|
|
|
.schedule {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 35%;
|
|
transform: translateY(-50%);
|
|
width: 50%;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
background-color: #172B47;
|
|
overflow: hidden;
|
|
|
|
.progressBar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
background: linear-gradient(to right, #1068E4, #4E99FF);
|
|
}
|
|
}
|
|
|
|
.times {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 87%;
|
|
font-size: 0.8vw;
|
|
transform: translateY(-50%);
|
|
color: #60BAEA;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggle {
|
|
position: absolute;
|
|
top: 55.2%;
|
|
left: 80.2%;
|
|
width: 10vw;
|
|
height: 5vw;
|
|
|
|
.btn {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
&:hover {
|
|
.btn {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.config {
|
|
position: absolute;
|
|
top: 3%;
|
|
right: 3%;
|
|
width: 10%;
|
|
height: 5vw;
|
|
|
|
.btn {
|
|
display: none;
|
|
|
|
}
|
|
|
|
&:hover {
|
|
.btn {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fullLine {
|
|
width: 100%;
|
|
|
|
/deep/ .el-form-item__content {
|
|
width: calc(100% - 120px);
|
|
}
|
|
}
|
|
</style> |