This commit is contained in:
lb 2022-11-07 17:08:05 +08:00
parent 4d1231adc2
commit 60077b538a
21 changed files with 1270 additions and 83 deletions

View 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-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>

View File

@ -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: '' },
@ -69,8 +74,10 @@ export default {
<style scoped>
.left-content-equipment-check {
height: calc(100% - 32px);
display: flex;
gap: calc(100vmin / 1920 * 36);
overflow: hidden;
}
.el-table-wrapper {
@ -79,7 +86,7 @@ export default {
.left-content-equipment-check > div {
overflow: hidden;
overflow-x: scroll;
/* overflow-x: scroll; */
}
.el-table-wrapper >>> * {
@ -96,6 +103,8 @@ export default {
background-color: transparent;
color: #fff9;
border: 0;
height: 100%;
overflow-y: scroll;
}
.el-table-wrapper >>> .el-table th.is-leaf,

View File

@ -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;
}

View File

@ -13,7 +13,18 @@
<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="finished" :resizable="true">
<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 +52,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 = [
@ -131,4 +142,13 @@ export default {
.el-table-wrapper >>> tbody > tr:nth-child(even) {
background: rgba(76, 97, 123, 0.2);
}
.lb-progress-bar {
left: 40px;
display: flex;
}
.lb-progress-bar >>> .el-progress__text {
color: #fff9;
left: -70%;
}
</style>

View File

@ -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,95 @@
: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"> &nbsp;&nbsp;&nbsp;</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">&nbsp;&nbsp;&nbsp;&nbsp;</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" />
</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 +119,12 @@
<script>
import TechyBarChart from './TechyBarChart.vue'
import TechyLineChart from './TechyLineChart.vue'
import TechyBox from './TechyBox.vue'
import FadianChart from './FadianChart.vue'
export default {
name: 'LeftContentPublicConsume',
components: { TechyBarChart, TechyLineChart },
components: { TechyBarChart, TechyBox, FadianChart, TechyLineChart },
data() {
return {}
},
@ -47,10 +138,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 +163,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>

View File

@ -42,18 +42,20 @@ export default {
</script>
<style scoped>
.left-content-equipment-check {
.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 +72,8 @@ export default {
background-color: transparent;
color: #fff9;
border: 0;
height: 100%;
overflow-y: scroll;
}
.el-table-wrapper >>> .el-table th.is-leaf,

View File

@ -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: {
label: {
show: true,
fontSize: '12'
avoidLabelOverlap: true,
label: {
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);

View File

@ -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
},

View File

@ -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' }
]
@ -42,7 +53,7 @@ export default {
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;
}

View File

@ -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)
})

View 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>

View File

@ -78,6 +78,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;
@ -115,6 +125,7 @@ export default {
.date,
.time {
font-family: zcoolqingkehuangyouti, sans-serif;
font-size: calc(100vmin / 1920 * 42);
line-height: 1.5;
/* font-size: 28px;
@ -122,7 +133,7 @@ export default {
color: #49e1de;
letter-spacing: 0.8px;
position: absolute;
bottom: calc(100vmin / 1920 * 14 );
bottom: calc(100vmin / 1920 * 14);
}
.date {
@ -152,5 +163,4 @@ export default {
width: calc(100vmin / 1920 * 52);
height: calc(100vmin / 1920 * 52);
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

View 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>

View File

@ -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="工序质量分析">
<RightContentQualityAnalysis />
</techy-container>
</div>
<techy-container title="产线成品率" style="flex: 0;">
<techy-container title="工序质量分析" style="flex: 0">
<RightContentQualityAnalysis />
</techy-container>
<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>
@ -189,6 +189,7 @@ export default {
}
.bottom-part {
height: 22vh;
padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36);
display: flex;
/* gap: 16px; */