update
This commit is contained in:
parent
c88648e8d2
commit
ec12c84830
@ -9,8 +9,10 @@
|
||||
<template>
|
||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
|
||||
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="isredirect">{{ item.meta.title }}</span>
|
||||
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
||||
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="isredirect">
|
||||
{{ item.meta.title }}
|
||||
</span>
|
||||
<span v-else class="no-redirect">{{ item.meta.title }}</span>
|
||||
<!-- @click.prevent="handleLink(item)" -->
|
||||
</el-breadcrumb-item>
|
||||
@ -79,14 +81,14 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 48px;
|
||||
margin-left: 8px;
|
||||
font-size: calc(14px * var(--beilv));
|
||||
line-height: calc(48px * var(--beilv));
|
||||
margin-left: calc(8px * var(--beilv));
|
||||
.isredirect {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.no-redirect {
|
||||
color: #8C8C8C;
|
||||
color: #8c8c8c;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
<template>
|
||||
<div style="padding: 5px 15px 5px 32px;" @click="toggleClick">
|
||||
<svg-icon style="width: 24px; height: 24px" class="item-icon hamburger" :class="{'is-active':isActive}" icon-class="hamburgerBtn" />
|
||||
<div
|
||||
style="padding: 0 calc(15px * var(--beilv)) 0 calc(32px * var(--beilv));"
|
||||
@click="toggleClick"
|
||||
>
|
||||
<svg-icon
|
||||
style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv));"
|
||||
class="item-icon hamburger"
|
||||
:class="{ 'is-active': isActive }"
|
||||
icon-class="hamburgerBtn"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -9,13 +9,17 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
|
||||
<div>
|
||||
<svg-icon style="width: 24px; height: 24px; vertical-align: -7px" class-name="international-icon" :icon-class="isShow ? 'language2' : 'language3'" />
|
||||
<svg-icon
|
||||
style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv));"
|
||||
class-name="international-icon"
|
||||
:icon-class="isShow ? 'language2' : 'language3'"
|
||||
/>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :disabled="language==='zh'" command="zh">
|
||||
<el-dropdown-item :disabled="language === 'zh'" command="zh">
|
||||
中文
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="language==='en'" command="en">
|
||||
<el-dropdown-item :disabled="language === 'en'" command="en">
|
||||
English
|
||||
</el-dropdown-item>
|
||||
<!-- <el-dropdown-item :disabled="language==='es'" command="es">
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<svg-icon
|
||||
class="item-icon"
|
||||
:icon-class="showTitle ? 'home' : 'homeb'"
|
||||
style="height: 24px; width: 24px; vertical-align: -6px; 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">
|
||||
{{ 'navbar.homepage' | i18nFilter }}
|
||||
@ -38,10 +38,14 @@
|
||||
:hidden="alarmNum > 0 ? false : true"
|
||||
:value="alarmNum"
|
||||
class="item"
|
||||
style="line-height: 0; margin: 0 10px; vertical-align: -3px"
|
||||
style=" margin: 0 10px; "
|
||||
@click.native="handleAlarm"
|
||||
>
|
||||
<svg-icon style="width: 24px; height: 24px" class="item-icon" :icon-class="showTitle ? 'alarm' : 'alarmb'" />
|
||||
<svg-icon
|
||||
style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-4px * var(--beilv))"
|
||||
class="item-icon"
|
||||
:icon-class="showTitle ? 'alarm' : 'alarmb'"
|
||||
/>
|
||||
</el-badge>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>暂无数据</el-dropdown-item>
|
||||
@ -49,7 +53,7 @@
|
||||
</el-dropdown>
|
||||
<div :style="showTitle ? 'color: #fff' : ''" class="right-menu-back">
|
||||
<svg-icon
|
||||
style="width: 24px; height: 24px; vertical-align: -7px"
|
||||
style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
|
||||
:icon-class="showTitle ? 'countdown' : 'countdown2'"
|
||||
/>
|
||||
{{ formatTime }}
|
||||
@ -65,7 +69,7 @@
|
||||
<a href="Lodap.zip">
|
||||
<svg-icon
|
||||
:style="showTitle ? 'color: #fff' : ''"
|
||||
style="width: 24px; height: 24px; vertical-align: -7px"
|
||||
style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
|
||||
icon-class="download"
|
||||
/>
|
||||
</a>
|
||||
@ -74,7 +78,7 @@
|
||||
<a href="google.exe">
|
||||
<svg-icon
|
||||
:style="showTitle ? 'color: #fff' : ''"
|
||||
style="width: 24px; height: 24px; vertical-align: -7px"
|
||||
style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
|
||||
:icon-class="showTitle ? 'chrome' : 'chromeb'"
|
||||
/>
|
||||
</a>
|
||||
@ -371,7 +375,7 @@ export default {
|
||||
}
|
||||
|
||||
.hamburger-container {
|
||||
line-height: calc(48px * var(--beilv));
|
||||
// line-height: calc(48px * var(--beilv));
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
|
||||
@ -6,15 +6,15 @@
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<div class="sidebar-logo-container" :class="{'collapse':collapse}">
|
||||
<div class="sidebar-logo-container" :class="{ collapse: collapse }">
|
||||
<transition name="sidebarLogoFade">
|
||||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||
<h1 v-else :style="{fontSize}" class="sidebar-title">{{ title }} </h1>
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
<h1 v-else :style="{ fontSize }" class="sidebar-title">{{ title }}</h1>
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||
<h1 :style="{fontSize}" class="sidebar-title">{{ title }} </h1>
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
<h1 :style="{ fontSize }" class="sidebar-title">{{ title }}</h1>
|
||||
</router-link>
|
||||
</transition>
|
||||
</div>
|
||||
@ -58,10 +58,10 @@ export default {
|
||||
.sidebar-logo-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
height: calc(48px * var(--beilv));
|
||||
line-height: calc(48px * var(--beilv));
|
||||
background: #001529;
|
||||
padding-left: 10px;
|
||||
padding-left: calc(10px * var(--beilv));
|
||||
overflow: hidden;
|
||||
|
||||
& .sidebar-logo-link {
|
||||
@ -71,21 +71,24 @@ export default {
|
||||
& .sidebar-logo {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
// width: calc(26px * var(--beilv));
|
||||
// height: calc(26px * var(--beilv));
|
||||
// margin-right: calc(12px * var(--beilv));
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& .sidebar-title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
width: 189px;
|
||||
width: calc(189px * var(--beilv));
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
line-height: calc(50px * var(--beilv));
|
||||
font-size: calc(14px * var(--beilv));
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<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 fix-table">
|
||||
<!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
|
||||
<div class="left-content-order fix-table">
|
||||
<techy-table :page="1" :limit="8" :show-index="false" :table-config="tableProps" :table-data="tableData" />
|
||||
|
||||
<!--
|
||||
<el-table
|
||||
key="LeftContentOrder1"
|
||||
border
|
||||
:data="tableData"
|
||||
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
|
||||
height="100%"
|
||||
>
|
||||
<el-table-column
|
||||
label="订单编号"
|
||||
@ -38,7 +38,8 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="el-table-wrapper">
|
||||
<el-table
|
||||
key="LeftContentOrder2"
|
||||
@ -56,33 +57,60 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import TechyFakeTable from './TechyFakeTable.vue'
|
||||
// import TechyTable from './TechyTable.vue'
|
||||
import TechyTable from './TechyTable.vue'
|
||||
|
||||
const ProcessCircle = {
|
||||
name: 'ProcessCircle',
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('finished', this.injectData.finished)
|
||||
},
|
||||
methods: {},
|
||||
render: function(h) {
|
||||
return h('el-progress', {
|
||||
'class': {
|
||||
'lb-progress-bar': true
|
||||
},
|
||||
props: {
|
||||
type: 'circle',
|
||||
percentage: this.injectData.finished,
|
||||
width: 14,
|
||||
'stroke-width': 2,
|
||||
color: '#47FF27'
|
||||
},
|
||||
style: {
|
||||
color: 'blue'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const tableProps = [
|
||||
{ prop: 'orderCode', label: '订单编码', align: 'center', 'min-width': 120 },
|
||||
{ prop: 'clientName', label: '客户名称', align: 'center', 'min-width': 100 },
|
||||
{ prop: 'specs', label: '规格', align: 'center', 'min-width': 90 },
|
||||
{ prop: 'finished', label: '完成度', align: 'center', 'min-width': 80, subcomponent: ProcessCircle }
|
||||
]
|
||||
const tableData = [
|
||||
{ orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
|
||||
{ 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: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
|
||||
]
|
||||
const tableData2 = [
|
||||
{ orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
|
||||
{ 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: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
|
||||
{ orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 },
|
||||
{ orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'LeftContentOrder',
|
||||
components: {},
|
||||
components: { TechyTable },
|
||||
data() {
|
||||
return { tableData, tableData2 }
|
||||
return { tableData, tableProps }
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
@ -97,18 +125,14 @@ export default {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.left-content-equipment-check {
|
||||
display: flex;
|
||||
gap: calc(100vw / 1920 * 16);
|
||||
.left-content-order {
|
||||
height: calc(100% - 3vh);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
.el-table-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.left-content-equipment-check > div {
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> * {
|
||||
@ -160,13 +184,16 @@ export default {
|
||||
.el-table-wrapper >>> tbody > tr:nth-child(even) {
|
||||
background: rgba(76, 97, 123, 0.2);
|
||||
}
|
||||
*/
|
||||
|
||||
.lb-progress-bar {
|
||||
left: 30px;
|
||||
display: flex;
|
||||
.left-content-order >>> .el-progress-circle {
|
||||
position: relative;
|
||||
left: calc(24px * var(--beilv));
|
||||
}
|
||||
.lb-progress-bar >>> .el-progress__text {
|
||||
color: #fff9;
|
||||
left: -85%;
|
||||
|
||||
.left-content-order >>> .el-progress__text {
|
||||
font-size: inherit;
|
||||
left: calc(-2px * var(--beilv));
|
||||
color: #ffffff50 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
|
||||
<div>
|
||||
<TechyBox class="water-consume">
|
||||
<div class="header-part ">
|
||||
<div class="header-part">
|
||||
<img src="./assets/consume/s.png" width="32" height="32" alt="water" />
|
||||
<span>水</span>
|
||||
</div>
|
||||
@ -92,7 +92,7 @@
|
||||
</TechyBox>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1;">
|
||||
<div style="height: 1px; flex: 1;">
|
||||
<TechyBox class="dian-consume">
|
||||
<div class="header-part">
|
||||
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
|
||||
@ -104,7 +104,7 @@
|
||||
</TechyBox>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1;">
|
||||
<div style="height: 1px; flex: 1;">
|
||||
<TechyBox class="elec-consume">
|
||||
<div class="header-part">
|
||||
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
|
||||
@ -146,7 +146,7 @@ export default {
|
||||
'water elec-gen elec-gen gas'; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(100vmin / 1920 * 16);
|
||||
gap: calc(8px * var(--beilv));
|
||||
}
|
||||
|
||||
.water-area {
|
||||
@ -167,19 +167,19 @@ export default {
|
||||
} */
|
||||
|
||||
.techy-box {
|
||||
padding: calc(100vmin / 1920 * 16);
|
||||
padding: calc(16px * var(--beilv));
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-part {
|
||||
height: 100%;
|
||||
width: calc(100vmin / 1920 * 96);
|
||||
width: calc(56px * var(--beilv));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* overflow: hidden; */
|
||||
margin-right: 16px;
|
||||
margin-right: calc(16px * var(--beilv));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -187,15 +187,15 @@ export default {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -8px;
|
||||
width: 1px;
|
||||
right: calc(-8px * var(--beilv));
|
||||
width: calc(1px * var(--beilv));
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, transparent, #fff9, transparent);
|
||||
}
|
||||
|
||||
.header-part > span {
|
||||
color: #fffc;
|
||||
font-size: 0.8em;
|
||||
font-size: calc(12px * var(--beilv));
|
||||
}
|
||||
|
||||
.content-part {
|
||||
|
||||
@ -245,7 +245,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)
|
||||
})
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="quality-analysis-bar" :class="`border-${color}`">
|
||||
<div class="placeholder-block-wrapper">
|
||||
<div class="justify-end">
|
||||
<div class="flex 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`" />
|
||||
@ -22,7 +22,7 @@ export default {
|
||||
filters: {
|
||||
amountFilter: val => {
|
||||
const sVal = val.toString()
|
||||
return sVal.length > 10 ? sVal.slice(0, 8) + '...' : sVal
|
||||
return sVal.length > 7 ? sVal.slice(0, 6) + '...' : sVal
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@ -57,45 +57,43 @@ export default {
|
||||
|
||||
.quality-analysis-bar {
|
||||
border-radius: 2px;
|
||||
padding: 2px;
|
||||
padding: calc(2px * var(--beilv));
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.border-green {
|
||||
border: 1px solid #35abad;
|
||||
border: 2px solid #35abad;
|
||||
}
|
||||
.border-blue {
|
||||
border: 1px solid #49b2ff;
|
||||
border: 2px solid #49b2ff;
|
||||
}
|
||||
.border-orange {
|
||||
border: 1px solid #ffb94d;
|
||||
border: 2px solid #ffb94d;
|
||||
}
|
||||
.border-pink {
|
||||
border: 1px solid #ed879f;
|
||||
border: 2px solid #ed879f;
|
||||
}
|
||||
|
||||
.placeholder-block-wrapper {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
min-width: 32px;
|
||||
min-width: calc(32px * var(--beilv));
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-block-wrapper > div {
|
||||
width: 200px;
|
||||
width: calc(300px * var(--beilv));
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.placeholder-block {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 3px;
|
||||
/* border-radius: 1px; */
|
||||
width: calc(20px * var(--beilv));
|
||||
height: calc(20px * var(--beilv));
|
||||
margin-left: calc(3px * var(--beilv));
|
||||
}
|
||||
|
||||
.block-green-5 {
|
||||
@ -175,24 +173,24 @@ export default {
|
||||
|
||||
.quality-analysis-bar__name {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
white-space: normal;
|
||||
overflow-wrap: break-word;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
padding: 3px 8px;
|
||||
font-size: 14px;
|
||||
line-height: 12px;
|
||||
padding: calc(3px * var(--beilv)) calc(8px * var(--beilv));
|
||||
font-size: calc(14px * var(--beilv));
|
||||
line-height: calc(12px * var(--beilv));
|
||||
}
|
||||
|
||||
.quality-analysis-bar__amount {
|
||||
color: rgba(255, 255, 255, 0.725);
|
||||
display: inline-block;
|
||||
/* min-width: 35%; */
|
||||
width: 50%;
|
||||
width: 35%;
|
||||
text-align: left;
|
||||
padding: 3px 0;
|
||||
font-size: 14px;
|
||||
line-height: 12px;
|
||||
padding: calc(3px * var(--beilv)) 0;
|
||||
font-size: calc(14px * var(--beilv));;
|
||||
line-height: calc(12px * var(--beilv));;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -122,7 +122,7 @@ export default {
|
||||
margin-left: calc(12px * var(--beilv));
|
||||
font-size: calc(29px * var(--beilv));
|
||||
line-height: calc(41px * var(--beilv));
|
||||
letter-spacing: calc(2.23px * var(--beilv));
|
||||
letter-spacing: calc(4px * var(--beilv));
|
||||
text-shadow: 0px 0px calc(11px * var(--beilv)) rgba(221, 237, 255, 0.34);
|
||||
}
|
||||
|
||||
@ -134,7 +134,7 @@ export default {
|
||||
color: #49e1de;
|
||||
letter-spacing: calc(0.8px * var(--beilv));
|
||||
position: absolute;
|
||||
bottom: calc(12px * var(--beilv));
|
||||
bottom: calc(18px * var(--beilv));
|
||||
}
|
||||
|
||||
.date {
|
||||
|
||||
@ -7,15 +7,14 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="visual-base-table-container">
|
||||
<el-table
|
||||
v-loading="isLoading"
|
||||
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
|
||||
:row-style="setRowStyle"
|
||||
:data="renderData"
|
||||
border
|
||||
style="width: 100%; background: transparent"
|
||||
>
|
||||
<el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
|
||||
<el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%">
|
||||
<el-table-column
|
||||
v-if="page && limit && showIndex"
|
||||
prop="_pageIndex"
|
||||
:label="'tableHeader.index' | i18nFilter"
|
||||
:width="70 * beilv"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="(item, index) in renderTableHeadList"
|
||||
:key="item.prop"
|
||||
@ -23,10 +22,14 @@
|
||||
v-bind="item"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
|
||||
<component :is="item.subcomponent" v-if="item.subcomponent" :key="index" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
|
||||
<component
|
||||
:is="item.subcomponent"
|
||||
v-if="item.subcomponent"
|
||||
:key="index"
|
||||
:inject-data="{ ...scope.row, ...item }"
|
||||
@emitData="emitData"
|
||||
/>
|
||||
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<slot name="content" />
|
||||
@ -107,82 +110,101 @@ export default {
|
||||
methods: {
|
||||
emitData(val) {
|
||||
this.$emit('emitFun', val)
|
||||
},
|
||||
setRowStyle(v) {
|
||||
if (v.rowIndex % 2 === 0) {
|
||||
return {
|
||||
background: 'rgba(76,97,123,0.2)',
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
height: 26 * this.beilv + 'px',
|
||||
lineHeight: 26 * this.beilv + 'px',
|
||||
padding: 0,
|
||||
fontSize: 12 * this.beilv + 'px'
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
background: 'rgba(79,114,136,0.29)',
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
height: 26 * this.beilv + 'px',
|
||||
lineHeight: 26 * this.beilv + 'px',
|
||||
padding: 0,
|
||||
fontSize: 12 * this.beilv + 'px'
|
||||
}
|
||||
}
|
||||
},
|
||||
setCellStyle(v) {
|
||||
return {
|
||||
lineHeight: 23 * this.beilv + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "~@/styles/index.scss";
|
||||
|
||||
<style scoped>
|
||||
.visual-base-table-container >>> ::-webkit-scrollbar {
|
||||
width: calc(8px * var(--beilv));
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> ::-webkit-scrollbar-track {
|
||||
background-color: #14243f;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> ::-webkit-scrollbar-button {
|
||||
width: calc(8px * var(--beilv));
|
||||
height: calc(8px * var(--beilv));
|
||||
background: #5bc4bf9f;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
|
||||
border-radius: calc(8px * var(--beilv));
|
||||
background: #5bc4bf9f;
|
||||
}
|
||||
|
||||
/* .visual-base-table-container {
|
||||
min-width: 30vw;
|
||||
} */
|
||||
.visual-base-table-container {
|
||||
.el-table {
|
||||
border: 0;
|
||||
}
|
||||
.el-table::before,.el-table--border::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
.el-table th,td{
|
||||
border-color: #0D1728 !important;
|
||||
padding: 0;
|
||||
}
|
||||
.el-table tr {
|
||||
background: transparent;
|
||||
}
|
||||
.el-table__row:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
|
||||
.el-table__row--striped:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
|
||||
// new
|
||||
.el-table {
|
||||
width: 100%;
|
||||
.el-table__header-wrapper table, .el-table__body-wrapper table {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.el-table__body, .el-table__footer, .el-table__header {
|
||||
table-layout: auto;
|
||||
}
|
||||
}
|
||||
height: 100%;
|
||||
}
|
||||
.setting {
|
||||
text-align: right;
|
||||
padding: 15px;
|
||||
.setting-box {
|
||||
width: 100px;
|
||||
}
|
||||
i {
|
||||
color: #aaa;
|
||||
@extend .pointer;
|
||||
}
|
||||
/* .visual-base-table-container >>> .el-table {
|
||||
min-width: 120%;
|
||||
} */
|
||||
/* 清除默认样式 */
|
||||
.visual-base-table-container >>> th.gutter {
|
||||
display: none;
|
||||
}
|
||||
.visual-base-table-container >>> table {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> .el-table,
|
||||
.visual-base-table-container >>> th,
|
||||
.visual-base-table-container >>> tr {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
/* 设置设计稿样式 */
|
||||
.visual-base-table-container >>> .el-table::before,
|
||||
.visual-base-table-container >>> .el-table--group::after,
|
||||
.visual-base-table-container >>> .el-table--border::after,
|
||||
.visual-base-table-container >>> .el-table--border::after {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> table * {
|
||||
border-color: #0d1728;
|
||||
border-width: calc(1px * var(--beilv));
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> td {
|
||||
padding: calc(5px * var(--beilv));
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> td span {
|
||||
color: #ffffff50;
|
||||
font-size: calc(12px * var(--beilv));
|
||||
line-height: calc(14px * var(--beilv));
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> thead th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> thead th .cell {
|
||||
color: #fff;
|
||||
font-size: calc(14px * var(--beilv));
|
||||
line-height: calc(14px * var(--beilv));
|
||||
padding: calc(6px * var(--beilv));
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> .el-table__body tr:hover > td {
|
||||
background-color: #42537130;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
|
||||
background-color: #0e203e90;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
|
||||
.visual-base-table-container >>> .el-table thead {
|
||||
background-color: #20376090;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div id="v3d-outter" ref="v3d-outter">
|
||||
<!-- <V3DApp @3d-loaded="handle3DLoaded" /> -->
|
||||
<!-- 正式内容: -->
|
||||
<!-- <div v-if="showPage" id="v3d-main-content"> -->
|
||||
<div v-if="true" id="v3d-main-content">
|
||||
<techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
|
||||
@ -9,12 +8,16 @@
|
||||
<section id="techy-body-part">
|
||||
<div class="upper-part">
|
||||
<div class="techy-body-part__left">
|
||||
<techy-container title="订单完成情况" icon="default" style="flex: 0;">
|
||||
<LeftContentOrder />
|
||||
</techy-container>
|
||||
<techy-container title="公用工程消耗" icon="菱形叠加" style="flex:1;">
|
||||
<LeftContentPublicConsume />
|
||||
</techy-container>
|
||||
<div class="order">
|
||||
<techy-container title="订单完成情况" icon="default">
|
||||
<LeftContentOrder />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div class="public">
|
||||
<techy-container title="公用工程消耗" icon="菱形叠加">
|
||||
<LeftContentPublicConsume />
|
||||
</techy-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="techy-body-part__middle">
|
||||
@ -41,38 +44,44 @@
|
||||
</div>
|
||||
|
||||
<div class="techy-body-part__right">
|
||||
<techy-container title="实时产量和能耗" icon="折角的菜单图标" style="height: 22vh">
|
||||
<RightContentRealtimeProduction />
|
||||
</techy-container>
|
||||
<div class="realtime">
|
||||
<techy-container title="实时产量和能耗" icon="折角的菜单图标">
|
||||
<RightContentRealtimeProduction />
|
||||
</techy-container>
|
||||
</div>
|
||||
|
||||
<techy-container title="工序质量分析" icon="趋势放大镜图标" style="flex: 0">
|
||||
<RightContentQualityAnalysis />
|
||||
</techy-container>
|
||||
<div class="ws-quality">
|
||||
<techy-container title="工序质量分析" icon="趋势放大镜图标">
|
||||
<RightContentQualityAnalysis />
|
||||
</techy-container>
|
||||
</div>
|
||||
|
||||
<techy-container title="产线成品率" icon="default" style="flex: 1">
|
||||
<RightContentProductRate />
|
||||
</techy-container>
|
||||
<div class="production">
|
||||
<techy-container title="产线成品率" icon="default">
|
||||
<RightContentProductRate />
|
||||
</techy-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="bottom-part">
|
||||
<div style="width: 25%; min-width: 480px; height: 100%;">
|
||||
<div class="eq-check">
|
||||
<techy-container title="设备巡检提示" icon="电脑警告菜单图标" style="flex: 0; align-self: stretch;">
|
||||
<LeftContentEquipmentCheck />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<div class="ft-monitor" style="flex: 1;">
|
||||
<techy-container title="现场实时监控" icon="安全帽图标">
|
||||
<LeftContentMonitor />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div style="flex: 1;max-width: 320px;">
|
||||
<div class="fault-analysis">
|
||||
<techy-container title="缺陷分类分析" icon="菜单放大镜图标">
|
||||
<RightContentFaultAnalysis />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div style="width: 25%; min-width: 480px;">
|
||||
<div class="eq-alert">
|
||||
<techy-container title="设备报警提示" icon="电脑警告图标">
|
||||
<RightContentAlert />
|
||||
</techy-container>
|
||||
@ -160,6 +169,7 @@ export default {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
/* overflow: auto; */
|
||||
}
|
||||
|
||||
#v3d-outter *::-webkit-scrollbar {
|
||||
@ -195,48 +205,87 @@ export default {
|
||||
}
|
||||
|
||||
#techy-body-part {
|
||||
height: 20vh;
|
||||
flex: 1 1;
|
||||
display: flex;
|
||||
/* gap: 16px; */
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
gap: calc(16px * var(--beilv));
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.upper-part {
|
||||
flex: 1 1;
|
||||
padding: calc(100vmin / 1920 * 36);
|
||||
height: 20vh;
|
||||
padding: calc(24px * var(--beilv));
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
gap: calc(16px * var(--beilv));
|
||||
}
|
||||
|
||||
/* 订单完成情况 */
|
||||
.order {
|
||||
height: calc(232px * var(--beilv));
|
||||
flex: 0;
|
||||
}
|
||||
/* 公用工程消耗 */
|
||||
.public {
|
||||
height: calc(472px * var(--beilv));
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 实时产量和能耗 */
|
||||
.realtime {
|
||||
height: calc(256px * var(--beilv));
|
||||
}
|
||||
/* 工序质量分析 */
|
||||
.ws-quality {
|
||||
height: calc(228px * var(--beilv));
|
||||
flex: 1;
|
||||
}
|
||||
/* 产线成品率 */
|
||||
.production {
|
||||
height: calc(195px * var(--beilv));
|
||||
}
|
||||
|
||||
.bottom-part {
|
||||
height: 22vh;
|
||||
padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36);
|
||||
height: calc(224px * var(--beilv));
|
||||
padding: 0 calc(24px * var(--beilv)) calc(24px * var(--beilv));
|
||||
display: flex;
|
||||
/* gap: 16px; */
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
gap: calc(16px * var(--beilv));
|
||||
}
|
||||
|
||||
/* 设备巡检提示 */
|
||||
.eq-check,
|
||||
.eq-alert {
|
||||
width: calc(472px * var(--beilv));
|
||||
}
|
||||
|
||||
/* 现场实时监控 */
|
||||
.ft-monitor {
|
||||
}
|
||||
|
||||
/* 缺陷分类分析 */
|
||||
.fault-analysis {
|
||||
width: calc(290px * var(--beilv));
|
||||
}
|
||||
|
||||
/* 设备报警提示 */
|
||||
.eq-alert {
|
||||
}
|
||||
|
||||
.techy-body-part__left,
|
||||
.techy-body-part__right {
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
min-width: 480px;
|
||||
/* height: 100%; */
|
||||
/* height: calc(512px * var(--beilv));
|
||||
flex: 1; */
|
||||
width: calc(472px * var(--beilv));
|
||||
overflow: hidden;
|
||||
/* background: rgba(20, 69, 100, 0.425);
|
||||
backdrop-filter: blur(2px); */
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
gap: calc(16px * var(--beilv));
|
||||
}
|
||||
|
||||
/* .techy-body-part__left {
|
||||
width: 35%;
|
||||
} */
|
||||
|
||||
.techy-body-part__right-col-2 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user