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

zjl #1

Merged
juzi merged 2 commits from zjl into master 2022-11-07 10:44:37 +08:00
Conversation 0 Commits 2 Files Changed 4 +2153 -2256
26 changed files with 2153 additions and 2256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 89420b4607 - Show all commits

1
.gitignore vendored
View File

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

BIN
src/assets/img/choicepart/choicepart-back.jpg Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 301 KiB

After

Width:  |  Height:  |  Size: 301 KiB

BIN
src/assets/img/choicepart/choicepart-back.png.bak Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 MiB

After

Width:  |  Height:  |  Size: 3.5 MiB

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

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

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

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

3701
src/router/index.js
View File

File diff suppressed because it is too large Load Diff

7
src/views/3DOverview/components/LeftContentEquipmentCheck.vue
View File

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

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

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

7
src/views/3DOverview/components/TechyContainer.vue
View File

@ -72,9 +72,10 @@ export default {
padding: calc(100vw / 1920 * 22); padding: calc(100vw / 1920 * 22);
width: 100%; width: 100%;
height: 100%; height: 100%;
box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15); box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
background: rgba(20, 69, 100, 0.425); /* background: rgba(20, 69, 100, 0.425); */
backdrop-filter: blur(2px); background: rgba(6, 16, 39, 0.3);
backdrop-filter: blur(1px);
} }
.line { .line {

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

@ -1,22 +1,65 @@
<template> <template>
<header class="techy-header"> <header class="techy-header">
<img class="logo-img" src="./logo.png" alt="cnbm"> <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"> <div class="date">2022.10.14</div>
<svg-icon icon-class="home" style="color: #52fff1; margin-right: 16px;" @click="handleClick('home')" /> <div class="time">20:12:24</div>
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" @click="handleClick('fullscreen')" />
<svg-icon v-else icon-class="fullScreenView" @click="handleClick('fullscreen')" /> <div class="fullscreen-btn">
</span> <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> </header>
</template> </template>
<script> <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 { export default {
name: 'TechyHeader', name: 'TechyHeader',
props: ['headTitle'], props: ['headTitle'],
data() { data() {
return { return {
fullScreenSvg,
homeSvg,
unfullScreenSvg,
isFullScreen: false isFullScreen: false
} }
}, },
@ -43,27 +86,69 @@ export default {
color: white; color: white;
/* font-size: 24px; */ /* font-size: 24px; */
font-size: 2vh; font-size: 2vh;
padding: calc(100vw / 1920 * 16) 0; padding: calc(100vw / 1920 * 32) 0;
line-height: 1; line-height: 1;
background: url(./header-bg.svg) no-repeat; background: url(./header-longer.png) no-repeat;
/** 背景图片好像左右不对称 : */ /** 背景图片好像左右不对称 : */
/* background-position: bottom left 40px; */ /* background-position: bottom left 40px; */
/* background-size: cover; */ /* background-size: cover; */
background-size: 100% 100%; background-size: 100% 100%;
background-position: bottom left calc(100vw / 1920 * 40); /* background-position: bottom left calc(100vw / 1920 * 40); */
height: calc(100vw / 1920 * 80); background-position: bottom;
height: calc(100vmin / 1920 * 128);
} }
.logo-img { .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 { .fullscreen-btn {
/* height: 32px; */
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
/* right: 24px; */ /* right: 24px; */
/** techy-body 的内部 padding 值 */ /** techy-body 的内部 padding 值 */
right: calc(100vw / 1920 * 24); right: calc(100vmin / 1920 * 32);
/* top: 42px; */
top: calc(100vmin / 1920 * 52);
bottom: 0; bottom: 0;
} }
.fullscreen-btn > span {
display: inline-block;
width: calc(100vmin / 1920 * 52);
height: calc(100vmin / 1920 * 52);
}
</style> </style>

BIN
src/views/3DOverview/components/header-longer.png Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 100 KiB

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

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

8
src/views/ChoicePart/index.vue
View File

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

6
src/views/EquipmentManager/HomePage.vue
View File

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

2
src/views/EquipmentManager/components/EquipmentAnalysisBox.vue
View File

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

2
src/views/EquipmentManager/components/TechyBox.vue
View File

@ -11,7 +11,7 @@ export default {}
<style scoped> <style scoped>
.techy-box { .techy-box {
background: transparent; 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; display: inline-block;
height: 100%; height: 100%;
width: 100%; width: 100%;

52
src/views/QualityManager/HomePage.vue
View File

@ -5,13 +5,15 @@
<div class="part-1"> <div class="part-1">
<div> <div>
<techy-container :title="'质量异常上报'" :icon="qualitySVG"> <techy-container :title="'质量异常上报'" :icon="qualitySVG">
<techy-table <div>
:page="1" <techy-table
:limit="8" :page="1"
:show-index="false" :limit="10"
:table-config="qualityTableProps" :show-index="false"
:table-data="qualityDatalist" :table-config="qualityTableProps"
/> :table-data="qualityDatalist"
/>
</div>
</techy-container> </techy-container>
</div> </div>
@ -55,6 +57,7 @@
'擦划伤11', '擦划伤11',
'擦划伤12' '擦划伤12'
]" ]"
chart-name="fault-category"
:data-list="[ :data-list="[
{ {
topColor: 'rgba(59, 76, 118, 0.2)', topColor: 'rgba(59, 76, 118, 0.2)',
@ -70,6 +73,7 @@
<techy-box class="" style="padding: 16px;"> <techy-box class="" style="padding: 16px;">
<techy-analysis-header>工序缺陷分析</techy-analysis-header> <techy-analysis-header>工序缺陷分析</techy-analysis-header>
<new-bar <new-bar
chart-name="process-fault"
:name-list="['A', 'B', 'C', 'D', 'E', 'F']" :name-list="['A', 'B', 'C', 'D', 'E', 'F']"
:data-list="[ :data-list="[
{ {
@ -96,6 +100,10 @@
<techy-box class="" style="padding: 16px;"> <techy-box class="" style="padding: 16px;">
<techy-analysis-header>产品成品率</techy-analysis-header> <techy-analysis-header>产品成品率</techy-analysis-header>
<new-line-stack /> <new-line-stack />
<div class="date-select">
<span>日</span>
<span class="date-select__active">月</span>
</div>
</techy-box> </techy-box>
</div> </div>
</div> </div>
@ -371,6 +379,7 @@ export default {
/* flex: 1 1; */ /* flex: 1 1; */
display: flex; display: flex;
gap: calc(100vw / 1920 * 16); gap: calc(100vw / 1920 * 16);
flex: 1;
} }
.part-1 > div { .part-1 > div {
@ -389,8 +398,9 @@ export default {
} }
.quality-analysis__body__row-1 { .quality-analysis__body__row-1 {
flex: 1 1; /* flex: 1 1;
max-height: 25vh; max-height: 25vh; */
height: 25vh;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
gap: calc(100vw / 1920 * 16); gap: calc(100vw / 1920 * 16);
@ -450,4 +460,28 @@ export default {
.gap-16 { .gap-16 {
gap: calc(100vw / 1920 * 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> </style>

13
src/views/QualityManager/components/TechyAnalysisBar.vue
View File

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

1
src/views/QualityManager/components/TechyBox.vue
View File

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

32
src/views/QualityManager/components/TechyHeader.vue
View File

@ -4,18 +4,42 @@
<span style="display: line-block; margin-left: calc(100vw / 1920 * 8); letter-spacing: 3px;">{{ headTitle }}</span> <span style="display: line-block; margin-left: calc(100vw / 1920 * 8); letter-spacing: 3px;">{{ headTitle }}</span>
<span class="fullscreen-btn" @click="handleClick('fullscreen')"> <span class="fullscreen-btn" @click="handleClick('fullscreen')">
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" /> <span v-if="isFullScreen" v-html="unfullScreenSvg" />
<svg-icon v-else icon-class="fullScreenView" /> <span v-else v-html="fullScreenSvg" />
</span> </span>
</header> </header>
</template> </template>
<script> <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 { export default {
name: 'TechyHeader', name: 'TechyHeader',
props: ['headTitle'], props: ['headTitle'],
data() { data() {
return { return {
fullScreenSvg,
unfullScreenSvg,
isFullScreen: false isFullScreen: false
} }
}, },
@ -42,7 +66,7 @@ export default {
font-size: 2vh; font-size: 2vh;
padding: calc(100vw / 1920 * 16) 0; padding: calc(100vw / 1920 * 16) 0;
line-height: 1; line-height: 1;
background: url(./header-bg.svg) no-repeat; background: url(./header-new.png) no-repeat;
/** 背景图片好像左右不对称 : */ /** 背景图片好像左右不对称 : */
/* background-position: bottom left 40px; */ /* background-position: bottom left 40px; */
/* background-size: cover; */ /* background-size: cover; */
@ -56,6 +80,8 @@ export default {
} }
.fullscreen-btn { .fullscreen-btn {
width: 32px;
height: 32px;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
/* right: 24px; */ /* right: 24px; */

4
src/views/QualityManager/components/charts/PlFaultAnalysisPieChart.vue
View File

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

66
src/views/QualityManager/components/charts/newBar.vue
View File

@ -1,16 +1,24 @@
<template> <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> </template>
<script> <script>
import echarts from 'echarts' import echarts from 'echarts' // echarts theme
import 'echarts/theme/macarons' // echarts theme
import resize from '@/views/OperationalOverview/components/mixins/resize' import resize from '@/views/OperationalOverview/components/mixins/resize'
export default { export default {
name: 'OverviewBar', name: 'OverviewBar',
mixins: [resize], mixins: [resize],
props: { props: {
chartName: {
type: String,
default: ''
},
xlabelFontSize: { xlabelFontSize: {
type: Number, type: Number,
default: 12 default: 12
@ -34,6 +42,14 @@ export default {
series: [] series: []
} }
}, },
computed: {
bindClass() {
return {
'fault-category-chart': this.chartName === 'fault-category',
'process-fault-chart': this.chartName === 'process-fault'
}
}
},
mounted() { mounted() {
if (this.dataList.length > 1) { if (this.dataList.length > 1) {
this.series = [ this.series = [
@ -125,9 +141,9 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor }, { offset: 0, color: this.dataList[0].topColor },
{ offset: 1, color: this.dataList[0].bottomColor } { offset: 1, color: this.dataList[0].bottomColor }
]), ])
borderWidth: 1, // borderWidth: 1,
borderColor: this.dataList[0].bottomColor + '66' // 边框颜色+透明度 // borderColor: this.dataList[0].bottomColor + '66' // 边框颜色+透明度
}, },
data: this.dataList[0].data data: this.dataList[0].data
// backgroundStyle: { // backgroundStyle: {
@ -154,10 +170,11 @@ export default {
]) ])
}, },
label: { label: {
color: 'rgba(119, 255, 242, 1)', color: this.chartName === 'process-fault' ? 'rgba(119, 255, 242, 1)' : '#31a2ff',
show: true, show: true,
offset: [0, 10], offset: [0, 10],
position: 'top' position: 'top',
vertialAlign: 'bottom'
}, },
data: this.dataList[0].data data: this.dataList[0].data
}, },
@ -220,7 +237,8 @@ export default {
axisLine: { axisLine: {
lineStyle: { lineStyle: {
type: 'solid', type: 'solid',
color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色 color: this.dataList[0].bottomColor,
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
width: '1' // 坐标线的宽度 width: '1' // 坐标线的宽度
} }
}, },
@ -249,5 +267,35 @@ export default {
<style scoped> <style scoped>
.chartContainer >>> div { .chartContainer >>> div {
width: 100% !important; 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> </style>

101
src/views/QualityManager/components/charts/newLineStack.vue
View File

@ -90,9 +90,26 @@ export default {
name: 'A1下片机', name: 'A1下片机',
type: 'line', type: 'line',
symbol: 'none', symbol: 'none',
areaStyle: { 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: { emphasis: {
focus: 'series' focus: 'series'
@ -105,7 +122,25 @@ export default {
symbol: 'none', symbol: 'none',
areaStyle: { 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: { emphasis: {
focus: 'series' focus: 'series'
@ -118,7 +153,25 @@ export default {
symbol: 'none', symbol: 'none',
areaStyle: { 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: { emphasis: {
focus: 'series' focus: 'series'
@ -131,7 +184,25 @@ export default {
symbol: 'none', symbol: 'none',
areaStyle: { 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: { emphasis: {
focus: 'series' focus: 'series'
@ -148,7 +219,25 @@ export default {
position: 'top' position: 'top'
}, },
areaStyle: { 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: { emphasis: {
focus: 'series' focus: 'series'

BIN
src/views/QualityManager/components/header-new.png Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 86 KiB

20
src/views/QualityManager/mockData.js
View File

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

3
src/views/login/index.vue
View File

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