Compare commits
No commits in common. "d3da712572ed0aaf035e326e3524c31c54ebad4e" and "c51d05cd23da050ab7896c95592affd445bd7377" have entirely different histories.
d3da712572
...
c51d05cd23
@ -9,10 +9,8 @@
|
||||
<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>
|
||||
@ -81,14 +79,14 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: calc(14px * var(--beilv));
|
||||
line-height: calc(48px * var(--beilv));
|
||||
margin-left: calc(8px * var(--beilv));
|
||||
font-size: 14px;
|
||||
line-height: 48px;
|
||||
margin-left: 8px;
|
||||
.isredirect {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.no-redirect {
|
||||
color: #8c8c8c;
|
||||
color: #8C8C8C;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,6 @@
|
||||
<template>
|
||||
<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 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>
|
||||
</template>
|
||||
|
||||
|
||||
@ -9,17 +9,13 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
|
||||
<div>
|
||||
<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'"
|
||||
/>
|
||||
<svg-icon style="width: 24px; height: 24px; vertical-align: -7px" 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: calc(24px * var(--beilv)); width: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv)); margin-right: 2px;"
|
||||
style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;"
|
||||
/>
|
||||
<span v-if="showhome">
|
||||
{{ 'navbar.homepage' | i18nFilter }}
|
||||
@ -38,14 +38,10 @@
|
||||
:hidden="alarmNum > 0 ? false : true"
|
||||
:value="alarmNum"
|
||||
class="item"
|
||||
style=" margin: 0 10px; "
|
||||
style="line-height: 0; margin: 0 10px; vertical-align: -3px"
|
||||
@click.native="handleAlarm"
|
||||
>
|
||||
<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'"
|
||||
/>
|
||||
<svg-icon style="width: 24px; height: 24px" class="item-icon" :icon-class="showTitle ? 'alarm' : 'alarmb'" />
|
||||
</el-badge>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>暂无数据</el-dropdown-item>
|
||||
@ -53,7 +49,7 @@
|
||||
</el-dropdown>
|
||||
<div :style="showTitle ? 'color: #fff' : ''" class="right-menu-back">
|
||||
<svg-icon
|
||||
style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
|
||||
style="width: 24px; height: 24px; vertical-align: -7px"
|
||||
:icon-class="showTitle ? 'countdown' : 'countdown2'"
|
||||
/>
|
||||
{{ formatTime }}
|
||||
@ -69,7 +65,7 @@
|
||||
<a href="Lodap.zip">
|
||||
<svg-icon
|
||||
:style="showTitle ? 'color: #fff' : ''"
|
||||
style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
|
||||
style="width: 24px; height: 24px; vertical-align: -7px"
|
||||
icon-class="download"
|
||||
/>
|
||||
</a>
|
||||
@ -78,7 +74,7 @@
|
||||
<a href="google.exe">
|
||||
<svg-icon
|
||||
:style="showTitle ? 'color: #fff' : ''"
|
||||
style="width: calc(24px * var(--beilv)); height: calc(24px * var(--beilv)); vertical-align: calc(-7px * var(--beilv))"
|
||||
style="width: 24px; height: 24px; vertical-align: -7px"
|
||||
:icon-class="showTitle ? 'chrome' : 'chromeb'"
|
||||
/>
|
||||
</a>
|
||||
@ -375,7 +371,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: calc(48px * var(--beilv));
|
||||
line-height: calc(48px * var(--beilv));
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background: #001529;
|
||||
padding-left: calc(10px * var(--beilv));
|
||||
padding-left: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
& .sidebar-logo-link {
|
||||
@ -71,24 +71,21 @@ export default {
|
||||
& .sidebar-logo {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-right: 12px;
|
||||
// width: calc(26px * var(--beilv));
|
||||
// height: calc(26px * var(--beilv));
|
||||
// margin-right: calc(12px * var(--beilv));
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
& .sidebar-title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
width: calc(189px * var(--beilv));
|
||||
width: 189px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
line-height: calc(50px * var(--beilv));
|
||||
font-size: calc(14px * var(--beilv));
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@ export default {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const colors = ['#E02094', '#F0D63C', '#1A99FF']
|
||||
const colors = ['#5470C6', '#EE6666', '#339888']
|
||||
|
||||
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
|
||||
let data = [
|
||||
|
||||
@ -43,7 +43,7 @@ export default {
|
||||
color: '#fff9'
|
||||
}
|
||||
},
|
||||
color: ['#E02094', '#F0D63C', '#1A99FF'],
|
||||
color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
|
||||
grid: {
|
||||
top: '30%',
|
||||
left: 0,
|
||||
|
||||
@ -1,16 +1,10 @@
|
||||
<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"
|
||||
:page="1"
|
||||
:limit="8"
|
||||
:table-config="tableProps"
|
||||
:table-data="tableData"
|
||||
></TechyTable>
|
||||
|
||||
<!-- <el-table
|
||||
<!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
|
||||
<el-table
|
||||
key="LeftContentEquipmentCheck1"
|
||||
border
|
||||
:data="tableData"
|
||||
@ -20,13 +14,13 @@
|
||||
<el-table-column label="所属产线" prop="pl" align="center" />
|
||||
<el-table-column label="提示等级" prop="warningLevel" align="center">
|
||||
<template slot-scope="scope">
|
||||
<!-- <component :is="PriorityComponent"></component> -->
|
||||
<PriorityComponent :injectData="scope.row"></PriorityComponent>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="巡检内容" prop="checkContent" align="center" />
|
||||
</el-table>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
<!-- <div class="el-table-wrapper">
|
||||
<el-table
|
||||
key="LeftContentEquipmentCheck2"
|
||||
@ -41,12 +35,11 @@
|
||||
</el-table>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TechyTable from './TechyTable.vue'
|
||||
|
||||
// import TechyFakeTable from './TechyFakeTable.vue'
|
||||
// import TechyTable from './TechyTable.vue'
|
||||
const PriorityComponent = {
|
||||
name: 'PriorityComponent',
|
||||
props: {
|
||||
@ -68,16 +61,11 @@ const PriorityComponent = {
|
||||
{
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
// borderRadius: '2px',
|
||||
// padding: '2px 6px',
|
||||
// color: '#fff',
|
||||
// opacity: '0.6',
|
||||
// fontSize: '12px',
|
||||
borderRadius: 'calc(2px * var(--beilv))',
|
||||
padding: 'calc(2px * var(--beilv)) calc(6px * var(--beilv))',
|
||||
borderRadius: '2px',
|
||||
padding: '2px 6px',
|
||||
color: '#fff',
|
||||
opacity: '0.6',
|
||||
fontSize: 'calc(12px * var(--beilv))',
|
||||
fontSize: '12px',
|
||||
lineHeight: 1,
|
||||
backgroundColor: this.bgColor
|
||||
}
|
||||
@ -87,12 +75,12 @@ const PriorityComponent = {
|
||||
}
|
||||
}
|
||||
|
||||
const tableProps = [
|
||||
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 120 },
|
||||
{ prop: 'pl', label: '所属产线', align: 'center', 'min-width': 100 },
|
||||
{ prop: 'warningLevel', label: '提示等级', align: 'center', 'min-width': 100, subcomponent: PriorityComponent },
|
||||
{ prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
|
||||
]
|
||||
// const tableProps = [
|
||||
// { prop: 'eqName', label: '设备名称', width: 120, resizable: false },
|
||||
// { prop: 'pl', label: '所属产线', width: 120, resizable: false },
|
||||
// { prop: 'warningLevel', label: '提示等级', width: 120, resizable: false },
|
||||
// { prop: 'checkContent', label: '提示等级', width: 120, resizable: false }
|
||||
// ]
|
||||
const tableData = [
|
||||
{ eqName: 'A下片机', pl: '产线1', priority: 1, checkContent: '巡检内容' },
|
||||
{ eqName: 'A下片机', pl: '产线1', priority: 2, checkContent: '巡检内容' },
|
||||
@ -100,16 +88,22 @@ const tableData = [
|
||||
{ eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
|
||||
{ eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
|
||||
{ eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' },
|
||||
{ eqName: '设备B', pl: '产线1', priority: 2, checkContent: '巡检内容' },
|
||||
{ eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
|
||||
{ eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
|
||||
{ eqName: '设备B', pl: '产线1', priority: 2, checkContent: '巡检内容' }
|
||||
// { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
|
||||
// { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
|
||||
]
|
||||
// const tableData2 = [
|
||||
// { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
|
||||
// { eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
|
||||
// { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
|
||||
// { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
|
||||
// ]
|
||||
|
||||
export default {
|
||||
name: 'LeftContentEquipmentCheck',
|
||||
components: { TechyTable },
|
||||
components: { PriorityComponent },
|
||||
data() {
|
||||
return { tableProps, tableData }
|
||||
return { tableData }
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="left-content-order fix-table">
|
||||
<techy-table :page="1" :limit="8" :show-index="false" :table-config="tableProps" :table-data="tableData" />
|
||||
|
||||
<!--
|
||||
<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> -->
|
||||
<el-table
|
||||
key="LeftContentOrder1"
|
||||
border
|
||||
:data="tableData"
|
||||
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
|
||||
height="100%"
|
||||
>
|
||||
<el-table-column
|
||||
label="订单编号"
|
||||
@ -38,8 +38,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
<!-- <div class="el-table-wrapper">
|
||||
<el-table
|
||||
key="LeftContentOrder2"
|
||||
@ -57,60 +56,33 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TechyTable from './TechyTable.vue'
|
||||
// import TechyFakeTable from './TechyFakeTable.vue'
|
||||
// import TechyTable from './TechyTable.vue'
|
||||
|
||||
const ProcessCircle = {
|
||||
name: 'ProcessCircle',
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('finished', this.injectData.finished)
|
||||
},
|
||||
methods: {},
|
||||
render: function(h) {
|
||||
return h('el-progress', {
|
||||
class: {
|
||||
'lb-progress-bar': true
|
||||
},
|
||||
props: {
|
||||
type: 'circle',
|
||||
percentage: this.injectData.finished,
|
||||
width: 14,
|
||||
'stroke-width': 2,
|
||||
color: '#47FF27'
|
||||
},
|
||||
style: {
|
||||
color: 'blue'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const tableProps = [
|
||||
{ prop: 'orderCode', label: '订单编码', align: 'center', 'min-width': 120 },
|
||||
{ prop: 'clientName', label: '客户名称', align: 'center', 'min-width': 100 },
|
||||
{ prop: 'specs', label: '规格', align: 'center', 'min-width': 90 },
|
||||
{ prop: 'finished', label: '完成度', align: 'center', 'min-width': 80, subcomponent: ProcessCircle }
|
||||
]
|
||||
const tableData = [
|
||||
{ orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
|
||||
{ orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
|
||||
{ orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
|
||||
{ orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
|
||||
{ orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 }
|
||||
// { orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
|
||||
// { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
|
||||
]
|
||||
const tableData2 = [
|
||||
{ orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
|
||||
{ orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
|
||||
{ orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
|
||||
{ orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
|
||||
{ orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
|
||||
{ orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 },
|
||||
{ orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
|
||||
{ orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 }
|
||||
// { orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'LeftContentOrder',
|
||||
components: { TechyTable },
|
||||
components: {},
|
||||
data() {
|
||||
return { tableData, tableProps }
|
||||
return { tableData, tableData2 }
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
@ -125,17 +97,76 @@ export default {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.left-content-order >>> .el-progress-circle {
|
||||
position: relative;
|
||||
left: calc(24px * var(--beilv));
|
||||
width: calc(12px * var(--beilv)) !important;
|
||||
height: calc(12px * var(--beilv)) !important;
|
||||
.left-content-equipment-check {
|
||||
display: flex;
|
||||
gap: calc(100vw / 1920 * 16);
|
||||
}
|
||||
|
||||
.left-content-order >>> .el-progress__text {
|
||||
font-size: calc(12px * var(--beilv)) !important;
|
||||
line-height: calc(14px * var(--beilv)) !important;
|
||||
left: calc(-2px * var(--beilv));
|
||||
color: #ffffffb3 !important;
|
||||
.el-table-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.left-content-equipment-check > div {
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> * {
|
||||
background: transparent;
|
||||
}
|
||||
.el-table-wrapper >>> .el-table::before,
|
||||
.el-table-wrapper >>> .el-table--group::after,
|
||||
.el-table-wrapper >>> .el-table--border::after {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> .el-table {
|
||||
font-size: 8px;
|
||||
background-color: transparent;
|
||||
color: #fff9;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> .el-table th.is-leaf,
|
||||
.el-table-wrapper >>> .el-table td {
|
||||
border-color: #0d1728;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-table__row--striped:hover > td,
|
||||
.el-table-wrapper >>> .el-table__row:hover > td {
|
||||
background-color: rgba(79, 114, 136, 0.29) !important;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> table {
|
||||
border: unset;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> thead {
|
||||
color: #fff;
|
||||
}
|
||||
.el-table-wrapper >>> tr {
|
||||
background: unset;
|
||||
}
|
||||
.el-table-wrapper >>> tbody td > div,
|
||||
.el-table-wrapper >>> thead th > div {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.el-table-wrapper >>> th,
|
||||
.el-table-wrapper >>> td {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-table-wrapper >>> tbody > tr:nth-child(even) {
|
||||
background: rgba(76, 97, 123, 0.2);
|
||||
}
|
||||
|
||||
.lb-progress-bar {
|
||||
left: 30px;
|
||||
display: flex;
|
||||
}
|
||||
.lb-progress-bar >>> .el-progress__text {
|
||||
color: #fff9;
|
||||
left: -85%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,33 @@
|
||||
<template>
|
||||
<div class="public-consume__inner">
|
||||
<!-- <div class="water-area">
|
||||
<TechyBarChart
|
||||
:id="'water-chart'"
|
||||
key="waterchart"
|
||||
title="水"
|
||||
:x-data="['自来水', '纯水', '循环水']"
|
||||
:series-data="[8.2, 10, 6.1]"
|
||||
/>
|
||||
</div>
|
||||
<div class="elec-area">
|
||||
<TechyLineChart :id="'elec-chart'" key="elecchart" title="电" />
|
||||
</div>
|
||||
<div class="elec-gen-area">
|
||||
<TechyLineChart :id="'elec-gen-chart'" key="elecgenchart" title="发电" />
|
||||
</div>
|
||||
<div class="gas-area">
|
||||
<TechyBarChart
|
||||
:id="'gas-chart'"
|
||||
key="gaschart"
|
||||
title="气"
|
||||
:x-data="['天然气', '氧气', 'CDA']"
|
||||
:series-data="[8.2, 10, 6.1]"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<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>
|
||||
@ -67,25 +92,25 @@
|
||||
</TechyBox>
|
||||
</div>
|
||||
|
||||
<div style="min-height: calc(110px * var(--beilv)); flex: 1;">
|
||||
<div style="flex: 1;">
|
||||
<TechyBox class="dian-consume">
|
||||
<div class="header-part">
|
||||
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
|
||||
<span>电</span>
|
||||
</div>
|
||||
<div style="height: 100%; flex: 1;">
|
||||
<div class="content-part">
|
||||
<DianChart />
|
||||
</div>
|
||||
</TechyBox>
|
||||
</div>
|
||||
|
||||
<div style="min-height: calc(110px * var(--beilv)); flex: 1;">
|
||||
<div style="flex: 1;">
|
||||
<TechyBox class="elec-consume">
|
||||
<div class="header-part">
|
||||
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
|
||||
<span>发电</span>
|
||||
</div>
|
||||
<div style="height: 100%; flex: 1; padding: calc(8px * var(--beilv))">
|
||||
<div class="content-part">
|
||||
<FadianChart />
|
||||
</div>
|
||||
</TechyBox>
|
||||
@ -113,29 +138,48 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.public-consume__inner {
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 32px);
|
||||
width: 100%;
|
||||
/* display: grid;
|
||||
grid-template-areas:
|
||||
'water elec elec gas'
|
||||
'water elec-gen elec-gen gas'; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(8px * var(--beilv));
|
||||
gap: calc(100vmin / 1920 * 16);
|
||||
}
|
||||
|
||||
.water-area {
|
||||
grid-area: water;
|
||||
}
|
||||
.gas-area {
|
||||
grid-area: gas;
|
||||
}
|
||||
.elec-area {
|
||||
grid-area: elec;
|
||||
}
|
||||
.elec-gen-area {
|
||||
grid-area: elec-gen;
|
||||
}
|
||||
|
||||
/* .elec-area,.elec-gen-area {
|
||||
max-height: calc((100% - 32px) / 2 - 16px);
|
||||
} */
|
||||
|
||||
.techy-box {
|
||||
padding: calc(16px * var(--beilv));
|
||||
padding: calc(100vmin / 1920 * 16);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-part {
|
||||
height: 100%;
|
||||
width: calc(56px * var(--beilv));
|
||||
width: calc(100vmin / 1920 * 96);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* overflow: hidden; */
|
||||
margin-right: calc(16px * var(--beilv));
|
||||
margin-right: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -143,32 +187,31 @@ export default {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(-8px * var(--beilv));
|
||||
width: calc(1px * var(--beilv));
|
||||
right: -8px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, transparent, #fff9, transparent);
|
||||
}
|
||||
|
||||
.header-part > span {
|
||||
color: #fffc;
|
||||
font-size: calc(12px * var(--beilv));
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.content-part {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: calc(12px * var(--beilv));
|
||||
font-size: calc(100vmin / 1920 * 18);
|
||||
color: #fff9;
|
||||
height: 10px;
|
||||
flex: 1 1;
|
||||
gap: calc(4px * var(--beilv));
|
||||
gap: calc(100vmin / 1920 * 8);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: calc(14px * var(--beilv));
|
||||
height: calc(100vmin / 1920 * 28);
|
||||
}
|
||||
|
||||
.row > .name,
|
||||
@ -184,7 +227,10 @@ export default {
|
||||
.diy-process-bar {
|
||||
margin: 0 8px;
|
||||
border-radius: 7px;
|
||||
height: calc(8px * var(--beilv));
|
||||
height: calc(100vmin / 1920 * 14);
|
||||
/* margin: 0 8px;
|
||||
border-radius: 7px; */
|
||||
/* height: 8px; */
|
||||
flex: 1 1;
|
||||
background-color: #fff3;
|
||||
overflow: hidden;
|
||||
@ -194,7 +240,7 @@ export default {
|
||||
.diy-process-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: calc(6px * var(--beilv));
|
||||
border-radius: 7px;
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -208,16 +254,4 @@ export default {
|
||||
.diy-process-bar.color-3::after {
|
||||
background: linear-gradient(to right, #ff8bc3, #eb46a1);
|
||||
}
|
||||
|
||||
.dian-consume,
|
||||
.elec-consume {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dian-consume > .header-part,
|
||||
.elec-consume > .header-part {
|
||||
padding: calc(16px * var(--beilv));
|
||||
margin: 0;
|
||||
margin-left: calc(16px * var(--beilv));
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,15 +1,6 @@
|
||||
<template>
|
||||
<div class="right-content-alert">
|
||||
<div class="el-table-wrapper fix-table">
|
||||
<TechyTable
|
||||
key="table-1"
|
||||
:showIndex="false"
|
||||
:page="1"
|
||||
:limit="8"
|
||||
:table-config="tableProps"
|
||||
:table-data="tableData"
|
||||
></TechyTable>
|
||||
<!--
|
||||
<el-table
|
||||
key="RightContentAlertTable"
|
||||
border
|
||||
@ -32,19 +23,20 @@
|
||||
/>
|
||||
<el-table-column label="故障等级" prop="priority" :resizable="true" align="center">
|
||||
<template slot-scope="scope">
|
||||
<!-- <component :is="PriorityComponent"></component> -->
|
||||
<PriorityComponent :injectData="scope.row"></PriorityComponent>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="故障内容" prop="content" :resizable="true" align="center" />
|
||||
<el-table-column label="累计时间(min)" prop="duration" :resizable="true" align="center" :width="128" />
|
||||
</el-table> -->
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TechyTable from './TechyTable.vue'
|
||||
|
||||
// import TechyFakeTable from './TechyFakeTable.vue'
|
||||
// import TechyTable from './TechyTable.vue'
|
||||
const PriorityComponent = {
|
||||
name: 'PriorityComponent',
|
||||
props: {
|
||||
@ -66,16 +58,11 @@ const PriorityComponent = {
|
||||
{
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
// borderRadius: '2px',
|
||||
// padding: '2px 6px',
|
||||
// color: '#fff',
|
||||
// opacity: '0.6',
|
||||
// fontSize: '12px',
|
||||
borderRadius: 'calc(2px * var(--beilv))',
|
||||
padding: 'calc(2px * var(--beilv)) calc(6px * var(--beilv))',
|
||||
borderRadius: '2px',
|
||||
padding: '2px 6px',
|
||||
color: '#fff',
|
||||
opacity: '0.6',
|
||||
fontSize: 'calc(12px * var(--beilv))',
|
||||
fontSize: '12px',
|
||||
lineHeight: 1,
|
||||
backgroundColor: this.bgColor
|
||||
}
|
||||
@ -85,27 +72,19 @@ const PriorityComponent = {
|
||||
}
|
||||
}
|
||||
|
||||
const tableProps = [
|
||||
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 100 },
|
||||
{ prop: 'plName', label: '所属产线', align: 'center', 'min-width': 100 },
|
||||
{ prop: 'priority', label: '提示等级', align: 'center', 'min-width': 100, subcomponent: PriorityComponent },
|
||||
{ prop: 'content', label: '巡检内容', align: 'center', 'min-width': 120 },
|
||||
{ prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 128 }
|
||||
]
|
||||
|
||||
const tableData = [
|
||||
{ eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: '10min' },
|
||||
{ eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: '20min' },
|
||||
{ eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: '30min' },
|
||||
{ eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: '2min' },
|
||||
{ eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: '3min' }
|
||||
{ eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: 10 },
|
||||
{ eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: 20 },
|
||||
{ eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: 30 },
|
||||
{ eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: 1 },
|
||||
{ eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: 2 }
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'RightContentAlert',
|
||||
components: { TechyTable },
|
||||
components: { PriorityComponent },
|
||||
data() {
|
||||
return {tableProps, tableData }
|
||||
return { tableData }
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
|
||||
@ -87,47 +87,44 @@ export default {
|
||||
}
|
||||
]
|
||||
|
||||
const demoData = [
|
||||
{ value: 100, name: 'A' },
|
||||
{ value: 100, name: 'B' },
|
||||
{ value: 100, name: 'C' },
|
||||
{ value: 100, name: 'D' },
|
||||
{ value: 100, name: 'E' }
|
||||
]
|
||||
|
||||
return {
|
||||
chart: null,
|
||||
// default configs
|
||||
configs: {
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
left: '62%',
|
||||
left: '64%',
|
||||
top: '35%',
|
||||
text: '33039',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
subtext: '总数',
|
||||
subtextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontSize: 10,
|
||||
fontWeight: 'lighter'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
bottom: '0%',
|
||||
left: '-5%',
|
||||
orient: 'vertical',
|
||||
icon: 'none',
|
||||
itemGap: 5,
|
||||
itemWidth: 10,
|
||||
formatter: function(name) {
|
||||
// test data - dynamic
|
||||
const testData = demoData
|
||||
|
||||
const testData = [
|
||||
{ name: 'A', value: 100 },
|
||||
{ name: 'B', value: 200 },
|
||||
{ name: 'C', value: 300 },
|
||||
{ name: 'D', value: 400 },
|
||||
{ name: 'E', value: 500 }
|
||||
]
|
||||
let pieLegendVale = {}
|
||||
testData.filter((item, index) => {
|
||||
if (item.name === name) {
|
||||
@ -145,6 +142,7 @@ export default {
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
// align: 'center',
|
||||
fontSize: 10,
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
lineHeight: 16
|
||||
@ -208,8 +206,8 @@ export default {
|
||||
{
|
||||
name: 'PieForm',
|
||||
type: 'pie',
|
||||
center: ['63%', '50%'],
|
||||
radius: ['55%', '80%'],
|
||||
center: ['65%', '50%'],
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
formatter: params => {
|
||||
@ -231,7 +229,7 @@ export default {
|
||||
const colorGradient = colors[dataIndex]
|
||||
if (totalRate + percent < 25) {
|
||||
/** 也许这里需要完善，但目前工作良好 */
|
||||
;(() => {})()
|
||||
(() => {})()
|
||||
} else if (totalRate + percent < 50) {
|
||||
colorGradient.x = 0
|
||||
colorGradient.y = 0
|
||||
@ -239,85 +237,43 @@ export default {
|
||||
colorGradient.y2 = 1
|
||||
} else if (totalRate + percent < 100) {
|
||||
/** 也许这里需要完善，但目前工作良好 */
|
||||
;(() => {})()
|
||||
(() => {})()
|
||||
}
|
||||
|
||||
totalRate += percent
|
||||
return colorGradient
|
||||
}
|
||||
},
|
||||
data: demoData
|
||||
data: [
|
||||
{ value: 100, name: 'A' },
|
||||
{ value: 200, name: 'B' },
|
||||
{ value: 300, name: 'C' },
|
||||
{ value: 400, name: 'D' },
|
||||
{ value: 500, name: 'E' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
window.addEventListener('resize', function() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
this.$nextTick(() => {
|
||||
// 重新绘制文本大小
|
||||
this.applyChartOption()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
// if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs['fault-pie-chart'])
|
||||
this.applyChartOption()
|
||||
|
||||
this.chart.setOption(this.configs)
|
||||
|
||||
this.chart.resize()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
calcFontsize(baseSize) {
|
||||
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||
return beilv * baseSize
|
||||
},
|
||||
applyChartOption() {
|
||||
const fs5 = this.calcFontsize(5 /**px*/)
|
||||
const fs8 = this.calcFontsize(8 /**px*/)
|
||||
const fs10 = this.calcFontsize(10 /**px*/)
|
||||
const fs12 = this.calcFontsize(12 /**px*/)
|
||||
const fs16 = this.calcFontsize(16 /**px*/)
|
||||
|
||||
this.configs.title.textStyle.fontSize = fs16
|
||||
this.configs.title.subtextStyle.fontSize = fs12
|
||||
|
||||
this.configs.legend.itemGap = fs5
|
||||
this.configs.legend.itemWidth = fs10
|
||||
|
||||
this.configs.legend.textStyle.rich.a.fontSize = fs10
|
||||
this.configs.legend.textStyle.rich.a.lineHeight = fs16
|
||||
this.configs.legend.textStyle.rich.b.fontSize = fs10
|
||||
// this.configs.legend.textStyle.rich.b.lineHeight = fs16
|
||||
this.configs.legend.textStyle.rich.c.width = fs10
|
||||
this.configs.legend.textStyle.rich.c.height = fs10
|
||||
this.configs.legend.textStyle.rich.c.borderRadius = fs5
|
||||
this.configs.legend.textStyle.rich.d.width = fs10
|
||||
this.configs.legend.textStyle.rich.d.height = fs10
|
||||
this.configs.legend.textStyle.rich.d.borderRadius = fs5
|
||||
this.configs.legend.textStyle.rich.e.width = fs10
|
||||
this.configs.legend.textStyle.rich.e.height = fs10
|
||||
this.configs.legend.textStyle.rich.e.borderRadius = fs5
|
||||
this.configs.legend.textStyle.rich.f.width = fs10
|
||||
this.configs.legend.textStyle.rich.f.height = fs10
|
||||
this.configs.legend.textStyle.rich.f.borderRadius = fs5
|
||||
this.configs.legend.textStyle.rich.g.width = fs10
|
||||
this.configs.legend.textStyle.rich.g.height = fs10
|
||||
this.configs.legend.textStyle.rich.g.borderRadius = fs5
|
||||
|
||||
this.configs.series[0].label.rich.first.fontSize = fs8
|
||||
this.configs.series[0].label.rich.second.fontSize = fs8
|
||||
this.configs.series[0].label.rich.third.fontSize = fs8
|
||||
this.configs.series[0].label.rich.fourth.fontSize = fs8
|
||||
this.configs.series[0].label.rich.fifth.fontSize = fs8
|
||||
|
||||
this.chart.setOption(this.configs)
|
||||
}
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -245,6 +245,7 @@ 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)
|
||||
})
|
||||
|
||||
@ -53,7 +53,7 @@ export default {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: min-content;
|
||||
gap: calc(4px * var(--beilv)) calc(6px * var(--beilv));
|
||||
gap: calc(100vmin / 1920 * 10) calc(100vmin / 1920 * 20);
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="quality-analysis-bar" :class="`border-${color}`">
|
||||
<div class="placeholder-block-wrapper">
|
||||
<div class="flex justify-end">
|
||||
<div class="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 > 7 ? sVal.slice(0, 6) + '...' : sVal
|
||||
return sVal.length > 10 ? sVal.slice(0, 8) + '...' : sVal
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@ -57,43 +57,45 @@ export default {
|
||||
|
||||
.quality-analysis-bar {
|
||||
border-radius: 2px;
|
||||
padding: calc(2px * var(--beilv));
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.border-green {
|
||||
border: 2px solid #35abad;
|
||||
border: 1px solid #35abad;
|
||||
}
|
||||
.border-blue {
|
||||
border: 2px solid #49b2ff;
|
||||
border: 1px solid #49b2ff;
|
||||
}
|
||||
.border-orange {
|
||||
border: 2px solid #ffb94d;
|
||||
border: 1px solid #ffb94d;
|
||||
}
|
||||
.border-pink {
|
||||
border: 2px solid #ed879f;
|
||||
border: 1px solid #ed879f;
|
||||
}
|
||||
|
||||
.placeholder-block-wrapper {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
min-width: calc(32px * var(--beilv));
|
||||
min-width: 32px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-block-wrapper > div {
|
||||
width: calc(300px * var(--beilv));
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.placeholder-block {
|
||||
width: calc(20px * var(--beilv));
|
||||
height: calc(20px * var(--beilv));
|
||||
margin-left: calc(3px * var(--beilv));
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 3px;
|
||||
/* border-radius: 1px; */
|
||||
}
|
||||
|
||||
.block-green-5 {
|
||||
@ -173,24 +175,24 @@ export default {
|
||||
|
||||
.quality-analysis-bar__name {
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
white-space: nowrap;
|
||||
overflow-wrap: break-word;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
padding: calc(3px * var(--beilv)) calc(8px * var(--beilv));
|
||||
font-size: calc(14px * var(--beilv));
|
||||
line-height: calc(12px * var(--beilv));
|
||||
padding: 3px 8px;
|
||||
font-size: 14px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.quality-analysis-bar__amount {
|
||||
color: rgba(255, 255, 255, 0.725);
|
||||
display: inline-block;
|
||||
/* min-width: 35%; */
|
||||
width: 35%;
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
padding: calc(3px * var(--beilv)) 0;
|
||||
font-size: calc(14px * var(--beilv));;
|
||||
line-height: calc(12px * var(--beilv));;
|
||||
padding: 3px 0;
|
||||
font-size: 14px;
|
||||
line-height: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,11 +11,11 @@ export default {}
|
||||
<style scoped>
|
||||
.techy-box {
|
||||
background: rgba(255, 255, 255, 0.0168);
|
||||
box-shadow: inset 0 0 calc(17px * var(--beilv)) 0 rgba(255, 255, 255, 0.168);
|
||||
box-shadow: inset 0 0 17px 0 rgba(255, 255, 255, 0.168);
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: calc(4px * var(--beilv));
|
||||
border-radius: 4px;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,16 +21,234 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
IconMenuOnly,
|
||||
IconTriple,
|
||||
IconPCTriple,
|
||||
IconPCAlert,
|
||||
IconMenuSearch,
|
||||
IconSafetyHat,
|
||||
IconTrend,
|
||||
IconMenu1
|
||||
} from './icons'
|
||||
const defaultIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>质量上报</title>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-5质量管理" transform="translate(-384.000000, -254.000000)">
|
||||
<g id="编组-16备份-6" transform="translate(360.000000, 230.000000)">
|
||||
<g id="编组" transform="translate(24.000000, 24.000000)">
|
||||
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
|
||||
<path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Fill-3" fill="#6EF9E1"></path>
|
||||
<path d="M15.8982,17.8 L15.8982,20.15 C15.8622,20.495 16.1052,20.809 16.4482,20.86 L22.2982,20.86 C22.6462,20.814 22.8942,20.499 22.8582,20.15 L22.8582,17.73 C22.8582,17.56 22.7482,17.42 22.6282,17.42 C22.4772,17.441 22.3702,17.578 22.3882,17.73 L22.3882,20.24 L16.3882,20.24 L16.3882,17.72 C16.3882,17.56 16.2782,17.43 16.1582,17.43 C16.0382,17.43 15.9382,17.56 15.9282,17.72 L15.8982,17.8 Z M22.2982,21.04 L16.4582,21.04 C16.0112,20.992 15.6832,20.598 15.7182,20.15 L15.7182,17.67 C15.7192,17.449 15.8992,17.271 16.1202,17.2729833 C16.3392,17.274 16.5172,17.45 16.5182,17.67 L16.5182,20.1 L22.1782,20.1 L22.1782,17.78 C22.1422,17.551 22.2992,17.336 22.5282,17.3 C22.7572,17.265 22.9722,17.421 23.0082,17.651 C23.0152,17.694 23.0152,17.738 23.0082,17.78 L23.0082,20.2 C23.0182,20.619 22.7132,20.98 22.2982,21.04 L22.2982,21.04 Z" id="Fill-5" fill="#6EF9E1"></path>
|
||||
<path d="M19.7483,12.5002 C19.7033,12.4462 19.6443,12.4042 19.5783,12.3802 L19.1783,12.3802 C19.1103,12.4012 19.0513,12.4432 19.0083,12.5002 L17.5583,14.1302 C17.3733,14.3372 17.3913,14.6552 17.5983,14.8402 C17.8053,15.0242 18.1233,15.0072 18.3083,14.8002 L18.8783,14.1402 L18.8783,17.8992 C18.8773,17.9162 18.8773,17.9342 18.8783,17.9502 L18.8783,18.3002 C18.8833,18.5732 19.1043,18.7952 19.3783,18.8002 C19.6503,18.7942 19.8683,18.5722 19.8683,18.3002 L19.8683,14.0902 L20.4483,14.7502 C20.6333,14.9572 20.9513,14.9752 21.1583,14.7902 C21.3653,14.6042 21.3833,14.2872 21.1983,14.0802 L19.7483,12.5002 Z" id="Fill-7" fill="#6FFADE"></path>
|
||||
<path d="M13.7781,19.5002 L3.0881,19.5002 C2.6541,19.5852 2.3721,20.0062 2.4571,20.4382 C2.5201,20.7582 2.7691,21.0072 3.0881,21.0692 L13.7981,21.0692 C14.2291,20.9722 14.4991,20.5432 14.4011,20.1122 C14.3321,19.8122 14.0981,19.5782 13.7981,19.5102 L13.7781,19.5002 Z" id="Fill-9" fill="#6FFADE"></path>
|
||||
<path d="M17.2684,2.9104 L5.3984,2.9104 C3.7414,2.9104 2.3984,4.2534 2.3984,5.9104 L2.3984,15.3704 C2.3984,17.0264 3.7414,18.3704 5.3984,18.3704 L13.7084,18.3704 C14.0684,18.3704 14.3484,17.9504 14.3484,17.5904 C14.3484,17.2294 14.0684,16.8004 13.7084,16.8004 L5.7084,16.8004 C4.7694,16.8064 4.0034,16.0494 3.9984,15.1094 L3.9984,15.0904 L3.9984,6.1894 C3.9984,5.2674 4.7464,4.5194 5.6684,4.5194 L17.1184,4.5194 C18.0404,4.5194 18.7884,5.2674 18.7884,6.1894 L18.7884,10.2904 L18.7884,10.3804 L18.7884,10.4604 C18.8484,10.8524 19.2144,11.1234 19.6084,11.0634 C19.9794,11.0084 20.2454,10.6754 20.2184,10.3004 L20.2184,5.8704 C20.1974,4.2484 18.8904,2.9364 17.2684,2.9104" id="Fill-11" fill="#6FFADE"></path>
|
||||
<path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Fill-13" fill="#6EF9E1"></path>
|
||||
<path d="M22.6282,17.3303 C22.4272,17.3513 22.2812,17.5283 22.2982,17.7293 L22.2982,20.1493 L16.4582,20.1493 L16.4582,17.7403 C16.4582,17.5633 16.3152,17.4203 16.1382,17.4203 C15.9612,17.4203 15.8182,17.5633 15.8182,17.7403 L15.8182,20.1703 C15.7822,20.5643 16.0652,20.9183 16.4582,20.9703 L22.3082,20.9703 C22.7052,20.9233 22.9932,20.5683 22.9582,20.1703 L22.9582,17.7503 C22.9762,17.5523 22.8352,17.3763 22.6382,17.3503 L22.6282,17.3303 Z" id="Stroke-15" stroke="#6EF9E1" stroke-width="0.2"></path>
|
||||
<path d="M19.7483,12.5002 C19.7033,12.4462 19.6443,12.4042 19.5783,12.3802 L19.1783,12.3802 C19.1103,12.4012 19.0513,12.4432 19.0083,12.5002 L17.5583,14.1302 C17.3733,14.3372 17.3913,14.6552 17.5983,14.8402 C17.8053,15.0242 18.1233,15.0072 18.3083,14.8002 L18.8783,14.1402 L18.8783,17.8992 C18.8773,17.9162 18.8773,17.9342 18.8783,17.9502 L18.8783,18.3002 C18.8833,18.5732 19.1043,18.7952 19.3783,18.8002 C19.6503,18.7942 19.8683,18.5722 19.8683,18.3002 L19.8683,14.0902 L20.4483,14.7502 C20.6333,14.9572 20.9513,14.9752 21.1583,14.7902 C21.3653,14.6042 21.3833,14.2872 21.1983,14.0802 L19.7483,12.5002 Z" id="Fill-17" fill="#6FFADE"></path>
|
||||
<path d="M12.2967,6.8498 L11.9997,12.7348 C11.9267,13.1178 11.5587,13.3688 11.1757,13.2948 C10.8917,13.2418 10.6697,13.0188 10.6147,12.7348 L10.3057,6.8498 L10.3057,6.7878 C10.3937,6.2348 10.9127,5.8568 11.4647,5.9438 C11.8997,6.0118 12.2407,6.3528 12.3087,6.7878 C12.3137,6.8078 12.3137,6.8288 12.3087,6.8498 L12.2967,6.8498 Z M11.3077,15.4668 C10.9047,15.4878 10.5627,15.1778 10.5417,14.7758 C10.5217,14.3728 10.8317,14.0308 11.2337,14.0098 C11.6357,13.9898 11.9787,14.2988 11.9987,14.7018 C11.9997,14.7178 12.0007,14.7338 11.9997,14.7498 C12.0067,15.1388 11.6967,15.4598 11.3077,15.4668 Z" id="Fill-19" fill="#6EF9E1"></path>
|
||||
<path d="M13.7781,19.5002 L3.0881,19.5002 C2.6541,19.5852 2.3721,20.0062 2.4571,20.4382 C2.5201,20.7582 2.7691,21.0072 3.0881,21.0692 L13.7981,21.0692 C14.2291,20.9722 14.4991,20.5432 14.4011,20.1122 C14.3321,19.8122 14.0981,19.5782 13.7981,19.5102 L13.7781,19.5002 Z" id="Fill-21" fill="#6FFADE"></path>
|
||||
<path d="M17.2684,2.9104 L5.3984,2.9104 C3.7414,2.9104 2.3984,4.2534 2.3984,5.9104 L2.3984,15.3704 C2.3984,17.0264 3.7414,18.3704 5.3984,18.3704 L13.7084,18.3704 C14.0684,18.3704 14.3484,17.9504 14.3484,17.5904 C14.3484,17.2294 14.0684,16.8004 13.7084,16.8004 L5.7084,16.8004 C4.7694,16.8064 4.0034,16.0494 3.9984,15.1094 L3.9984,15.0904 L3.9984,6.1894 C3.9984,5.2674 4.7464,4.5194 5.6684,4.5194 L17.1184,4.5194 C18.0404,4.5194 18.7884,5.2674 18.7884,6.1894 L18.7884,10.2904 L18.7884,10.3804 L18.7884,10.4604 C18.8484,10.8524 19.2144,11.1234 19.6084,11.0634 C19.9794,11.0084 20.2454,10.6754 20.2184,10.3004 L20.2184,5.8704 C20.1974,4.2484 18.8904,2.9364 17.2684,2.9104" id="Fill-23" fill="#6FFADE"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`
|
||||
|
||||
const menuIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>菜单</title>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-2工单管理" transform="translate(-384.000000, -253.000000)">
|
||||
<g id="编组-16备份-5" transform="translate(360.000000, 229.000000)">
|
||||
<g id="编组" transform="translate(24.000000, 24.000000)">
|
||||
<polygon id="Fill-1" fill="#CAE5DD" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
|
||||
<path d="M18.0901,3.8098 L16.6101,3.8098 L16.6101,4.7298 L18.0901,4.7298 C18.5481,4.7298 18.9201,5.1018 18.9201,5.5598 L18.9201,19.0898 C18.9201,19.5488 18.5481,19.9198 18.0901,19.9198 L5.9501,19.9198 C5.4911,19.9198 5.1201,19.5488 5.1201,19.0898 L5.1201,5.5598 C5.1201,5.1018 5.4911,4.7298 5.9501,4.7298 L7.6501,4.7298 L7.6501,3.8098 L5.9501,3.8098 C4.9861,3.8158 4.2051,4.5958 4.2001,5.5598 L4.2001,19.0898 C4.2051,20.0538 4.9861,20.8348 5.9501,20.8398 L18.1001,20.8398 C19.0641,20.8348 19.8441,20.0538 19.8501,19.0898 L19.8501,5.5598 C19.8441,4.5918 19.0581,3.8098 18.0901,3.8098" id="Fill-3" fill="#6EF9DE"></path>
|
||||
<path d="M5.95,4.1702 C5.182,4.1702 4.56,4.7922 4.56,5.5602 L4.56,19.0902 C4.56,19.8582 5.182,20.4802 5.95,20.4802 L18.1,20.4802 C18.867,20.4802 19.49,19.8582 19.49,19.0902 L19.49,5.5602 C19.49,4.7922 18.867,4.1702 18.1,4.1702 L16.95,4.1702 L16.95,4.3402 L18.07,4.3402 C18.721,4.3402 19.25,4.8682 19.25,5.5202 L19.25,19.0502 C19.25,19.7012 18.721,20.2302 18.07,20.2302 L5.95,20.2302 C5.298,20.2302 4.77,19.7012 4.77,19.0502 L4.77,5.5602 C4.748,4.9082 5.258,4.3622 5.909,4.3402 C5.923,4.3402 5.936,4.3402 5.95,4.3402 L7.3,4.3402 L7.3,4.1302 L5.95,4.1702 Z M18.62,21.1902 L5.41,21.1902 C4.543,21.1902 3.84,20.4872 3.84,19.6202 L3.84,5.0302 C3.84,4.1632 4.543,3.4602 5.41,3.4602 L8,3.4602 L8,5.0902 L6.61,5.0902 C5.98,5.0902 5.47,5.6002 5.47,6.2302 L5.47,18.4202 C5.47,19.0492 5.98,19.5602 6.61,19.5602 L17.42,19.5602 C18.05,19.5602 18.56,19.0492 18.56,18.4202 L18.56,6.2302 C18.56,5.6002 18.05,5.0902 17.42,5.0902 L16.26,5.0902 L16.26,3.4602 L18.62,3.4602 C19.487,3.4602 20.19,4.1632 20.19,5.0302 L20.19,19.6202 C20.19,20.4872 19.487,21.1902 18.62,21.1902 L18.62,21.1902 Z" id="Fill-5" fill="#6EF9DE"></path>
|
||||
<path d="M8.5101,2.5398 L15.6801,2.5398 C16.3151,2.5398 16.8301,3.0548 16.8301,3.6898 L16.8301,4.6398 C16.8301,5.2748 16.3151,5.7898 15.6801,5.7898 L8.5101,5.7898 C7.8751,5.7898 7.3601,5.2748 7.3601,4.6398 L7.3601,3.6898 C7.3601,3.0548 7.8751,2.5398 8.5101,2.5398" id="Fill-7" fill="#6EF9DE"></path>
|
||||
<path d="M16.3299,8.5398 C16.3299,9.0398 16.1299,9.2898 15.7199,9.2898 L9.8299,9.2898 C9.4299,9.2898 9.2199,9.0398 9.2199,8.5398 C9.2199,8.0398 9.4299,7.7998 9.8299,7.7998 L15.7199,7.7998 C16.1299,7.7998 16.3299,8.0498 16.3299,8.5398" id="Fill-9" fill="#6EF9E1"></path>
|
||||
<path d="M7.7,7.8098 L7.71,7.8098 C8.118,7.8098 8.45,8.1418 8.45,8.5498 L8.45,8.5598 C8.45,8.9688 8.118,9.2998 7.71,9.2998 L7.7,9.2998 C7.291,9.2998 6.96,8.9688 6.96,8.5598 L6.96,8.5498 C6.96,8.1418 7.291,7.8098 7.7,7.8098" id="Fill-11" fill="#6DF8E1"></path>
|
||||
<path d="M16.3299,12.2698 C16.3299,12.7698 16.0499,13.0198 15.4799,13.0198 L10.0799,13.0198 C9.5099,13.0198 9.2199,12.7698 9.2199,12.2698 C9.2199,11.7698 9.5099,11.5198 10.0799,11.5198 L15.4799,11.5198 C16.0499,11.5198 16.3299,11.7698 16.3299,12.2698" id="Fill-13" fill="#6EF9E1"></path>
|
||||
<path d="M7.7,11.5598 L7.71,11.5598 C8.118,11.5598 8.45,11.8918 8.45,12.2998 L8.45,12.3098 C8.45,12.7188 8.118,13.0498 7.71,13.0498 L7.7,13.0498 C7.291,13.0498 6.96,12.7188 6.96,12.3098 L6.96,12.2998 C6.96,11.8918 7.291,11.5598 7.7,11.5598" id="Fill-15" fill="#6DF8E1"></path>
|
||||
<path d="M16.3299,16.0198 C16.3299,16.5198 16.1299,16.7698 15.7199,16.7698 L9.8299,16.7698 C9.4299,16.7698 9.2199,16.5198 9.2199,16.0198 C9.2199,15.5198 9.4299,15.2698 9.8299,15.2698 L15.7199,15.2698 C16.1299,15.2698 16.3299,15.5198 16.3299,16.0198" id="Fill-17" fill="#6EF9E1"></path>
|
||||
<path d="M7.7,15.2898 L7.71,15.2898 C8.118,15.2898 8.45,15.6218 8.45,16.0298 L8.45,16.0398 C8.45,16.4488 8.118,16.7798 7.71,16.7798 L7.7,16.7798 C7.291,16.7798 6.96,16.4488 6.96,16.0398 L6.96,16.0298 C6.96,15.6218 7.291,15.2898 7.7,15.2898" id="Fill-19" fill="#6DF8E1"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`
|
||||
|
||||
const lightHatIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>hatplus</title>
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="100%" x2="20.318998%" y2="7.84095011e-14%" id="linearGradient-1">
|
||||
<stop stop-color="#4BFFC8" offset="0%"></stop>
|
||||
<stop stop-color="#45F2EC" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-4设备管理" transform="translate(-998.000000, -254.000000)">
|
||||
<g id="编组-16备份-8" transform="translate(974.000000, 230.000000)">
|
||||
<g id="编组-6" transform="translate(24.000000, 24.000000)">
|
||||
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
|
||||
<g id="异常" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="17" height="17"></rect>
|
||||
<path d="M9.00003613,1.00009438 C7.45266489,0.991339384 5.96400493,1.59197413 4.85604619,2.6721807 C3.77420104,3.74179852 3.16375561,5.19879645 3.16005953,6.72012488 L3.16005953,14.5280306 L14.7760126,14.5280306 L14.7760126,6.72010926 C14.7746725,5.19671341 14.1605756,3.73789487 13.0720104,2.67216507 C11.9832986,1.60721536 10.5229694,1.00760431 9.0000205,1.00009438 L9.00003613,1.00009438 Z M8.52003548,12.6560576 L8.35203526,8.87208057 L5.48804703,8.87208057 L9.24800521,4.12815624 L9.56800564,7.18412206 L12.2880093,7.28012148 L8.48800418,12.6560576 L8.52003548,12.6560576 Z M1.00003551,16.1280053 C0.997937773,15.8953576 1.08886376,15.671504 1.25262424,15.5062394 C1.41638472,15.3409748 1.63939864,15.2480106 1.87205781,15.2480106 L16.1280144,15.2480106 C16.3586463,15.2508825 16.5792874,15.3425823 16.7440153,15.5040247 C16.9059435,15.6716664 16.9975415,15.894943 17,16.1280053 C17,16.6095886 16.6096013,17 16.1280144,17 L1.87205781,17 C1.39047096,17 1.00003551,16.6095886 1.00003551,16.1280053 L1.00003551,16.1280053 Z" id="形状" fill="url(#linearGradient-1)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`
|
||||
|
||||
// 折角的菜单图标
|
||||
const zhejiaoMenuListIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组</title>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-2工单管理" transform="translate(-1040.000000, -253.000000)">
|
||||
<g id="编组-16备份-6" transform="translate(1016.000000, 229.000000)">
|
||||
<g id="编组" transform="translate(24.000000, 24.000000)">
|
||||
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
|
||||
<path d="M16.3899,8.0902 C16.3899,8.5802 16.1899,8.8202 15.7999,8.8202 L10.0999,8.8202 C9.6999,8.8202 9.5099,8.5802 9.5099,8.0902 C9.5099,7.6002 9.6999,7.3702 10.0999,7.3702 L15.7999,7.3702 C16.1899,7.3702 16.3899,7.6102 16.3899,8.0902" id="Fill-3" fill="#6EF9E1"></path>
|
||||
<path d="M14.51,11.95 C14.51,12.43 14.31,12.68 13.91,12.68 L10.11,12.68 C9.71,12.68 9.51,12.43 9.51,11.95 C9.51,11.47 9.71,11.23 10.11,11.23 L13.91,11.23 C14.31,11.23 14.51,11.47 14.51,11.95" id="Fill-5" fill="#6EF9E1"></path>
|
||||
<path d="M12.5701,15.7801 C12.5701,16.2601 12.3701,16.5001 11.9601,16.5001 L10.1201,16.5001 C9.7101,16.5001 9.5101,16.2601 9.5101,15.7801 C9.5101,15.3001 9.7101,15.0601 10.1201,15.0601 L11.9601,15.0601 C12.3701,15.0601 12.5701,15.3001 12.5701,15.7801" id="Fill-7" fill="#6EF9E1"></path>
|
||||
<path d="M8.0398,7.39 L8.0398,7.39 C8.4378,7.39 8.7598,7.712 8.7598,8.11 C8.7598,8.508 8.4378,8.83 8.0398,8.83 C7.6428,8.83 7.3198,8.508 7.3198,8.11 C7.3198,7.712 7.6428,7.39 8.0398,7.39" id="Fill-9" fill="#6DF8E1"></path>
|
||||
<path d="M8.0398,11.2699 L8.0398,11.2699 C8.4378,11.2699 8.7598,11.5919 8.7598,11.9899 C8.7598,12.3879 8.4378,12.7099 8.0398,12.7099 C7.6428,12.7099 7.3198,12.3879 7.3198,11.9899 C7.3198,11.5919 7.6428,11.2699 8.0398,11.2699" id="Fill-11" fill="#6DF8E1"></path>
|
||||
<path d="M8.0398,15.1502 L8.0398,15.1502 C8.4378,15.1502 8.7598,15.4722 8.7598,15.8702 C8.7598,16.2672 8.4378,16.5902 8.0398,16.5902 C7.6428,16.5902 7.3198,16.2672 7.3198,15.8702 C7.3198,15.4722 7.6428,15.1502 8.0398,15.1502" id="Fill-13" fill="#6DF8E1"></path>
|
||||
<path d="M15.5501,19.7801 L15.5501,16.7801 L18.3401,16.7801 L15.5501,19.7801 Z M19.2201,9.6501 C18.7891,9.6501 18.4401,9.9991 18.4401,10.4301 C18.4401,10.4331 18.4401,10.4371 18.4401,10.4401 L18.4401,15.1501 L14.3801,15.1501 C14.1571,15.1551 13.9801,15.3371 13.9801,15.5601 L13.9801,20.0301 L6.6901,19.9601 C6.0901,19.9601 5.5901,19.1201 5.5901,18.5001 L5.5901,5.7801 C5.5901,5.1711 6.0811,4.6761 6.6901,4.6701 L17.3401,4.6701 C17.9491,4.6761 18.4401,5.1711 18.4401,5.7801 L18.4401,7.7801 C18.4411,8.2111 18.7911,8.5591 19.2211,8.5581 C19.6511,8.5581 19.9991,8.2101 20.0001,7.7801 L20.0001,4.7801 C19.9731,3.9181 19.2721,3.2301 18.4101,3.2201 L5.5001,3.2201 C4.6551,3.2251 3.9741,3.9151 3.98006066,4.7601 L4.0501,20.0901 C4.0441,20.9351 4.7251,21.6241 5.5701,21.6301 L14.8101,21.6301 L14.8701,21.6301 L14.9301,21.6301 L19.7401,17.0401 C19.8511,16.9251 19.9121,16.7701 19.9101,16.6101 L19.9101,10.6601 C20.0331,10.2411 19.7941,9.8021 19.3751,9.6791 C19.3241,9.6641 19.2731,9.6551 19.2201,9.6501 L19.2201,9.6501 Z" id="Fill-15" fill="#6DF8E1"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`
|
||||
|
||||
// 走势分析图标
|
||||
const trendAnalysisIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组</title>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-4设备管理" transform="translate(-384.000000, -533.000000)">
|
||||
<g id="编组-16备份-7" transform="translate(360.000000, 509.000000)">
|
||||
<g id="编组" transform="translate(24.000000, 24.000000)">
|
||||
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
|
||||
<path d="M14.6801,7.8401 L14.6801,8.4001 C14.6801,8.6761 14.9041,8.9001 15.1801,8.9001 L15.1901,8.9001 C15.4661,8.9001 15.6901,8.6761 15.6901,8.4001 L15.6901,6.5001 C15.6901,6.2241 15.4661,6.0001 15.1901,6.0001 L13.2701,6.0001 C13.0171,6.0301 12.8281,6.2451 12.8301,6.5001 C12.8271,6.7561 13.0161,6.9751 13.2701,7.0101 L13.8301,7.0101 L11.3301,8.7501 L10.3301,7.4201 C10.1241,7.1751 9.7671,7.1231 9.5001,7.3001 L5.8001,10.0001 C5.5381,10.1941 5.4831,10.5631 5.6761,10.8251 C5.6781,10.8261 5.6791,10.8281 5.6801,10.8301 C5.7951,10.9901 5.9821,11.0841 6.1801,11.0801 C6.3021,11.0791 6.4201,11.0331 6.5101,10.9501 L9.7501,8.5801 L10.7501,9.9101 C10.9571,10.1591 11.3251,10.1981 11.5801,10.0001 L14.6501,7.8801 L14.6801,7.8401 Z" id="Fill-3" fill="#6FFADE"></path>
|
||||
<path d="M16.7601,17.7502146 C15.1691,17.7552 13.8751,16.4712 13.8700791,14.8802 C13.8641,13.2892 15.1491,11.9952 16.7401,11.9901791 C18.3301,11.9842 19.6241,13.2702 19.6301,14.8592 C19.6301,14.8662 19.6301,14.8732 19.6301,14.8802 C19.6191,16.4602 18.3411,17.7392 16.7601,17.7502146 M21.8101,19.7002 L19.8101,17.7002 C20.5281,16.9382 20.9261,15.9282 20.9201,14.8802 C20.9201,12.5772 19.0531,10.7102 16.7501,10.7102 C14.4471,10.7102 12.5801,12.5772 12.5801,14.8802 C12.5801,17.1832 14.4471,19.0502 16.7501,19.0502 C17.4471,19.0422 18.1341,18.8672 18.7501,18.5402 L20.8301,20.6202 C20.9511,20.7492 21.1231,20.8192 21.3001,20.8102 C21.4731,20.8162 21.6411,20.7472 21.7601,20.6202 C22.0261,20.4132 22.0741,20.0302 21.8671,19.7642 C21.8501,19.7412 21.8301,19.7202 21.8101,19.7002" id="Fill-5" fill="#6FFADE"></path>
|
||||
<path d="M6.9901,15.3196 C6.8671,15.3196 6.7501,15.2726 6.6601,15.1896 C6.5781,15.0986 6.5321,14.9816 6.5301,14.8596 L6.5301,12.5006 C6.5061,12.3216 6.5881,12.1456 6.7401,12.0496 C6.8911,11.9486 7.0891,11.9486 7.2401,12.0496 C7.3921,12.1456 7.4741,12.3216 7.4501,12.5006 L7.4501,14.8596 C7.4481,14.9846 7.3981,15.1026 7.3101,15.1896 C7.2241,15.2736 7.1091,15.3196 6.9901,15.3196" id="Fill-7" fill="#6FFADE"></path>
|
||||
<path d="M9.2601,15.3196 C9.0171,15.3256 8.8151,15.1326 8.8091,14.8906 C8.8091,14.8806 8.8091,14.8706 8.8101,14.8596 L8.8101,11.1206 C8.8471,10.8686 9.0811,10.6956 9.3321,10.7326 C9.5331,10.7616 9.6901,10.9206 9.7201,11.1206 L9.7201,14.8496 C9.7241,14.9756 9.6771,15.0986 9.5901,15.1896 C9.5001,15.2726 9.3821,15.3196 9.2601,15.3196" id="Fill-9" fill="#6FFADE"></path>
|
||||
<path d="M11.5399,15.3196 C11.4169,15.3196 11.2999,15.2726 11.2099,15.1896 C11.1289,15.0986 11.0819,14.9816 11.0799,14.8596 L11.0799,13.2196 C11.0809,12.9656 11.2869,12.7596 11.5409,12.7605964 C11.7939,12.7605964 11.9989,12.9666 11.9999,13.2196 L11.9999,14.8596 C11.9989,14.9846 11.9489,15.1026 11.8599,15.1896 C11.7739,15.2736 11.6599,15.3196 11.5399,15.3196" id="Fill-11" fill="#6FFADE"></path>
|
||||
<path d="M13.35,19.2297 L2.65,19.2297 C2.259,19.2607 1.967,19.6017 1.997,19.9937 C1.998,20.0017 1.999,20.0107 2,20.0197 C1.96,20.4107 2.244,20.7587 2.634,20.7987 C2.64,20.7987 2.645,20.7997 2.65,20.7997 L13.35,20.7997 C13.784,20.7147 14.066,20.2937 13.981,19.8607 C13.918,19.5417 13.669,19.2917 13.35,19.2297" id="Fill-13" fill="#6FFADE"></path>
|
||||
<path d="M16.8002,2.6301 L4.9402,2.6301 C3.2832,2.6301 1.9402,3.9731 1.9402,5.6301 L1.9402,15.0801 C1.9402,16.7361 3.2832,18.0801 4.9402,18.0801 L11.5402,18.0801 C11.9002,18.0801 12.1802,17.6601 12.1802,17.3001 C12.1802,16.9401 11.9002,16.5101 11.5402,16.5101 L5.2202,16.5101 C4.2862,16.5211 3.5212,15.7741 3.5102,14.8401 C3.5092,14.8261 3.5092,14.8141 3.5102,14.8001 L3.5102,5.9001 C3.5152,4.9801 4.2602,4.2351 5.1802,4.2301 L16.6402,4.2301 C17.5622,4.2301 18.3102,4.9781 18.3102,5.9001 L18.3102,10.0101 L18.3102,10.1001 C18.3042,10.1231 18.3042,10.1471 18.3102,10.1701 C18.3732,10.5131 18.6722,10.7611 19.0202,10.7601 C19.4212,10.7491 19.7402,10.4211 19.7402,10.0201 L19.7402,5.6301 C19.7402,3.9961 18.4332,2.6621 16.8002,2.6301" id="Fill-15" fill="#6FFADE"></path>
|
||||
<path d="M14.6801,7.8401 L14.6801,8.4001 C14.6801,8.6761 14.9041,8.9001 15.1801,8.9001 L15.1901,8.9001 C15.4661,8.9001 15.6901,8.6761 15.6901,8.4001 L15.6901,6.5001 C15.6901,6.2241 15.4661,6.0001 15.1901,6.0001 L13.2701,6.0001 C13.0171,6.0301 12.8281,6.2451 12.8301,6.5001 C12.8271,6.7561 13.0161,6.9751 13.2701,7.0101 L13.8301,7.0101 L11.3301,8.7501 L10.3301,7.4201 C10.1241,7.1751 9.7671,7.1231 9.5001,7.3001 L5.8001,10.0001 C5.5381,10.1941 5.4831,10.5631 5.6761,10.8251 C5.6781,10.8261 5.6791,10.8281 5.6801,10.8301 C5.7951,10.9901 5.9821,11.0841 6.1801,11.0801 C6.3021,11.0791 6.4201,11.0331 6.5101,10.9501 L9.7501,8.5801 L10.7501,9.9101 C10.9571,10.1591 11.3251,10.1981 11.5801,10.0001 L14.6501,7.8801 L14.6801,7.8401 Z" id="Fill-17" fill="#6FFADE"></path>
|
||||
<path d="M16.7601,17.7502146 C15.1691,17.7552 13.8751,16.4712 13.8700791,14.8802 C13.8641,13.2892 15.1491,11.9952 16.7401,11.9901791 C18.3301,11.9842 19.6241,13.2702 19.6301,14.8592 C19.6301,14.8662 19.6301,14.8732 19.6301,14.8802 C19.6191,16.4602 18.3411,17.7392 16.7601,17.7502146 M21.8101,19.7002 L19.8101,17.7002 C20.5281,16.9382 20.9261,15.9282 20.9201,14.8802 C20.9201,12.5772 19.0531,10.7102 16.7501,10.7102 C14.4471,10.7102 12.5801,12.5772 12.5801,14.8802 C12.5801,17.1832 14.4471,19.0502 16.7501,19.0502 C17.4471,19.0422 18.1341,18.8672 18.7501,18.5402 L20.8301,20.6202 C20.9511,20.7492 21.1231,20.8192 21.3001,20.8102 C21.4731,20.8162 21.6411,20.7472 21.7601,20.6202 C22.0261,20.4132 22.0741,20.0302 21.8671,19.7642 C21.8501,19.7412 21.8301,19.7202 21.8101,19.7002" id="Fill-19" fill="#6FFADE"></path>
|
||||
<path d="M6.9901,15.3196 C6.8671,15.3196 6.7501,15.2726 6.6601,15.1896 C6.5781,15.0986 6.5321,14.9816 6.5301,14.8596 L6.5301,12.5006 C6.5061,12.3216 6.5881,12.1456 6.7401,12.0496 C6.8911,11.9486 7.0891,11.9486 7.2401,12.0496 C7.3921,12.1456 7.4741,12.3216 7.4501,12.5006 L7.4501,14.8596 C7.4481,14.9846 7.3981,15.1026 7.3101,15.1896 C7.2241,15.2736 7.1091,15.3196 6.9901,15.3196" id="Fill-21" fill="#6FFADE"></path>
|
||||
<path d="M9.2601,15.3196 C9.0171,15.3256 8.8151,15.1326 8.8091,14.8906 C8.8091,14.8806 8.8091,14.8706 8.8101,14.8596 L8.8101,11.1206 C8.8471,10.8686 9.0811,10.6956 9.3321,10.7326 C9.5331,10.7616 9.6901,10.9206 9.7201,11.1206 L9.7201,14.8496 C9.7241,14.9756 9.6771,15.0986 9.5901,15.1896 C9.5001,15.2726 9.3821,15.3196 9.2601,15.3196" id="Fill-23" fill="#6FFADE"></path>
|
||||
<path d="M11.5399,15.3196 C11.4169,15.3196 11.2999,15.2726 11.2099,15.1896 C11.1289,15.0986 11.0819,14.9816 11.0799,14.8596 L11.0799,13.2196 C11.0809,12.9656 11.2869,12.7596 11.5409,12.7605964 C11.7939,12.7605964 11.9989,12.9666 11.9999,13.2196 L11.9999,14.8596 C11.9989,14.9846 11.9489,15.1026 11.8599,15.1896 C11.7739,15.2736 11.6599,15.3196 11.5399,15.3196" id="Fill-25" fill="#6FFADE"></path>
|
||||
<path d="M13.35,19.2297 L2.65,19.2297 C2.259,19.2607 1.967,19.6017 1.997,19.9937 C1.998,20.0017 1.999,20.0107 2,20.0197 C1.96,20.4107 2.244,20.7587 2.634,20.7987 C2.64,20.7987 2.645,20.7997 2.65,20.7997 L13.35,20.7997 C13.784,20.7147 14.066,20.2937 13.981,19.8607 C13.918,19.5417 13.669,19.2917 13.35,19.2297" id="Fill-27" fill="#6FFADE"></path>
|
||||
<path d="M16.8002,2.6301 L4.9402,2.6301 C3.2832,2.6301 1.9402,3.9731 1.9402,5.6301 L1.9402,15.0801 C1.9402,16.7361 3.2832,18.0801 4.9402,18.0801 L11.5402,18.0801 C11.9002,18.0801 12.1802,17.6601 12.1802,17.3001 C12.1802,16.9401 11.9002,16.5101 11.5402,16.5101 L5.2202,16.5101 C4.2862,16.5211 3.5212,15.7741 3.5102,14.8401 C3.5092,14.8261 3.5092,14.8141 3.5102,14.8001 L3.5102,5.9001 C3.5152,4.9801 4.2602,4.2351 5.1802,4.2301 L16.6402,4.2301 C17.5622,4.2301 18.3102,4.9781 18.3102,5.9001 L18.3102,10.0101 L18.3102,10.1001 C18.3042,10.1231 18.3042,10.1471 18.3102,10.1701 C18.3732,10.5131 18.6722,10.7611 19.0202,10.7601 C19.4212,10.7491 19.7402,10.4211 19.7402,10.0201 L19.7402,5.6301 C19.7402,3.9961 18.4332,2.6621 16.8002,2.6301" id="Fill-29" fill="#6FFADE"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`
|
||||
|
||||
// 菜单放大镜图标
|
||||
const menuAnalysisIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组</title>
|
||||
<defs>
|
||||
<polygon id="path-1" points="0 0 16.1499 0 16.1499 18.6604979 0 18.6604979"></polygon>
|
||||
<polygon id="path-3" points="0 0 16.1499 0 16.1499 18.6604979 0 18.6604979"></polygon>
|
||||
</defs>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-5质量管理" transform="translate(-384.000000, -529.000000)">
|
||||
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
|
||||
<g id="编组" transform="translate(24.000000, 16.000000)">
|
||||
<g>
|
||||
<polygon id="Fill-1" fill="#6CC1B0" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
|
||||
<path d="M16.4896,19.530219 C15.2696,19.5352 14.2756,18.5512 14.2695728,17.3302 C14.2636,16.1092 15.2496,15.1152 16.4696,15.1101728 C17.6906,15.1042 18.6836,16.0902 18.6896,17.3092 L18.6896,17.3202 C18.6896,18.5372 17.7066,19.5242 16.4896,19.530219 M21.0696,20.9602 L19.5106,19.4002 C20.6666,17.7222 20.2446,15.4252 18.5666,14.2672 C16.8886,13.1102 14.5916,13.5332 13.4336,15.2112 C12.2776,16.8882 12.6996,19.1862 14.3776,20.3422 C15.6506,21.2202 17.3366,21.2122 18.5996,20.3202 L20.1496,21.8802 C20.2386,21.9672 20.3816,21.9672 20.4696,21.8802 L21.0696,21.2802 C21.1566,21.1902 21.1566,21.0492 21.0696,20.9602" id="Fill-3" fill="#6EF9E1"></path>
|
||||
</g>
|
||||
<path d="M9.0697,20.04 C9.0737,20.329 9.2287,20.596 9.4797,20.74 C9.7317,20.881 10.0387,20.881 10.2897,20.74 C10.5387,20.595 10.6907,20.328 10.6897049,20.04 C10.6907,19.755 10.5387,19.491 10.2897,19.35 C10.0387,19.209 9.7317,19.209 9.4797,19.35 C9.2297,19.49 9.0727,19.753 9.0697,20.04" id="Fill-5" fill="#6EF9E1"></path>
|
||||
<path d="M17.7103,11.5097 C17.7243,11.9627 18.1033,12.3187 18.5553,12.3037 C18.6873,12.2997 18.8143,12.2647 18.9303,12.1997 C19.1803,12.0607 19.3333,11.7957 19.3303,11.5097 C19.3313,11.2247 19.1783,10.9607 18.9303,10.8207 C18.6783,10.6797 18.3713,10.6797 18.1193,10.8207 C17.8693,10.9597 17.7133,11.2237 17.7103,11.5097" id="Fill-7" fill="#6EF9E1"></path>
|
||||
<g transform="translate(3.130000, 2.179202)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<g id="Clip-10"></g>
|
||||
<path d="M14.8499,0.000497856693 L1.3499,0.000497856693 C0.6099,-0.00450214331 0.0049,0.590497857 -0.0001,1.33049786 L-0.0001,17.3304979 C-0.0001,18.0644979 0.5949,18.6604979 1.3289,18.6604979 L1.3499,18.6604979 L6.7199,18.6604979 L6.7199,17.0614979 L2.7199,17.0614979 C2.0929,17.0614979 1.5809,16.5584979 1.5699,15.9314979 L1.5699,2.74049786 C1.5759,2.10949786 2.0889,1.60149786 2.7199,1.60149786 L13.3799,1.60149786 C14.0089,1.59549786 14.5249,2.10149786 14.5299,2.73049786 L14.5299,2.74049786 L14.5299,9.33049786 L16.1499,9.33049786 L16.1499,1.33049786 C16.1499,0.978497857 16.0089,0.640497857 15.7599,0.391497857 C15.4939,0.131497857 15.1319,-0.00950214331 14.7599,0.000497856693 L14.8499,0.000497856693 Z" id="Fill-9" fill="#6EF9E1" mask="url(#mask-2)"></path>
|
||||
</g>
|
||||
<g transform="translate(8.839800, 6.600000)" fill="#6EF9E1">
|
||||
<path d="M7.1,0.73 C7.1,1.22 6.9,1.47 6.491,1.47 L0.61,1.47 C0.201,1.47 0,1.22 0,0.73 C0,0.24 0.201,0 0.61,0 L6.491,0 C6.9,0 7.1,0.24 7.1,0.73" id="Fill-11"></path>
|
||||
<path d="M5.1703,4.6597 C5.1703,5.1497 4.9603,5.3997 4.5503,5.3997 L0.6203,5.3997 C0.2103,5.3997 0.0003,5.1497 0.0003,4.6597 C0.0003,4.1707 0.2103,3.9207 0.6203,3.9207 L4.5503,3.9207 C4.9603,3.9207 5.1703,4.1707 5.1703,4.6597" id="Fill-13"></path>
|
||||
<path d="M3.1606,8.5904 C3.1606,9.0794 2.9506,9.3294 2.5296,9.3294 L0.6306,9.3294 C0.2106,9.3294 0.0006,9.0794 0.0006,8.5904 C0.0006,8.1004 0.2106,7.8504 0.6306,7.8504 L2.5296,7.8504 C2.9506,7.8504 3.1606,8.1004 3.1606,8.5904" id="Fill-15"></path>
|
||||
</g>
|
||||
<path d="M9.0697,20.04 C9.0737,20.329 9.2287,20.596 9.4797,20.74 C9.7317,20.881 10.0387,20.881 10.2897,20.74 C10.5387,20.595 10.6907,20.328 10.6897049,20.04 C10.6907,19.755 10.5387,19.491 10.2897,19.35 C10.0387,19.209 9.7317,19.209 9.4797,19.35 C9.2297,19.49 9.0727,19.753 9.0697,20.04" id="Fill-17" fill="#6EF9E1"></path>
|
||||
<path d="M17.7103,11.5097 C17.7243,11.9627 18.1033,12.3187 18.5553,12.3037 C18.6873,12.2997 18.8143,12.2647 18.9303,12.1997 C19.1803,12.0607 19.3333,11.7957 19.3303,11.5097 C19.3313,11.2247 19.1783,10.9607 18.9303,10.8207 C18.6783,10.6797 18.3713,10.6797 18.1193,10.8207 C17.8693,10.9597 17.7133,11.2237 17.7103,11.5097" id="Fill-19" fill="#6EF9E1"></path>
|
||||
<g transform="translate(3.130000, 2.179202)">
|
||||
<mask id="mask-4" fill="white">
|
||||
<use xlink:href="#path-3"></use>
|
||||
</mask>
|
||||
<g id="Clip-22"></g>
|
||||
<path d="M14.8499,0.000497856693 L1.3499,0.000497856693 C0.6099,-0.00450214331 0.0049,0.590497857 -0.0001,1.33049786 L-0.0001,17.3304979 C-0.0001,18.0644979 0.5949,18.6604979 1.3289,18.6604979 L1.3499,18.6604979 L6.7199,18.6604979 L6.7199,17.0614979 L2.7199,17.0614979 C2.0929,17.0614979 1.5809,16.5584979 1.5699,15.9314979 L1.5699,2.74049786 C1.5759,2.10949786 2.0889,1.60149786 2.7199,1.60149786 L13.3799,1.60149786 C14.0089,1.59549786 14.5249,2.10149786 14.5299,2.73049786 L14.5299,2.74049786 L14.5299,9.33049786 L16.1499,9.33049786 L16.1499,1.33049786 C16.1499,0.978497857 16.0089,0.640497857 15.7599,0.391497857 C15.4939,0.131497857 15.1319,-0.00950214331 14.7599,0.000497856693 L14.8499,0.000497856693 Z" id="Fill-21" fill="#6EF9E1" mask="url(#mask-4)"></path>
|
||||
</g>
|
||||
<g transform="translate(6.609800, 6.600000)" fill="#6EF9E1">
|
||||
<path d="M9.33,0.73 C9.33,1.22 9.07,1.47 8.53,1.47 L0.801,1.47 C0.27,1.47 0,1.22 0,0.73 C0,0.24 0.27,0 0.801,0 L8.53,0 C9.07,0 9.33,0.24 9.33,0.73" id="Fill-23"></path>
|
||||
<path d="M6.79,4.6597 C6.79,5.1497 6.52,5.3997 5.971,5.3997 L0.811,5.3997 C0.27,5.3997 8.8817842e-16,5.1497 8.8817842e-16,4.6597 C8.8817842e-16,4.1707 0.27,3.9207 0.811,3.9207 L5.971,3.9207 C6.52,3.9207 6.79,4.1707 6.79,4.6597" id="Fill-25"></path>
|
||||
<path d="M4.1601,8.5904 C4.1601,9.0794 3.8801,9.3294 3.3301,9.3294 L0.8301,9.3294 C0.2801,9.3294 0.0001,9.0794 0.0001,8.5904 C0.0001,8.1004 0.2801,7.8504 0.8301,7.8504 L3.3301,7.8504 C3.8801,7.8504 4.1601,8.1004 4.1601,8.5904" id="Fill-27"></path>
|
||||
<path d="M13.9501,14.1197 C14.3091,14.1197 14.6001,14.4107 14.6001,14.7697 C14.6001,15.1297 14.3091,15.4207 13.9501,15.4207 C13.5911,15.4207 13.3001,15.1297 13.3001,14.7697 C13.3001,14.4107 13.5911,14.1197 13.9501,14.1197" id="Fill-29"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`
|
||||
|
||||
// 电脑警告图标
|
||||
const alertWarningIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组</title>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-5质量管理" transform="translate(-1104.000000, -254.000000)">
|
||||
<g id="编组-16备份-8" transform="translate(1080.000000, 230.000000)">
|
||||
<g id="编组" transform="translate(24.000000, 24.000000)">
|
||||
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
|
||||
<path d="M18.7471,17.0701 L19.7471,15.5901 C19.7941,15.5431 19.7941,15.4671 19.7471,15.4211 L19.7471,15.4201 C19.7251,15.4111 19.6991,15.4111 19.6771,15.4201 L18.8961,15.4201 L18.8961,14.4901 C18.9021,14.4241 18.8531,14.3661 18.7871,14.3601 L18.7771,14.3601 C18.7321,14.3611 18.6921,14.3831 18.6671,14.4201 L17.6671,15.9001 C17.6191,15.9501 17.6191,16.0301 17.6671,16.0801 L17.7371,16.0801 L18.5171,16.0801 L18.5171,17.0091 C18.5121,17.0761 18.5601,17.1331 18.6271,17.1391 C18.6301,17.1391 18.6341,17.1401 18.6371,17.1401 C18.6831,17.1451 18.7261,17.1211 18.7471,17.0801 L18.7471,17.0701 Z" id="Fill-3" fill="#6FFADE"></path>
|
||||
<path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Fill-5" fill="#6FFADE"></path>
|
||||
<path d="M21.3174,19.5604 L16.0874,19.5604 C16.0584,19.5454 16.0254,19.5454 15.9974,19.5604 C15.7554,19.6884 15.6104,19.9464 15.6274,20.2194 C15.6274,20.6104 15.8574,20.9194 16.1364,20.9194 L21.3174,20.9194 C21.6074,20.9194 21.8274,20.6104 21.8274,20.2194 C21.8274,19.8304 21.6274,19.5604 21.3174,19.5604" id="Fill-7" fill="#6FFADE"></path>
|
||||
<path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-9" fill="#6FFADE"></path>
|
||||
<path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-11" fill="#6FFADE"></path>
|
||||
<path d="M18.7471,17.0701 L19.7471,15.5901 C19.7941,15.5431 19.7941,15.4671 19.7471,15.4211 L19.7471,15.4201 C19.7251,15.4111 19.6991,15.4111 19.6771,15.4201 L18.8961,15.4201 L18.8961,14.4901 C18.9021,14.4241 18.8531,14.3661 18.7871,14.3601 L18.7771,14.3601 C18.7321,14.3611 18.6921,14.3831 18.6671,14.4201 L17.6671,15.9001 C17.6191,15.9501 17.6191,16.0301 17.6671,16.0801 L17.7371,16.0801 L18.5171,16.0801 L18.5171,17.0091 C18.5121,17.0761 18.5601,17.1331 18.6271,17.1391 C18.6301,17.1391 18.6341,17.1401 18.6371,17.1401 C18.6831,17.1451 18.7261,17.1211 18.7471,17.0801 L18.7471,17.0701 Z" id="Fill-13" fill="#6FFADE"></path>
|
||||
<path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Fill-15" fill="#6FFADE"></path>
|
||||
<path d="M16.6572,15.2303 C16.6602,14.9593 16.7142,14.6913 16.8162,14.4403 C16.9202,14.2003 17.0702,13.9823 17.2572,13.7993 C17.4412,13.6103 17.6622,13.4603 17.9072,13.3603 C18.1542,13.2563 18.4192,13.2023 18.6862,13.2003 C18.9552,13.2033 19.2202,13.2563 19.4672,13.3603 C19.9562,13.5633 20.3442,13.9513 20.5472,14.4403 C20.6492,14.6873 20.7042,14.9523 20.7072,15.2193 L20.7072,17.9193 L16.6272,17.9193 L16.6572,15.2303 Z M16.1072,18.5893 L21.2572,18.5893 C21.3232,18.5893 21.3772,18.5363 21.3772,18.4693 L21.3772,15.2193 C21.2862,13.7313 20.0062,12.5983 18.5172,12.6893 C17.1562,12.7723 16.0702,13.8583 15.9872,15.2193 L15.9872,18.4593 C15.9812,18.5263 16.0302,18.5843 16.0962,18.5893 L16.1072,18.5893 Z" id="Stroke-17" stroke="#6EF9E1" stroke-width="0.5"></path>
|
||||
<path d="M21.3174,19.5604 L16.0874,19.5604 C16.0584,19.5454 16.0254,19.5454 15.9974,19.5604 C15.7554,19.6884 15.6104,19.9464 15.6274,20.2194 C15.6274,20.6104 15.8574,20.9194 16.1364,20.9194 L21.3174,20.9194 C21.6074,20.9194 21.8274,20.6104 21.8274,20.2194 C21.8274,19.8304 21.6274,19.5604 21.3174,19.5604" id="Fill-19" fill="#6FFADE"></path>
|
||||
<path d="M12.6142,6.6317 L12.3172,12.5177 C12.2452,12.9007 11.8762,13.1517 11.4942,13.0777 C11.2092,13.0247 10.9862,12.8017 10.9322,12.5177 L10.6242,6.6317 L10.6242,6.5697 C10.7112,6.0177 11.2292,5.6397 11.7832,5.7267 C12.2182,5.7947 12.5582,6.1357 12.6272,6.5697 C12.6322,6.5907 12.6322,6.6117 12.6272,6.6317 L12.6142,6.6317 Z M11.6252,15.2497 C11.2222,15.2707 10.8802,14.9607 10.8592,14.5587 C10.8392,14.1557 11.1482,13.8137 11.5512,13.7927 C11.9532,13.7727 12.2962,14.0817 12.3162,14.4847 C12.3172,14.5007 12.3172,14.5167 12.3172,14.5327 C12.3242,14.9217 12.0142,15.2427 11.6252,15.2497 L11.6252,15.2497 Z" id="Fill-21" fill="#6EF9E1"></path>
|
||||
<path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-23" fill="#6FFADE"></path>
|
||||
<path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-25" fill="#6FFADE"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`
|
||||
|
||||
// 电脑警告菜单图标
|
||||
const alertMenuIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组</title>
|
||||
<g id="1大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="1大屏-数字工厂总览" transform="translate(-48.000000, -872.000000)">
|
||||
<g id="编组-17备份" transform="translate(24.000000, 856.000000)">
|
||||
<g id="编组" transform="translate(24.000000, 16.000000)">
|
||||
<polygon id="Fill-1" fill="#3B71B2" opacity="0" points="0 24 24 24 24 0 0 0"></polygon>
|
||||
<path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-9" fill="#6FFADE"></path>
|
||||
<path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-11" fill="#6FFADE"></path>
|
||||
<path d="M21.3174,18.5158014 L16.0874,18.5158014 C16.0584,18.5008014 16.0254,18.5008014 15.9974,18.5158014 C15.7554,18.6438014 15.6104,18.9018014 15.6274,19.1748014 C15.6274,19.5658014 15.8574,19.8748014 16.1364,19.8748014 L21.3174,19.8748014 C21.6074,19.8748014 21.8274,19.5658014 21.8274,19.1748014 C21.8274,18.7858014 21.6274,18.5158014 21.3174,18.5158014" id="Fill-19" fill="#6FFADE"></path>
|
||||
<path d="M21.3174,15.9564014 L16.0874,15.9564014 C16.0584,15.9414014 16.0254,15.9414014 15.9974,15.9564014 C15.7554,16.0844014 15.6104,16.3424014 15.6274,16.6154014 C15.6274,17.0064014 15.8574,17.3154014 16.1364,17.3154014 L21.3174,17.3154014 C21.6074,17.3154014 21.8274,17.0064014 21.8274,16.6154014 C21.8274,16.2264014 21.6274,15.9564014 21.3174,15.9564014" id="Fill-19备份" fill="#6FFADE"></path>
|
||||
<path d="M21.3174,13.3970014 L16.0874,13.3970014 C16.0584,13.3820014 16.0254,13.3820014 15.9974,13.3970014 C15.7554,13.5250014 15.6104,13.7830014 15.6274,14.0560014 C15.6274,14.4470014 15.8574,14.7560014 16.1364,14.7560014 L21.3174,14.7560014 C21.6074,14.7560014 21.8274,14.4470014 21.8274,14.0560014 C21.8274,13.6670014 21.6274,13.3970014 21.3174,13.3970014" id="Fill-19备份-2" fill="#6FFADE"></path>
|
||||
<path d="M12.6142,6.6317 L12.3172,12.5177 C12.2452,12.9007 11.8762,13.1517 11.4942,13.0777 C11.2092,13.0247 10.9862,12.8017 10.9322,12.5177 L10.6242,6.6317 L10.6242,6.5697 C10.7112,6.0177 11.2292,5.6397 11.7832,5.7267 C12.2182,5.7947 12.5582,6.1357 12.6272,6.5697 C12.6322,6.5907 12.6322,6.6117 12.6272,6.6317 L12.6142,6.6317 Z M11.6252,15.2497 C11.2222,15.2707 10.8802,14.9607 10.8592,14.5587 C10.8392,14.1557 11.1482,13.8137 11.5512,13.7927 C11.9532,13.7727 12.2962,14.0817 12.3162,14.4847 C12.3172,14.5007 12.3172,14.5167 12.3172,14.5327 C12.3242,14.9217 12.0142,15.2427 11.6252,15.2497 L11.6252,15.2497 Z" id="Fill-21" fill="#6EF9E1"></path>
|
||||
<path d="M13.8174,19.4998 L3.1274,19.4998 C2.7364,19.5298 2.4434,19.8718 2.4744,20.2638 C2.4744,20.2718 2.4754,20.2808 2.4764,20.2898 C2.4374,20.6808 2.7204,21.0288 3.1114,21.0678 C3.1164,21.0688 3.1224,21.0688 3.1274,21.0698 L13.8374,21.0698 C14.2234,21.0228 14.5024,20.6778 14.4664,20.2898 C14.5024,19.8938 14.2134,19.5418 13.8174,19.4998" id="Fill-23" fill="#6FFADE"></path>
|
||||
<path d="M17.3066,2.91 L5.4476,2.91 C3.7896,2.91 2.4476,4.253 2.4476,5.91 L2.4476,15.36 C2.4476,17.016 3.7896,18.36 5.4476,18.36 L13.8276,18.36 C14.1866,18.36 14.4666,17.94 14.4666,17.58 C14.4666,17.22 14.1866,16.79 13.8276,16.79 L5.7166,16.79 C4.7836,16.796 4.0226,16.044 4.0166,15.11 L4.0166,15.08 L4.0166,6.181 C4.0166,5.258 4.7646,4.51 5.6866,4.51 L17.1466,4.51 C18.0636,4.51 18.8066,5.253 18.8066,6.17 L18.8066,6.181 L18.8066,10.29 L18.8066,10.38 L18.8066,10.45 C18.8696,10.843 19.2396,11.11 19.6316,11.047 C19.9946,10.988 20.2546,10.667 20.2376,10.3 L20.2376,5.94 C20.2536,4.299 18.9486,2.948 17.3066,2.91" id="Fill-25" fill="#6FFADE"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`
|
||||
|
||||
// 菱形叠加
|
||||
const stackIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>物料信息 </title>
|
||||
<g id="1大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="1大屏-数字工厂总览" transform="translate(-48.000000, -392.000000)" fill-rule="nonzero">
|
||||
<g id="物料信息-" transform="translate(48.000000, 392.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
|
||||
<path d="M20.3505422,14.9151538 L20.458789,14.9215423 C20.8283324,15.1756033 20.9365283,16.0632505 20.5345696,16.3962497 L20.4405365,16.4586841 L12.3478497,20.7032297 C12.2016803,20.79009 11.8833705,20.8006382 11.6976954,20.7375186 L11.6173217,20.699832 L3.53524588,16.5181762 C3.13421554,16.2396631 3.13620989,15.4741677 3.38080569,15.0736815 L3.44148439,14.9881289 L3.57039169,14.9618461 L11.9916374,19.3126195 L20.3505422,14.9151538 Z M20.3505455,11.1907368 L20.4587026,11.1970677 C20.8283142,11.4506321 20.936545,12.3384142 20.5345732,12.6714428 L20.4405365,12.7338816 L12.3478497,16.9784271 C12.2016803,17.0652875 11.8833705,17.0758357 11.6976954,17.012716 L11.6173217,16.9750295 L3.53524588,12.7933736 C3.13421554,12.5148606 3.13620989,11.7493651 3.38080569,11.348879 L3.44148439,11.2633264 L3.57039169,11.2370435 L11.9916374,15.5876251 L20.3505455,11.1907368 Z M12.4463389,3.3309719 L12.5600247,3.40332636 L20.3179067,7.46797471 C20.3828378,7.50198626 20.4422319,7.54565391 20.4941486,7.59757438 C20.8671243,7.97146203 20.8671243,8.57668705 20.4940313,8.95069207 L20.4111763,9.02185105 L20.3185938,9.07973137 L12.5536247,13.1569789 C12.2525083,13.3810327 11.8526139,13.4065554 11.5389056,13.2394459 L11.4256662,13.1677617 L3.66901765,9.16124436 C3.60269972,9.12706228 3.54205927,9.0828421 3.48915918,9.0300661 C3.30967167,8.85060515 3.20883441,8.60718793 3.20883441,8.35337304 C3.20883441,8.09955815 3.30967167,7.85614093 3.48911133,7.67672785 L3.57020807,7.60674321 L3.66079174,7.54945114 L11.4274137,3.41400371 C11.7293235,3.18803429 12.1313281,3.16229769 12.4463389,3.3309719 Z M12.0031732,4.74717805 L5.24637717,8.34632811 L11.9321821,11.8491065 L18.7348003,8.27501628 L12.0031732,4.74717805 Z" id="形状结合" stroke="#6EF9E1" stroke-width="0.2" fill="#77FFF2"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`
|
||||
|
||||
export default {
|
||||
name: 'TechyContainer',
|
||||
@ -44,29 +262,21 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
computeIcon() {
|
||||
switch (this.icon) {
|
||||
case '折角的菜单图标':
|
||||
return IconMenu1
|
||||
case '趋势放大镜图标':
|
||||
return IconTrend
|
||||
case '菜单放大镜图标':
|
||||
return IconMenuSearch
|
||||
case '安全帽图标':
|
||||
return IconSafetyHat
|
||||
case '电脑警告图标':
|
||||
return IconPCAlert
|
||||
case '电脑警告菜单图标':
|
||||
return IconPCTriple
|
||||
case '菱形叠加':
|
||||
return IconTriple
|
||||
default:
|
||||
return IconMenuOnly
|
||||
// more...
|
||||
}
|
||||
return this[this.icon] || this['defaultIcon']
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
defaultIcon,
|
||||
menuIcon,
|
||||
lightHatIcon,
|
||||
zhejiaoMenuListIcon,
|
||||
trendAnalysisIcon,
|
||||
menuAnalysisIcon,
|
||||
alertWarningIcon,
|
||||
alertMenuIcon,
|
||||
stackIcon
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
}
|
||||
@ -74,14 +284,16 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.techy-container {
|
||||
border: calc(2px * var(--beilv)) solid #52fff1;
|
||||
border: 2px solid #52fff1;
|
||||
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: calc(24px * var(--beilv));
|
||||
/* padding: 24px; */
|
||||
padding: calc(100vw / 1920 * 22);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
|
||||
/* background: rgba(20, 69, 100, 0.425); */
|
||||
background: rgba(6, 16, 39, 0.3);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
@ -92,47 +304,58 @@ export default {
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
height: calc(4px * var(--beilv));
|
||||
width: calc(26px * var(--beilv));
|
||||
/* height: 4px;
|
||||
width: 24px; */
|
||||
/* height: 0.325vh;
|
||||
width: 3vh; */
|
||||
height: calc(100vw / 1920 * 4);
|
||||
width: calc(100vw / 1920 * 30);
|
||||
}
|
||||
|
||||
.vertical {
|
||||
height: calc(26px * var(--beilv));
|
||||
width: calc(4px * var(--beilv));
|
||||
/* height: 24px;
|
||||
width: 4px; */
|
||||
/* height: 3vh;
|
||||
width: 0.325vh; */
|
||||
height: calc(100vw / 1920 * 30);
|
||||
width: calc(100vw / 1920 * 4);
|
||||
}
|
||||
|
||||
.top {
|
||||
top: calc(-3px * var(--beilv));
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.left {
|
||||
left: calc(-3px * var(--beilv));
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.right {
|
||||
right: calc(-3px * var(--beilv));
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
bottom: calc(-3px * var(--beilv));
|
||||
bottom: -3px;
|
||||
}
|
||||
|
||||
.container-title-wrapper {
|
||||
color: #52fff1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: calc(18px * var(--beilv));
|
||||
/* font-size: 18px;
|
||||
line-height: 1;
|
||||
margin-bottom: calc(8px * var(--beilv));
|
||||
height: 24px;
|
||||
margin-bottom: 8px; */
|
||||
/* font-size: 1.25vh;
|
||||
line-height: 1;
|
||||
height: 1.5vh;
|
||||
margin-bottom: 1.25vh; */
|
||||
font-size: calc((100vw / 1920) * 16);
|
||||
line-height: 1;
|
||||
height: calc((100vw / 1920) * 20);
|
||||
margin-bottom: 1.5vh;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
margin-left: calc(4px * var(--beilv));
|
||||
}
|
||||
|
||||
.container-icon {
|
||||
position: relative;
|
||||
height: calc(24px * var(--beilv)) !important;
|
||||
width: calc(24px * var(--beilv)) !important;
|
||||
margin-left: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<header class="techy-header">
|
||||
<img class="logo-img" src="./logo.png" alt="cnbm" />
|
||||
<img class="logo-img" src="./logo.png" alt="cnbm">
|
||||
<span class="techy-header__title">{{ headTitle }}</span>
|
||||
|
||||
<div class="date">2022.10.14</div>
|
||||
<div class="time">20:12:24</div>
|
||||
|
||||
<div class="fullscreen-btn">
|
||||
<span @click="handleClick('home')" v-html="homeSvg" />
|
||||
<span style="color: #52fff1; margin-right: 8px;" @click="handleClick('home')" v-html="homeSvg" />
|
||||
<span v-if="isFullScreen" @click="handleClick('fullscreen')" v-html="unfullScreenSvg" />
|
||||
<span v-else @click="handleClick('fullscreen')" v-html="fullScreenSvg" />
|
||||
</div>
|
||||
@ -15,8 +15,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Cookie from 'js-cookie'
|
||||
|
||||
// const homeSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
const homeSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>首页</title>
|
||||
@ -54,7 +52,6 @@ const unfullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32
|
||||
</g>
|
||||
</g>
|
||||
</svg>`
|
||||
|
||||
export default {
|
||||
name: 'TechyHeader',
|
||||
props: ['headTitle'],
|
||||
@ -72,17 +69,10 @@ export default {
|
||||
this.isFullScreen = !this.isFullScreen
|
||||
this.$emit('toggle-full-screen', { full: this.isFullScreen })
|
||||
} else if (source === 'home') {
|
||||
const username = Cookie.get('account')
|
||||
const password = Cookie.get('password')
|
||||
|
||||
if (username && password) {
|
||||
window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
|
||||
} else {
|
||||
this.$router.push('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -104,61 +94,72 @@ export default {
|
||||
align-items: center;
|
||||
position: relative;
|
||||
color: white;
|
||||
padding: calc(24px * var(--beilv)) 0;
|
||||
/* font-size: 24px; */
|
||||
font-size: 2vh;
|
||||
padding: calc(100vw / 1920 * 32) 0;
|
||||
line-height: 1;
|
||||
background: url(./header-new.png) no-repeat;
|
||||
background: url(./header-longer.png) no-repeat;
|
||||
/** 背景图片好像左右不对称 : */
|
||||
/* background-position: bottom left 40px; */
|
||||
/* background-size: cover; */
|
||||
background-size: 100% 100%;
|
||||
/* background-position: bottom left calc(32px * var(--beilv)); */
|
||||
/* background-position: bottom left calc(100vw / 1920 * 40); */
|
||||
background-position: bottom;
|
||||
height: calc(96px * var(--beilv));
|
||||
height: calc(100vmin / 1920 * 128);
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
width: calc(28px * var(--beilv));
|
||||
width: calc(100vmin / 1920 * 48);
|
||||
}
|
||||
|
||||
.techy-header__title {
|
||||
display: line-block;
|
||||
margin-left: calc(12px * var(--beilv));
|
||||
font-size: calc(29px * var(--beilv));
|
||||
line-height: calc(41px * var(--beilv));
|
||||
letter-spacing: calc(4px * var(--beilv));
|
||||
text-shadow: 0px 0px calc(11px * var(--beilv)) rgba(221, 237, 255, 0.34);
|
||||
margin-left: calc(100vmin / 1920 * 12);
|
||||
/* font-size: 29px; */
|
||||
font-size: calc(100vmin / 1920 * 48);
|
||||
line-height: 41px;
|
||||
letter-spacing: 4px;
|
||||
text-shadow: 0px 0px 11px rgba(221, 237, 255, 0.34);
|
||||
}
|
||||
|
||||
.date,
|
||||
.time {
|
||||
font-family: zcoolqingkehuangyouti, sans-serif;
|
||||
font-size: calc(32px * var(--beilv));
|
||||
line-height: calc(40px * var(--beilv));
|
||||
font-size: calc(100vmin / 1920 * 42);
|
||||
line-height: 1.5;
|
||||
/* font-size: 28px;
|
||||
line-height: 36px; */
|
||||
color: #49e1de;
|
||||
letter-spacing: calc(0.8px * var(--beilv));
|
||||
letter-spacing: 0.8px;
|
||||
position: absolute;
|
||||
bottom: calc(18px * var(--beilv));
|
||||
bottom: calc(100vmin / 1920 * 14);
|
||||
}
|
||||
|
||||
.date {
|
||||
left: calc(72px * var(--beilv));
|
||||
/* left: 72px; */
|
||||
left: calc(100vmin / 1920 * 72);
|
||||
}
|
||||
|
||||
.time {
|
||||
right: calc(112px * var(--beilv));
|
||||
/* right: 128px; */
|
||||
right: calc(100vmin / 1920 * 186);
|
||||
}
|
||||
|
||||
.fullscreen-btn {
|
||||
/* height: 32px; */
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
/* right: 24px; */
|
||||
/** techy-body 的内部 padding 值 */
|
||||
right: calc(24px * var(--beilv));
|
||||
top: calc(40px * var(--beilv));
|
||||
right: calc(100vmin / 1920 * 32);
|
||||
/* top: 42px; */
|
||||
top: calc(100vmin / 1920 * 52);
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
gap: calc(8px * var(--beilv));
|
||||
}
|
||||
|
||||
.fullscreen-btn > span {
|
||||
display: inline-block;
|
||||
width: calc(32px * var(--beilv));
|
||||
height: calc(32px * var(--beilv));
|
||||
width: calc(100vmin / 1920 * 52);
|
||||
height: calc(100vmin / 1920 * 52);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,14 +7,15 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="visual-base-table-container">
|
||||
<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
|
||||
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-column
|
||||
v-for="(item, index) in renderTableHeadList"
|
||||
:key="item.prop"
|
||||
@ -22,14 +23,10 @@
|
||||
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" />
|
||||
@ -110,101 +107,82 @@ 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 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;
|
||||
} */
|
||||
<style lang="scss">
|
||||
@import "~@/styles/index.scss";
|
||||
.visual-base-table-container {
|
||||
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;
|
||||
}
|
||||
|
||||
.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: #ffffffb3;
|
||||
font-size: calc(12px * var(--beilv));
|
||||
line-height: calc(14px * var(--beilv));
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> thead th {
|
||||
.el-table {
|
||||
border: 0;
|
||||
}
|
||||
.el-table::before,.el-table--border::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
.el-table th,td{
|
||||
border-color: #0D1728 !important;
|
||||
padding: 0;
|
||||
}
|
||||
.el-table tr {
|
||||
background: transparent;
|
||||
}
|
||||
.el-table__row:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
|
||||
.el-table__row--striped:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
|
||||
// new
|
||||
.el-table {
|
||||
width: 100%;
|
||||
.el-table__header-wrapper table, .el-table__body-wrapper table {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.el-table__body, .el-table__footer, .el-table__header {
|
||||
table-layout: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.setting {
|
||||
text-align: right;
|
||||
padding: 15px;
|
||||
.setting-box {
|
||||
width: 100px;
|
||||
}
|
||||
i {
|
||||
color: #aaa;
|
||||
@extend .pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 100 KiB |
@ -1,24 +1,21 @@
|
||||
<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"> -->
|
||||
<!-- <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" />
|
||||
|
||||
<section id="techy-body-part">
|
||||
<div class="upper-part">
|
||||
<div class="techy-body-part__left">
|
||||
<div class="order">
|
||||
<techy-container title="订单完成情况" icon="default" style="display: flex; flex-direction: column;">
|
||||
<LeftContentOrder style="height: 1px; flex: 1;" />
|
||||
<techy-container title="订单完成情况" icon="menuIcon" style="flex: 0;">
|
||||
<LeftContentOrder />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div class="public">
|
||||
<techy-container title="公用工程消耗" icon="菱形叠加">
|
||||
<techy-container title="公用工程消耗" icon="stackIcon" style="flex:1;">
|
||||
<LeftContentPublicConsume />
|
||||
</techy-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="techy-body-part__middle">
|
||||
<TechyBox>
|
||||
@ -44,45 +41,39 @@
|
||||
</div>
|
||||
|
||||
<div class="techy-body-part__right">
|
||||
<div class="realtime">
|
||||
<techy-container title="实时产量和能耗" icon="折角的菜单图标">
|
||||
<techy-container title="实时产量和能耗" icon="zhejiaoMenuListIcon" style="height: 22vh">
|
||||
<RightContentRealtimeProduction />
|
||||
</techy-container>
|
||||
</div>
|
||||
|
||||
<div class="ws-quality">
|
||||
<techy-container title="工序质量分析" icon="趋势放大镜图标">
|
||||
<techy-container title="工序质量分析" icon="trendAnalysisIcon" style="flex: 0">
|
||||
<RightContentQualityAnalysis />
|
||||
</techy-container>
|
||||
</div>
|
||||
|
||||
<div class="production">
|
||||
<techy-container title="产线成品率" icon="default">
|
||||
<techy-container title="产线成品率" icon="menuIcon" style="flex: 1">
|
||||
<RightContentProductRate />
|
||||
</techy-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="bottom-part">
|
||||
<div class="eq-check">
|
||||
<techy-container title="设备巡检提示" icon="电脑警告菜单图标" style="flex: 0; align-self: stretch;">
|
||||
<div style="width: 25%; min-width: 480px; height: 100%;">
|
||||
<techy-container title="设备巡检提示" icon="alertMenuIcon" style="flex: 0; align-self: stretch;">
|
||||
<LeftContentEquipmentCheck />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div class="ft-monitor" style="flex: 1;">
|
||||
<techy-container title="现场实时监控" icon="安全帽图标">
|
||||
<div style="flex: 1;">
|
||||
<techy-container title="现场实时监控" icon="lightHatIcon">
|
||||
<LeftContentMonitor />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div class="fault-analysis">
|
||||
<techy-container title="缺陷分类分析" icon="菜单放大镜图标">
|
||||
<div style="flex: 1;max-width: 320px;">
|
||||
<techy-container title="缺陷分类分析" icon="menuAnalysisIcon">
|
||||
<RightContentFaultAnalysis />
|
||||
</techy-container>
|
||||
</div>
|
||||
<div class="eq-alert">
|
||||
<techy-container title="设备报警提示" icon="电脑警告图标">
|
||||
<div style="width: 25%; min-width: 480px;">
|
||||
<techy-container title="设备报警提示" icon="alertWarningIcon">
|
||||
<RightContentAlert />
|
||||
</techy-container>
|
||||
</div>
|
||||
@ -169,7 +160,6 @@ export default {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
/* overflow: auto; */
|
||||
}
|
||||
|
||||
#v3d-outter *::-webkit-scrollbar {
|
||||
@ -205,87 +195,48 @@ export default {
|
||||
}
|
||||
|
||||
#techy-body-part {
|
||||
height: 20vh;
|
||||
flex: 1 1;
|
||||
display: flex;
|
||||
gap: calc(16px * var(--beilv));
|
||||
/* gap: 16px; */
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.upper-part {
|
||||
flex: 1 1;
|
||||
height: 20vh;
|
||||
padding: calc(24px * var(--beilv));
|
||||
padding: calc(100vmin / 1920 * 36);
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
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));
|
||||
/* justify-content: space-between; */
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
}
|
||||
|
||||
.bottom-part {
|
||||
height: calc(224px * var(--beilv));
|
||||
padding: 0 calc(24px * var(--beilv)) calc(24px * var(--beilv));
|
||||
height: 22vh;
|
||||
padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36);
|
||||
display: flex;
|
||||
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 {
|
||||
/* gap: 16px; */
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
}
|
||||
|
||||
.techy-body-part__left,
|
||||
.techy-body-part__right {
|
||||
/* height: 100%; */
|
||||
/* height: calc(512px * var(--beilv));
|
||||
flex: 1; */
|
||||
width: calc(472px * var(--beilv));
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
min-width: 480px;
|
||||
overflow: hidden;
|
||||
/* background: rgba(20, 69, 100, 0.425);
|
||||
backdrop-filter: blur(2px); */
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(16px * var(--beilv));
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
}
|
||||
|
||||
/* .techy-body-part__left {
|
||||
width: 35%;
|
||||
} */
|
||||
|
||||
.techy-body-part__right-col-2 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@ -301,13 +252,13 @@ export default {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: calc(136px * var(--beilv));
|
||||
width: calc(176px * var(--beilv));
|
||||
height: 136px;
|
||||
width: 176px;
|
||||
}
|
||||
|
||||
.techy-body-part__middle__inner {
|
||||
height: 100%;
|
||||
padding: calc(16px * var(--beilv));
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@ -316,28 +267,28 @@ export default {
|
||||
.techy-body-part__middle__inner p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: calc(12px * var(--beilv));
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.techy-body-part__middle__inner p > span {
|
||||
position: relative;
|
||||
padding-left: calc(16px * var(--beilv));
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.techy-body-part__middle__inner p > span.round-dot {
|
||||
padding-left: calc(28px * var(--beilv));
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.round-dot::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(4px * var(--beilv));
|
||||
left: calc(16px * var(--beilv));
|
||||
width: calc(8px * var(--beilv));
|
||||
height: calc(8px * var(--beilv));
|
||||
top: 4px;
|
||||
left: 16px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: rgb(82, 231, 82);
|
||||
border-radius: calc(4px * var(--beilv));
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user