Compare commits

..

18 Commits
zjl ... master

Author SHA1 Message Date
e238691040 Merge pull request 'lb' (#27) from lb into master
Reviewed-on: #27
2023-02-01 10:02:31 +08:00
lb
942da81c4f update V3dApp data.js 2023-02-01 09:57:44 +08:00
lb
637d181638 update 3doverview 2023-01-31 17:02:23 +08:00
159edc9fc3 Merge pull request 'lb' (#26) from lb into master
Reviewed-on: #26
2023-01-31 16:13:18 +08:00
lb
0eaf7fd13e Merge branch 'master' into lb 2023-01-31 16:06:00 +08:00
lb
c98608a941 update 修改公用工程消耗氧气CDA天然气值 2023-01-31 15:55:55 +08:00
4d7d2e0c3d Merge pull request 'lb' (#25) from lb into master
Reviewed-on: #25
2022-12-16 09:02:44 +08:00
lb
50670208c1 update remote url 2022-12-16 08:38:32 +08:00
SanDiego
f0714123b7 update gotoHome 2022-12-15 16:50:59 +08:00
lb
4200801c7b update公用工程 2022-12-05 11:22:18 +08:00
lb
f4ba65a25f update 实时产量和能耗时间为近7天 2022-12-02 16:44:12 +08:00
989f9b9976 Merge pull request 'update remove首页二字' (#23) from lb into master
Reviewed-on: #23
2022-12-02 14:09:47 +08:00
lb
4f91525bea update remove首页二字 2022-12-02 14:01:52 +08:00
9b3d8b4926 Merge pull request 'lb' (#22) from lb into master
Reviewed-on: #22
2022-12-01 08:57:55 +08:00
lb
fedff36ff0 Merge branch 'master' into lb 2022-12-01 08:55:17 +08:00
62bb4c05e8 Merge pull request '1' (#21) from zjl into master
Reviewed-on: #21
2022-11-28 16:53:01 +08:00
lb
4026826869 update small blur box 2022-11-28 15:42:09 +08:00
792496f685 Merge pull request '修改' (#20) from zjl into master
Reviewed-on: #20
2022-11-28 15:40:36 +08:00
9 changed files with 220 additions and 120 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="navbar" :style="showTitle ? 'background: rgba(8,17,50,0.25)' : ''"> <div class="navbar" :style="showTitle ? 'background: rgba(8,17,50,0.25)' : ''">
<div v-if="showTitle" class="homeNavIcon" @click="goToRootPage"> <div v-if="showTitle" class="homeNavIcon" @click="goToRootPage">
<img src="../../assets/img/cnbm.png" alt="" /> <img src="../../assets/img/cnbm.png" alt="">
<span> <span>
{{ 'title' | i18nFilter }} {{ 'title' | i18nFilter }}
</span> </span>
@ -25,9 +25,9 @@
:icon-class="showTitle ? 'home' : 'homeb'" :icon-class="showTitle ? 'home' : 'homeb'"
style="height: calc(24px * var(--beilv)); width: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv)); margin-right: 2px;" style="height: calc(24px * var(--beilv)); width: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv)); margin-right: 2px;"
/> />
<span v-if="showhome"> <!-- <span v-if="showhome">
{{ 'navbar.homepage' | i18nFilter }} {{ 'navbar.homepage' | i18nFilter }}
</span> </span> -->
</div> </div>
<el-dropdown <el-dropdown
:style="showTitle ? 'color: #fff' : '#000'" :style="showTitle ? 'color: #fff' : '#000'"
@ -97,7 +97,7 @@
trigger="click" trigger="click"
> >
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img :src="require('@/assets/img/head.png')" class="user-avatar" /> <img :src="require('@/assets/img/head.png')" class="user-avatar">
<div class="avatar-username" :title="username">{{ username }}</div> <div class="avatar-username" :title="username">{{ username }}</div>
<div class="avatar-roles" :title="roles.join(',')">{{ roles.length > 0 ? roles[0] : '' }}</div> <div class="avatar-roles" :title="roles.join(',')">{{ roles.length > 0 ? roles[0] : '' }}</div>
<!-- <i class="el-icon-caret-bottom" /> --> <!-- <i class="el-icon-caret-bottom" /> -->
@ -144,7 +144,7 @@
<el-tooltip class="item" effect="dark" placement="bottom-end"> <el-tooltip class="item" effect="dark" placement="bottom-end">
<div slot="content"> <div slot="content">
{{ 'copyright.copyright' | i18nFilter }}{{ 'copyright.company' | i18nFilter }} {{ 'copyright.copyright' | i18nFilter }}{{ 'copyright.company' | i18nFilter }}
<br /> <br>
{{ 'copyright.version' | i18nFilter }}3.0 {{ 'copyright.version' | i18nFilter }}3.0
</div> </div>
<svg-icon <svg-icon
@ -248,7 +248,8 @@ export default {
const password = Cookie.get('password') const password = Cookie.get('password')
if (username && password) { if (username && password) {
window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}` window.location = `http://main.cnbmai.picaiba.com/#/?username=${username}&password=${password}`
// window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
} }
}, },
winBlur() { winBlur() {

View File

@ -6,6 +6,7 @@
import echarts from 'echarts' import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize' import resize from '@/views/OperationalOverview/components/mixins/resize'
import { Random } from 'mockjs' import { Random } from 'mockjs'
import moment from 'moment'
class ChartOption { class ChartOption {
constructor() { constructor() {
@ -50,16 +51,18 @@ class ChartOption {
formatter: params => { formatter: params => {
return ` return `
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));"> <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2> <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
params[0].axisValue
}</h2>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[0] this.color[0]
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span> }"></span><span>${params[0].seriesName}: ${params[0].value}V</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[1] this.color[1]
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span> }"></span><span>${params[1].seriesName}: ${params[1].value}%</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[2] this.color[2]
}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span> }"></span><span>${params[2].seriesName}: ${params[2].value}°C</span></span>
</div> </div>
` `
} }
@ -67,7 +70,15 @@ class ChartOption {
this.xAxis = { this.xAxis = {
type: 'category', type: 'category',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // boundaryGap: false,
data: Array(7)
.fill(1)
.map((_, idx) => {
const d = moment()
const day = idx ? d.subtract(idx, 'd') : d
return day.format('M-DD')
})
.reverse(),
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
@ -100,10 +111,11 @@ class ChartOption {
}, },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
fontSize: 10 fontSize: 10,
formatter: '{value}%'
}, },
splitLine: { splitLine: {
show: true, show: false,
lineStyle: { lineStyle: {
color: '#fff1', color: '#fff1',
type: 'dotted' type: 'dotted'
@ -133,7 +145,7 @@ class ChartOption {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#fff1', color: '#fff3',
type: 'dotted' type: 'dotted'
} }
} }
@ -149,10 +161,13 @@ class ChartOption {
width: 1 width: 1
} }
}, },
// min: 'dataMin',
min: 20,
max: 50,
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
splitLine: { splitLine: {
show: true, show: false,
lineStyle: { lineStyle: {
color: '#fff1', color: '#fff1',
type: 'dotted' type: 'dotted'
@ -160,41 +175,84 @@ class ChartOption {
}, },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
fontSize: 10 fontSize: 10,
formatter: '{value}°C'
} }
} }
] ]
this.series = [ this.series = [
{ {
name: 'ABC三相电压/v', name: '电压',
type: 'line',
yAxisIndex: 0,
// smooth: true,
emphasis: {
focus: 'series'
},
data: Array(12)
.fill(1)
.map(_ => Random.integer(30, 100)),
symbol: 'circle',
symbolSize: 0.2,
showSymbol: false
},
{
name: 'ABC三相电流/a',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
// smooth: true, // smooth: true,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: Array(12) data: Array(7)
.fill(1) .fill(1)
.map(_ => Random.integer(30, 100)), // .map(_ => Random.integer(30, 100)),
.map(_ => Random.integer(360, 390)),
symbol: 'circle', symbol: 'circle',
symbolSize: 0.2, symbolSize: 0.2,
showSymbol: false showSymbol: false,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#E0209466' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
}
},
{
name: '电流',
type: 'line',
yAxisIndex: 0,
// smooth: true,
emphasis: {
focus: 'series'
},
data: Array(7)
.fill(1)
.map(_ => Random.integer(76, 85)),
// .map(_ => Random.integer(30, 100)),
symbol: 'circle',
symbolSize: 0.2,
showSymbol: false,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#F0D63C66' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
}
}, },
{ {
name: '电缆温度', name: '电缆温度',
@ -204,12 +262,33 @@ class ChartOption {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: Array(12) data: Array(7)
.fill(1) .fill(1)
.map(_ => Random.integer(30, 100)), // .map(_ => Random.integer(20, 55)),
.map(_ => Random.integer(36, 45)),
symbol: 'circle', symbol: 'circle',
symbolSize: 0.2, symbolSize: 0.2,
showSymbol: false showSymbol: false,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#1A99FF66' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
}
} }
] ]
} }
@ -232,7 +311,7 @@ class ChartOption {
if (key === 'colorStops') newOption[key] = option[key] if (key === 'colorStops') newOption[key] = option[key]
else if ( else if (
typeof option[key] === 'number' /** 过滤不做变化的属性 */ && typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1 ['splitNumber', 'x', 'x2', 'min', 'max', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
) { ) {
newOption[key] = calcSize(option[key]) newOption[key] = calcSize(option[key])
} else newOption[key] = this.optionFilter(option[key], calcSize) } else newOption[key] = this.optionFilter(option[key], calcSize)
@ -291,8 +370,8 @@ export default {
return num * beilv return num * beilv
}, },
setChartOption() { setChartOption() {
let chartOption = new ChartOption() const cOption = new ChartOption()
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize)) this.chart.setOption(cOption.optionFilter(cOption.option, this.calcSize))
} }
} }
} }

