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