merge master

This commit is contained in:
朱菊兰 2022-11-07 10:41:29 +08:00
commit 89420b4607
26 changed files with 2153 additions and 2256 deletions

1
.gitignore vendored
View File

@ -5,6 +5,7 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*
**/*.log
public/
tests/**/coverage/
tests/e2e/reports

Binary file not shown.

After

Width:  |  Height:  |  Size: 301 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 MiB

View File

@ -1,22 +1,49 @@
<template>
<div class="navbar" :style="showTitle ? 'background: rgba(8,17,50,0.25)' : ''" style="padding-right: 23px;">
<hamburger v-if="showhome" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<hamburger
v-if="showhome"
id="hamburger-container"
:is-active="sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
<div v-if="showTitle" style="color: #fff;font-size: 22px; float: left; letter-spacing: 1px; font-weight: 500; padding-left: 24px; marginTop: 5px">
<img src="../../assets/img/cnbm.png" style="width: 26px; height: 26px; position: relative; top: 6px; marginRight: 14px" alt="">
<div
v-if="showTitle"
style="cursor: pointer; color: #fff;font-size: 22px; float: left; letter-spacing: 1px; font-weight: 500; padding-left: 24px; marginTop: 5px"
@click="goToRootPage"
>
<img
src="../../assets/img/cnbm.png"
style="width: 26px; height: 26px; position: relative; top: 6px; marginRight: 14px"
alt=""
>
{{ 'title' | i18nFilter }}
</div>
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<div class="right-menu">
<div v-if="showhome" class="right-menu-back" @click="toHome">
<svg-icon class="item-icon" icon-class="home" style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;" />
<svg-icon
class="item-icon"
icon-class="home"
style="height: 24px; width: 24px; vertical-align: -6px; margin-right: 2px;"
/>
{{ 'navbar.homepage' | i18nFilter }}
</div>
<el-dropdown :style="showTitle ? 'color: #fff' : '#000'" class="avatar-container right-menu-item hover-effect" trigger="click">
<el-badge :hidden="alarmNum>0?false:true" :value="alarmNum" class="item" style="line-height: 0; margin: 0 10px; vertical-align: -3px" @click.native="handleAlarm">
<el-dropdown
:style="showTitle ? 'color: #fff' : '#000'"
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<el-badge
:hidden="alarmNum > 0 ? false : true"
:value="alarmNum"
class="item"
style="line-height: 0; margin: 0 10px; vertical-align: -3px"
@click.native="handleAlarm"
>
<svg-icon style="width: 24px; height: 24px" class="item-icon" icon-class="alarm" />
</el-badge>
<el-dropdown-menu slot="dropdown">
@ -24,17 +51,36 @@
</el-dropdown-menu>
</el-dropdown>
<div :style="showTitle ? 'color: #fff' : ''" class="right-menu-back">
<svg-icon style="width: 24px; height: 24px; vertical-align: -7px" :icon-class="showTitle ? 'countdown' : 'countdown2'" />
<svg-icon
style="width: 24px; height: 24px; vertical-align: -7px"
:icon-class="showTitle ? 'countdown' : 'countdown2'"
/>
{{ formatTime }}
</div>
<template>
<lang-select :style="showTitle ? 'color: #fff' : ''" class="right-menu-item hover-effect" :is-show="showTitle" />
<lang-select
:style="showTitle ? 'color: #fff' : ''"
class="right-menu-item hover-effect"
:is-show="showTitle"
/>
</template>
<div class="right-menu-back">
<a href="Lodap.zip"><svg-icon :style="showTitle ? 'color: #fff' : ''" style="width: 24px; height: 24px; vertical-align: -7px" icon-class="download" /></a>
<a href="Lodap.zip">
<svg-icon
:style="showTitle ? 'color: #fff' : ''"
style="width: 24px; height: 24px; vertical-align: -7px"
icon-class="download"
/>
</a>
</div>
<div class="right-menu-back">
<a href="google.exe"><svg-icon :style="showTitle ? 'color: #fff' : ''" style="width: 24px; height: 24px; vertical-align: -7px" icon-class="chrome" /></a>
<a href="google.exe">
<svg-icon
:style="showTitle ? 'color: #fff' : ''"
style="width: 24px; height: 24px; vertical-align: -7px"
icon-class="chrome"
/>
</a>
</div>
<!-- <div class="right-menu-back" style="color: #fff" @click="$router.push({name: 'VisualCreate'})">
可视化配置
@ -44,11 +90,15 @@
{{ showDay }}
{{ showTime }}
</div> -->
<el-dropdown :style="showTitle ? 'color: #fff' : 'color: #000'" class="avatar-container right-menu-item hover-effect" trigger="click">
<el-dropdown
:style="showTitle ? 'color: #fff' : 'color: #000'"
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<div class="avatar-wrapper">
<img :src="require('@/assets/img/head.png')" class="user-avatar">
<div class="avatar-username" :title="username">{{ username }}</div>
<div class="avatar-roles" :title="roles.join(',')">{{ roles.length>0?roles[0]:'' }}</div>
<div class="avatar-roles" :title="roles.join(',')">{{ roles.length > 0 ? roles[0] : '' }}</div>
<!-- <i class="el-icon-caret-bottom" /> -->
</div>
<el-dropdown-menu slot="dropdown">
@ -91,8 +141,15 @@
<div :style="showTitle ? 'borderColor: #fff' : 'borderColor: #979797'" class="right-menu-back verticalBar" />
<div :style="showTitle ? 'color: #fff' : 'color: red'" class="right-menu-back">
<el-tooltip class="item" effect="dark" placement="bottom-end">
<div slot="content">{{ 'copyright.copyright' | i18nFilter }}{{ 'copyright.company' | i18nFilter }} <br>{{ 'copyright.version' | i18nFilter }}3.0</div>
<svg-icon style="width: 24px; height: 24px; vertical-align: -7px" :icon-class="showTitle ? 'introduce' : 'introduce2'" />
<div slot="content">
{{ 'copyright.copyright' | i18nFilter }}{{ 'copyright.company' | i18nFilter }}
<br>
{{ 'copyright.version' | i18nFilter }}3.0
</div>
<svg-icon
style="width: 24px; height: 24px; vertical-align: -7px"
:icon-class="showTitle ? 'introduce' : 'introduce2'"
/>
</el-tooltip>
</div>
</div>
@ -108,6 +165,7 @@ import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import LangSelect from '@/components/LangSelect'
import moment from 'moment'
import Cookie from 'js-cookie'
let logoutInterval = null
const timeInterval = null
@ -148,13 +206,7 @@ export default {
}
},
computed: {
...mapGetters([
'sidebar',
'avatar',
'username',
'choicepart',
'roles'
]),
...mapGetters(['sidebar', 'avatar', 'username', 'choicepart', 'roles']),
formatTime() {
return moment(this.logoutTime - 28800000).format('HH:mm:ss')
}
@ -189,6 +241,15 @@ export default {
removeEventListener('visibilitychange', this.visibilitychangeListener)
},
methods: {
goToRootPage() {
// 11
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}`
}
},
winBlur() {
this.blurTime = new Date()
clearInterval(logoutInterval)
@ -275,18 +336,18 @@ export default {
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 48px;
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
@ -308,7 +369,7 @@ export default {
outline: none;
}
.right-menu-back{
.right-menu-back {
display: inline-block;
vertical-align: text-bottom;
font-size: 14px;
@ -327,10 +388,10 @@ export default {
&.hover-effect {
cursor: pointer;
transition: background .3s;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
}
@ -367,7 +428,7 @@ export default {
text-overflow: ellipsis;
overflow: hidden;
}
.avatar-roles{
.avatar-roles {
width: 80px;
text-align: center;
position: absolute;

View File

@ -69,8 +69,8 @@ export default {
width: 100%;
& .sidebar-logo {
width: 36px;
height: 36px;
width: 26px;
height: 26px;
vertical-align: middle;
margin-right: 12px;
}

File diff suppressed because it is too large Load Diff

View File

@ -16,7 +16,7 @@
<el-table-column label="提示等级" prop="checkContent" />
</el-table>
</div>
<div class="el-table-wrapper">
<!-- <div class="el-table-wrapper">
<el-table
key="LeftContentEquipmentCheck2"
border
@ -28,8 +28,7 @@
<el-table-column label="提示等级" prop="warningLevel" />
<el-table-column label="提示等级" prop="checkContent" />
</el-table>
<!-- <TechyTable key="table-2" :showIndex="false" :table-config="tableProps" :table-data="tableData2"></TechyTable> -->
</div>
</div> -->
</div>
</template>
@ -71,7 +70,7 @@ export default {
<style scoped>
.left-content-equipment-check {
display: flex;
gap: calc(100vw / 1920 * 16);
gap: calc(100vmin / 1920 * 36);
}
.el-table-wrapper {

View File

@ -16,7 +16,7 @@
<el-table-column label="完成度" prop="finished" :resizable="true" />
</el-table>
</div>
<div class="el-table-wrapper">
<!-- <div class="el-table-wrapper">
<el-table
key="LeftContentOrder2"
border
@ -28,8 +28,7 @@
<el-table-column label="规格" prop="specs" :resizable="true" />
<el-table-column label="完成度" prop="finished" :resizable="true" />
</el-table>
<!-- <TechyTable key="table-2" :showIndex="false" :table-config="tableProps" :table-data="tableData2"></TechyTable> -->
</div>
</div> -->
</div>
</template>

View File

@ -72,9 +72,10 @@ export default {
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);
backdrop-filter: blur(2px);
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(1px);
}
.line {

View File

@ -1,22 +1,65 @@
<template>
<header class="techy-header">
<img class="logo-img" src="./logo.png" alt="cnbm">
<span style="display: line-block; margin-left: calc(100vw / 1920 * 8); letter-spacing: 3px;">{{ headTitle }}</span>
<span class="techy-header__title">{{ headTitle }}</span>
<span class="fullscreen-btn">
<svg-icon icon-class="home" style="color: #52fff1; margin-right: 16px;" @click="handleClick('home')" />
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" @click="handleClick('fullscreen')" />
<svg-icon v-else icon-class="fullScreenView" @click="handleClick('fullscreen')" />
</span>
<div class="date">2022.10.14</div>
<div class="time">20:12:24</div>
<div class="fullscreen-btn">
<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>
</header>
</template>
<script>
// 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>
<g id="1大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1大屏-数字工厂总览" transform="translate(-1824.000000, -46.000000)" fill-rule="nonzero">
<g id="首页" transform="translate(1824.000000, 46.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32"></rect>
<path d="M3.36212554,9.99760304 L14.4561021,2.03491762 C15.37881,1.37257076 16.62119,1.37257076 17.5438979,2.03491762 L28.6378745,9.99760304 C29.7265595,10.7789878 30.3723957,12.0369335 30.3723957,13.3770071 L30.3723957,26.217608 C30.3723957,28.5153002 28.5096576,30.3780383 26.2119654,30.3780383 L5.78803465,30.3780383 C3.49034244,30.3780383 1.62760433,28.5153002 1.62760433,26.217608 L1.62760433,13.3773853 C1.62760433,12.0371783 2.27333209,10.7790656 3.36212554,9.99760304 Z M4.68552062,11.8410519 C4.19052975,12.196239 3.89692996,12.7681449 3.89692996,13.3773853 L3.89692996,26.217608 C3.89692996,27.2620363 4.74360637,28.1087127 5.78803465,28.1087127 L26.2119654,28.1087127 C27.2563936,28.1087127 28.10307,27.2620363 28.10307,26.217608 L28.10307,13.3773853 C28.10307,12.7681449 27.8094702,12.196239 27.3144794,11.8410519 L16.2205028,3.87836647 C16.0887105,3.78379718 15.9112895,3.78379718 15.7794972,3.87836647 L4.68552062,11.8414301 L4.68552062,11.8410519 Z" id="形状" fill="#42D0CE"></path>
<path d="M16.25,17 C16.8972087,17 17.4295339,17.4918747 17.4935464,18.1221948 L17.5,18.25 L17.5,28.25 C17.5,28.9403559 16.9403559,29.5 16.25,29.5 C15.6027913,29.5 15.0704661,29.0081253 15.0064536,28.3778052 L15,28.25 L15,18.25 C15,17.5596441 15.5596441,17 16.25,17 Z" id="路径-3" fill="#42D0CE"></path>
</g>
</g>
</g>
</svg>`
// const fullScreenSvg = `<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 fullScreenSvg = `<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>编组 54备份</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-1864.000000, -162.000000)">
<g id="编组-54备份" transform="translate(1864.000000, 162.000000)">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M26.7638125,1.45454545 L27.0177905,1.4628567 C27.4387521,1.49054436 27.8474996,1.58732758 28.2359531,1.75197014 C28.6866948,1.94029725 29.0896137,2.2117619 29.4389259,2.56107409 C29.7857111,2.90785927 30.0584977,3.31352185 30.2477734,3.76343947 C30.4456009,4.23019115 30.5454545,4.72555866 30.5454545,5.23618754 L30.5454545,5.23618754 L30.5454545,26.7638125 L30.5371433,27.0177905 C30.5094556,27.4387521 30.4126724,27.8474996 30.2480299,28.2359531 C30.0597028,28.6866948 29.7882381,29.0896137 29.4389259,29.4389259 C29.0921407,29.7857111 28.6864782,30.0584977 28.2365605,30.2477734 C27.7698088,30.4456009 27.2744413,30.5454545 26.7638125,30.5454545 L26.7638125,30.5454545 L5.23618754,30.5454545 L4.98220952,30.5371433 C4.56124792,30.5094556 4.15250044,30.4126724 3.7640469,30.2480299 C3.31330516,30.0597028 2.91038628,29.7882381 2.56107409,29.4389259 C2.21428891,29.0921407 1.94150232,28.6864782 1.75222663,28.2365605 C1.55439906,27.7698088 1.45454545,27.2744413 1.45454545,26.7638125 L1.45454545,26.7638125 L1.45454545,5.23618754 L1.4628567,4.98220952 C1.49054436,4.56124792 1.58732758,4.15250044 1.75197014,3.7640469 C1.94029725,3.31330516 2.2117619,2.91038628 2.56107409,2.56107409 C2.90785927,2.21428891 3.31352185,1.94150232 3.76343947,1.75222663 C4.23019115,1.55439906 4.72555866,1.45454545 5.23618754,1.45454545 L5.23618754,1.45454545 L26.7638125,1.45454545 Z M26.7638125,3.33876293 L5.23618754,3.33876293 L5.08796584,3.34447462 C4.10971624,3.42016081 3.33876293,4.23861746 3.33876293,5.23618754 L3.33876293,5.23618754 L3.33876293,26.7638125 L3.34447462,26.9120342 C3.42016081,27.8902838 4.23861746,28.6612371 5.23618754,28.6612371 L5.23618754,28.6612371 L26.7638125,28.6612371 L26.9120342,28.6555254 C27.8902838,28.5798392 28.6612371,27.7613825 28.6612371,26.7638125 L28.6612371,26.7638125 L28.6612371,5.23618754 L28.6555254,5.08796584 C28.5798392,4.10971624 27.7613825,3.33876293 26.7638125,3.33876293 L26.7638125,3.33876293 Z M6.64116798,17.2700375 L6.74890704,17.2784355 C7.20902464,17.3410097 7.56504512,17.7372269 7.56504512,18.2121946 L7.56504512,18.2121946 L7.56504512,23.06998 L12.2154875,18.4195377 L12.3038841,18.341579 C12.6723846,18.0557307 13.2096238,18.0817169 13.5474445,18.4195377 C13.9134169,18.7855101 13.9134169,19.3855223 13.5474445,19.7514947 L13.5474445,19.7514947 L8.86035653,24.4349549 L13.6953555,24.4349549 L13.8090001,24.4414765 C14.2937488,24.4974586 14.6711425,24.9068233 14.6639054,25.3965331 C14.6534571,25.9083109 14.2345395,26.3191724 13.7217698,26.3191724 L13.7217698,26.3191724 L6.64604887,26.3191724 L6.53329365,26.3126932 C6.05255502,26.2570589 5.68082765,25.8499062 5.68082765,25.3539511 L5.68082765,25.3539511 L5.68082765,18.2353071 L5.68737703,18.1218678 C5.74358847,17.6379293 6.15445128,17.2603996 6.64116798,17.2700375 L6.64116798,17.2700375 Z M25.3605547,5.68082765 L25.4723738,5.68728667 C25.9492196,5.74274215 26.3191724,6.14846553 26.3191724,6.6394453 L26.3191724,6.6394453 L26.3191724,13.7613912 L26.312623,13.8748304 C26.2564115,14.3587689 25.8455487,14.7362986 25.358832,14.7266607 C24.8478544,14.716179 24.4349549,14.2960073 24.4349549,13.7845036 L24.4349549,13.7845036 L24.4349549,8.93001999 L19.7845125,13.5804623 L19.6961159,13.658421 C19.3276154,13.9442693 18.7903762,13.9182831 18.4525555,13.5804623 C18.0865831,13.2144899 18.0865831,12.6144777 18.4525555,12.2485053 L18.4525555,12.2485053 L23.1360157,7.56504512 L18.3013427,7.56504512 L18.1876721,7.55852521 C17.7028859,7.50255928 17.3264448,7.09334546 17.3360737,6.60468076 C17.3465429,6.0916891 17.7654605,5.68082765 18.2782302,5.68082765 L18.2782302,5.68082765 L25.3605547,5.68082765 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</g>
</svg>`
// const unfullScreenSvg = `<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 unfullScreenSvg = `<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>编组 54备份 2</title>
<g id="3WMS。1、2、3、4、5、6" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-54备份-2">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M26.7638125,1.45454545 L27.0177905,1.4628567 C27.4387521,1.49054436 27.8474996,1.58732758 28.2359531,1.75197014 C28.6866948,1.94029725 29.0896137,2.2117619 29.4389259,2.56107409 C29.7857111,2.90785927 30.0584977,3.31352185 30.2477734,3.76343947 C30.4456009,4.23019115 30.5454545,4.72555866 30.5454545,5.23618754 L30.5454545,5.23618754 L30.5454545,26.7638125 L30.5371433,27.0177905 C30.5094556,27.4387521 30.4126724,27.8474996 30.2480299,28.2359531 C30.0597028,28.6866948 29.7882381,29.0896137 29.4389259,29.4389259 C29.0921407,29.7857111 28.6864782,30.0584977 28.2365605,30.2477734 C27.7698088,30.4456009 27.2744413,30.5454545 26.7638125,30.5454545 L26.7638125,30.5454545 L5.23618754,30.5454545 L4.98220952,30.5371433 C4.56124792,30.5094556 4.15250044,30.4126724 3.7640469,30.2480299 C3.31330516,30.0597028 2.91038628,29.7882381 2.56107409,29.4389259 C2.21428891,29.0921407 1.94150232,28.6864782 1.75222663,28.2365605 C1.55439906,27.7698088 1.45454545,27.2744413 1.45454545,26.7638125 L1.45454545,26.7638125 L1.45454545,5.23618754 L1.4628567,4.98220952 C1.49054436,4.56124792 1.58732758,4.15250044 1.75197014,3.7640469 C1.94029725,3.31330516 2.2117619,2.91038628 2.56107409,2.56107409 C2.90785927,2.21428891 3.31352185,1.94150232 3.76343947,1.75222663 C4.23019115,1.55439906 4.72555866,1.45454545 5.23618754,1.45454545 L5.23618754,1.45454545 L26.7638125,1.45454545 Z M26.7638125,3.33876293 L5.23618754,3.33876293 L5.08796584,3.34447462 C4.10971624,3.42016081 3.33876293,4.23861746 3.33876293,5.23618754 L3.33876293,5.23618754 L3.33876293,26.7638125 L3.34447462,26.9120342 C3.42016081,27.8902838 4.23861746,28.6612371 5.23618754,28.6612371 L5.23618754,28.6612371 L26.7638125,28.6612371 L26.9120342,28.6555254 C27.8902838,28.5798392 28.6612371,27.7613825 28.6612371,26.7638125 L28.6612371,26.7638125 L28.6612371,5.23618754 L28.6555254,5.08796584 C28.5798392,4.10971624 27.7613825,3.33876293 26.7638125,3.33876293 L26.7638125,3.33876293 Z M13.6987866,17.269857 L13.8115418,17.2763362 C14.2922804,17.3319705 14.6640078,17.7391232 14.6640078,18.2350783 L14.6640078,18.2350783 L14.6640078,25.3537223 L14.6574584,25.4671616 C14.6012469,25.9511001 14.1903841,26.3286298 13.7036674,26.3189919 L13.7036674,26.3189919 L13.5959284,26.3105939 C13.1358108,26.2480197 12.7797903,25.8518025 12.7797903,25.3768348 L12.7797903,25.3768348 L12.7797903,20.5190494 L8.12934794,25.1694917 L8.04095127,25.2474504 C7.67245079,25.5332987 7.13521162,25.5073124 6.79739091,25.1694917 C6.43141847,24.8035193 6.43141847,24.2035071 6.79739091,23.8375347 L6.79739091,23.8375347 L11.4844789,19.1540745 L6.64947993,19.1540745 L6.53583534,19.1475529 C6.05108664,19.0915708 5.67369292,18.6822061 5.68093001,18.1924962 C5.69137836,17.6807185 6.11029591,17.269857 6.62306566,17.269857 L6.62306566,17.269857 L13.6987866,17.269857 Z M18.2962333,5.68100813 C18.807211,5.69148979 19.2201105,6.11166149 19.2201105,6.62316519 L19.2201105,6.62316519 L19.2201105,11.4776488 L23.8705528,6.82720649 L23.9589495,6.74924786 C24.32745,6.46339956 24.8646892,6.48938577 25.2025099,6.82720649 C25.5684823,7.19317893 25.5684823,7.79319108 25.2025099,8.15916352 L25.2025099,8.15916352 L20.5190497,12.8426237 L25.3537226,12.8426237 L25.4673933,12.8491436 C25.9521795,12.9051095 26.3286206,13.3143234 26.3189917,13.8029881 C26.3085224,14.3159797 25.8896049,14.7268412 25.3768351,14.7268412 L25.3768351,14.7268412 L18.2945107,14.7268412 L18.1826915,14.7203822 C17.7058457,14.6649267 17.335893,14.2592033 17.335893,13.7682235 L17.335893,13.7682235 L17.335893,6.64627767 L17.3424424,6.53283844 C17.3986538,6.04889994 17.8095166,5.67137018 18.2962333,5.68100813 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</svg>`
export default {
name: 'TechyHeader',
props: ['headTitle'],
data() {
return {
fullScreenSvg,
homeSvg,
unfullScreenSvg,
isFullScreen: false
}
},
@ -43,27 +86,69 @@ export default {
color: white;
/* font-size: 24px; */
font-size: 2vh;
padding: calc(100vw / 1920 * 16) 0;
padding: calc(100vw / 1920 * 32) 0;
line-height: 1;
background: url(./header-bg.svg) 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(100vw / 1920 * 40);
height: calc(100vw / 1920 * 80);
/* background-position: bottom left calc(100vw / 1920 * 40); */
background-position: bottom;
height: calc(100vmin / 1920 * 128);
}
.logo-img {
width: calc(100vw / 1920 * 24);
width: calc(100vmin / 1920 * 48);
}
.techy-header__title {
display: line-block;
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-size: calc(100vmin / 1920 * 42);
line-height: 1.5;
/* font-size: 28px;
line-height: 36px; */
color: #49e1de;
letter-spacing: 0.8px;
position: absolute;
bottom: calc(100vmin / 1920 * 14 );
}
.date {
/* left: 72px; */
left: calc(100vmin / 1920 * 72);
}
.time {
/* right: 128px; */
right: calc(100vmin / 1920 * 186);
}
.fullscreen-btn {
/* height: 32px; */
cursor: pointer;
position: absolute;
/* right: 24px; */
/** techy-body 的内部 padding 值 */
right: calc(100vw / 1920 * 24);
right: calc(100vmin / 1920 * 32);
/* top: 42px; */
top: calc(100vmin / 1920 * 52);
bottom: 0;
}
.fullscreen-btn > span {
display: inline-block;
width: calc(100vmin / 1920 * 52);
height: calc(100vmin / 1920 * 52);
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

View File

@ -1,10 +1,13 @@
<template>
<div id="v3d-outter" ref="v3d-outter">
<V3DApp @3d-loaded="handle3DLoaded" />
<!-- <V3DApp @3d-loaded="handle3DLoaded" /> -->
<!-- 正式内容: -->
<div v-if="showPage" id="v3d-main-content">
<!-- <div v-if="showPage" id="v3d-main-content"> -->
<div v-if="true" id="v3d-main-content">
<techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
<section id="techy-body-part">
<div class="upper-part">
<div class="techy-body-part__left">
<techy-container title="订单完成情况" style="flex: 0;">
<LeftContentOrder />
@ -12,13 +15,8 @@
<techy-container title="公用工程消耗" style="flex:1;">
<LeftContentPublicConsume />
</techy-container>
<techy-container title="设备巡检提示" style="flex: 0;">
<LeftContentEquipmentCheck />
</techy-container>
<techy-container title="现场实时监控" style="flex: 0;">
<LeftContentMonitor />
</techy-container>
</div>
<div class="techy-body-part__middle">
<TechyBox>
<div class="flex">
@ -41,14 +39,12 @@
</div>
</TechyBox>
</div>
<div class="techy-body-part__right">
<techy-container title="实时产量和能耗" style="flex: 0">
<RightContentRealtimeProduction />
</techy-container>
<div class="techy-body-part__right-col-2">
<techy-container title="缺陷分类分析">
<RightContentFaultAnalysis />
</techy-container>
<techy-container title="工序质量分析">
<RightContentQualityAnalysis />
</techy-container>
@ -56,10 +52,32 @@
<techy-container title="产线成品率" style="flex: 0;">
<RightContentProductRate />
</techy-container>
</div>
</div>
<!-- 底部 -->
<div class="bottom-part">
<div style="width: 25%; min-width: 480px; min-height: 240px; height: 20vh;">
<techy-container title="设备巡检提示" style="flex: 0;">
<LeftContentEquipmentCheck />
</techy-container>
</div>
<div style="flex: 1;">
<techy-container title="现场实时监控">
<LeftContentMonitor />
</techy-container>
</div>
<div>
<techy-container title="缺陷分类分析">
<RightContentFaultAnalysis />
</techy-container>
</div>
<div style="width: 25%; min-width: 480px;">
<techy-container title="设备报警提示" style="flex: 0;">
<RightContentAlert />
</techy-container>
</div>
</div>
</section>
</div>
</div>
@ -156,15 +174,31 @@ export default {
#techy-body-part {
flex: 1 1;
padding: calc(100vw / 1920 * 24);
display: flex;
/* gap: 16px; */
gap: calc(100vmin / 1920 * 36);
flex-direction: column;
}
.upper-part {
flex: 1 1;
padding: calc(100vmin / 1920 * 36);
padding-bottom: 0;
display: flex;
justify-content: space-between;
}
.bottom-part {
padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36);
display: flex;
/* gap: 16px; */
gap: calc(100vmin / 1920 * 36);
}
.techy-body-part__left,
.techy-body-part__right {
height: 100%;
width: 30%;
width: 25%;
min-width: 480px;
overflow: hidden;
/* background: rgba(20, 69, 100, 0.425);
@ -172,17 +206,17 @@ export default {
display: flex;
flex-direction: column;
gap: calc(100vw / 1920 * 16);
gap: calc(100vmin / 1920 * 36);
}
.techy-body-part__left {
/* .techy-body-part__left {
width: 35%;
}
} */
.techy-body-part__right-col-2 {
flex: 1;
display: flex;
gap: calc(100vw / 1920 * 16);
gap: calc(100vmin / 1920 * 36);
}
.techy-body-part__middle {

View File

@ -144,8 +144,8 @@ export default {
min-width: 100%;
min-height: 100vh;
// background: linear-gradient(-45deg, rgb(25, 25, 200), rgb(0, 100, 200));
background: url('../../assets/img/choicepart/choicepart-back.png') repeat;
background-size: cover;
background: url('../../assets/img/choicepart/choicepart-back.jpg') repeat;
background-size: 100% 100%;
overflow-x: scroll;
.choicepart-box {
width: 1440px;
@ -161,7 +161,7 @@ export default {
background: url('../../assets/img/choicepart/choice-item-back.png') no-repeat;
background-size: 100% 100%;
// border: 1px dashed #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
// box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
top: 0;
border-radius: 5px;
overflow: hidden;
@ -174,7 +174,7 @@ export default {
.choicepart-item-border {
height: 100%;
border-radius: 5px;
padding: 0 5px;
// padding: 0 5px;
line-height: 32px;
font-size: 28px;
font-weight: lighter;

View File

@ -408,14 +408,14 @@ export default {
border: none;
outline: none;
border-radius: 2px 4px 4px 2px;
background: #31878c88;
background: #31878c45;
/* opacity: 0.29; */
color: white;
position: absolute;
padding: 0.5vh;
width: 5vw;
font-size: 1vh;
line-height: 1.2vh;
font-size: 12px;
line-height: 18px;
top: calc(1vh + 8px);
left: calc(5vw + 32px);
}

View File

@ -56,7 +56,7 @@ const ProgreeBar = {
width: '100%',
borderRadius: '8px',
position: 'relative',
background: '#1E2D45',
background: '#1E2D4590',
// background: 'red',
overflow: 'hidden'
}

View File

@ -11,7 +11,7 @@ export default {}
<style scoped>
.techy-box {
background: transparent;
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.2);
display: inline-block;
height: 100%;
width: 100%;

View File

@ -5,13 +5,15 @@
<div class="part-1">
<div>
<techy-container :title="'质量异常上报'" :icon="qualitySVG">
<div>
<techy-table
:page="1"
:limit="8"
:limit="10"
:show-index="false"
:table-config="qualityTableProps"
:table-data="qualityDatalist"
/>
</div>
</techy-container>
</div>
@ -55,6 +57,7 @@
'擦划伤11',
'擦划伤12'
]"
chart-name="fault-category"
:data-list="[
{
topColor: 'rgba(59, 76, 118, 0.2)',
@ -70,6 +73,7 @@
<techy-box class="" style="padding: 16px;">
<techy-analysis-header>工序缺陷分析</techy-analysis-header>
<new-bar
chart-name="process-fault"
:name-list="['A', 'B', 'C', 'D', 'E', 'F']"
:data-list="[
{
@ -96,6 +100,10 @@
<techy-box class="" style="padding: 16px;">
<techy-analysis-header>产品成品率</techy-analysis-header>
<new-line-stack />
<div class="date-select">
<span></span>
<span class="date-select__active"></span>
</div>
</techy-box>
</div>
</div>
@ -371,6 +379,7 @@ export default {
/* flex: 1 1; */
display: flex;
gap: calc(100vw / 1920 * 16);
flex: 1;
}
.part-1 > div {
@ -389,8 +398,9 @@ export default {
}
.quality-analysis__body__row-1 {
flex: 1 1;
max-height: 25vh;
/* flex: 1 1;
max-height: 25vh; */
height: 25vh;
overflow: hidden;
display: flex;
gap: calc(100vw / 1920 * 16);
@ -450,4 +460,28 @@ export default {
.gap-16 {
gap: calc(100vw / 1920 * 16);
}
.date-select {
position: absolute;
top: calc(100vh / 1920 * 22);
right: calc(100vw / 1440 * 12);
border-radius: 2px;
overflow: hidden;
display: flex;
cursor: pointer;
}
.date-select span {
display: inline-block;
width: 40px;
text-align: center;
font-size: 12px;
line-height: 18px;
color: white;
background-color: #31878c94;
}
.date-select span.date-select__active {
background-color: #42BBB7;
}
</style>

View File

@ -22,7 +22,7 @@ export default {
filters: {
amountFilter: val => {
const sVal = val.toString()
return sVal.length > 7 ? sVal.slice(6) + '...' : sVal
return sVal.length > 7 ? sVal.slice(0, 6) + '...' : sVal
}
},
props: {
@ -79,6 +79,8 @@ export default {
overflow: hidden;
min-width: 32px;
position: relative;
display: flex;
justify-content: center;
}
.placeholder-block-wrapper > div {
@ -176,14 +178,19 @@ export default {
overflow: hidden;
color: white;
display: inline-block;
padding: 0 8px;
padding: 3px 8px;
font-size: 14px;
line-height: 12px;
}
.quality-analysis-bar__amount {
color: white;
color: rgba(255, 255, 255, 0.725);
display: inline-block;
/* min-width: 35%; */
width: 35%;
text-align: left;
padding: 3px 0;
font-size: 14px;
line-height: 12px;
}
</style>

View File

@ -16,5 +16,6 @@ export default {}
height: 100%;
width: 100%;
border-radius: .25rem;
position: relative;
}
</style>

View File

@ -4,18 +4,42 @@
<span style="display: line-block; margin-left: calc(100vw / 1920 * 8); letter-spacing: 3px;">{{ headTitle }}</span>
<span class="fullscreen-btn" @click="handleClick('fullscreen')">
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" />
<span v-if="isFullScreen" v-html="unfullScreenSvg" />
<span v-else v-html="fullScreenSvg" />
</span>
</header>
</template>
<script>
const fullScreenSvg = `<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">
<title>编组 54备份</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-4设备管理" transform="translate(-1864.000000, -162.000000)">
<g id="编组-54备份" transform="translate(1864.000000, 162.000000)">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M26.7638125,1.45454545 L27.0177905,1.4628567 C27.4387521,1.49054436 27.8474996,1.58732758 28.2359531,1.75197014 C28.6866948,1.94029725 29.0896137,2.2117619 29.4389259,2.56107409 C29.7857111,2.90785927 30.0584977,3.31352185 30.2477734,3.76343947 C30.4456009,4.23019115 30.5454545,4.72555866 30.5454545,5.23618754 L30.5454545,5.23618754 L30.5454545,26.7638125 L30.5371433,27.0177905 C30.5094556,27.4387521 30.4126724,27.8474996 30.2480299,28.2359531 C30.0597028,28.6866948 29.7882381,29.0896137 29.4389259,29.4389259 C29.0921407,29.7857111 28.6864782,30.0584977 28.2365605,30.2477734 C27.7698088,30.4456009 27.2744413,30.5454545 26.7638125,30.5454545 L26.7638125,30.5454545 L5.23618754,30.5454545 L4.98220952,30.5371433 C4.56124792,30.5094556 4.15250044,30.4126724 3.7640469,30.2480299 C3.31330516,30.0597028 2.91038628,29.7882381 2.56107409,29.4389259 C2.21428891,29.0921407 1.94150232,28.6864782 1.75222663,28.2365605 C1.55439906,27.7698088 1.45454545,27.2744413 1.45454545,26.7638125 L1.45454545,26.7638125 L1.45454545,5.23618754 L1.4628567,4.98220952 C1.49054436,4.56124792 1.58732758,4.15250044 1.75197014,3.7640469 C1.94029725,3.31330516 2.2117619,2.91038628 2.56107409,2.56107409 C2.90785927,2.21428891 3.31352185,1.94150232 3.76343947,1.75222663 C4.23019115,1.55439906 4.72555866,1.45454545 5.23618754,1.45454545 L5.23618754,1.45454545 L26.7638125,1.45454545 Z M26.7638125,3.33876293 L5.23618754,3.33876293 L5.08796584,3.34447462 C4.10971624,3.42016081 3.33876293,4.23861746 3.33876293,5.23618754 L3.33876293,5.23618754 L3.33876293,26.7638125 L3.34447462,26.9120342 C3.42016081,27.8902838 4.23861746,28.6612371 5.23618754,28.6612371 L5.23618754,28.6612371 L26.7638125,28.6612371 L26.9120342,28.6555254 C27.8902838,28.5798392 28.6612371,27.7613825 28.6612371,26.7638125 L28.6612371,26.7638125 L28.6612371,5.23618754 L28.6555254,5.08796584 C28.5798392,4.10971624 27.7613825,3.33876293 26.7638125,3.33876293 L26.7638125,3.33876293 Z M6.64116798,17.2700375 L6.74890704,17.2784355 C7.20902464,17.3410097 7.56504512,17.7372269 7.56504512,18.2121946 L7.56504512,18.2121946 L7.56504512,23.06998 L12.2154875,18.4195377 L12.3038841,18.341579 C12.6723846,18.0557307 13.2096238,18.0817169 13.5474445,18.4195377 C13.9134169,18.7855101 13.9134169,19.3855223 13.5474445,19.7514947 L13.5474445,19.7514947 L8.86035653,24.4349549 L13.6953555,24.4349549 L13.8090001,24.4414765 C14.2937488,24.4974586 14.6711425,24.9068233 14.6639054,25.3965331 C14.6534571,25.9083109 14.2345395,26.3191724 13.7217698,26.3191724 L13.7217698,26.3191724 L6.64604887,26.3191724 L6.53329365,26.3126932 C6.05255502,26.2570589 5.68082765,25.8499062 5.68082765,25.3539511 L5.68082765,25.3539511 L5.68082765,18.2353071 L5.68737703,18.1218678 C5.74358847,17.6379293 6.15445128,17.2603996 6.64116798,17.2700375 L6.64116798,17.2700375 Z M25.3605547,5.68082765 L25.4723738,5.68728667 C25.9492196,5.74274215 26.3191724,6.14846553 26.3191724,6.6394453 L26.3191724,6.6394453 L26.3191724,13.7613912 L26.312623,13.8748304 C26.2564115,14.3587689 25.8455487,14.7362986 25.358832,14.7266607 C24.8478544,14.716179 24.4349549,14.2960073 24.4349549,13.7845036 L24.4349549,13.7845036 L24.4349549,8.93001999 L19.7845125,13.5804623 L19.6961159,13.658421 C19.3276154,13.9442693 18.7903762,13.9182831 18.4525555,13.5804623 C18.0865831,13.2144899 18.0865831,12.6144777 18.4525555,12.2485053 L18.4525555,12.2485053 L23.1360157,7.56504512 L18.3013427,7.56504512 L18.1876721,7.55852521 C17.7028859,7.50255928 17.3264448,7.09334546 17.3360737,6.60468076 C17.3465429,6.0916891 17.7654605,5.68082765 18.2782302,5.68082765 L18.2782302,5.68082765 L25.3605547,5.68082765 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</g>
</svg>`
const unfullScreenSvg = `<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">
<title>编组 54备份 2</title>
<g id="3WMS。1、2、3、4、5、6" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-54备份-2">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
<path d="M26.7638125,1.45454545 L27.0177905,1.4628567 C27.4387521,1.49054436 27.8474996,1.58732758 28.2359531,1.75197014 C28.6866948,1.94029725 29.0896137,2.2117619 29.4389259,2.56107409 C29.7857111,2.90785927 30.0584977,3.31352185 30.2477734,3.76343947 C30.4456009,4.23019115 30.5454545,4.72555866 30.5454545,5.23618754 L30.5454545,5.23618754 L30.5454545,26.7638125 L30.5371433,27.0177905 C30.5094556,27.4387521 30.4126724,27.8474996 30.2480299,28.2359531 C30.0597028,28.6866948 29.7882381,29.0896137 29.4389259,29.4389259 C29.0921407,29.7857111 28.6864782,30.0584977 28.2365605,30.2477734 C27.7698088,30.4456009 27.2744413,30.5454545 26.7638125,30.5454545 L26.7638125,30.5454545 L5.23618754,30.5454545 L4.98220952,30.5371433 C4.56124792,30.5094556 4.15250044,30.4126724 3.7640469,30.2480299 C3.31330516,30.0597028 2.91038628,29.7882381 2.56107409,29.4389259 C2.21428891,29.0921407 1.94150232,28.6864782 1.75222663,28.2365605 C1.55439906,27.7698088 1.45454545,27.2744413 1.45454545,26.7638125 L1.45454545,26.7638125 L1.45454545,5.23618754 L1.4628567,4.98220952 C1.49054436,4.56124792 1.58732758,4.15250044 1.75197014,3.7640469 C1.94029725,3.31330516 2.2117619,2.91038628 2.56107409,2.56107409 C2.90785927,2.21428891 3.31352185,1.94150232 3.76343947,1.75222663 C4.23019115,1.55439906 4.72555866,1.45454545 5.23618754,1.45454545 L5.23618754,1.45454545 L26.7638125,1.45454545 Z M26.7638125,3.33876293 L5.23618754,3.33876293 L5.08796584,3.34447462 C4.10971624,3.42016081 3.33876293,4.23861746 3.33876293,5.23618754 L3.33876293,5.23618754 L3.33876293,26.7638125 L3.34447462,26.9120342 C3.42016081,27.8902838 4.23861746,28.6612371 5.23618754,28.6612371 L5.23618754,28.6612371 L26.7638125,28.6612371 L26.9120342,28.6555254 C27.8902838,28.5798392 28.6612371,27.7613825 28.6612371,26.7638125 L28.6612371,26.7638125 L28.6612371,5.23618754 L28.6555254,5.08796584 C28.5798392,4.10971624 27.7613825,3.33876293 26.7638125,3.33876293 L26.7638125,3.33876293 Z M13.6987866,17.269857 L13.8115418,17.2763362 C14.2922804,17.3319705 14.6640078,17.7391232 14.6640078,18.2350783 L14.6640078,18.2350783 L14.6640078,25.3537223 L14.6574584,25.4671616 C14.6012469,25.9511001 14.1903841,26.3286298 13.7036674,26.3189919 L13.7036674,26.3189919 L13.5959284,26.3105939 C13.1358108,26.2480197 12.7797903,25.8518025 12.7797903,25.3768348 L12.7797903,25.3768348 L12.7797903,20.5190494 L8.12934794,25.1694917 L8.04095127,25.2474504 C7.67245079,25.5332987 7.13521162,25.5073124 6.79739091,25.1694917 C6.43141847,24.8035193 6.43141847,24.2035071 6.79739091,23.8375347 L6.79739091,23.8375347 L11.4844789,19.1540745 L6.64947993,19.1540745 L6.53583534,19.1475529 C6.05108664,19.0915708 5.67369292,18.6822061 5.68093001,18.1924962 C5.69137836,17.6807185 6.11029591,17.269857 6.62306566,17.269857 L6.62306566,17.269857 L13.6987866,17.269857 Z M18.2962333,5.68100813 C18.807211,5.69148979 19.2201105,6.11166149 19.2201105,6.62316519 L19.2201105,6.62316519 L19.2201105,11.4776488 L23.8705528,6.82720649 L23.9589495,6.74924786 C24.32745,6.46339956 24.8646892,6.48938577 25.2025099,6.82720649 C25.5684823,7.19317893 25.5684823,7.79319108 25.2025099,8.15916352 L25.2025099,8.15916352 L20.5190497,12.8426237 L25.3537226,12.8426237 L25.4673933,12.8491436 C25.9521795,12.9051095 26.3286206,13.3143234 26.3189917,13.8029881 C26.3085224,14.3159797 25.8896049,14.7268412 25.3768351,14.7268412 L25.3768351,14.7268412 L18.2945107,14.7268412 L18.1826915,14.7203822 C17.7058457,14.6649267 17.335893,14.2592033 17.335893,13.7682235 L17.335893,13.7682235 L17.335893,6.64627767 L17.3424424,6.53283844 C17.3986538,6.04889994 17.8095166,5.67137018 18.2962333,5.68100813 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</svg>`
export default {
name: 'TechyHeader',
props: ['headTitle'],
data() {
return {
fullScreenSvg,
unfullScreenSvg,
isFullScreen: false
}
},
@ -42,7 +66,7 @@ export default {
font-size: 2vh;
padding: calc(100vw / 1920 * 16) 0;
line-height: 1;
background: url(./header-bg.svg) no-repeat;
background: url(./header-new.png) no-repeat;
/** 背景图片好像左右不对称 : */
/* background-position: bottom left 40px; */
/* background-size: cover; */
@ -56,6 +80,8 @@ export default {
}
.fullscreen-btn {
width: 32px;
height: 32px;
cursor: pointer;
position: absolute;
/* right: 24px; */

View File

@ -88,7 +88,7 @@ export default {
title: {
textAlign: 'center',
left: '59%',
top: '32%',
top: '35%',
text: '33039',
textStyle: {
color: '#fff',
@ -103,7 +103,7 @@ export default {
}
},
legend: {
top: '10%',
top: '20%',
bottom: '25%',
left: 0,
orient: 'vertical',

View File

@ -1,16 +1,24 @@
<template>
<div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: calc(100% - 36px)" />
<div
ref="chartContainer"
class="chartContainer"
:class="bindClass"
style="position: relative; width: 100%; height: calc(100% - 36px)"
/>
</template>
<script>
import echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import echarts from 'echarts' // echarts theme
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
chartName: {
type: String,
default: ''
},
xlabelFontSize: {
type: Number,
default: 12
@ -34,6 +42,14 @@ export default {
series: []
}
},
computed: {
bindClass() {
return {
'fault-category-chart': this.chartName === 'fault-category',
'process-fault-chart': this.chartName === 'process-fault'
}
}
},
mounted() {
if (this.dataList.length > 1) {
this.series = [
@ -125,9 +141,9 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor },
{ offset: 1, color: this.dataList[0].bottomColor }
]),
borderWidth: 1,
borderColor: this.dataList[0].bottomColor + '66' // +
])
// borderWidth: 1,
// borderColor: this.dataList[0].bottomColor + '66' // +
},
data: this.dataList[0].data
// backgroundStyle: {
@ -154,10 +170,11 @@ export default {
])
},
label: {
color: 'rgba(119, 255, 242, 1)',
color: this.chartName === 'process-fault' ? 'rgba(119, 255, 242, 1)' : '#31a2ff',
show: true,
offset: [0, 10],
position: 'top'
position: 'top',
vertialAlign: 'bottom'
},
data: this.dataList[0].data
},
@ -220,7 +237,8 @@ export default {
axisLine: {
lineStyle: {
type: 'solid',
color: 'rgba(119, 255, 242, 0.6)', // 线
color: this.dataList[0].bottomColor,
// color: 'rgba(119, 255, 242, 0.6)', // 线
width: '1' // 线
}
},
@ -249,5 +267,35 @@ export default {
<style scoped>
.chartContainer >>> div {
width: 100% !important;
height: 100% !important;
/* position: relative !important; */
}
.fault-category-chart >>> div::before {
/* .fault-category-chart::before { */
content: '';
position: absolute;
/* bottom: calc(100vh/1920 * 80);
left: calc(100vw/1920 * 48); */
/* bottom: calc(10% + 100vh/1920 * 28); */
bottom: 25px;
left: 9%;
height: 52px;
width: 90%;
background: linear-gradient(to top, #31a2ff6d, transparent);
transform: skew(-45deg);
z-index: 0;
}
.process-fault-chart >>> div::before {
/* .process-fault-chart::before { */
content: '';
position: absolute;
bottom: 26px;
left: 10%;
height: 48px;
width: 90%;
background: linear-gradient(to top, #49fbd789, transparent);
transform: skew(-45deg);
z-index: 0;
}
</style>

View File

@ -90,9 +90,26 @@ export default {
name: 'A1下片机',
type: 'line',
symbol: 'none',
areaStyle: {
color: 'rgba(50,145,152,0.5)'
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FB418C' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
},
emphasis: {
focus: 'series'
@ -105,7 +122,25 @@ export default {
symbol: 'none',
areaStyle: {
color: 'rgba(50,145,152,0.5)'
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#DDB112' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
},
emphasis: {
focus: 'series'
@ -118,7 +153,25 @@ export default {
symbol: 'none',
areaStyle: {
color: 'rgba(50,145,152,0.5)'
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#1A99FF' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
},
emphasis: {
focus: 'series'
@ -131,7 +184,25 @@ export default {
symbol: 'none',
areaStyle: {
color: 'rgba(50,145,152,0.5)'
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#A691FF' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
},
emphasis: {
focus: 'series'
@ -148,7 +219,25 @@ export default {
position: 'top'
},
areaStyle: {
color: 'rgba(50,145,152,0.5)'
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#49FBD6' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
},
emphasis: {
focus: 'series'

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

View File

@ -31,19 +31,19 @@ const PriorityComponent = {
},
methods: {},
render: function(h) {
return h('span', { style: { display: 'inline-block', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText)
return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText)
}
}
console.log('is component?', PriorityComponent)
export const qualityTableProps = [
{ label: '工序名称', prop: 'wsName' },
{ label: '所属产线', prop: 'pl' },
{ label: '异常内容', prop: 'content' },
{ label: '报告人', prop: 'creator' },
{ label: '工序名称', width: 80, prop: 'wsName' },
{ label: '所属产线', width: 80, prop: 'pl' },
{ label: '异常内容', align: 'center', prop: 'content' },
{ label: '报告人', width: 80, prop: 'creator' },
{ label: '时间', prop: 'time' },
{ label: '优先级', prop: 'priority', subcomponent: PriorityComponent }
{ label: '优先级', width: 80, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
]
export const qualityDatalist = [
@ -88,8 +88,8 @@ const StatusComponent = {
}
},
render: function(h) {
return h('span', { style: { display: 'flex', alignItems: 'center', color: '#fff' }}, [
h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 5px 2px ' + this.statusColor, marginRight: '6px' }}, ''),
return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [
h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' }}, ''),
h('span', this.statusText)
])
}
@ -101,9 +101,9 @@ export const qualityExceptionTableProps = [
{ label: '异常内容', prop: 'content' },
{ label: '发现人', prop: 'creator' },
{ label: '时间', prop: 'time' },
{ label: '优先级', prop: 'priority', subcomponent: PriorityComponent },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
{ label: '处理人', prop: 'charger' },
{ label: '完成情况', prop: 'status', subcomponent: StatusComponent }
{ label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent }
]
export const qualityExceptionDatalist = [

View File

@ -126,6 +126,7 @@
<script>
import { downLoadBGP } from '@/api/user'
import { mapGetters } from 'vuex'
import Cookie from 'js-cookie'
export default {
name: 'Login',
@ -174,6 +175,8 @@ export default {
username,
password
}
Cookie.set('account', username)
Cookie.set('password', password)
this.$nextTick(() => {
this.handleLogin()
})