mt-fe-group/11-mes-new
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
lb 2022-11-11 14:05:56 +08:00
parent c88648e8d2
commit ec12c84830
12 changed files with 338 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Breadcrumb/index.vue
View File

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

12
src/components/Hamburger/index.vue
View File

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

10
src/components/LangSelect/index.vue
View File

@ -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">

18
src/layout/components/Navbar.vue
View File

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

27
src/layout/components/Sidebar/Logo.vue
View File

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

99
src/views/3DOverview/components/LeftContentOrder.vue
View File

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

20
src/views/3DOverview/components/LeftContentPublicConsume.vue
View File

@ -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 {

1
src/views/3DOverview/components/RightContentProductRate.vue
View File

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

42
src/views/3DOverview/components/TechyAnalysisBar.vue
View File

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

4
src/views/3DOverview/components/TechyHeader.vue
View File

@ -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 {

186
src/views/3DOverview/components/TechyTable.vue
View File

@ -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; }
} /* .visual-base-table-container >>> .el-table {
.el-table::before,.el-table--border::after { min-width: 120%;
background-color: transparent; } */
} /* 清除默认样式 */
.el-table th,td{ .visual-base-table-container >>> th.gutter {
border-color: #0D1728 !important; display: none;
padding: 0; }
} .visual-base-table-container >>> table {
.el-table tr {
background: transparent; 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 {
text-align: right;
padding: 15px;
.setting-box {
width: 100px;
}
i {
color: #aaa;
@extend .pointer;
}
} }
.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>

107
src/views/3DOverview/index.vue
View File

@ -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,13 +8,17 @@
<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">
<techy-container title="订单完成情况" icon="default">
<LeftContentOrder /> <LeftContentOrder />
</techy-container> </techy-container>
<techy-container title="公用工程消耗" icon="菱形叠加" style="flex:1;"> </div>
<div class="public">
<techy-container title="公用工程消耗" icon="菱形叠加">
<LeftContentPublicConsume /> <LeftContentPublicConsume />
</techy-container> </techy-container>
</div> </div>
</div>
<div class="techy-body-part__middle"> <div class="techy-body-part__middle">
<TechyBox> <TechyBox>
@ -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">
<techy-container title="实时产量和能耗" icon="折角的菜单图标">
<RightContentRealtimeProduction /> <RightContentRealtimeProduction />
</techy-container> </techy-container>
</div>
<techy-container title="工序质量分析" icon="趋势放大镜图标" style="flex: 0"> <div class="ws-quality">
<techy-container title="工序质量分析" icon="趋势放大镜图标">
<RightContentQualityAnalysis /> <RightContentQualityAnalysis />
</techy-container> </techy-container>
</div>
<techy-container title="产线成品率" icon="default" style="flex: 1"> <div class="production">
<techy-container title="产线成品率" icon="default">
<RightContentProductRate /> <RightContentProductRate />
</techy-container> </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;