commit
2035643ed9
223
src/views/3DOverview/components/DianChart.vue
Normal file
223
src/views/3DOverview/components/DianChart.vue
Normal file
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div :id="id" ref="techy-line-chart" class="techy-chart" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'DianLineChart',
|
||||
mixins: [resize],
|
||||
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
|
||||
inject: ['resizeStatus'],
|
||||
/** End Fn.1 */
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-dian-id'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'default-title'
|
||||
},
|
||||
xData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const colors = ['#5470C6', '#EE6666', '#339888']
|
||||
|
||||
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
|
||||
let data = [
|
||||
// 温度走势
|
||||
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5],
|
||||
// 电流走势
|
||||
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71],
|
||||
// 电压走势
|
||||
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73]
|
||||
]
|
||||
let wendu = data[0]
|
||||
let dianliu = data[1]
|
||||
let dianya = data[2]
|
||||
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
color: colors,
|
||||
legend: {
|
||||
top: 4,
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
textStyle: {
|
||||
color: '#fff9',
|
||||
fontSize: 8
|
||||
},
|
||||
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
|
||||
},
|
||||
grid: {
|
||||
top: 32,
|
||||
left: 64,
|
||||
bottom: 28
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#fff9'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '电流/A',
|
||||
nameTextStyle: { align: 'right', fontSize: 8 },
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 42,
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff9',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
// lineStyle: {
|
||||
// color: '#fff3'
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '电压/V',
|
||||
nameTextStyle: { align: 'right', fontSize: 8 },
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff9',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
// lineStyle: {
|
||||
// color: '#fff3'
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '温度',
|
||||
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 8 },
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#fff9',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'ABC三相电压/v',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: dianliu,
|
||||
symbol: 'none'
|
||||
},
|
||||
{
|
||||
name: 'ABC三相电流/a',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: dianya,
|
||||
symbol: 'none'
|
||||
},
|
||||
{
|
||||
name: '电缆温度',
|
||||
type: 'line',
|
||||
yAxisIndex: 2,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: wendu,
|
||||
symbol: 'none'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shouldResize() {
|
||||
return this.resizeStatus()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
shouldResize(val, oldVal) {
|
||||
setTimeout(() => {
|
||||
this.chart.resize()
|
||||
}, 250)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
||||
this.chart.setOption(this.option)
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.techy-chart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.techy-chart >>> div {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
</style>
|
||||
161
src/views/3DOverview/components/FadianChart.vue
Normal file
161
src/views/3DOverview/components/FadianChart.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div :id="id" ref="techy-line-chart" class="techy-chart" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'FadianLineChart',
|
||||
mixins: [resize],
|
||||
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
|
||||
inject: ['resizeStatus'],
|
||||
/** End Fn.1 */
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-fadian-id'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'default-title'
|
||||
},
|
||||
xData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
legend: {
|
||||
itemGap: 8,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
right: '5%',
|
||||
textStyle: {
|
||||
color: '#fff9'
|
||||
}
|
||||
},
|
||||
color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
|
||||
grid: {
|
||||
top: '30%',
|
||||
left: 0,
|
||||
right: '5%',
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 8,
|
||||
color: '#fffa'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '压力/MPa',
|
||||
nameTextStyle: {
|
||||
fontSize: 10,
|
||||
color: '#fff9',
|
||||
align: 'right'
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 8,
|
||||
color: '#fffa'
|
||||
// formatter: '{value} %'
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '天然气',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map(_ => Math.floor(Math.random() * 100))
|
||||
},
|
||||
{
|
||||
name: '氧气',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map(_ => Math.floor(Math.random() * 100))
|
||||
},
|
||||
{
|
||||
name: 'CDA',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map(_ => Math.floor(Math.random() * 100))
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shouldResize() {
|
||||
return this.resizeStatus()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
shouldResize(val, oldVal) {
|
||||
setTimeout(() => {
|
||||
this.chart.resize()
|
||||
}, 250)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
||||
this.chart.setOption(this.option)
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.techy-chart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.techy-chart >>> div {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="left-content-equipment-check">
|
||||
<!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
|
||||
<TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
|
||||
<div class="el-table-wrapper">
|
||||
<div class="el-table-wrapper fix-table">
|
||||
<!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
|
||||
<el-table
|
||||
key="LeftContentEquipmentCheck1"
|
||||
@ -10,10 +10,10 @@
|
||||
:data="tableData"
|
||||
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
|
||||
>
|
||||
<el-table-column label="设备名称" prop="eqName" />
|
||||
<el-table-column label="所属产线" prop="pl" />
|
||||
<el-table-column label="提示等级" prop="warningLevel" />
|
||||
<el-table-column label="提示等级" prop="checkContent" />
|
||||
<el-table-column label="设备名称" prop="eqName" align="center" />
|
||||
<el-table-column label="所属产线" prop="pl" align="center" />
|
||||
<el-table-column label="提示等级" prop="warningLevel" align="center" />
|
||||
<el-table-column label="提示等级" prop="checkContent" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- <div class="el-table-wrapper">
|
||||
@ -43,6 +43,11 @@ const tableProps = [
|
||||
{ prop: 'checkContent', label: '提示等级', width: 120, resizable: false }
|
||||
]
|
||||
const tableData = [
|
||||
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
|
||||
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
|
||||
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
|
||||
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
|
||||
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
|
||||
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
|
||||
{ eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
|
||||
// { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
|
||||
@ -68,9 +73,17 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fix-table >>> .el-table td .cell {
|
||||
width: 60% !important;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.left-content-equipment-check {
|
||||
height: calc(100% - 32px);
|
||||
display: flex;
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-table-wrapper {
|
||||
@ -79,7 +92,7 @@ export default {
|
||||
|
||||
.left-content-equipment-check > div {
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
/* overflow-x: scroll; */
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> * {
|
||||
@ -96,6 +109,8 @@ export default {
|
||||
background-color: transparent;
|
||||
color: #fff9;
|
||||
border: 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> .el-table th.is-leaf,
|
||||
|
||||
@ -7,14 +7,14 @@
|
||||
<script>
|
||||
import { default as pic1 } from './assets/monitor/1.png'
|
||||
import { default as pic2 } from './assets/monitor/2.png'
|
||||
import { default as pic3 } from './assets/monitor/3.png'
|
||||
// import { default as pic3 } from './assets/monitor/3.png'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
|
||||
data() {
|
||||
return {
|
||||
images: [pic1, pic2, pic3]
|
||||
images: [pic1, pic2]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
@ -26,15 +26,15 @@ export default {
|
||||
<style scoped>
|
||||
.left-content-monitoring {
|
||||
width: 100%;
|
||||
/* height: calc(100% - 48px); */
|
||||
height: calc(100% - 32px);
|
||||
display: flex;
|
||||
gap: calc(100vw / 1920 * 16);
|
||||
}
|
||||
|
||||
.monitor-pic {
|
||||
flex: 1;
|
||||
height: 128px;
|
||||
background-position: 100% 100%;
|
||||
height: 100%;
|
||||
width: 260px;
|
||||
/* background-position: 100% 100%; */
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="left-content-equipment-check">
|
||||
<!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
|
||||
<TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
|
||||
<div class="el-table-wrapper">
|
||||
<div class="el-table-wrapper fix-table">
|
||||
<!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
|
||||
<el-table
|
||||
key="LeftContentOrder1"
|
||||
@ -10,10 +10,33 @@
|
||||
:data="tableData"
|
||||
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
|
||||
>
|
||||
<el-table-column label="订单编号" prop="orderCode" :show-overflow-tooltip="true" :resizable="true" />
|
||||
<el-table-column label="客户名称" prop="clientName" :show-overflow-tooltip="true" :resizable="true" />
|
||||
<el-table-column label="规格" prop="specs" :resizable="true" />
|
||||
<el-table-column label="完成度" prop="finished" :resizable="true" />
|
||||
<el-table-column
|
||||
label="订单编号"
|
||||
prop="orderCode"
|
||||
:show-overflow-tooltip="true"
|
||||
:resizable="true"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
label="客户名称"
|
||||
prop="clientName"
|
||||
:show-overflow-tooltip="true"
|
||||
:resizable="true"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column label="规格" prop="specs" :resizable="true" align="center" />
|
||||
<el-table-column label="完成度" prop="finished" :resizable="true" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-progress
|
||||
class="lb-progress-bar"
|
||||
type="circle"
|
||||
:percentage="scope.row.finished"
|
||||
:width="18"
|
||||
:stroke-width="2"
|
||||
color="#47FF27"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- <div class="el-table-wrapper">
|
||||
@ -41,8 +64,8 @@ const tableData = [
|
||||
{ orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
|
||||
{ orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
|
||||
{ orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
|
||||
{ orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
|
||||
{ orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
|
||||
{ orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 }
|
||||
// { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
|
||||
// { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
|
||||
]
|
||||
const tableData2 = [
|
||||
@ -68,6 +91,12 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fix-table >>> .el-table td .cell {
|
||||
width: 70% !important;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.left-content-equipment-check {
|
||||
display: flex;
|
||||
gap: calc(100vw / 1920 * 16);
|
||||
@ -79,7 +108,7 @@ export default {
|
||||
|
||||
.left-content-equipment-check > div {
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> * {
|
||||
@ -131,4 +160,13 @@ export default {
|
||||
.el-table-wrapper >>> tbody > tr:nth-child(even) {
|
||||
background: rgba(76, 97, 123, 0.2);
|
||||
}
|
||||
|
||||
.lb-progress-bar {
|
||||
left: 30px;
|
||||
display: flex;
|
||||
}
|
||||
.lb-progress-bar >>> .el-progress__text {
|
||||
color: #fff9;
|
||||
left: -75%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="public-consume__inner">
|
||||
<div class="water-area">
|
||||
<!-- <div class="water-area">
|
||||
<TechyBarChart
|
||||
:id="'water-chart'"
|
||||
key="waterchart"
|
||||
@ -23,6 +23,97 @@
|
||||
:x-data="['天然气', '氧气', 'CDA']"
|
||||
:series-data="[8.2, 10, 6.1]"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<div>
|
||||
<TechyBox class="water-consume">
|
||||
<div class="header-part has-border">
|
||||
<img src="./assets/consume/s.png" width="32" height="32" alt="water">
|
||||
<span>水</span>
|
||||
</div>
|
||||
<div class="content-part">
|
||||
<div class="row">
|
||||
<span class="name">纯 水</span>
|
||||
<span class="diy-process-bar color-1" />
|
||||
<span class="amount">
|
||||
39m
|
||||
<sup>3</sup>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="name">循环水</span>
|
||||
<span class="diy-process-bar color-2" />
|
||||
<span class="amount">
|
||||
239m
|
||||
<sup>3</sup>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="name">自来水</span>
|
||||
<span class="diy-process-bar color-3" />
|
||||
<span class="amount">
|
||||
23m
|
||||
<sup>3</sup>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</TechyBox>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<TechyBox class="gas-consume">
|
||||
<div class="header-part has-border">
|
||||
<img src="./assets/consume/gas.png" width="32" height="32" alt="qi">
|
||||
<span>气</span>
|
||||
</div>
|
||||
<div class="content-part">
|
||||
<div class="row">
|
||||
<span class="name">氧 气</span>
|
||||
<span class="diy-process-bar color-1" />
|
||||
<span class="amount">
|
||||
39Pa
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="name">CDA</span>
|
||||
<span class="diy-process-bar color-2" />
|
||||
<span class="amount">
|
||||
239pa
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="name">天然气</span>
|
||||
<span class="diy-process-bar color-3" />
|
||||
<span class="amount">
|
||||
23Pa
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</TechyBox>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1;">
|
||||
<TechyBox class="dian-consume">
|
||||
<div class="header-part">
|
||||
<img src="./assets/consume/d.png" width="32" height="32" alt="dian">
|
||||
<span>电</span>
|
||||
</div>
|
||||
<div class="content-part">
|
||||
<DianChart />
|
||||
</div>
|
||||
</TechyBox>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1;">
|
||||
<TechyBox class="elec-consume">
|
||||
<div class="header-part">
|
||||
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian">
|
||||
<span>发电</span>
|
||||
</div>
|
||||
<div class="content-part">
|
||||
<FadianChart />
|
||||
</div>
|
||||
</TechyBox>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -30,10 +121,12 @@
|
||||
<script>
|
||||
import TechyBarChart from './TechyBarChart.vue'
|
||||
import TechyLineChart from './TechyLineChart.vue'
|
||||
|
||||
import TechyBox from './TechyBox.vue'
|
||||
import FadianChart from './FadianChart.vue'
|
||||
import DianChart from './DianChart.vue'
|
||||
export default {
|
||||
name: 'LeftContentPublicConsume',
|
||||
components: { TechyBarChart, TechyLineChart },
|
||||
components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart },
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
@ -47,10 +140,13 @@ export default {
|
||||
.public-consume__inner {
|
||||
height: calc(100% - 32px);
|
||||
width: 100%;
|
||||
display: grid;
|
||||
/* display: grid;
|
||||
grid-template-areas:
|
||||
'water elec elec gas'
|
||||
'water elec-gen elec-gen gas';
|
||||
'water elec-gen elec-gen gas'; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(100vmin / 1920 * 16);
|
||||
}
|
||||
|
||||
.water-area {
|
||||
@ -69,4 +165,89 @@ export default {
|
||||
/* .elec-area,.elec-gen-area {
|
||||
max-height: calc((100% - 32px) / 2 - 16px);
|
||||
} */
|
||||
|
||||
.techy-box {
|
||||
padding: calc(100vmin / 1920 * 16);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-part {
|
||||
height: 100%;
|
||||
width: calc(100vmin / 1920 * 96);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* overflow: hidden; */
|
||||
margin-right: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-part.has-border::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -8px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, transparent, #fff9, transparent);
|
||||
}
|
||||
|
||||
.header-part > span {
|
||||
color: #fffc;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.content-part {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: calc(100vmin / 1920 * 18);
|
||||
color: #fff9;
|
||||
flex: 1 1;
|
||||
gap: calc(100vmin / 1920 * 8);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row > .name,
|
||||
.row > .amount {
|
||||
white-space: nowrap;
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
.row > .amount {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.diy-process-bar {
|
||||
margin: 0 8px;
|
||||
border-radius: 7px;
|
||||
height: 8px;
|
||||
flex: 1 1;
|
||||
background-color: #fff3;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.diy-process-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 7px;
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.diy-process-bar.color-1::after {
|
||||
background: linear-gradient(to right, #178be9, #67b3f2);
|
||||
}
|
||||
.diy-process-bar.color-2::after {
|
||||
background: linear-gradient(to right, #2ec6b4, #85f6e9);
|
||||
}
|
||||
.diy-process-bar.color-3::after {
|
||||
background: linear-gradient(to right, #ff8bc3, #eb46a1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div class="right-content-alert">
|
||||
<div class="el-table-wrapper">
|
||||
<div class="el-table-wrapper fix-table">
|
||||
<el-table
|
||||
key="RightContentAlertTable"
|
||||
border
|
||||
:data="tableData"
|
||||
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
|
||||
>
|
||||
<el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" />
|
||||
<el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" />
|
||||
<el-table-column label="故障等级" prop="level" :resizable="true" />
|
||||
<el-table-column label="故障内容" prop="content" :resizable="true" />
|
||||
<el-table-column label="累计时间(min)" prop="duration" :resizable="true" />
|
||||
<el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" align="center" />
|
||||
<el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" align="center" />
|
||||
<el-table-column label="故障等级" prop="level" :resizable="true" align="center" />
|
||||
<el-table-column label="故障内容" prop="content" :resizable="true" align="center" />
|
||||
<el-table-column label="累计时间(min)" prop="duration" :resizable="true" align="center" :width="128" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
@ -42,18 +42,26 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.left-content-equipment-check {
|
||||
.fix-table >>> .el-table td .cell {
|
||||
width: 80% !important;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.right-content-alert {
|
||||
height: calc(100% - 32px);
|
||||
display: flex;
|
||||
gap: calc(100vw / 1920 * 16);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-table-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.left-content-equipment-check > div {
|
||||
.right-content-alert > div {
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
/* overflow-x: scroll; */
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> * {
|
||||
@ -70,6 +78,8 @@ export default {
|
||||
background-color: transparent;
|
||||
color: #fff9;
|
||||
border: 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> .el-table th.is-leaf,
|
||||
|
||||
@ -14,74 +14,269 @@ export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-id'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'default-title'
|
||||
},
|
||||
xData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: 'default-fault-analysis-id'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let totalRate = 0
|
||||
const colors = [
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
{ color: '#FB418C00', offset: 0.1 },
|
||||
{ color: '#FB418C', offset: 1 } // 红
|
||||
],
|
||||
global: false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
{ color: '#DDB11200', offset: 0.1 },
|
||||
{ color: '#DDB112', offset: 1 } // 黄
|
||||
],
|
||||
global: false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
{ color: '#1A99FF00', offset: 0.1 },
|
||||
{ color: '#1A99FF', offset: 1 } // 兰
|
||||
],
|
||||
global: false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
{ color: '#A691FF00', offset: 0.1 },
|
||||
{ color: '#A691FF', offset: 1 } // 紫 3
|
||||
],
|
||||
global: false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
{ color: '#49FBD600', offset: 0.1 },
|
||||
{ color: '#49FBD6', offset: 1 } // 绿
|
||||
],
|
||||
global: false
|
||||
}
|
||||
]
|
||||
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
// default configs
|
||||
configs: {
|
||||
title: {
|
||||
left: 'center',
|
||||
top: '30%',
|
||||
text: '总共',
|
||||
textAlign: 'center',
|
||||
left: '64%',
|
||||
top: '35%',
|
||||
text: '33039',
|
||||
textStyle: {
|
||||
color: '#888',
|
||||
fontSize: 10
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
subtext: 880,
|
||||
subtext: '总数',
|
||||
subtextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 24
|
||||
fontSize: 10,
|
||||
fontWeight: 'lighter'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
bottom: '0%',
|
||||
left: '-5%',
|
||||
orient: 'vertical',
|
||||
icon: 'none',
|
||||
itemGap: 5,
|
||||
itemWidth: 10,
|
||||
formatter: function(name) {
|
||||
// test data - dynamic
|
||||
const testData = [
|
||||
{ name: 'A', value: 100 },
|
||||
{ name: 'B', value: 200 },
|
||||
{ name: 'C', value: 300 },
|
||||
{ name: 'D', value: 400 },
|
||||
{ name: 'E', value: 500 }
|
||||
]
|
||||
let pieLegendVale = {}
|
||||
testData.filter((item, index) => {
|
||||
if (item.name === name) {
|
||||
pieLegendVale = item
|
||||
}
|
||||
})
|
||||
const color = ['c', 'd', 'e', 'f', 'g']
|
||||
const arr = [
|
||||
'{' + color[testData.findIndex(item => item.name === name)] + '|}',
|
||||
'{b|' + pieLegendVale.name + '}',
|
||||
'{a|' + pieLegendVale.value + '}'
|
||||
]
|
||||
return arr.join(' ')
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
// align: 'center',
|
||||
fontSize: 10,
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
lineHeight: 16
|
||||
},
|
||||
b: {
|
||||
// verticalAlign: 'top',
|
||||
// align: 'center',
|
||||
fontSize: 10,
|
||||
color: 'rgba(255, 255, 255)'
|
||||
},
|
||||
c: {
|
||||
// verticalAlign: 'top',
|
||||
// align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#FB418C'
|
||||
// backgroundColor: '#1A99FF'
|
||||
},
|
||||
d: {
|
||||
// verticalAlign: 'top',
|
||||
// align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#DDB112'
|
||||
// backgroundColor: '#A691FF'
|
||||
},
|
||||
e: {
|
||||
// verticalAlign: 'top',
|
||||
// align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#1A99FF'
|
||||
// backgroundColor: '#FB418C'
|
||||
},
|
||||
f: {
|
||||
// verticalAlign: 'top',
|
||||
// align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#A691FF'
|
||||
// backgroundColor: '#49FBD6'
|
||||
},
|
||||
g: {
|
||||
// verticalAlign: 'top',
|
||||
// align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#49FBD6'
|
||||
// backgroundColor: '#DDB112'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Fault Analysis Chart',
|
||||
name: 'PieForm',
|
||||
type: 'pie',
|
||||
center: ['65%', '50%'],
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {},
|
||||
emphasis: {
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '12'
|
||||
formatter: params => {
|
||||
const colorMap = ['first', 'second', 'third', 'fourth', 'fifth']
|
||||
return `{${colorMap[params.dataIndex]}|${params.percent} %}`
|
||||
},
|
||||
rich: {
|
||||
first: { color: '#FB418C', fontSize: 8 },
|
||||
second: { color: '#DDB112', fontSize: 8 },
|
||||
third: { color: '#1A99FF', fontSize: 8 },
|
||||
fourth: { color: '#A691FF', fontSize: 8 },
|
||||
fifth: { color: '#49FBD6', fontSize: 8 }
|
||||
}
|
||||
},
|
||||
data: Array(7)
|
||||
.fill(0)
|
||||
.map((_, index) => ({ value: Math.floor(Math.random() * 100), name: '设备' + index }))
|
||||
itemStyle: {
|
||||
color: params => {
|
||||
/** 计算渐变方向的过程，只靠 dataIndex 不太行 */
|
||||
const { dataIndex, percent } = params
|
||||
const colorGradient = colors[dataIndex]
|
||||
if (totalRate + percent < 25) {
|
||||
/** 也许这里需要完善，但目前工作良好 */
|
||||
(() => {})()
|
||||
} else if (totalRate + percent < 50) {
|
||||
colorGradient.x = 0
|
||||
colorGradient.y = 0
|
||||
colorGradient.x2 = 1
|
||||
colorGradient.y2 = 1
|
||||
} else if (totalRate + percent < 100) {
|
||||
/** 也许这里需要完善，但目前工作良好 */
|
||||
(() => {})()
|
||||
}
|
||||
|
||||
totalRate += percent
|
||||
return colorGradient
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 100, name: 'A' },
|
||||
{ value: 200, name: 'B' },
|
||||
{ value: 300, name: 'C' },
|
||||
{ value: 400, name: 'D' },
|
||||
{ value: 500, name: 'E' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', function() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
console.log('here...')
|
||||
// if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs['fault-pie-chart'])
|
||||
this.chart.setOption(this.option)
|
||||
|
||||
this.chart.setOption(this.configs)
|
||||
|
||||
this.chart.resize()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.right-content-quality-analysis {
|
||||
height: calc(100% - 32px);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="height: 10vh; width: 100%; ">
|
||||
<div style="height: calc(100% - 36px); width: 100%;">
|
||||
<div :id="id" ref="techy-line-chart" class="techy-chart" />
|
||||
</div>
|
||||
</template>
|
||||
@ -35,12 +35,21 @@ export default {
|
||||
option: {
|
||||
color: ['#59CBE8', '#E93CAC', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
|
||||
grid: {
|
||||
top: '5%',
|
||||
top: '20%',
|
||||
left: 0,
|
||||
right: '5%',
|
||||
right: 12,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
width: '72%',
|
||||
right: 12,
|
||||
itemWidth: 12,
|
||||
itemHeight: 8,
|
||||
textStyle: {
|
||||
color: '#fffc'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
@ -63,6 +72,12 @@ export default {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '成品率',
|
||||
nameTextStyle: {
|
||||
color: '#fffc',
|
||||
align: 'right',
|
||||
fontSize: 8
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
@ -1,28 +1,39 @@
|
||||
<template>
|
||||
<div class="right-content-quality-analysis">
|
||||
<div v-for="item in datalist" :key="item.name" class="analysis-item">
|
||||
<techy-analysis-bar
|
||||
v-for="(item, index) in datalist"
|
||||
:key="index"
|
||||
:name="item.name"
|
||||
:amount="item.value"
|
||||
color="green"
|
||||
/>
|
||||
|
||||
<!-- <div v-for="item in datalist" :key="item.name" class="analysis-item">
|
||||
<span class="absolute" :style="{ backgroundColor: item.color }" />
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TechyAnalysisBar from './TechyAnalysisBar.vue'
|
||||
|
||||
export default {
|
||||
name: 'RightContentQualityAnalysis',
|
||||
components: { TechyAnalysisBar },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
datalist: [
|
||||
{ name: '热端', value: 20, color: '#0b88ff' },
|
||||
{ name: '原片', value: 30, color: '#0bffa6' },
|
||||
{ name: '热端', value: 2332039120, color: '#0b88ff' },
|
||||
{ name: '原片上片', value: 30, color: '#0bffa6' },
|
||||
{ name: '上片', value: 27, color: '#e3ff0b' },
|
||||
{ name: '磨边', value: 23, color: '#950bff' },
|
||||
{ name: '原片', value: 30, color: '#0bffa6' },
|
||||
{ name: '原片磨边', value: 30, color: '#0bffa6' },
|
||||
{ name: '原片', value: 30, color: '#0bffa6' },
|
||||
{ name: '上片', value: 27, color: '#e3ff0b' },
|
||||
{ name: '磨边', value: 23, color: '#950bff' },
|
||||
{ name: '磨边镀膜膜', value: 23, color: '#950bff' },
|
||||
{ name: '镀膜', value: 10, color: '#ff0bc2' },
|
||||
{ name: '清晰', value: 66, color: '#ff7d0b' }
|
||||
]
|
||||
@ -38,11 +49,11 @@ export default {
|
||||
.right-content-quality-analysis {
|
||||
height: calc(100% - 32px);
|
||||
overflow: hidden;
|
||||
overflow-y: scroll; /** 右边会有多的padding给滑道 */
|
||||
overflow-y: auto; /** 右边会有多的padding给滑道 */
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: min-content;
|
||||
gap: calc(100vw / 1920 * 8);
|
||||
gap: calc(100vmin / 1920 * 10) calc(100vmin / 1920 * 20);
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
|
||||
@ -1,20 +1,42 @@
|
||||
<template>
|
||||
<div style="height: 12vh; width: 100%; ">
|
||||
<div :id="id" ref="techy-line-chart" class="techy-chart" />
|
||||
</div>
|
||||
<techy-box style="width: 100%; height: calc(100% - 36px); padding: calc(100vmin / 1920 * 16)">
|
||||
<!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
|
||||
|
||||
<new-bar
|
||||
chart-name="realtime-cost-production"
|
||||
:name-list="['A', 'B', 'C', 'D', 'E', 'F']"
|
||||
:data-list="[
|
||||
{
|
||||
topColor: 'rgba(59, 76, 118, 0.2)',
|
||||
bottomColor: '#49FBD6',
|
||||
name: '产量',
|
||||
data: [64, 91, 55, 65, 37, 77]
|
||||
},
|
||||
{
|
||||
topColor: 'rgba(59, 76, 118, 0.2)',
|
||||
bottomColor: '#31A2FF',
|
||||
name: '能耗',
|
||||
data: [32, 65, 65, 54, 37, 77]
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</techy-box>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import TechyBox from './TechyBox.vue'
|
||||
import newBar from './newBar.vue'
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'RealtimeProductionHorizontalBarChart',
|
||||
components: { TechyBox, newBar },
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-id'
|
||||
default: 'default-linechart-id'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
@ -103,7 +125,6 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
console.log('here...')
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
||||
this.chart.setOption(this.option)
|
||||
})
|
||||
|
||||
198
src/views/3DOverview/components/TechyAnalysisBar.vue
Normal file
198
src/views/3DOverview/components/TechyAnalysisBar.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div class="quality-analysis-bar" :class="`border-${color}`">
|
||||
<div class="placeholder-block-wrapper">
|
||||
<div class="justify-end">
|
||||
<div class="placeholder-block" :class="`block-${color}-1`" />
|
||||
<div class="placeholder-block" :class="`block-${color}-2`" />
|
||||
<div class="placeholder-block" :class="`block-${color}-3`" />
|
||||
<div class="placeholder-block" :class="`block-${color}-4`" />
|
||||
<div class="placeholder-block" :class="`block-${color}-5`" />
|
||||
</div>
|
||||
</div>
|
||||
<span class="quality-analysis-bar__name">
|
||||
{{ name }}
|
||||
</span>
|
||||
<span class="quality-analysis-bar__amount" :title="'数量:' + amount">{{ amount | amountFilter }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TechyAnalysisBar',
|
||||
filters: {
|
||||
amountFilter: val => {
|
||||
const sVal = val.toString()
|
||||
return sVal.length > 10 ? sVal.slice(0, 8) + '...' : sVal
|
||||
}
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: 'null'
|
||||
},
|
||||
amount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'green'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.quality-analysis-bar {
|
||||
border-radius: 2px;
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.border-green {
|
||||
border: 1px solid #35abad;
|
||||
}
|
||||
.border-blue {
|
||||
border: 1px solid #49b2ff;
|
||||
}
|
||||
.border-orange {
|
||||
border: 1px solid #ffb94d;
|
||||
}
|
||||
.border-pink {
|
||||
border: 1px solid #ed879f;
|
||||
}
|
||||
|
||||
.placeholder-block-wrapper {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
min-width: 32px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-block-wrapper > div {
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.placeholder-block {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 3px;
|
||||
/* border-radius: 1px; */
|
||||
}
|
||||
|
||||
.block-green-5 {
|
||||
background: linear-gradient(to left, #35abad, hsla(181, 53%, 44%, 0.65));
|
||||
/* margin-left: 4px; */
|
||||
}
|
||||
.block-green-4 {
|
||||
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.65), hsla(181, 53%, 44%, 0.4));
|
||||
}
|
||||
.block-green-3 {
|
||||
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.4), hsla(181, 53%, 44%, 0.2));
|
||||
}
|
||||
.block-green-2 {
|
||||
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0));
|
||||
}
|
||||
.block-green-1 {
|
||||
/* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ================ blue ================ */
|
||||
.block-blue-5 {
|
||||
background: linear-gradient(to left, hsl(205, 100%, 64%), hsla(205, 100%, 64%, 0.65));
|
||||
/* margin-left: 4px; */
|
||||
}
|
||||
.block-blue-4 {
|
||||
background: linear-gradient(to left, hsla(205, 100%, 64%, 0.65), hsla(205, 100%, 64%, 0.4));
|
||||
}
|
||||
.block-blue-3 {
|
||||
background: linear-gradient(to left, hsla(205, 100%, 64%, 0.4), hsla(205, 100%, 64%, 0.2));
|
||||
}
|
||||
.block-blue-2 {
|
||||
background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0));
|
||||
}
|
||||
.block-blue-1 {
|
||||
/* background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0)); */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ================ orange ================ */
|
||||
.block-orange-5 {
|
||||
background: linear-gradient(to left, hsl(36, 100%, 65%), hsla(36, 100%, 65%, 0.65));
|
||||
/* margin-left: 4px; */
|
||||
}
|
||||
.block-orange-4 {
|
||||
background: linear-gradient(to left, hsla(36, 100%, 65%, 0.65), hsla(36, 100%, 65%, 0.4));
|
||||
}
|
||||
.block-orange-3 {
|
||||
background: linear-gradient(to left, hsla(36, 100%, 65%, 0.4), hsla(36, 100%, 65%, 0.2));
|
||||
}
|
||||
.block-orange-2 {
|
||||
background: linear-gradient(to left, hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0));
|
||||
}
|
||||
.block-orange-1 {
|
||||
/* background: linear-gradient(to left,hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0)); */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ================ pink ================ */
|
||||
.block-pink-5 {
|
||||
background: linear-gradient(to left, hsl(346, 74%, 73%), hsla(346, 74%, 73%, 0.65));
|
||||
/* margin-left: 4px; */
|
||||
}
|
||||
.block-pink-4 {
|
||||
background: linear-gradient(to left, hsla(346, 74%, 73%, 0.65), hsla(346, 74%, 73%, 0.4));
|
||||
}
|
||||
.block-pink-3 {
|
||||
background: linear-gradient(to left, hsla(346, 74%, 73%, 0.4), hsla(346, 74%, 73%, 0.2));
|
||||
}
|
||||
.block-pink-2 {
|
||||
background: linear-gradient(to left, hsla(346, 74%, 73%, 0.2), hsla(346, 74%, 73%, 0));
|
||||
}
|
||||
.block-pink-1 {
|
||||
/* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.quality-analysis-bar__name {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow-wrap: break-word;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
padding: 3px 8px;
|
||||
font-size: 14px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.quality-analysis-bar__amount {
|
||||
color: rgba(255, 255, 255, 0.725);
|
||||
display: inline-block;
|
||||
/* min-width: 35%; */
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
padding: 3px 0;
|
||||
font-size: 14px;
|
||||
line-height: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -77,6 +77,16 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@font-face {
|
||||
font-family: 'zcoolqingkehuangyouti';
|
||||
src: url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff2') format('woff2'),
|
||||
url('./assets/fonts/zcoolqingkehuangyouti-Regular.woff') format('woff'),
|
||||
url('./assets/fonts/zcoolqingkehuangyouti-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.techy-header {
|
||||
background: transparent;
|
||||
display: flex;
|
||||
@ -114,6 +124,7 @@ export default {
|
||||
|
||||
.date,
|
||||
.time {
|
||||
font-family: zcoolqingkehuangyouti, sans-serif;
|
||||
font-size: calc(100vmin / 1920 * 42);
|
||||
line-height: 1.5;
|
||||
/* font-size: 28px;
|
||||
|
||||
BIN
src/views/3DOverview/components/assets/consume/d.png
Normal file
BIN
src/views/3DOverview/components/assets/consume/d.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/views/3DOverview/components/assets/consume/fad.png
Normal file
BIN
src/views/3DOverview/components/assets/consume/fad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/views/3DOverview/components/assets/consume/gas.png
Normal file
BIN
src/views/3DOverview/components/assets/consume/gas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/views/3DOverview/components/assets/consume/s.png
Normal file
BIN
src/views/3DOverview/components/assets/consume/s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,90 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1584px" height="88px" viewBox="0 0 1584 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 12备份 6</title>
|
||||
<defs>
|
||||
<linearGradient x1="98.361014%" y1="49.8170126%" x2="-6.66133815e-14%" y2="49.768946%" id="linearGradient-1">
|
||||
<stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
|
||||
<stop stop-color="#52FFF1" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="-2.22044605e-14%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#081C43" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#27778E" stop-opacity="0.205883769" offset="57.0640297%"></stop>
|
||||
<stop stop-color="#37A5B4" stop-opacity="0.311188811" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="98.361014%" y1="49.7685102%" x2="-6.66133815e-14%" y2="49.707703%" id="linearGradient-3">
|
||||
<stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
|
||||
<stop stop-color="#52FFF1" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="52.4858599%" x2="-6.66133815e-14%" y2="48.1699424%" id="linearGradient-4">
|
||||
<stop stop-color="#3797C6" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#31A6AE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="50.001227%" x2="-6.66133815e-14%" y2="49.9990967%" id="linearGradient-5">
|
||||
<stop stop-color="#31A6AE" offset="0%"></stop>
|
||||
<stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="50.0398645%" x2="-6.66133815e-14%" y2="49.9706523%" id="linearGradient-6">
|
||||
<stop stop-color="#31A6AE" offset="0%"></stop>
|
||||
<stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="52.51872%" x2="-6.66133815e-14%" y2="48.1457513%" id="linearGradient-7">
|
||||
<stop stop-color="#31A6AE" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#31A6AE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-2工单管理" transform="translate(-336.000000, -120.000000)">
|
||||
<g id="编组-12备份-6" transform="translate(336.000000, 120.000000)">
|
||||
<g id="编组-8" transform="translate(540.000000, 23.000000)"></g>
|
||||
<g id="编组-4" transform="translate(0.000000, 1.000000)">
|
||||
<polyline id="路径-9" stroke="url(#linearGradient-1)" stroke-width="2" points="1584 29 1475.99948 29 1444.71615 53.8660399 1055.55466 53.8660399 1016 86 745.5 86"></polyline>
|
||||
<polygon id="路径-5" fill="url(#linearGradient-2)" points="1.18181818 0 1.18181818 28 48 28 83.0413946 54 437.5 54 475.858686 85 1016.2234 86 1055.55466 52.8660399 1445 52.2038341 1477 28 1584 28 1583.66667 0"></polygon>
|
||||
<polyline id="路径-9" stroke="url(#linearGradient-3)" stroke-width="2" transform="translate(372.750000, 57.500000) scale(-1, 1) translate(-372.750000, -57.500000) " points="745.5 29 696.123664 29 664.544271 53.8660399 309.570312 53.8660399 269.641314 86 -3.7840499e-13 86"></polyline>
|
||||
<g id="编组-3" transform="translate(43.807292, 29.000000)">
|
||||
<polyline id="路径-10" stroke="url(#linearGradient-4)" stroke-width="2" points="404.207985 57 383.692708 40 315.348958 40"></polyline>
|
||||
<ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
|
||||
<ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
|
||||
<g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
|
||||
</g>
|
||||
<g id="编组-2备份" transform="translate(48.429688, 0.000000)" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
|
||||
</g>
|
||||
<line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
|
||||
<line x1="133.458333" y1="7.5" x2="215.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
|
||||
</g>
|
||||
<g id="编组-3备份" transform="translate(1245.379488, 57.500000) scale(-1, 1) translate(-1245.379488, -57.500000) translate(1043.566269, 29.000000)">
|
||||
<polyline id="路径-10" stroke="url(#linearGradient-7)" stroke-width="2" points="403.62644 57 383.111163 40 315.348958 40"></polyline>
|
||||
<ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
|
||||
<ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
|
||||
<g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
|
||||
</g>
|
||||
<g id="编组-2备份" transform="translate(7.429688, 0.000000)" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
|
||||
</g>
|
||||
<line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
|
||||
<line x1="92.4583333" y1="7.5" x2="174.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M1537.5,0.5 L1537.5,87.5 L0.5,87.5 L0.5,0.5 L1537.5,0.5 Z" id="矩形" stroke="#979797" opacity="0"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 8.8 KiB |
363
src/views/3DOverview/components/newBar.vue
Normal file
363
src/views/3DOverview/components/newBar.vue
Normal file
@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div
|
||||
ref="chartContainer"
|
||||
class="chartContainer"
|
||||
:class="bindClass"
|
||||
style="position: relative; width: 100%; height:100%"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
chartName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
xlabelFontSize: {
|
||||
type: Number,
|
||||
default: 12
|
||||
},
|
||||
xlabelRotate: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
nameList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
series: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
bindClass() {
|
||||
return {
|
||||
'fault-category-chart': this.chartName === 'fault-category',
|
||||
'process-fault-chart': this.chartName === 'process-fault',
|
||||
'realtime-production-cost-chart': this.chartName === 'realtime-cost-production'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.dataList.length > 1) {
|
||||
this.series = [
|
||||
{
|
||||
// 柱体
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[0].topColor },
|
||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||
])
|
||||
},
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{
|
||||
// 柱顶
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
symbol: 'circle',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: ['-70%', '-50%'],
|
||||
symbolSize: [20, 6],
|
||||
zlevel: 2,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
|
||||
{ offset: 1, color: '#2c6e7d' }
|
||||
])
|
||||
},
|
||||
data: this.dataList[0].data,
|
||||
label: {
|
||||
color:
|
||||
this.chartName === 'process-fault'
|
||||
? 'rgba(119, 255, 242, 1)'
|
||||
: this.chartName === 'fault-category'
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
show: true,
|
||||
offset: [-12, 10],
|
||||
position: 'top',
|
||||
vertialAlign: 'bottom'
|
||||
}
|
||||
},
|
||||
{
|
||||
// 柱底
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
symbol: 'circle',
|
||||
symbolOffset: ['-62%', '50%'],
|
||||
symbolSize: [20, 6],
|
||||
itemStyle: { color: this.dataList[0].bottomColor },
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{
|
||||
// 柱体
|
||||
name: this.dataList[1].name,
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[1].topColor },
|
||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
||||
])
|
||||
},
|
||||
data: this.dataList[1].data
|
||||
},
|
||||
{
|
||||
// 柱顶
|
||||
name: this.dataList[1].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
symbol: 'circle',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: ['66%', '-50%'],
|
||||
symbolSize: [20, 6],
|
||||
zlevel: 2,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[1].topColor },
|
||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
||||
])
|
||||
},
|
||||
data: this.dataList[1].data,
|
||||
label: {
|
||||
color:
|
||||
this.chartName === 'process-fault'
|
||||
? 'rgba(119, 255, 242, 1)'
|
||||
: this.chartName === 'fault-category'
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
show: true,
|
||||
offset: [12, 10],
|
||||
position: 'top',
|
||||
vertialAlign: 'bottom'
|
||||
}
|
||||
},
|
||||
{
|
||||
// 柱底
|
||||
name: this.dataList[1].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
symbol: 'circle',
|
||||
symbolOffset: ['66%', '50%'],
|
||||
symbolSize: [20, 6],
|
||||
itemStyle: { color: this.dataList[1].bottomColor },
|
||||
data: this.dataList[1].data
|
||||
}
|
||||
]
|
||||
} else {
|
||||
const barWidth = 400 / 2 / this.dataList[0].data.length
|
||||
this.series = [
|
||||
{
|
||||
// 柱体
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[0].topColor },
|
||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||
])
|
||||
// borderWidth: 1,
|
||||
// borderColor: this.dataList[0].bottomColor + '66' // 边框颜色+透明度
|
||||
},
|
||||
data: this.dataList[0].data
|
||||
// backgroundStyle: {
|
||||
// // borderColor: this.dataList[0].bottomColor,
|
||||
// borderColor: '#ff0000',
|
||||
// borderWidth: 1
|
||||
// }
|
||||
},
|
||||
{
|
||||
// 柱顶
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
symbol: 'circle',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [barWidth, 6],
|
||||
zlevel: 2,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
|
||||
{ offset: 1, color: '#2c6e7d' }
|
||||
])
|
||||
},
|
||||
label: {
|
||||
color:
|
||||
this.chartName === 'process-fault'
|
||||
? 'rgba(119, 255, 242, 1)'
|
||||
: this.chartName === 'fault-category'
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
show: true,
|
||||
offset: [0, 10],
|
||||
position: 'top',
|
||||
vertialAlign: 'bottom'
|
||||
},
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{
|
||||
// 柱底
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
symbol: 'circle',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [barWidth, 6],
|
||||
itemStyle: { color: '#2c6e7d' },
|
||||
data: this.dataList[0].data
|
||||
}
|
||||
]
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
console.log('on Mounted(): ')
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chartContainer)
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
top: '16%',
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
right: '2%',
|
||||
textStyle: {
|
||||
color: '#fff9'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: this.xlabelFontSize,
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
},
|
||||
rotate: this.xlabelRotate
|
||||
},
|
||||
data: this.nameList
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: this.dataList[1].bottomColor,
|
||||
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: 'rgba(119, 255, 242, 0.2)'
|
||||
}
|
||||
},
|
||||
type: 'value'
|
||||
},
|
||||
series: this.series
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.chartContainer >>> div {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
/* position: relative !important; */
|
||||
}
|
||||
|
||||
.fault-category-chart >>> div::before {
|
||||
/* .fault-category-chart::before { */
|
||||
content: '';
|
||||
position: absolute;
|
||||
/* bottom: calc(100vh/1920 * 80);
|
||||
left: calc(100vw/1920 * 48); */
|
||||
/* bottom: calc(10% + 100vh/1920 * 28); */
|
||||
bottom: 25px;
|
||||
left: 9%;
|
||||
height: 52px;
|
||||
width: 90%;
|
||||
background: linear-gradient(to top, #31a2ff6d, transparent);
|
||||
transform: skew(-45deg);
|
||||
z-index: 0;
|
||||
}
|
||||
.process-fault-chart >>> div::before {
|
||||
/* .process-fault-chart::before { */
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 26px;
|
||||
left: 10%;
|
||||
height: 48px;
|
||||
width: 90%;
|
||||
background: linear-gradient(to top, #49fbd789, transparent);
|
||||
transform: skew(-45deg);
|
||||
z-index: 0;
|
||||
}
|
||||
.realtime-production-cost-chart >>> div::before {
|
||||
/* .fault-category-chart::before { */
|
||||
content: '';
|
||||
position: absolute;
|
||||
/* bottom: calc(100vh/1920 * 80);
|
||||
left: calc(100vw/1920 * 48); */
|
||||
/* bottom: calc(10% + 100vh/1920 * 28); */
|
||||
bottom: 8px;
|
||||
left: 9%;
|
||||
height: 30px;
|
||||
width: 90%;
|
||||
background: linear-gradient(to top, #31a2ff6d, transparent);
|
||||
transform: skew(-45deg);
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div id="v3d-outter" ref="v3d-outter">
|
||||
<!-- <V3DApp @3d-loaded="handle3DLoaded" /> -->
|
||||
<V3DApp @3d-loaded="handle3DLoaded" />
|
||||
<!-- 正式内容: -->
|
||||
<!-- <div v-if="showPage" id="v3d-main-content"> -->
|
||||
<div v-if="true" id="v3d-main-content">
|
||||
<div v-if="showPage" id="v3d-main-content">
|
||||
<!-- <div v-if="true" id="v3d-main-content"> -->
|
||||
<techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
|
||||
|
||||
<section id="techy-body-part">
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
<div class="techy-body-part__middle">
|
||||
<TechyBox>
|
||||
<div class="flex">
|
||||
<div class="techy-body-part__middle__inner">
|
||||
<p>
|
||||
<b>产线名称 :</b>
|
||||
<span>A产线</span>
|
||||
@ -29,7 +29,7 @@
|
||||
<span>清洗机</span>
|
||||
</p>
|
||||
<p>
|
||||
<b>累计加工数量 :</b>
|
||||
<b>累计加工 :</b>
|
||||
<span>20</span>
|
||||
</p>
|
||||
<p>
|
||||
@ -41,15 +41,15 @@
|
||||
</div>
|
||||
|
||||
<div class="techy-body-part__right">
|
||||
<techy-container title="实时产量和能耗" style="flex: 0">
|
||||
<techy-container title="实时产量和能耗" style="height: 22vh">
|
||||
<RightContentRealtimeProduction />
|
||||
</techy-container>
|
||||
<div class="techy-body-part__right-col-2">
|
||||
<techy-container title="工序质量分析">
|
||||
|
||||
<techy-container title="工序质量分析" style="flex: 0">
|
||||
<RightContentQualityAnalysis />
|
||||
</techy-container>
|
||||
</div>
|
||||
<techy-container title="产线成品率" style="flex: 0;">
|
||||
|
||||
<techy-container title="产线成品率" style="flex: 1">
|
||||
<RightContentProductRate />
|
||||
</techy-container>
|
||||
</div>
|
||||
@ -57,23 +57,23 @@
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="bottom-part">
|
||||
<div style="width: 25%; min-width: 480px; min-height: 240px; height: 20vh;">
|
||||
<techy-container title="设备巡检提示" style="flex: 0;">
|
||||
<div style="width: 25%; min-width: 480px; height: 100%;">
|
||||
<techy-container title="设备巡检提示" style="flex: 0; align-self: stretch;">
|
||||
<LeftContentEquipmentCheck />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<div>
|
||||
<techy-container title="现场实时监控">
|
||||
<LeftContentMonitor />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div>
|
||||
<div style="flex: 1;">
|
||||
<techy-container title="缺陷分类分析">
|
||||
<RightContentFaultAnalysis />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div style="width: 25%; min-width: 480px;">
|
||||
<techy-container title="设备报警提示" style="flex: 0;">
|
||||
<techy-container title="设备报警提示">
|
||||
<RightContentAlert />
|
||||
</techy-container>
|
||||
</div>
|
||||
@ -162,6 +162,28 @@ export default {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#v3d-outter *::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#v3d-outter *::-webkit-scrollbar-track {
|
||||
background-color: #14243f;
|
||||
/* background-color: white; */
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#v3d-outter *::-webkit-scrollbar-button {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #5bc4bf9f;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#v3d-outter *::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
background: #5bc4bf9f;
|
||||
}
|
||||
|
||||
#v3d-main-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -189,6 +211,7 @@ export default {
|
||||
}
|
||||
|
||||
.bottom-part {
|
||||
height: 22vh;
|
||||
padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36);
|
||||
display: flex;
|
||||
/* gap: 16px; */
|
||||
@ -221,19 +244,21 @@ export default {
|
||||
|
||||
.techy-body-part__middle {
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 36%;
|
||||
height: 96px;
|
||||
width: 128px;
|
||||
top: 9%;
|
||||
left: 26%;
|
||||
height: 136px;
|
||||
width: 176px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
.techy-body-part__middle__inner {
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex p {
|
||||
.techy-body-part__middle__inner p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
@ -241,15 +266,15 @@ export default {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.flex p > span {
|
||||
.techy-body-part__middle__inner p > span {
|
||||
position: relative;
|
||||
padding-left: 6px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.round-dot::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: -3px;
|
||||
top: 4px;
|
||||
left: 2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: rgb(82, 231, 82);
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<div class="equipment-exception">
|
||||
<!-- 设备报修/异常上报 -->
|
||||
<techy-container :title="'设备报修/异常上报'" :icon="equipmentExceptionSVG">
|
||||
<div class="table-wrapper">
|
||||
<div class="table-wrapper fix-table-exception-report">
|
||||
<techy-table
|
||||
:page="1"
|
||||
:limit="7"
|
||||
@ -22,7 +22,7 @@
|
||||
<div class="equipment-alarm">
|
||||
<!-- 设备异常报警 -->
|
||||
<techy-container :title="'设备异常报警'" :icon="equipmentAlarmSVG">
|
||||
<div class="table-wrapper">
|
||||
<div class="table-wrapper fix-table-eq-exception">
|
||||
<techy-table
|
||||
:page="1"
|
||||
:limit="7"
|
||||
@ -325,6 +325,17 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fix-table-eq-exception >>> .el-table td .cell {
|
||||
width: 80% !important;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
.fix-table-exception-report >>> .el-table td .cell {
|
||||
width: 70% !important;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.visual-container {
|
||||
width: 100%;
|
||||
min-width: 1280px;
|
||||
|
||||
@ -1,90 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1584px" height="88px" viewBox="0 0 1584 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 12备份 6</title>
|
||||
<defs>
|
||||
<linearGradient x1="98.361014%" y1="49.8170126%" x2="-6.66133815e-14%" y2="49.768946%" id="linearGradient-1">
|
||||
<stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
|
||||
<stop stop-color="#52FFF1" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="-2.22044605e-14%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#081C43" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#27778E" stop-opacity="0.205883769" offset="57.0640297%"></stop>
|
||||
<stop stop-color="#37A5B4" stop-opacity="0.311188811" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="98.361014%" y1="49.7685102%" x2="-6.66133815e-14%" y2="49.707703%" id="linearGradient-3">
|
||||
<stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
|
||||
<stop stop-color="#52FFF1" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="52.4858599%" x2="-6.66133815e-14%" y2="48.1699424%" id="linearGradient-4">
|
||||
<stop stop-color="#3797C6" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#31A6AE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="50.001227%" x2="-6.66133815e-14%" y2="49.9990967%" id="linearGradient-5">
|
||||
<stop stop-color="#31A6AE" offset="0%"></stop>
|
||||
<stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="50.0398645%" x2="-6.66133815e-14%" y2="49.9706523%" id="linearGradient-6">
|
||||
<stop stop-color="#31A6AE" offset="0%"></stop>
|
||||
<stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="52.51872%" x2="-6.66133815e-14%" y2="48.1457513%" id="linearGradient-7">
|
||||
<stop stop-color="#31A6AE" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#31A6AE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-2工单管理" transform="translate(-336.000000, -120.000000)">
|
||||
<g id="编组-12备份-6" transform="translate(336.000000, 120.000000)">
|
||||
<g id="编组-8" transform="translate(540.000000, 23.000000)"></g>
|
||||
<g id="编组-4" transform="translate(0.000000, 1.000000)">
|
||||
<polyline id="路径-9" stroke="url(#linearGradient-1)" stroke-width="2" points="1584 29 1475.99948 29 1444.71615 53.8660399 1055.55466 53.8660399 1016 86 745.5 86"></polyline>
|
||||
<polygon id="路径-5" fill="url(#linearGradient-2)" points="1.18181818 0 1.18181818 28 48 28 83.0413946 54 437.5 54 475.858686 85 1016.2234 86 1055.55466 52.8660399 1445 52.2038341 1477 28 1584 28 1583.66667 0"></polygon>
|
||||
<polyline id="路径-9" stroke="url(#linearGradient-3)" stroke-width="2" transform="translate(372.750000, 57.500000) scale(-1, 1) translate(-372.750000, -57.500000) " points="745.5 29 696.123664 29 664.544271 53.8660399 309.570312 53.8660399 269.641314 86 -3.7840499e-13 86"></polyline>
|
||||
<g id="编组-3" transform="translate(43.807292, 29.000000)">
|
||||
<polyline id="路径-10" stroke="url(#linearGradient-4)" stroke-width="2" points="404.207985 57 383.692708 40 315.348958 40"></polyline>
|
||||
<ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
|
||||
<ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
|
||||
<g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
|
||||
</g>
|
||||
<g id="编组-2备份" transform="translate(48.429688, 0.000000)" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
|
||||
</g>
|
||||
<line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
|
||||
<line x1="133.458333" y1="7.5" x2="215.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
|
||||
</g>
|
||||
<g id="编组-3备份" transform="translate(1245.379488, 57.500000) scale(-1, 1) translate(-1245.379488, -57.500000) translate(1043.566269, 29.000000)">
|
||||
<polyline id="路径-10" stroke="url(#linearGradient-7)" stroke-width="2" points="403.62644 57 383.111163 40 315.348958 40"></polyline>
|
||||
<ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
|
||||
<ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
|
||||
<g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
|
||||
</g>
|
||||
<g id="编组-2备份" transform="translate(7.429688, 0.000000)" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
|
||||
</g>
|
||||
<line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
|
||||
<line x1="92.4583333" y1="7.5" x2="174.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M1537.5,0.5 L1537.5,87.5 L0.5,87.5 L0.5,0.5 L1537.5,0.5 Z" id="矩形" stroke="#979797" opacity="0"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 8.8 KiB |
@ -33,12 +33,12 @@ const PriorityComponent = {
|
||||
}
|
||||
|
||||
export const equipmentExceptionProps = [
|
||||
{ label: '设备名称', prop: 'eqName' },
|
||||
{ label: '所属产线', prop: 'pl' },
|
||||
{ label: '报修/异常内容', prop: 'content' },
|
||||
{ label: '报修/发现人', prop: 'creator' },
|
||||
{ label: '时间', prop: 'time' },
|
||||
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent }
|
||||
{ label: '设备名称', prop: 'eqName', align: 'center' },
|
||||
{ label: '所属产线', prop: 'pl', align: 'center', width: 80 },
|
||||
{ label: '报修/异常内容', prop: 'content', align: 'center' },
|
||||
{ label: '报修/发现人', prop: 'creator', align: 'center', width: 100 },
|
||||
{ label: '时间', prop: 'time', align: 'center' },
|
||||
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 80 }
|
||||
]
|
||||
|
||||
export const equipmentExceptionDatalist = [
|
||||
@ -80,11 +80,11 @@ const LifeRemainComponent = {
|
||||
}
|
||||
|
||||
export const equipmentAlarmProps = [
|
||||
{ label: '设备名称', prop: 'eqName' },
|
||||
{ label: '设备编码', prop: 'eqCode' },
|
||||
{ label: '所属产线', prop: 'pl' },
|
||||
{ label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
|
||||
{ label: '报警内容', prop: 'content' }
|
||||
{ label: '设备名称', prop: 'eqName', align: 'center' },
|
||||
{ label: '设备编码', prop: 'eqCode', align: 'center' },
|
||||
{ label: '所属产线', prop: 'pl', align: 'center' },
|
||||
{ label: '报警级别', prop: 'priority', align: 'center', width: 80, subcomponent: PriorityComponent },
|
||||
{ label: '报警内容', prop: 'content', align: 'center' }
|
||||
]
|
||||
|
||||
export const equipmentAlarmDatalist = [
|
||||
@ -122,13 +122,13 @@ export const equipmentAnalysisData = [
|
||||
]
|
||||
|
||||
export const sparepartsProps = [
|
||||
{ prop: 'name', label: '部件名称' },
|
||||
{ prop: 'eq', label: '所属设备' },
|
||||
{ prop: 'pl', label: '所属产线' },
|
||||
{ prop: 'update_time', label: '更换时间' },
|
||||
{ prop: 'remain', label: '剩余寿命', subcomponent: LifeRemainComponent },
|
||||
{ prop: 'stock', label: '备件库存量' },
|
||||
{ prop: 'location', label: '库位' }
|
||||
{ prop: 'name', label: '部件名称', align: 'center' },
|
||||
{ prop: 'eq', label: '所属设备', align: 'center' },
|
||||
{ prop: 'pl', label: '所属产线', align: 'center' },
|
||||
{ prop: 'update_time', label: '更换时间', align: 'center' },
|
||||
{ prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent },
|
||||
{ prop: 'stock', label: '备件库存量', align: 'center' },
|
||||
{ prop: 'location', label: '库位', align: 'center' }
|
||||
]
|
||||
|
||||
export const sparepartsDatalist = [
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="part-1">
|
||||
<div>
|
||||
<techy-container :title="'质量异常上报'" :icon="qualitySVG">
|
||||
<div>
|
||||
<div class="fix-table-exception-report">
|
||||
<techy-table
|
||||
:page="1"
|
||||
:limit="10"
|
||||
@ -17,7 +17,7 @@
|
||||
</techy-container>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="fix-table-exception-alert">
|
||||
<techy-container :title="'质量异常报警'" :icon="qualityExceptionSVG">
|
||||
<techy-table
|
||||
:page="1"
|
||||
@ -337,6 +337,19 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fix-table-exception-alert >>> .el-table td .cell {
|
||||
width: 75% !important;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
.fix-table-exception-report >>> .el-table td .cell {
|
||||
width: 70% !important;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.visual-container {
|
||||
width: 100%;
|
||||
min-width: 1280px;
|
||||
|
||||
@ -101,7 +101,7 @@ export default {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#FB418C' // 0% 处的颜色
|
||||
color: '#FB418C66' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
@ -132,7 +132,7 @@ export default {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#DDB112' // 0% 处的颜色
|
||||
color: '#DDB11266' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
@ -163,7 +163,7 @@ export default {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#1A99FF' // 0% 处的颜色
|
||||
color: '#1A99FF66' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
@ -194,7 +194,7 @@ export default {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#A691FF' // 0% 处的颜色
|
||||
color: '#A691FF66' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
@ -229,7 +229,7 @@ export default {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#49FBD6' // 0% 处的颜色
|
||||
color: '#49FBD666' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
|
||||
@ -1,90 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1584px" height="88px" viewBox="0 0 1584 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 12备份 6</title>
|
||||
<defs>
|
||||
<linearGradient x1="98.361014%" y1="49.8170126%" x2="-6.66133815e-14%" y2="49.768946%" id="linearGradient-1">
|
||||
<stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
|
||||
<stop stop-color="#52FFF1" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="-2.22044605e-14%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#081C43" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#27778E" stop-opacity="0.205883769" offset="57.0640297%"></stop>
|
||||
<stop stop-color="#37A5B4" stop-opacity="0.311188811" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="98.361014%" y1="49.7685102%" x2="-6.66133815e-14%" y2="49.707703%" id="linearGradient-3">
|
||||
<stop stop-color="#3797C6" stop-opacity="0.31441215" offset="0%"></stop>
|
||||
<stop stop-color="#52FFF1" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="52.4858599%" x2="-6.66133815e-14%" y2="48.1699424%" id="linearGradient-4">
|
||||
<stop stop-color="#3797C6" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#31A6AE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="50.001227%" x2="-6.66133815e-14%" y2="49.9990967%" id="linearGradient-5">
|
||||
<stop stop-color="#31A6AE" offset="0%"></stop>
|
||||
<stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="50.0398645%" x2="-6.66133815e-14%" y2="49.9706523%" id="linearGradient-6">
|
||||
<stop stop-color="#31A6AE" offset="0%"></stop>
|
||||
<stop stop-color="#3797C6" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="103.601203%" y1="52.51872%" x2="-6.66133815e-14%" y2="48.1457513%" id="linearGradient-7">
|
||||
<stop stop-color="#31A6AE" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#31A6AE" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-2工单管理" transform="translate(-336.000000, -120.000000)">
|
||||
<g id="编组-12备份-6" transform="translate(336.000000, 120.000000)">
|
||||
<g id="编组-8" transform="translate(540.000000, 23.000000)"></g>
|
||||
<g id="编组-4" transform="translate(0.000000, 1.000000)">
|
||||
<polyline id="路径-9" stroke="url(#linearGradient-1)" stroke-width="2" points="1584 29 1475.99948 29 1444.71615 53.8660399 1055.55466 53.8660399 1016 86 745.5 86"></polyline>
|
||||
<polygon id="路径-5" fill="url(#linearGradient-2)" points="1.18181818 0 1.18181818 28 48 28 83.0413946 54 437.5 54 475.858686 85 1016.2234 86 1055.55466 52.8660399 1445 52.2038341 1477 28 1584 28 1583.66667 0"></polygon>
|
||||
<polyline id="路径-9" stroke="url(#linearGradient-3)" stroke-width="2" transform="translate(372.750000, 57.500000) scale(-1, 1) translate(-372.750000, -57.500000) " points="745.5 29 696.123664 29 664.544271 53.8660399 309.570312 53.8660399 269.641314 86 -3.7840499e-13 86"></polyline>
|
||||
<g id="编组-3" transform="translate(43.807292, 29.000000)">
|
||||
<polyline id="路径-10" stroke="url(#linearGradient-4)" stroke-width="2" points="404.207985 57 383.692708 40 315.348958 40"></polyline>
|
||||
<ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
|
||||
<ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
|
||||
<g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
|
||||
</g>
|
||||
<g id="编组-2备份" transform="translate(48.429688, 0.000000)" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
|
||||
</g>
|
||||
<line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
|
||||
<line x1="133.458333" y1="7.5" x2="215.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
|
||||
</g>
|
||||
<g id="编组-3备份" transform="translate(1245.379488, 57.500000) scale(-1, 1) translate(-1245.379488, -57.500000) translate(1043.566269, 29.000000)">
|
||||
<polyline id="路径-10" stroke="url(#linearGradient-7)" stroke-width="2" points="403.62644 57 383.111163 40 315.348958 40"></polyline>
|
||||
<ellipse id="椭圆形" fill="#31A6AE" cx="311.221354" cy="40" rx="3.30208333" ry="4"></ellipse>
|
||||
<ellipse id="椭圆形备份" fill="#31A6AE" cx="238.575521" cy="40" rx="3.30208333" ry="4"></ellipse>
|
||||
<g id="编组-2" transform="translate(250.132812, 35.000000)" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="42.7984852 5.99520433e-14 39.625 0 46.6862354 10 49.53125 10"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="32.8922352 5.99520433e-14 29.71875 0 36.7799854 10 39.625 10"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="13.0797352 5.99520433e-14 9.90625 0 16.9674854 10 19.8125 10"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="22.9859852 5.99520433e-14 19.8125 0 26.8737354 10 29.71875 10"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="3.17348521 5.99520433e-14 3.85947588e-16 0 7.06123536 10 9.90625 10"></polygon>
|
||||
</g>
|
||||
<g id="编组-2备份" transform="translate(7.429688, 0.000000)" fill="#31A6AE">
|
||||
<polygon id="路径-11" points="64.1977278 8.9928065e-14 59.4375 0 70.029353 15 74.296875 15"></polygon>
|
||||
<polygon id="路径-11备份" opacity="0.8" points="49.3383528 8.9928065e-14 44.578125 0 55.169978 15 59.4375 15"></polygon>
|
||||
<polygon id="路径-11备份-3" opacity="0.4" points="19.6196028 8.9928065e-14 14.859375 0 25.451228 15 29.71875 15"></polygon>
|
||||
<polygon id="路径-11备份-2" opacity="0.601434" points="34.4789778 8.9928065e-14 29.71875 0 40.310603 15 44.578125 15"></polygon>
|
||||
<polygon id="路径-11备份-4" opacity="0.201434" points="4.76022781 8.9928065e-14 5.78921382e-16 0 10.591853 15 14.859375 15"></polygon>
|
||||
</g>
|
||||
<line x1="235.273437" y1="39.5" x2="-1.04857353e-14" y2="39.5" id="路径-12" stroke="url(#linearGradient-5)" stroke-width="2"></line>
|
||||
<line x1="92.4583333" y1="7.5" x2="174.993" y2="8" id="路径-13" stroke="url(#linearGradient-6)" stroke-width="2"></line>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M1537.5,0.5 L1537.5,87.5 L0.5,87.5 L0.5,0.5 L1537.5,0.5 Z" id="矩形" stroke="#979797" opacity="0"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 8.8 KiB |
@ -38,12 +38,12 @@ const PriorityComponent = {
|
||||
console.log('is component?', PriorityComponent)
|
||||
|
||||
export const qualityTableProps = [
|
||||
{ label: '工序名称', width: 80, prop: 'wsName' },
|
||||
{ label: '所属产线', width: 80, prop: 'pl' },
|
||||
{ label: '工序名称', width: 130, prop: 'wsName', align: 'center' },
|
||||
{ label: '所属产线', width: 130, prop: 'pl', align: 'center' },
|
||||
{ label: '异常内容', align: 'center', prop: 'content' },
|
||||
{ label: '报告人', width: 80, prop: 'creator' },
|
||||
{ label: '时间', prop: 'time' },
|
||||
{ label: '优先级', width: 80, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
|
||||
{ label: '报告人', width: 120, prop: 'creator', align: 'center' },
|
||||
{ label: '时间', prop: 'time', align: 'center' },
|
||||
{ label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
|
||||
]
|
||||
|
||||
export const qualityDatalist = [
|
||||
@ -96,14 +96,14 @@ const StatusComponent = {
|
||||
}
|
||||
|
||||
export const qualityExceptionTableProps = [
|
||||
{ label: '工序名称', prop: 'wsName' },
|
||||
{ label: '所属产线', prop: 'pl' },
|
||||
{ label: '异常内容', prop: 'content' },
|
||||
{ label: '发现人', prop: 'creator' },
|
||||
{ label: '时间', prop: 'time' },
|
||||
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
|
||||
{ label: '处理人', prop: 'charger' },
|
||||
{ label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent }
|
||||
{ label: '工序名称', prop: 'wsName', align: 'center', width: 120 },
|
||||
{ label: '所属产线', prop: 'pl', align: 'center', width: 120 },
|
||||
{ label: '异常内容', prop: 'content', align: 'center' },
|
||||
{ label: '发现人', prop: 'creator', align: 'center', width: 100 },
|
||||
{ label: '时间', prop: 'time', align: 'center' },
|
||||
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 },
|
||||
{ label: '处理人', prop: 'charger', align: 'center', width: 100 },
|
||||
{ label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 100 }
|
||||
]
|
||||
|
||||
export const qualityExceptionDatalist = [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user