@@ -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 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 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 tableData2 = [ | |||
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 } | |||
{ 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; | |||
} | |||
height: 100%; | |||
} | |||
/* .visual-base-table-container >>> .el-table { | |||
min-width: 120%; | |||
} */ | |||
/* 清除默认样式 */ | |||
.visual-base-table-container >>> th.gutter { | |||
display: none; | |||
} | |||
.visual-base-table-container >>> table { | |||
background: transparent; | |||
} | |||
.el-table__row--striped:hover > td { | |||
background-color: rgba(79,114,136,0.29) !important; | |||
} | |||
.visual-base-table-container >>> .el-table, | |||
.visual-base-table-container >>> th, | |||
.visual-base-table-container >>> tr { | |||
background: unset; | |||
} | |||
// new | |||
.el-table { | |||
width: 100%; | |||
.el-table__header-wrapper table, .el-table__body-wrapper table { | |||
width: 100% !important; | |||
} | |||
/* 设置设计稿样式 */ | |||
.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; | |||
} | |||
.el-table__body, .el-table__footer, .el-table__header { | |||
table-layout: auto; | |||
} | |||
} | |||
.visual-base-table-container >>> table * { | |||
border-color: #0d1728; | |||
border-width: calc(1px * var(--beilv)); | |||
} | |||
.setting { | |||
text-align: right; | |||
padding: 15px; | |||
.setting-box { | |||
width: 100px; | |||
} | |||
i { | |||
color: #aaa; | |||
@extend .pointer; | |||
} | |||
.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; | |||