View File

@ -1,9 +1,9 @@
<template> <template>
<div class="public-consume__inner"> <div class="public-consume__inner">
<div> <div style="min-height: calc(106px * var(--beilv)); flex: 1;">
<TechyBox class="water-consume"> <TechyBox class="water-consume">
<div class="header-part"> <div class="header-part">
<img src="./assets/consume/s.png" width="32" height="32" alt="water" /> <img src="./assets/consume/s.png" width="32" height="32" alt="water">
<span></span> <span></span>
</div> </div>
<div class="content-part"> <div class="content-part">
@ -35,10 +35,10 @@
</TechyBox> </TechyBox>
</div> </div>
<div> <div style="min-height: calc(106px * var(--beilv)); flex: 1;">
<TechyBox class="gas-consume"> <TechyBox class="gas-consume">
<div class="header-part "> <div class="header-part ">
<img src="./assets/consume/gas.png" width="32" height="32" alt="qi" /> <img src="./assets/consume/gas.png" width="32" height="32" alt="qi">
<span></span> <span></span>
</div> </div>
<div class="content-part"> <div class="content-part">
@ -46,31 +46,31 @@
<span class="name">&nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="name">&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span class="diy-process-bar bar-width-4 color-1" /> <span class="diy-process-bar bar-width-4 color-1" />
<span class="amount"> <span class="amount">
23Pa 0.42MPa
</span> </span>
</div> </div>
<div class="row"> <div class="row">
<span class="name">CDA</span> <span class="name">CDA</span>
<span class="diy-process-bar bar-width-5 color-2" /> <span class="diy-process-bar bar-width-5 color-2" />
<span class="amount"> <span class="amount">
39Pa 0.61MPa
</span> </span>
</div> </div>
<div class="row"> <div class="row">
<span class="name">天然气</span> <span class="name">天然气</span>
<span class="diy-process-bar bar-width-6 color-3" /> <span class="diy-process-bar bar-width-6 color-3" />
<span class="amount"> <span class="amount">
239pa 0.31MPa
</span> </span>
</div> </div>
</div> </div>
</TechyBox> </TechyBox>
</div> </div>
<div style="min-height: calc(144px * var(--beilv)); flex: 1;"> <div style="min-height: calc(168px * var(--beilv)); flex: 1;">
<TechyBox class="dian-consume"> <TechyBox class="dian-consume">
<div class="header-part"> <div class="header-part">
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" /> <img src="./assets/consume/d.png" width="32" height="32" alt="dian">
<span></span> <span></span>
</div> </div>
<div style="height: 100%; flex: 1; overflow: hidden"> <div style="height: 100%; flex: 1; overflow: hidden">
@ -79,30 +79,29 @@
</TechyBox> </TechyBox>
</div> </div>
<div style="min-height: calc(144px * var(--beilv)); flex: 1;"> <!-- <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
<TechyBox class="elec-consume"> <TechyBox class="elec-consume">
<div class="header-part"> <div class="header-part">
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" /> <img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
<span>发电</span> <span>发电</span>
</div> </div>
<div style="height: 100%; flex: 1; overflow: hidden"> <div style="height: 100%; flex: 1; overflow: hidden">
<!-- <FadianChart /> -->
<DianChart id="fa-dian" key="fa-dian" /> <DianChart id="fa-dian" key="fa-dian" />
</div> </div>
</TechyBox> </TechyBox>
</div> </div> -->
</div> </div>
</template> </template>
<script> <script>
import TechyBarChart from './TechyBarChart.vue' // import TechyBarChart from './TechyBarChart.vue'
import TechyLineChart from './TechyLineChart.vue' // import TechyLineChart from './TechyLineChart.vue'
import TechyBox from './TechyBox.vue' import TechyBox from './TechyBox.vue'
import FadianChart from './FadianChart.vue' // import FadianChart from './FadianChart.vue'
import DianChart from './DianChart.vue' import DianChart from './DianChart.vue'
export default { export default {
name: 'LeftContentPublicConsume', name: 'LeftContentPublicConsume',
components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart }, components: { TechyBox, DianChart },
data() { data() {
return {} return {}
}, },
@ -153,17 +152,23 @@ export default {
.header-part > span { .header-part > span {
color: #fffc; color: #fffc;
font-size: calc(12px * var(--beilv)); font-size: calc(12px * var(--beilv));
line-height: calc(12px * var(--beilv));
white-space: nowrap; white-space: nowrap;
} }
.content-part { .content-part {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: calc(12px * var(--beilv)); justify-content: center;
color: #fff9; /* height: calc(48px * var(--beilv)); */
height: calc(48px * var(--beilv));
flex: 1 1; flex: 1 1;
gap: calc(4px * var(--beilv)); gap: calc(10px * var(--beilv));
color: #fff9;
}
.content-part span.name {
font-size: calc(12px * var(--beilv));
line-height: calc(14px * var(--beilv));
} }
.row { .row {
@ -181,6 +186,7 @@ export default {
.row > .amount { .row > .amount {
text-align: right; text-align: right;
width: 15%;
} }
.diy-process-bar { .diy-process-bar {
@ -211,13 +217,13 @@ export default {
width: 99%; width: 99%;
} }
.bar-width-4::after { .bar-width-4::after {
width: 20%; width: 42%;
} }
.bar-width-5::after { .bar-width-5::after {
width: 29%; width: 61%;
} }
.bar-width-6::after { .bar-width-6::after {
width: 79%; width: 31%;
} }
.diy-process-bar.color-1::after { .diy-process-bar.color-1::after {

View File

@ -6,6 +6,7 @@
import echarts from 'echarts' import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize' import resize from '@/views/OperationalOverview/components/mixins/resize'
import { Random } from 'mockjs' import { Random } from 'mockjs'
import moment from 'moment'
class ChartOption { class ChartOption {
constructor() { constructor() {
@ -62,28 +63,30 @@ class ChartOption {
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));"> <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${ <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
params[0].axisValue params[0].axisValue
}</h2> }</h2>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[0] this.color[0]
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span> }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[1] this.color[1]
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span> }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
</div> </div>
` `
} }
} }
let d = new Date()
this.xAxis = { this.xAxis = {
type: 'category', type: 'category',
boundaryGap: false, // boundaryGap: false,
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: Array(7) data: Array(7)
.fill(0) .fill(0)
.map((_, idx) => { .map((_, idx) => {
return d.getMonth() + 1 + '-' + (d.getDate() + idx) const d = moment()
}), const day = idx ? d.subtract(idx, 'd') : d
return day.format('M-DD')
})
.reverse(),
axisTick: { axisTick: {
show: false show: false
}, },
@ -244,7 +247,7 @@ export default {
return num * beilv return num * beilv
}, },
setChartOption() { setChartOption() {
let chartOption = new ChartOption() const chartOption = new ChartOption()
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize)) this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
} }
} }

View File

@ -9,13 +9,14 @@
list: [32, 65, 65, 54, 37, 77] list: [32, 65, 65, 54, 37, 77]
} }
]" /> --> ]" /> -->
<div class="techy-chart" ref="realtimeLineChart"></div> <div ref="realtimeLineChart" class="techy-chart" />
</template> </template>
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize' import resize from '@/views/OperationalOverview/components/mixins/resize'
import { Random } from 'mockjs' import { Random } from 'mockjs'
import moment from 'moment'
class ChartOption { class ChartOption {
constructor() { constructor() {
@ -59,32 +60,36 @@ class ChartOption {
formatter: params => { formatter: params => {
return ` return `
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));"> <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2> <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
params[0].axisValue
}</h2>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[0] this.color[0]
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span> }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[1] this.color[1]
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span> }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[2] this.color[2]
}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span> }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${ <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
this.color[3] this.color[3]
}"></span><span>${params[3].seriesName}: ${params[3].value}</span></span> }"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
</div> </div>
` `
} }
} }
let d = new Date()
this.xAxis = { this.xAxis = {
type: 'category', type: 'category',
data: Array(7) data: Array(7)
.fill(1) .fill(1)
.map((_, idx) => { .map((_, idx) => {
return d.getMonth() + 1 + '-' + (d.getDate() + idx) const d = moment()
}), const day = idx ? d.subtract(idx, 'd') : d
return day.format('M-DD')
})
.reverse(),
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
@ -377,7 +382,7 @@ export default {
return num * beilv return num * beilv
}, },
setChartOption() { setChartOption() {
let chartOption = new ChartOption() const chartOption = new ChartOption()
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize)) this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
} }
} }

View File

@ -1,6 +1,6 @@
<template> <template>
<header class="techy-header"> <header class="techy-header">
<img class="logo-img" src="./logo.png" alt="cnbm" /> <img class="logo-img" src="./logo.png" alt="cnbm">
<span class="techy-header__title">{{ headTitle }}</span> <span class="techy-header__title">{{ headTitle }}</span>
<div class="date">{{ now.format('yyyy.MM.DD') }}</div> <div class="date">{{ now.format('yyyy.MM.DD') }}</div>
@ -90,7 +90,8 @@ export default {
const password = Cookie.get('password') const password = Cookie.get('password')
if (username && password) { if (username && password) {
window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}` window.location = `http://main.cnbmai.picaiba.com/#/?username=${username}&password=${password}`
// window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
} else { } else {
this.$router.push('/') this.$router.push('/')
} }

View File

@ -7,7 +7,7 @@
--> -->
<template> <template>
<div class="visual-base-table-container"> <div class="visual-base-table-container">
<el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%"> <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
<el-table-column <el-table-column
v-if="page && limit && showIndex" v-if="page && limit && showIndex"
prop="_pageIndex" prop="_pageIndex"
@ -29,7 +29,7 @@
:inject-data="{ ...scope.row, ...item }" :inject-data="{ ...scope.row, ...item }"
@emitData="emitData" @emitData="emitData"
/> />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span> <span v-else :title="scope.row[item.prop]">{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<slot name="content" /> <slot name="content" />

View File

@ -170,6 +170,7 @@ export default {
}, },
handle3DClick() { handle3DClick() {
this.eqId = document.getElementById('V3DData').rel this.eqId = document.getElementById('V3DData').rel
// alert(this.eqId)
if (this.eqId) { if (this.eqId) {
this.currentEquipment = eqList.find(item => item.id === this.eqId) this.currentEquipment = eqList.find(item => item.id === this.eqId)
} }
@ -318,20 +319,14 @@ export default {
.techy-body-part__middle { .techy-body-part__middle {
position: absolute; position: absolute;
/* background: #ff3311; */
top: 0; top: 0;
right: calc(-16px * var(--beilv)); right: calc(-16px * var(--beilv));
} transform: translateX(100%);
.techy-body-part__middle .techy-box {
position: absolute;
top: 0;
left: 0;
height: calc(128px * var(--beilv));
width: calc(188px * var(--beilv));
} }
.techy-body-part__middle__inner { .techy-body-part__middle__inner {
height: 100%; /* height: 100%; */
padding: calc(16px * var(--beilv)); padding: calc(16px * var(--beilv));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -346,8 +341,17 @@ export default {
line-height: 1.5; line-height: 1.5;
color: #fff; color: #fff;
display: flex; display: flex;
min-width: calc(168px * var(--beilv));
} }
.techy-body-part__middle__inner p:not(:last-child) {
margin-bottom: calc(8px * var(--beilv));
}
/* .techy-body-part__middle__inner p > b {
width: calc(90px * var(--beilv));
} */
.techy-body-part__middle__inner p > span { .techy-body-part__middle__inner p > span {
position: relative; position: relative;
padding-left: calc(16px * var(--beilv)); padding-left: calc(16px * var(--beilv));

View File

@ -1,21 +1,23 @@
export default [ export default [
{ id: 'C123-1', pl: 'A', name: 'A钢化', amount: 32, status: '生产中' },
{ id: 'C456-1', pl: 'B', name: 'B钢化', amount: 32, status: '生产中' },
{ id: 'C1-0', pl: 'A1', name: 'A1上片', amount: 32, status: '生产中' }, { id: 'C1-0', pl: 'A1', name: 'A1上片', amount: 32, status: '生产中' },
{ id: 'C1-1', pl: 'A1', name: 'A1磨边', amount: 32, status: '生产中' }, { id: 'C1-1', pl: 'A1', name: 'A1磨边', amount: 32, status: '生产中' },
{ id: 'C1-2', pl: 'A1', name: 'A1磨边后清洗', amount: 32, status: '调试中' }, { id: 'C1-2', pl: 'A1', name: 'A1磨边后清洗', amount: 32, status: '生产中' },
{ id: 'C1-3', pl: 'A1', name: 'A1打孔', amount: 32, status: '生产中' }, { id: 'C1-3', pl: 'A1', name: 'A1打孔', amount: 32, status: '生产中' },
{ id: 'C1-4', pl: 'A1', name: 'A1打孔后清洗', amount: 32, status: '生产中' }, { id: 'C1-4', pl: 'A1', name: 'A1打孔后清洗', amount: 32, status: '生产中' },
{ id: 'C1-5', pl: 'A1', name: 'A1丝印', amount: 32, status: '生产中' }, { id: 'C1-5', pl: 'A1', name: 'A1丝印', amount: 32, status: '生产中' },
{ id: 'C1-6', pl: 'A1', name: 'A1固化', amount: 32, status: '生产中' }, { id: 'C1-6', pl: 'A1', name: 'A1固化', amount: 32, status: '生产中' },
{ id: 'C1-7', pl: 'A1', name: 'A1储片', amount: 32, status: '生产中' }, { id: 'C1-7', pl: 'A1', name: 'A1储片', amount: 32, status: '生产中' },
{ id: 'C1-8', pl: 'A1', name: 'A钢化', amount: 32, status: '生产中' }, { id: 'C1-8', pl: 'A1', name: 'A1钢化后清洗', amount: 32, status: '生产中' },
{ id: 'C1-9', pl: 'A1', name: 'A1钢化后清洗', amount: 32, status: '生产中' }, { id: 'C1-9', pl: 'A1', name: 'A1下片', amount: 32, status: '生产中' },
{ id: 'C1-10', pl: 'A1', name: 'A1下片', amount: 32, status: '生产中' },
{ id: 'C2-0', pl: 'A2', name: 'A2上片', amount: 32, status: '调试中' }, { id: 'C2-0', pl: 'A2', name: 'A2上片', amount: 32, status: '调试中' },
{ id: 'C2-1', pl: 'A2', name: 'A2磨边', amount: 32, status: '生产中' }, { id: 'C2-1', pl: 'A2', name: 'A2磨边', amount: 32, status: '生产中' },
{ id: 'C2-2', pl: 'A2', name: 'A2磨边后清洗', amount: 32, status: '调试中' }, { id: 'C2-2', pl: 'A2', name: 'A2磨边后清洗', amount: 32, status: '调试中' },
{ id: 'C2-3', pl: 'A2', name: 'A2打孔', amount: 32, status: '调试中' }, { id: 'C2-3', pl: 'A2', name: 'A2打孔', amount: 32, status: '调试中' },
{ id: 'C2-4', pl: 'A2', name: 'A2打孔后清洗', amount: 32, status: '调试中' }, { id: 'C2-4', pl: 'A2', name: 'A2打孔后清洗', amount: 32, status: '生产中' },
{ id: 'C2-5', pl: 'A2', name: 'A2丝印', amount: 32, status: '生产中' }, { id: 'C2-5', pl: 'A2', name: 'A2丝印', amount: 32, status: '生产中' },
{ id: 'C2-6', pl: 'A2', name: 'A2固化', amount: 32, status: '生产中' }, { id: 'C2-6', pl: 'A2', name: 'A2固化', amount: 32, status: '生产中' },
{ id: 'C2-7', pl: 'A2', name: 'A2储片', amount: 32, status: '生产中' }, { id: 'C2-7', pl: 'A2', name: 'A2储片', amount: 32, status: '生产中' },
@ -26,8 +28,8 @@ export default [
{ id: 'C3-1', pl: 'A3', name: 'A3磨边', amount: 32, status: '生产中' }, { id: 'C3-1', pl: 'A3', name: 'A3磨边', amount: 32, status: '生产中' },
{ id: 'C3-2', pl: 'A3', name: 'A3磨边后清洗', amount: 32, status: '生产中' }, { id: 'C3-2', pl: 'A3', name: 'A3磨边后清洗', amount: 32, status: '生产中' },
{ id: 'C3-3', pl: 'A3', name: 'A3打孔', amount: 32, status: '生产中' }, { id: 'C3-3', pl: 'A3', name: 'A3打孔', amount: 32, status: '生产中' },
{ id: 'C3-4', pl: 'A3', name: 'A3打孔后清洗', amount: 32, status: '生产中' }, { id: 'C3-4', pl: 'A3', name: 'A3打孔后清洗', amount: 32, status: '故障' },
{ id: 'C3-5', pl: 'A3', name: 'A3丝印', amount: 32, status: '故障' }, { id: 'C3-5', pl: 'A3', name: 'A3丝印', amount: 32, status: '生产中' },
{ id: 'C3-6', pl: 'A3', name: 'A3固化', amount: 32, status: '生产中' }, { id: 'C3-6', pl: 'A3', name: 'A3固化', amount: 32, status: '生产中' },
{ id: 'C3-7', pl: 'A3', name: 'A3储片', amount: 32, status: '生产中' }, { id: 'C3-7', pl: 'A3', name: 'A3储片', amount: 32, status: '生产中' },
{ id: 'C3-8', pl: 'A3', name: 'A3钢化后清洗', amount: 32, status: '生产中' }, { id: 'C3-8', pl: 'A3', name: 'A3钢化后清洗', amount: 32, status: '生产中' },
@ -35,15 +37,14 @@ export default [
{ id: 'C4-0', pl: 'B1', name: 'B1上片', amount: 32, status: '故障' }, { id: 'C4-0', pl: 'B1', name: 'B1上片', amount: 32, status: '故障' },
{ id: 'C4-1', pl: 'B1', name: 'B1磨边', amount: 32, status: '生产中' }, { id: 'C4-1', pl: 'B1', name: 'B1磨边', amount: 32, status: '生产中' },
{ id: 'C4-2', pl: 'B1', name: 'B1磨边后清洗', amount: 32, status: '生产中' }, { id: 'C4-2', pl: 'B1', name: 'B1磨边后清洗', amount: 32, status: '故障' },
{ id: 'C4-3', pl: 'B1', name: 'B1打孔', amount: 32, status: '故障' }, { id: 'C4-3', pl: 'B1', name: 'B1打孔', amount: 32, status: '故障' },
{ id: 'C4-4', pl: 'B1', name: 'B1打孔后清洗', amount: 32, status: '故障' }, { id: 'C4-4', pl: 'B1', name: 'B1打孔后清洗', amount: 32, status: '生产中' },
{ id: 'C4-5', pl: 'B1', name: 'B1丝印', amount: 32, status: '生产中' }, { id: 'C4-5', pl: 'B1', name: 'B1丝印', amount: 32, status: '生产中' },
{ id: 'C4-6', pl: 'B1', name: 'B1固化', amount: 32, status: '生产中' }, { id: 'C4-6', pl: 'B1', name: 'B1固化', amount: 32, status: '生产中' },
{ id: 'C4-7', pl: 'B1', name: 'B1储片', amount: 32, status: '生产中' }, { id: 'C4-7', pl: 'B1', name: 'B1储片', amount: 32, status: '生产中' },
{ id: 'C4-8', pl: 'B1', name: 'B钢化', amount: 32, status: '生产中' }, { id: 'C4-8', pl: 'B1', name: 'B1钢化后清洗', amount: 32, status: '生产中' },
{ id: 'C4-9', pl: 'B1', name: 'B1钢化后清洗', amount: 32, status: '生产中' }, { id: 'C4-9', pl: 'B1', name: 'B下片', amount: 32, status: '生产中' },
{ id: 'C4-10', pl: 'B1', name: 'B下片', amount: 32, status: '生产中' },
{ id: 'C5-0', pl: 'B2', name: 'B2上片', amount: 32, status: '生产中' }, { id: 'C5-0', pl: 'B2', name: 'B2上片', amount: 32, status: '生产中' },
{ id: 'C5-1', pl: 'B2', name: 'B2磨边', amount: 32, status: '生产中' }, { id: 'C5-1', pl: 'B2', name: 'B2磨边', amount: 32, status: '生产中' },
@ -61,6 +62,6 @@ export default [
{ id: 'C6-3', pl: 'B3', name: 'B3打孔', amount: 32, status: '生产中' }, { id: 'C6-3', pl: 'B3', name: 'B3打孔', amount: 32, status: '生产中' },
{ id: 'C6-4', pl: 'B3', name: 'B3打孔后清洗', amount: 32, status: '生产中' }, { id: 'C6-4', pl: 'B3', name: 'B3打孔后清洗', amount: 32, status: '生产中' },
{ id: 'C6-5', pl: 'B3', name: 'B3丝印', amount: 32, status: '生产中' }, { id: 'C6-5', pl: 'B3', name: 'B3丝印', amount: 32, status: '生产中' },
{ id: 'C6-6', pl: 'B3', name: 'B3固化', amount: 32, status: '生产中' }, { id: 'C6-6', pl: 'B3', name: 'B3固化', amount: 32, status: '故障' },
{ id: 'C6-7', pl: 'B3', name: 'B3储片', amount: 32, status: '故障' }, { id: 'C6-7', pl: 'B3', name: 'B3储片', amount: 32, status: '故障' }
] ]