Compare commits
No commits in common. "bbdf0a75f032c4503e7a2f7a708045a5ab943e07" and "ebae332674018e50ed6c69a48ab77afd467c0d6d" have entirely different histories.
bbdf0a75f0
...
ebae332674
8
.env.dev
@ -1,8 +1,8 @@
|
|||||||
###
|
###
|
||||||
# @Author: Do not edit
|
# @Author: Do not edit
|
||||||
# @Date: 2023-08-29 09:40:39
|
# @Date: 2023-08-29 09:40:39
|
||||||
# @LastEditTime: 2023-11-16 08:52:02
|
# @LastEditTime: 2023-11-11 20:50:30
|
||||||
# @LastEditors: zhp
|
# @LastEditors: DY
|
||||||
# @Description:
|
# @Description:
|
||||||
###
|
###
|
||||||
# 开发环境配置
|
# 开发环境配置
|
||||||
@ -13,12 +13,12 @@ VUE_APP_TITLE = MES系统
|
|||||||
|
|
||||||
# 芋道管理系统/开发环境
|
# 芋道管理系统/开发环境
|
||||||
# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
|
# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
|
||||||
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.4.173:48080'
|
# VUE_APP_BASE_API = 'http://192.168.4.173:48080'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
|
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48080'
|
# VUE_APP_BASE_API = 'http://192.168.1.49:48080'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48080'
|
# VUE_APP_BASE_API = 'http://192.168.1.8:48080'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.1.56:48080'
|
# VUE_APP_BASE_API = 'http://192.168.1.56:48080'
|
||||||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
||||||
# 路由懒加载
|
# 路由懒加载
|
||||||
|
@ -1,68 +0,0 @@
|
|||||||
/*
|
|
||||||
* @Author: Do not edit
|
|
||||||
* @Date: 2023-10-21 11:50:46
|
|
||||||
* @LastEditTime: 2023-11-15 15:56:14
|
|
||||||
* @LastEditors: DY
|
|
||||||
* @Description:
|
|
||||||
*/
|
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 创建原料
|
|
||||||
export function createHotMaterial(data) {
|
|
||||||
return request({
|
|
||||||
url: '/base/core-hot-material/create',
|
|
||||||
method: 'post',
|
|
||||||
data: data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新原料
|
|
||||||
export function updateHotMaterial(data) {
|
|
||||||
return request({
|
|
||||||
url: '/base/core-hot-material/update',
|
|
||||||
method: 'put',
|
|
||||||
data: data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除原料
|
|
||||||
export function deleteHotMaterial(id) {
|
|
||||||
return request({
|
|
||||||
url: '/base/core-hot-material/delete?id=' + id,
|
|
||||||
method: 'delete'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得原料
|
|
||||||
export function getHotMaterial(id) {
|
|
||||||
return request({
|
|
||||||
url: '/base/core-hot-material/get?id=' + id,
|
|
||||||
method: 'get'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得原料code
|
|
||||||
export function getCode() {
|
|
||||||
return request({
|
|
||||||
url: '/base/core-hot-material/getCode',
|
|
||||||
method: 'get'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得原料分页
|
|
||||||
export function getHotMaterialPage(query) {
|
|
||||||
return request({
|
|
||||||
url: '/base/core-hot-material/page',
|
|
||||||
method: 'get',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获得所有列表
|
|
||||||
export function getHotMaterialList(query) {
|
|
||||||
return request({
|
|
||||||
url: '/base/core-hot-material/listAll',
|
|
||||||
method: 'get',
|
|
||||||
params: query
|
|
||||||
})
|
|
||||||
}
|
|
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: Do not edit
|
* @Author: Do not edit
|
||||||
* @Date: 2023-10-21 11:50:46
|
* @Date: 2023-10-21 11:50:46
|
||||||
* @LastEditTime: 2023-11-15 17:19:19
|
* @LastEditTime: 2023-11-06 17:49:42
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
@ -67,14 +67,6 @@ export function getCoreWOList(query) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据工单id获得所有列表
|
|
||||||
export function getCoreWOListById(ids) {
|
|
||||||
return request({
|
|
||||||
url: '/base/core-work-order/list?ids='+ ids ,
|
|
||||||
method: 'get'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建工单预使用原料
|
// 创建工单预使用原料
|
||||||
export function createCoreWOMa(data) {
|
export function createCoreWOMa(data) {
|
||||||
return request({
|
return request({
|
||||||
@ -143,13 +135,4 @@ export function statusChange(data) {
|
|||||||
method: 'post',
|
method: 'post',
|
||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 创建分配产量
|
|
||||||
export function createConCoreWOr(data) {
|
|
||||||
return request({
|
|
||||||
url: '/base/core-order-con-work-order/create',
|
|
||||||
method: 'post',
|
|
||||||
data: data
|
|
||||||
})
|
|
||||||
}
|
|
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: Do not edit
|
* @Author: Do not edit
|
||||||
* @Date: 2023-11-08 15:56:52
|
* @Date: 2023-11-08 15:56:52
|
||||||
* @LastEditTime: 2023-11-13 09:15:17
|
* @LastEditTime: 2023-11-11 19:52:54
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: Do not edit
|
* @Author: Do not edit
|
||||||
* @Date: 2023-11-08 15:56:52
|
* @Date: 2023-11-08 15:56:52
|
||||||
* @LastEditTime: 2023-11-13 08:52:12
|
* @LastEditTime: 2023-11-10 09:04:50
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
@ -58,10 +58,10 @@ export function getCheckDetPage(query) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获得设备巡检所有列表
|
// 获得x巡检所有列表
|
||||||
export function getcheckList(query) {
|
export function getcheckList(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/base/equipment-check/listAll',
|
url: '/base/equipment-check/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2023-11-07 14:10:18
|
* @Date: 2023-11-07 14:10:18
|
||||||
* @LastEditTime: 2023-11-14 14:46:04
|
* @LastEditTime: 2023-11-07 16:29:55
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
|
@ -1,12 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<title>exit</title>
|
|
||||||
<g id="7能源管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="系统退出" transform="translate(-1783.000000, -56.000000)" fill="#000000" fill-rule="nonzero">
|
|
||||||
<g id="exit" transform="translate(1783.000000, 56.000000)">
|
|
||||||
<rect id="矩形" opacity="0" x="0" y="0" width="16" height="16"></rect>
|
|
||||||
<path d="M12.0719591,1.5140625 C12.3862828,1.52338993 12.6391466,1.78322084 12.6391466,2.1015625 C12.6391466,2.41990416 12.3862828,2.67973507 12.0690068,2.68910609 L3.64375,2.6890625 L3.54375,2.7890625 L3.54375,13.26875 L3.64375,13.36875 L12.0690068,13.3687064 C12.3862828,13.3780774 12.6391466,13.6379083 12.6391466,13.95625 C12.6391466,14.2745917 12.3862828,14.5344226 12.0690068,14.5437936 L3.0890625,14.5437936 C2.69272847,14.5437936 2.36875,14.2197715 2.36875,13.8234375 L2.36875,2.234375 C2.36875,1.83804097 2.69272847,1.5140625 3.0890625,1.5140625 Z M10.8144607,5.05039818 C11.0425957,4.82226311 11.4167793,4.82226311 11.6449143,5.05039818 L14.2074143,7.61289818 C14.4357222,7.84120602 14.4353075,8.21522958 14.2060583,8.44314597 L11.6433518,11.0058518 C11.4152168,11.2339869 11.0410332,11.2339869 10.8128982,11.0058518 C10.5847631,10.7777168 10.5847631,10.4035332 10.8128982,10.1753982 L12.1519607,8.83633568 L12.08125,8.665625 L7.1640625,8.665625 C6.81403169,8.665625 6.5265625,8.37857547 6.5265625,8.028125 C6.5265625,7.67809419 6.81361203,7.390625 7.1640625,7.390625 L12.0828125,7.390625 L12.1535232,7.21991432 L10.8144607,5.88085182 C10.5863256,5.65271675 10.5863256,5.27853325 10.8144607,5.05039818 Z" id="形状结合"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 1.8 KiB |
@ -1,20 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<title>编组 17</title>
|
|
||||||
<g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.695141">
|
|
||||||
<g id="最新参考" transform="translate(-1780.000000, -57.000000)" fill="#000000" fill-rule="nonzero">
|
|
||||||
<g id="编组-4" transform="translate(1772.000000, 48.000000)">
|
|
||||||
<g id="编组-17" transform="translate(8.000000, 9.000000)">
|
|
||||||
<rect id="矩形备份-2" opacity="0" x="0" y="0" width="16" height="16"></rect>
|
|
||||||
<g id="文档" transform="translate(2.436519, 1.472460)">
|
|
||||||
<path d="M9.61879642,0.990942446 C9.83682412,0.990942446 10.0548518,1.18867806 10.0548518,1.38641367 L10.0548518,11.6686655 C10.0548518,11.8664011 9.83682412,12.0641367 9.61879642,12.0641367 L3.60123204,12.0641367 L1.02850524,9.69130935 L1.02850524,1.38641367 C1.02850524,1.18867806 1.24653294,0.990942446 1.46456063,0.990942446 L9.61879642,0.990942446 M9.61879642,0.2 L1.50816617,0.2 C0.810477546,0.2 0.2,0.753659712 0.2,1.38641367 L0.2,10.0076863 L3.25238773,12.8550791 L9.61879642,12.8550791 C10.316485,12.8550791 10.9269626,12.3014194 10.9269626,11.6686655 L10.9269626,1.38641367 C10.9269626,0.753659712 10.316485,0.2 9.61879642,0.2 Z" id="形状"></path>
|
|
||||||
<path d="M9.61879642,0 C10.4228194,0 11.1269626,0.638607809 11.1269626,1.38641367 L11.1269626,11.6686655 C11.1269626,12.4164713 10.4228194,13.0550791 9.61879642,13.0550791 L3.25238773,13.0550791 L3.11596256,13.0013261 L0.0635748259,10.1539333 L0,10.0076863 L0,1.38641367 C0,0.638607809 0.704143212,0 1.50816617,0 L9.61879642,0 Z M9.61879642,0.4 L1.50816617,0.4 C0.91681188,0.4 0.4,0.868711615 0.4,1.38641367 L0.4,9.921 L3.331,12.6550791 L9.61879642,12.6550791 C10.1707271,12.6550791 10.657723,12.2467792 10.7202028,11.7714283 L10.7269626,11.6686655 L10.7269626,1.38641367 C10.7269626,0.868711615 10.2101507,0.4 9.61879642,0.4 Z M9.61879642,0.790942446 C9.94315845,0.790942446 10.2548518,1.07362615 10.2548518,1.38641367 L10.2548518,11.6686655 C10.2548518,11.981453 9.94315845,12.2641367 9.61879642,12.2641367 L3.60123204,12.2641367 L3.46563766,12.2111542 L0.892910861,9.83832691 L0.828505241,9.69130935 L0.828505241,1.38641367 C0.828505241,1.07362615 1.1401986,0.790942446 1.46456063,0.790942446 L9.61879642,0.790942446 Z M9.69667678,1.08901006 L1.38668992,1.08901006 C1.27286315,1.08901006 1.14612572,1.20395189 1.14612572,1.28821491 L1.14561083,9.66174324 L3.64342649,11.9659298 L9.69667678,11.9660691 C9.79153243,11.9660691 9.8953538,11.8862484 9.92732605,11.8108781 L9.93724098,11.7668642 L9.93724098,1.28821491 C9.93724098,1.20395189 9.81050356,1.08901006 9.69667678,1.08901006 Z" id="形状"></path>
|
|
||||||
<path d="M4.54092961,3.67913093 L2.25985278,3.67913093 C2.22052387,3.67913093 2.22052387,3.65291165 2.22052387,3.65291165 L2.22052387,2.91877199 C2.22052387,2.89255271 2.22052387,2.89255271 2.25985278,2.89255271 L4.54092961,2.89255271 C4.58025852,2.89255271 4.58025852,2.89255271 4.58025852,2.91877199 L4.58025852,3.65291165 L4.54092961,3.67913093 Z M8.86710981,5.44893192 L2.25985278,5.44893192 C2.22052387,5.44893192 2.22052387,5.44893192 2.22052387,5.40960301 L2.22052387,4.70168261 C2.22052387,4.6623537 2.22052387,4.6623537 2.25985278,4.6623537 L8.86710981,4.6623537 C8.90643872,4.6623537 8.90643872,4.6623537 8.90643872,4.70168261 L8.90643872,5.40960301 L8.86710981,5.44893192 Z M8.86710981,7.41537746 L2.25985278,7.41537746 C2.22052387,7.41537746 2.22052387,7.41537746 2.22052387,7.37604855 L2.22052387,6.66812815 C2.22052387,6.62879924 2.22052387,6.62879924 2.25985278,6.62879924 L8.86710981,6.62879924 C8.90643872,6.62879924 8.90643872,6.62879924 8.90643872,6.66812815 L8.90643872,7.37604855 L8.86710981,7.41537746 Z" id="形状"></path>
|
|
||||||
<path d="M8.86710981,6.44841431 C9.00606257,6.44841431 9.08682365,6.5291754 9.08682365,6.66812815 L9.08682365,7.37604855 L9.03399013,7.50359996 L8.99466122,7.54292887 L8.86710981,7.59576239 L2.25985278,7.59576239 C2.12090003,7.59576239 2.04013894,7.51500131 2.04013894,7.37604855 L2.04013894,6.66812815 C2.04013894,6.5291754 2.12090003,6.44841431 2.25985278,6.44841431 L8.86710981,6.44841431 Z M8.72520451,6.80870958 L2.40090881,6.80870958 L2.40090881,7.23441802 L8.72520451,7.23441802 L8.72520451,6.80870958 Z M8.86710981,4.48196877 C9.00606257,4.48196877 9.08682365,4.56272985 9.08682365,4.70168261 L9.08682365,5.40960301 L9.03399013,5.53715441 L8.99466122,5.57648333 L8.86710981,5.62931685 L2.25985278,5.62931685 C2.12090003,5.62931685 2.04013894,5.54855576 2.04013894,5.40960301 L2.04013894,4.70168261 C2.04013894,4.56272985 2.12090003,4.48196877 2.25985278,4.48196877 L8.86710981,4.48196877 Z M8.72520451,4.84251382 L2.40090881,4.84251382 L2.40090881,5.26822226 L8.72520451,5.26822226 L8.72520451,4.84251382 Z M4.54092961,2.71216778 C4.66811215,2.71216778 4.76064346,2.77385532 4.76064346,2.91877199 L4.76064346,3.65291165 L4.68031808,3.80300099 L4.64098917,3.82922026 L4.54092961,3.85951586 L2.25985278,3.85951586 C2.18859958,3.85951586 2.12331983,3.83050264 2.08113204,3.77425225 C2.04130723,3.6964836 2.04130723,3.6964836 2.04013894,3.65291165 L2.04013894,2.91877199 C2.04013894,2.77385532 2.13267025,2.71216778 2.25985278,2.71216778 L4.54092961,2.71216778 Z M4.39957385,3.07293764 L2.40090881,3.07293764 L2.40090881,3.49864608 L4.39957385,3.49864608 L4.39957385,3.07293764 Z" id="形状"></path>
|
|
||||||
<path d="M3.50158987,12.5394187 L3.50158987,9.83587533 L0.88525753,9.83587533 L0.88525753,8.96376455 L3.93764526,8.96376455 C4.19927849,8.96376455 4.37370065,9.1381867 4.37370065,9.39981994 L4.37370065,12.5394187 L3.50158987,12.5394187 Z" id="路径"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 47 KiB |
Before Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 36 KiB |
Before Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 53 KiB |
Before Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 8.8 KiB |
Before Width: | Height: | Size: 52 KiB |
Before Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 1.3 MiB |
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 370 KiB |
Before Width: | Height: | Size: 2.7 MiB |
Before Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 310 KiB |
Before Width: | Height: | Size: 349 KiB |
Before Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 198 KiB |
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 36 KiB |
Before Width: | Height: | Size: 8.8 KiB |
Before Width: | Height: | Size: 8.5 KiB |
Before Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 52 KiB |
Before Width: | Height: | Size: 7.4 KiB |
Before Width: | Height: | Size: 9.3 KiB |
Before Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 3.5 MiB |
Before Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 46 KiB |
Before Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 53 KiB |
Before Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 63 KiB |
Before Width: | Height: | Size: 241 KiB |
Before Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 10 KiB |
@ -1,18 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="30px" height="26px" viewBox="0 0 30 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<!-- Generator: Sketch 60 (88103) - https://sketch.com -->
|
|
||||||
<title>icon/流程箭头备份 5</title>
|
|
||||||
<desc>Created with Sketch.</desc>
|
|
||||||
<g id="3_工艺流程" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="3-自定义工艺流程" transform="translate(-633.000000, -397.000000)">
|
|
||||||
<g id="icon/流程箭头" transform="translate(630.000000, 392.000000)">
|
|
||||||
<g id="编组-2" opacity="0.50218564" stroke-width="1" fill-rule="evenodd" transform="translate(3.000000, 5.000000)">
|
|
||||||
<ellipse id="椭圆形" fill="#404040" cx="2.12742382" cy="13.0763435" rx="2.12742382" ry="2.21252078"></ellipse>
|
|
||||||
<ellipse id="椭圆形备份" fill="#404040" cx="8.51227147" cy="13.0763435" rx="2.12742382" ry="2.21252078"></ellipse>
|
|
||||||
<path d="M19.4593901,1.4429655 L21.8675258,3.61583195 C26.9580675,8.25644103 29.2570896,10.731031 29.7057398,12.459385 C29.748906,12.6160198 29.7763246,12.7796115 29.7855806,12.9482608 L29.7881771,13.0128311 L29.7890859,13.0763435 C29.7890859,13.2480738 29.7702733,13.4152344 29.7346744,13.5757179 C29.3077404,15.5566713 26.3837971,18.5124849 19.4593901,24.7097215 C18.5688126,25.5067745 17.2255693,25.4020797 16.4591722,24.4758791 C15.6927751,23.5496785 15.7934432,22.1527055 16.6840207,21.3556525 L18.3602818,19.843801 C20.3525013,18.0317598 21.9577562,16.511737 23.1725229,15.2878856 L14.8971191,15.2888643 C13.7221754,15.2888643 12.7696953,14.298285 12.7696953,13.0763435 C12.7696953,11.9075299 13.6411516,10.9503974 14.7451872,10.869378 L14.8971191,10.8638227 L23.171515,10.8637859 L22.3958746,10.0940454 C20.9337911,8.66258056 19.0284153,6.89523125 16.6840207,4.7970345 C15.7934432,3.9999815 15.6927751,2.60300846 16.4591722,1.67680788 C17.2255693,0.750607307 18.5688126,0.645912508 19.4593901,1.4429655 Z" id="形状结合" fill="#545454" fill-rule="nonzero"></path>
|
|
||||||
</g>
|
|
||||||
<rect id="矩形" x="0" y="0" width="36" height="36"></rect>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 1.3 MiB |
Before Width: | Height: | Size: 42 KiB |
Before Width: | Height: | Size: 340 KiB |
Before Width: | Height: | Size: 4.6 MiB |
Before Width: | Height: | Size: 5.3 MiB |
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 42 KiB |
Before Width: | Height: | Size: 237 B |
@ -6,7 +6,6 @@
|
|||||||
@import './btn.scss';
|
@import './btn.scss';
|
||||||
|
|
||||||
body {
|
body {
|
||||||
// min-height: 1024px;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
@ -114,61 +114,40 @@ $buttonHeight: $buttonH * 1px;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.field {
|
.field {
|
||||||
|
// background: #ccc3;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 8%;
|
padding-top: 196px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
// justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.pc-title {
|
.pc-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
clear: both;
|
clear: both;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -36px;
|
top: -36px;
|
||||||
height: 128px;
|
|
||||||
|
|
||||||
.title {
|
// h3.title {
|
||||||
margin: 0;
|
// position: relative;
|
||||||
margin-left: 32px;
|
|
||||||
font-weight: 400;
|
// &::before {
|
||||||
user-select: none;
|
// content: '';
|
||||||
color: #000;
|
// background: url($cnbmLogo) 100% / 100% no-repeat;
|
||||||
font-size: 36px;
|
// height: 48px;
|
||||||
line-height: 54px;
|
// width: 48px;
|
||||||
letter-spacing: 2px;
|
// position: absolute;
|
||||||
}
|
// left: 0px;
|
||||||
|
// top: 4px;
|
||||||
|
// display: inline-block;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-title,
|
.mobile-title,
|
||||||
.mobile-switch {
|
.mobile-switch {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-cont {
|
|
||||||
// height: 560px;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
user-select: none;
|
|
||||||
// 元素
|
|
||||||
margin: 12px 0;
|
|
||||||
height: 16px;
|
|
||||||
line-height: 16px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #8c8c8c;
|
|
||||||
|
|
||||||
a,
|
|
||||||
a:hover,
|
|
||||||
a:active {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -304,6 +283,24 @@ $buttonHeight: $buttonH * 1px;
|
|||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
user-select: none;
|
||||||
|
// 元素
|
||||||
|
height: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
// 定位
|
||||||
|
position: absolute;
|
||||||
|
bottom: 30px;
|
||||||
|
a,
|
||||||
|
a:hover,
|
||||||
|
a:active {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// - - - - - PC 最小尺寸设置
|
// - - - - - PC 最小尺寸设置
|
||||||
|
@ -104,8 +104,8 @@ h6 {
|
|||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
background-color: #f8f8f9;
|
background-color: #f8f8f9;
|
||||||
color: #515a6e;
|
color: #515a6e;
|
||||||
// height: 40px;
|
height: 40px;
|
||||||
// font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-table__body-wrapper {
|
.el-table__body-wrapper {
|
||||||
|
@ -35,7 +35,7 @@ export default {
|
|||||||
const first = matched[0]
|
const first = matched[0]
|
||||||
|
|
||||||
if (!this.isDashboard(first)) {
|
if (!this.isDashboard(first)) {
|
||||||
matched = [{ path: '/', meta: { title: '首页' }}].concat(matched)
|
matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
||||||
|
@ -5,12 +5,8 @@
|
|||||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
|
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
|
||||||
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
|
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
|
||||||
|
|
||||||
<div style="padding-top: 5px; padding-right: 38px;">
|
<div class="right-menu">
|
||||||
<navbar-right :blackTitle='true'/>
|
<template v-if="device!=='mobile'">
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div class="right-menu"> -->
|
|
||||||
<!-- <template v-if="device!=='mobile'"> -->
|
|
||||||
<!-- <search id="header-search" class="right-menu-item" /> -->
|
<!-- <search id="header-search" class="right-menu-item" /> -->
|
||||||
|
|
||||||
<!-- 站内信 -->
|
<!-- 站内信 -->
|
||||||
@ -22,27 +18,27 @@
|
|||||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||||
</el-tooltip> -->
|
</el-tooltip> -->
|
||||||
|
|
||||||
<!-- </template> -->
|
</template>
|
||||||
|
|
||||||
<!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
||||||
<div class="avatar-wrapper"> -->
|
<div class="avatar-wrapper">
|
||||||
<!-- <img :src="avatar" class="user-avatar"> -->
|
<!-- <img :src="avatar" class="user-avatar"> -->
|
||||||
<!-- <span v-if="nickname" class="user-nickname">{{ nickname }}</span>
|
<span v-if="nickname" class="user-nickname">{{ nickname }}</span>
|
||||||
<i class="el-icon-caret-bottom" />
|
<i class="el-icon-caret-bottom" />
|
||||||
</div>
|
</div>
|
||||||
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-menu slot="dropdown">
|
||||||
<router-link to="/user/profile">
|
<router-link to="/user/profile">
|
||||||
<el-dropdown-item>个人中心</el-dropdown-item>
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||||
</router-link> -->
|
</router-link>
|
||||||
<!-- <el-dropdown-item @click.native="setting = true">
|
<!-- <el-dropdown-item @click.native="setting = true">
|
||||||
<span>布局设置</span>
|
<span>布局设置</span>
|
||||||
</el-dropdown-item> -->
|
</el-dropdown-item> -->
|
||||||
<!-- <el-dropdown-item divided @click.native="logout">
|
<el-dropdown-item divided @click.native="logout">
|
||||||
<span>退出登录</span>
|
<span>退出登录</span>
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</el-dropdown> -->
|
</el-dropdown>
|
||||||
<!-- </div> -->
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -55,8 +51,7 @@ import Screenfull from '@/components/Screenfull'
|
|||||||
import SizeSelect from '@/components/SizeSelect'
|
import SizeSelect from '@/components/SizeSelect'
|
||||||
import Search from '@/components/HeaderSearch'
|
import Search from '@/components/HeaderSearch'
|
||||||
import NotifyMessage from '@/layout/components/Message'
|
import NotifyMessage from '@/layout/components/Message'
|
||||||
// import {getPath} from "@/utils/ruoyi";
|
import {getPath} from "@/utils/ruoyi";
|
||||||
import NavbarRight from './NavbarRight.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@ -66,8 +61,7 @@ export default {
|
|||||||
Screenfull,
|
Screenfull,
|
||||||
SizeSelect,
|
SizeSelect,
|
||||||
Search,
|
Search,
|
||||||
NotifyMessage,
|
NotifyMessage
|
||||||
NavbarRight
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters([
|
...mapGetters([
|
||||||
|
@ -1,111 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="right-msg" :style="blackTitle ? 'color: #000' : 'color: #fff'">
|
|
||||||
<div class="time-msg">
|
|
||||||
<div class="line1">{{timeZone}} {{topTime}}</div>
|
|
||||||
<div class="line2">{{topDate}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="base-msg">
|
|
||||||
<div class="avatar">
|
|
||||||
<el-dropdown>
|
|
||||||
<img :src="require(`../../assets/images/choicepart/avatar.png`)" alt="" width="32" height="32" />
|
|
||||||
<el-dropdown-menu slot="dropdown">
|
|
||||||
<el-dropdown-item><svg-icon icon-class="helpbtn"/>帮助文档</el-dropdown-item>
|
|
||||||
<el-dropdown-item @click.native="logout"><svg-icon icon-class="exitbtn"/>退出登录</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
<div class="use-msg">
|
|
||||||
<div class="line1">{{nickname}}</div>
|
|
||||||
<div class="line2">{{dept}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import moment from 'moment'
|
|
||||||
import { getUser } from "@/api/system/user.js";
|
|
||||||
import {getPath} from "@/utils/ruoyi";
|
|
||||||
export default {
|
|
||||||
name: 'navRight',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
topDate: '',
|
|
||||||
topTime: '',
|
|
||||||
timeZone: '',
|
|
||||||
timer: '',
|
|
||||||
dept:' ',
|
|
||||||
nickname: this.$store.getters.nickname
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
blackTitle: {
|
|
||||||
type: Boolean,
|
|
||||||
default: () => {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getUserMsg()
|
|
||||||
this.getTime()
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
clearInterval(this.timer)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getTime() {
|
|
||||||
let _this = this
|
|
||||||
this.timer = setInterval(function () {
|
|
||||||
_this.topDate = moment().format('YYYY/MM/DD')
|
|
||||||
let temp = moment().format('A-hh:mm').split('-')
|
|
||||||
_this.timeZone = temp[0]
|
|
||||||
_this.topTime = temp[1]
|
|
||||||
}, 1000)
|
|
||||||
},
|
|
||||||
getUserMsg() {
|
|
||||||
let id = this.$store.getters.userId
|
|
||||||
getUser(id).then(res => {
|
|
||||||
this.dept = res.data.dept ? res.data.dept.name : ''
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async logout() {
|
|
||||||
this.$modal.confirm('确定注销并退出系统吗?', '提示').then(() => {
|
|
||||||
this.$store.dispatch('LogOut').then(() => {
|
|
||||||
location.href = getPath('/');
|
|
||||||
})
|
|
||||||
}).catch(() => {});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang='scss' scoped>
|
|
||||||
.right-msg {
|
|
||||||
float: right;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 14px;
|
|
||||||
// color: #fff;
|
|
||||||
// padding-top: 15px;
|
|
||||||
// padding-right: 38px;
|
|
||||||
.time-msg {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 30px;
|
|
||||||
}
|
|
||||||
.base-msg {
|
|
||||||
display: inline-block;
|
|
||||||
.avatar {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
.use-msg {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.line1 {
|
|
||||||
height: 19px;
|
|
||||||
}
|
|
||||||
.line2 {
|
|
||||||
height: 19px;
|
|
||||||
opacity: 0.65;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,96 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-if="!item.hidden">
|
|
||||||
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
|
|
||||||
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
|
|
||||||
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
|
|
||||||
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
|
|
||||||
</el-menu-item>
|
|
||||||
</app-link>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
|
|
||||||
<template slot="title">
|
|
||||||
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
|
|
||||||
</template>
|
|
||||||
<sidebar-item
|
|
||||||
v-for="(child, index) in item.children"
|
|
||||||
:key="child.path + index"
|
|
||||||
:is-nest="true"
|
|
||||||
:item="child"
|
|
||||||
:base-path="resolvePath(child.path)"
|
|
||||||
class="nest-menu"
|
|
||||||
/>
|
|
||||||
</el-submenu>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import path from 'path'
|
|
||||||
import { isExternal } from '@/utils/validate'
|
|
||||||
import Item from './Item'
|
|
||||||
import AppLink from './Link'
|
|
||||||
import FixiOSBug from './FixiOSBug'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'SidebarItem',
|
|
||||||
components: { Item, AppLink },
|
|
||||||
mixins: [FixiOSBug],
|
|
||||||
props: {
|
|
||||||
// route object
|
|
||||||
item: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
isNest: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
basePath: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
this.onlyOneChild = null
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
hasOneShowingChild(children = [], parent) {
|
|
||||||
if (!children) {
|
|
||||||
children = [];
|
|
||||||
}
|
|
||||||
const showingChildren = children.filter(item => {
|
|
||||||
if (item.hidden) {
|
|
||||||
return false
|
|
||||||
} else {
|
|
||||||
// Temp set(will be used if only has one showing child)
|
|
||||||
this.onlyOneChild = item
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// When there is only one child router, the child router is displayed by default
|
|
||||||
if (showingChildren.length === 1) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show parent if there are no child router to display
|
|
||||||
if (showingChildren.length === 0) {
|
|
||||||
this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
resolvePath(routePath) {
|
|
||||||
if (isExternal(routePath)) {
|
|
||||||
return routePath
|
|
||||||
}
|
|
||||||
if (isExternal(this.basePath)) {
|
|
||||||
return this.basePath
|
|
||||||
}
|
|
||||||
return path.resolve(this.basePath, routePath)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
@ -1,71 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
:class="{ 'has-logo': showLogo }"
|
|
||||||
:style="{
|
|
||||||
backgroundColor:
|
|
||||||
settings.sideTheme === 'theme-dark'
|
|
||||||
? variables.menuBackground
|
|
||||||
: variables.menuLightBackground,
|
|
||||||
}">
|
|
||||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
|
||||||
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
|
||||||
<el-menu
|
|
||||||
:default-active="activeMenu"
|
|
||||||
:collapse="isCollapse"
|
|
||||||
:background-color="
|
|
||||||
settings.sideTheme === 'theme-dark'
|
|
||||||
? variables.menuBackground
|
|
||||||
: variables.menuLightBackground
|
|
||||||
"
|
|
||||||
:text-color="
|
|
||||||
settings.sideTheme === 'theme-dark'
|
|
||||||
? variables.menuColor
|
|
||||||
: variables.menuLightColor
|
|
||||||
"
|
|
||||||
:unique-opened="true"
|
|
||||||
active-text-color="#fff"
|
|
||||||
:collapse-transition="false"
|
|
||||||
mode="vertical">
|
|
||||||
<!-- 根据 sidebarRouters 路由,生成菜单 -->
|
|
||||||
<sidebar-item
|
|
||||||
v-for="(route, index) in sidebarRouters"
|
|
||||||
:key="route.path + index"
|
|
||||||
:item="route"
|
|
||||||
:base-path="route.path" />
|
|
||||||
</el-menu>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters, mapState } from 'vuex';
|
|
||||||
import Logo from './Logo';
|
|
||||||
import SidebarItem from './SidebarItem';
|
|
||||||
import variables from '@/assets/styles/variables.scss';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: { SidebarItem, Logo },
|
|
||||||
computed: {
|
|
||||||
...mapState(['settings']),
|
|
||||||
...mapGetters(['sidebarRouters', 'sidebar']),
|
|
||||||
activeMenu() {
|
|
||||||
const route = this.$route;
|
|
||||||
const { meta, path } = route;
|
|
||||||
// if set path, the sidebar will highlight the path you set
|
|
||||||
if (meta.activeMenu) {
|
|
||||||
return meta.activeMenu;
|
|
||||||
}
|
|
||||||
return path;
|
|
||||||
},
|
|
||||||
showLogo() {
|
|
||||||
return this.$store.state.settings.sidebarLogo;
|
|
||||||
},
|
|
||||||
variables() {
|
|
||||||
return variables;
|
|
||||||
},
|
|
||||||
isCollapse() {
|
|
||||||
return !this.sidebar.opened;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
@ -28,7 +28,7 @@
|
|||||||
mode="vertical">
|
mode="vertical">
|
||||||
<!-- 根据 sidebarRouters 路由,生成菜单 -->
|
<!-- 根据 sidebarRouters 路由,生成菜单 -->
|
||||||
<sidebar-item
|
<sidebar-item
|
||||||
v-for="(route, index) in routeList"
|
v-for="(route, index) in sidebarRouters"
|
||||||
:key="route.path + index"
|
:key="route.path + index"
|
||||||
:item="route"
|
:item="route"
|
||||||
:base-path="route.path" />
|
:base-path="route.path" />
|
||||||
@ -47,12 +47,7 @@ export default {
|
|||||||
components: { SidebarItem, Logo },
|
components: { SidebarItem, Logo },
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(['settings']),
|
...mapState(['settings']),
|
||||||
...mapGetters(['sidebarRouters', 'sidebar', 'choicepart']),
|
...mapGetters(['sidebarRouters', 'sidebar']),
|
||||||
routeList() {
|
|
||||||
// return [this.partList[this.choicepart]]
|
|
||||||
// return [this.sidebarRouters[29]]
|
|
||||||
return [this.sidebarRouters[this.choicepart]]
|
|
||||||
},
|
|
||||||
activeMenu() {
|
activeMenu() {
|
||||||
const route = this.$route;
|
const route = this.$route;
|
||||||
const { meta, path } = route;
|
const { meta, path } = route;
|
||||||
|
@ -9,7 +9,7 @@ import { isRelogin } from '@/utils/request'
|
|||||||
NProgress.configure({ showSpinner: false })
|
NProgress.configure({ showSpinner: false })
|
||||||
|
|
||||||
// 增加三方登陆 update by 芋艿
|
// 增加三方登陆 update by 芋艿
|
||||||
const whiteList = ['/login', '/social-login', '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee', '/AGVBoard', '/coldBoard', '/processingBoard']
|
const whiteList = ['/login', '/social-login', '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee']
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
NProgress.start()
|
NProgress.start()
|
||||||
@ -19,12 +19,7 @@ router.beforeEach((to, from, next) => {
|
|||||||
if (to.path === '/login') {
|
if (to.path === '/login') {
|
||||||
next({ path: '/' })
|
next({ path: '/' })
|
||||||
NProgress.done()
|
NProgress.done()
|
||||||
}
|
} else {
|
||||||
// else if (to.path === '/AGVBoard') {
|
|
||||||
// next({ path: '/AGVBoard' })
|
|
||||||
// NProgress.done()
|
|
||||||
// }
|
|
||||||
else {
|
|
||||||
if (store.getters.roles.length === 0) {
|
if (store.getters.roles.length === 0) {
|
||||||
isRelogin.show = true
|
isRelogin.show = true
|
||||||
// 获取字典数据 add by 芋艿
|
// 获取字典数据 add by 芋艿
|
||||||
|
@ -71,47 +71,16 @@ export const constantRoutes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
component: () => import('@/views/choicePart'),
|
component: Layout,
|
||||||
hidden: true,
|
// redirect: 'core/base/factory',
|
||||||
meta: { requireToken: true }
|
// children: [{
|
||||||
},
|
// path: 'index',
|
||||||
// {
|
// redirect: 'core/base/factory',
|
||||||
// path: '/',
|
// component: (resolve) => require(['@/views/index'], resolve),
|
||||||
// component: Layout,
|
// name: '首页',
|
||||||
// // redirect: 'core/base/factory',
|
// meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||||
// // children: [{
|
// }
|
||||||
// // path: 'index',
|
// ]
|
||||||
// // redirect: 'core/base/factory',
|
|
||||||
// // component: (resolve) => require(['@/views/index'], resolve),
|
|
||||||
// // name: '首页',
|
|
||||||
// // meta: { title: '首页', icon: 'dashboard', affix: true }
|
|
||||||
// // }
|
|
||||||
// // ]
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
path: '/AGVBoard',
|
|
||||||
name: 'AGVBoard',
|
|
||||||
// component: Layout,
|
|
||||||
// route level code-splitting
|
|
||||||
// this generates a separate chunk (about.[hash].js) for this route
|
|
||||||
// which is lazy-loaded when the route is visited.
|
|
||||||
component: () => import(/* webpackChunkName: "about" */ '@/views/OperationalOverview/AGVBoard.vue')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/coldBoard',
|
|
||||||
name: 'coldBoard',
|
|
||||||
// route level code-splitting
|
|
||||||
// this generates a separate chunk (about.[hash].js) for this route
|
|
||||||
// which is lazy-loaded when the route is visited.
|
|
||||||
component: () => import(/* webpackChunkName: "about" */ '@/views/OperationalOverview/coldBoard.vue')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/processingBoard',
|
|
||||||
name: 'processingBoard',
|
|
||||||
// route level code-splitting
|
|
||||||
// this generates a separate chunk (about.[hash].js) for this route
|
|
||||||
// which is lazy-loaded when the route is visited.
|
|
||||||
component: () => import(/* webpackChunkName: "about" */ '@/views/OperationalOverview/processingBoard.vue')
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/user',
|
path: '/user',
|
||||||
|
@ -17,7 +17,6 @@ const getters = {
|
|||||||
topbarRouters:state => state.permission.topbarRouters,
|
topbarRouters:state => state.permission.topbarRouters,
|
||||||
defaultRoutes:state => state.permission.defaultRoutes,
|
defaultRoutes:state => state.permission.defaultRoutes,
|
||||||
sidebarRouters:state => state.permission.sidebarRouters,
|
sidebarRouters:state => state.permission.sidebarRouters,
|
||||||
choicepart: state => state.app.choicepart,
|
|
||||||
// 数据字典
|
// 数据字典
|
||||||
dict_datas: state => state.dict.dictDatas
|
dict_datas: state => state.dict.dictDatas
|
||||||
}
|
}
|
||||||
|
@ -8,7 +8,6 @@ const state = {
|
|||||||
},
|
},
|
||||||
device: "desktop",
|
device: "desktop",
|
||||||
size: localStorage.getItem("size") || "medium",
|
size: localStorage.getItem("size") || "medium",
|
||||||
choicepart: localStorage.getItem('choicepart') || null
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const mutations = {
|
const mutations = {
|
||||||
@ -39,10 +38,6 @@ const mutations = {
|
|||||||
SET_SIDEBAR_HIDE: (state, status) => {
|
SET_SIDEBAR_HIDE: (state, status) => {
|
||||||
state.sidebar.hide = status;
|
state.sidebar.hide = status;
|
||||||
},
|
},
|
||||||
SET_CHOICEPART: (state, choicepart) => {
|
|
||||||
state.choicepart = choicepart
|
|
||||||
localStorage.setItem('choicepart', choicepart)
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const actions = {
|
const actions = {
|
||||||
@ -61,9 +56,6 @@ const actions = {
|
|||||||
toggleSideBarHide({ commit }, status) {
|
toggleSideBarHide({ commit }, status) {
|
||||||
commit("SET_SIDEBAR_HIDE", status);
|
commit("SET_SIDEBAR_HIDE", status);
|
||||||
},
|
},
|
||||||
setChoicepart({ commit }, choicepart) {
|
|
||||||
commit('SET_CHOICEPART', choicepart)
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
@ -1,976 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zwq
|
|
||||||
* @Date: 2021-07-19 15:18:30
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2023-11-15 16:04:06
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div id="container" ref="container" class="visual-container" :style="styles">
|
|
||||||
<el-row class="container-title" :style="{
|
|
||||||
height: 88 + 'px',
|
|
||||||
lineHeight: 88 + 'px',
|
|
||||||
fontSize: 31 + 'px'
|
|
||||||
}">
|
|
||||||
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
|
|
||||||
许昌安彩AGV原片周转看板
|
|
||||||
<!-- <el-button
|
|
||||||
type="text"
|
|
||||||
class="title-button"
|
|
||||||
:style="{ right: 33 + 'px', top: 37 + 'px' }"
|
|
||||||
@click="changeFullScreen"
|
|
||||||
>
|
|
||||||
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
|
|
||||||
<svg-icon v-else icon-class="fullScreenView" />
|
|
||||||
</el-button> -->
|
|
||||||
</el-row>
|
|
||||||
<el-row class="container-main flex-col" type="flex">
|
|
||||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15 * beilv" type="flex" class="flex-1">
|
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
|
||||||
<base-container :beilv="1" :title="'搬运任务'" :title-icon="'5_1'" :back="'energy'">
|
|
||||||
<base-table1 :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
|
|
||||||
:table-data="qualityYearList" />
|
|
||||||
</base-container>
|
|
||||||
</el-col>
|
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
|
||||||
<base-container :beilv="1" :title="'周转进度'" :title-icon="'5_3'" :back="'energy'">
|
|
||||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
|
||||||
<top-radio-group />
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- 为外部添加一个容器并显式地设置一个高度: -->
|
|
||||||
<!-- <div style="height: 300px;"> -->
|
|
||||||
<div style="width:100%; overflow: hidden scroll;">
|
|
||||||
<!-- <el-row style="margin-bottom: 1em">
|
|
||||||
<p class="now-team-title">加工工单进度</p>
|
|
||||||
</el-row> -->
|
|
||||||
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
|
|
||||||
<el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
|
|
||||||
<p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
|
|
||||||
<i class="el-icon-check" />
|
|
||||||
{{ op.name }}
|
|
||||||
</p>
|
|
||||||
<p v-else class="now-secondary-title">{{ op.name }}</p>
|
|
||||||
</el-row>
|
|
||||||
<!-- <el-row>
|
|
||||||
<el-progress :percentage="100" class="custom-progress-bar" />
|
|
||||||
<p class="now-secondary-title" style="color:#4679FD">
|
|
||||||
<i class="el-icon-check" />
|
|
||||||
成都碲化镉5000一期订单
|
|
||||||
</p>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-progress :percentage="85" class="custom-progress-bar" />
|
|
||||||
<p class="now-secondary-title">成都碲化镉二订单</p>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-progress :percentage="85" class="custom-progress-bar" />
|
|
||||||
<p class="now-secondary-title">长利订单1000</p>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-progress :percentage="85" class="custom-progress-bar" />
|
|
||||||
<p class="now-secondary-title">国际工程20号订单</p>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-progress :percentage="85" class="custom-progress-bar" />
|
|
||||||
<p class="now-secondary-title">铜铟镓硒眉山10万订单</p>
|
|
||||||
</el-row> -->
|
|
||||||
</div>
|
|
||||||
<!-- </div> -->
|
|
||||||
</base-container>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1">
|
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
|
||||||
<base-container :beilv="1" :height="256" :title="'库存管理'" :title-icon="'5_5'" :back="'energy'">
|
|
||||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
|
||||||
<top-radio-group />
|
|
||||||
</div> -->
|
|
||||||
<el-row :gutter="9 * beilv">
|
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
|
||||||
<base-table :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
|
|
||||||
:table-data="inventoryList" />
|
|
||||||
</el-col>
|
|
||||||
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
|
||||||
<base-table3
|
|
||||||
:page="2"
|
|
||||||
:limit="5"
|
|
||||||
:beilv="1"
|
|
||||||
:table-config="qualityTableProps2"
|
|
||||||
:table-data="qualityList2"
|
|
||||||
/>
|
|
||||||
</el-col> -->
|
|
||||||
</el-row>
|
|
||||||
</base-container>
|
|
||||||
</el-col>
|
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
|
||||||
<base-container :beilv="1" :height="318 + 338 + 16" :title="'库位信息'" :title-icon="'5_4'" :back="'energy'">
|
|
||||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
|
||||||
<top-radio-group />
|
|
||||||
</div> -->
|
|
||||||
<!-- 像下面这样表格里的limit值,也许可以用js动态计算出来 -->
|
|
||||||
<base-table2 :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="locationTableProps"
|
|
||||||
:table-data="locationList" />
|
|
||||||
</base-container>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<!-- end -->
|
|
||||||
<!-- <el-col :span="16">
|
|
||||||
<el-row>
|
|
||||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
|
||||||
<base-container :beilv="1" :height="672">
|
|
||||||
<base-video :video-height="624" :beilv="1" />
|
|
||||||
</base-container>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
-->
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import baseContainer from './components/baseContainer'
|
|
||||||
import baseTable1 from './components/baseTable'
|
|
||||||
import baseTable from './components/baseTable'
|
|
||||||
import baseTable2 from './components/baseTable'
|
|
||||||
// import TopRadioGroup from './components/topRadioGroup'
|
|
||||||
// import pieChart1 from './components/PieChart'
|
|
||||||
// import pieChart2 from './components/PieChart'
|
|
||||||
// import pieChart3 from './components/PieChart'
|
|
||||||
// import { mapGetters } from 'vuex'
|
|
||||||
import screenfull from 'screenfull'
|
|
||||||
// import BaseVideo from './components/baseVideo.vue'
|
|
||||||
// import alarmLevel from './components/alarmLevel'
|
|
||||||
// import axios from '@/utils/request'
|
|
||||||
// import doubleYChart from './components/doubleYChart '
|
|
||||||
// import elementResizeDetectorMaker from 'element-resize-detector';
|
|
||||||
// var erd = elementResizeDetectorMaker(); //创建实例
|
|
||||||
// import LinearBarChart from './components/linearBarChart'
|
|
||||||
const qualityTableProps1 = [
|
|
||||||
{
|
|
||||||
prop: 'name',
|
|
||||||
label: '产线名称'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'createTime',
|
|
||||||
label: '发生时间'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'code',
|
|
||||||
label: '质量编码'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'content',
|
|
||||||
label: '质量内容'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const qualityTableProps2 = [
|
|
||||||
{
|
|
||||||
prop: 'name',
|
|
||||||
label: '工序名称'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'createTime',
|
|
||||||
label: '发生时间'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'code',
|
|
||||||
label: '质量编码'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'content',
|
|
||||||
label: '质量内容'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const cxNameList = ['周一', '周二', '周三', '周四', '周五']
|
|
||||||
|
|
||||||
const cxDataList = [
|
|
||||||
{
|
|
||||||
topColor: '#9DD5FF',
|
|
||||||
bottomColor: '#1295FF',
|
|
||||||
name: '电耗能',
|
|
||||||
data: [100, 150, 121, 97, 140]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
topColor: '#FF8BC3',
|
|
||||||
bottomColor: '#EB46A1',
|
|
||||||
name: '水耗能',
|
|
||||||
data: [110, 110, 151, 77, 110]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
topColor: '#85F6E9',
|
|
||||||
bottomColor: '#2EC6B4',
|
|
||||||
name: '天然气',
|
|
||||||
data: [110, 120, 171, 287, 40]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
topColor: '#9496FF',
|
|
||||||
bottomColor: '#6567FF',
|
|
||||||
name: '焦炉煤气',
|
|
||||||
data: [140, 157, 122, 27, 240]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
topColor: '#F68E8A',
|
|
||||||
bottomColor: '#E95552',
|
|
||||||
name: '余热发电',
|
|
||||||
data: [170, 180, 127, 17, 340]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
topColor: '#FFE873',
|
|
||||||
bottomColor: '#E7AE2A',
|
|
||||||
name: '二氧化硫',
|
|
||||||
data: [140, 160, 121, 57, 170]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const qualityList1 = [
|
|
||||||
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
|
|
||||||
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
|
|
||||||
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
|
|
||||||
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
|
|
||||||
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
|
|
||||||
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
|
|
||||||
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
|
|
||||||
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
|
|
||||||
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
|
|
||||||
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
|
|
||||||
{ name: '钢一线', createTime: '2021.10.21 24:59:59', code: '2121321231', content: '气泡' },
|
|
||||||
{ name: '钢二线', createTime: '2021.11.22 24:59:59', code: '3321123213', content: '气泡' },
|
|
||||||
{ name: '钢三线', createTime: '2021.12.12 24:59:59', code: '4535435345', content: '气泡' },
|
|
||||||
{ name: '钢四线', createTime: '2021.12.20 24:59:59', code: '5465465466', content: '气泡' },
|
|
||||||
{ name: '钢五线', createTime: '2021.12.02 24:59:59', code: '2132131312', content: '气泡' },
|
|
||||||
{ name: '钢六线', createTime: '2021.12.11 24:59:59', code: '2132131212', content: '气泡' }
|
|
||||||
]
|
|
||||||
const qualityList2 = [
|
|
||||||
{ name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
|
|
||||||
{ name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
|
|
||||||
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
|
|
||||||
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
|
|
||||||
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
|
|
||||||
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
|
|
||||||
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
|
|
||||||
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
|
|
||||||
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
|
|
||||||
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
|
|
||||||
{ name: '上片', createTime: '2021.10.22 24:59:59', code: '2132132133', content: '气泡' },
|
|
||||||
{ name: '磨边', createTime: '2021.12.21 24:59:59', code: '2132131232', content: '气泡' },
|
|
||||||
{ name: '清洗', createTime: '2021.12.12 24:59:59', code: '1232131312', content: '气泡' },
|
|
||||||
{ name: '激光打孔', createTime: '2021.12.13 24:59:59', code: '2132132131', content: '气泡' },
|
|
||||||
{ name: 'AR镀膜', createTime: '2021.10.23 24:59:59', code: '2311212232', content: '气泡' },
|
|
||||||
{ name: '固化', createTime: '2021.09.22 24:59:59', code: '21321321312', content: '气泡' },
|
|
||||||
{ name: '丝网印刷', createTime: '2021.12.21 24:59:59', code: '21321322132', content: '气泡' },
|
|
||||||
{ name: '钢化炉', createTime: '2021.12.20 24:59:59', code: '21321312321', content: '气泡' },
|
|
||||||
{ name: '检测设备', createTime: '2021.12.12 24:59:59', code: '21321322132', content: '气泡' },
|
|
||||||
{ name: '包装设备', createTime: '2021.12.23 24:59:59', code: '39284982931', content: '气泡' }
|
|
||||||
]
|
|
||||||
const legendData1 = [
|
|
||||||
{
|
|
||||||
name: '设备1',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 196
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '设备2',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 147
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '设备3',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 24
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '设备4',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 85
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '设备5',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 8
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '设备6',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 112
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '设备7',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 146
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '设备8',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 27
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '设备9',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '设备10',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 90
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const legendData2 = [
|
|
||||||
{
|
|
||||||
name: '磨边',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 196
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '清洗',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 135
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '固化',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 144
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '镀膜',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 97
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '激光打孔',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 12
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '丝网印刷',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '钢化炉',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 3
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const legendData3 = [
|
|
||||||
{
|
|
||||||
name: '钢一线',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 196
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '钢二线',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 133
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '钢三线',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 24
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '钢四线',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 77
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '钢五线',
|
|
||||||
icon: 'circle',
|
|
||||||
value: 77
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const locationTableProps = [
|
|
||||||
{
|
|
||||||
prop: 'eqName',
|
|
||||||
label: '库位名称'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'eqCode',
|
|
||||||
label: '存放物件名称'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'productCode',
|
|
||||||
label: '编码'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'level',
|
|
||||||
label: '存放位置',
|
|
||||||
// subcomponent: alarmLevel,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'unit',
|
|
||||||
label: '单位',
|
|
||||||
// subcomponent: alarmLevel,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'product',
|
|
||||||
label: '数量'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'time',
|
|
||||||
label: '入库时间'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const locationList = [
|
|
||||||
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
|
||||||
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
|
|
||||||
{
|
|
||||||
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
|
|
||||||
},
|
|
||||||
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
|
||||||
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
|
|
||||||
{
|
|
||||||
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
|
|
||||||
},
|
|
||||||
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
|
||||||
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
|
|
||||||
{
|
|
||||||
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
|
|
||||||
},
|
|
||||||
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
|
||||||
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
|
|
||||||
{
|
|
||||||
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
|
|
||||||
},
|
|
||||||
{ eqName: '备件库D-D区-14', eqCode: '原件', level: '中', product: '12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
|
||||||
{ eqName: '辅料库D-D区-1', eqCode: '螺丝刀', level: '下', product: ' 123', productCode: 'WLXX20210415000158', unit: '个', time: '2023年9月10日' },
|
|
||||||
{
|
|
||||||
eqName: ' 辅料库A-D区-1', eqCode: '清洗剂', level: '上', product: ' 123', productCode: 'WLXX20210415000157', unit: '瓶', time: '2023年9月10日'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const inventoryTableProps = [
|
|
||||||
{
|
|
||||||
prop: 'eqName',
|
|
||||||
label: '物件名称'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'eqCode',
|
|
||||||
label: '存放区域'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'productCode',
|
|
||||||
label: '编码'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'level',
|
|
||||||
label: '规格',
|
|
||||||
// subcomponent: alarmLevel,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'unit',
|
|
||||||
label: '单位',
|
|
||||||
// subcomponent: alarmLevel,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'product',
|
|
||||||
label: '数量'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'time',
|
|
||||||
label: '入库时间'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const inventoryList = [
|
|
||||||
{ eqName: '原片', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
|
||||||
{ eqName: '磨轮', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000158', unit: '片', time: '2023年9月10日' },
|
|
||||||
{
|
|
||||||
eqName: ' 包装辅材', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000157', unit: '片', time: '2023年9月10日' },
|
|
||||||
{
|
|
||||||
eqName: ' 螺丝刀', eqCode: '备件库', level: '', product: ' 123', productCode: 'WLXX20220919000147', unit: '个', time: '2023年9月10日' },
|
|
||||||
{
|
|
||||||
eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日' },
|
|
||||||
{ eqName: '原片', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20220919000147', unit: '片', time: '2023年9月10日' },
|
|
||||||
{ eqName: '磨轮', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000158', unit: '片', time: '2023年9月10日' },
|
|
||||||
{
|
|
||||||
eqName: ' 包装辅材', eqCode: '辅料库', level: '133*289', product: ' 12323', productCode: 'WLXX20210415000157', unit: '片', time: '2023年9月10日'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
eqName: ' 螺丝刀', eqCode: '备件库', level: '', product: ' 123', productCode: 'WLXX20220919000147', unit: '个', time: '2023年9月10日'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const qualityYearTableProps = [
|
|
||||||
{
|
|
||||||
prop: 'eqName',
|
|
||||||
label: '作业号'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'eqCode',
|
|
||||||
label: '执行叉车'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'level',
|
|
||||||
label: '库位',
|
|
||||||
// subcomponent: alarmLevel,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'product',
|
|
||||||
label: '成品规格'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'productCode',
|
|
||||||
label: '成品编码'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'time',
|
|
||||||
label: '时间'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const qualityYearList = [
|
|
||||||
{ eqName: 'RQ20230910', eqCode: '1-01', level: '成品库D-D区-14', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月10日' },
|
|
||||||
{ eqName: 'RQ20230911', eqCode: '1-02', level: '成品库A-A区-1', product: ' 3.2-1033*2089', productCode: 'CP563232323', time: '2023年9月11日' },
|
|
||||||
{ eqName: 'RQ20230912', eqCode: '2-01', level: '成品库D-D区-1', product: ' 1.2-1033*2089', productCode: 'CP5651696321', time: '2023年9月12日' },
|
|
||||||
{ eqName: 'RQ20230913', eqCode: '1-03', level: '成品库A-B区-1', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月13日' },
|
|
||||||
{ eqName: 'RQ20230914', eqCode: '2-02', level: '成品库D-D区-2', product: ' 3.2-1033*2089', productCode: 'CP565169322', time: '2023年9月14日' },
|
|
||||||
{ eqName: 'RQ20230915', eqCode: '1-01', level: '成品库B-A区-4', product: ' 1.2-1033*2089', productCode: 'CP56516962323', time: '2023年9月15日' },
|
|
||||||
{ eqName: 'RQ20230916', eqCode: '1-03', level: '成品库A-A区-2', product: ' 2.2-1033*2089', productCode: 'CP5651694343', time: '2023年9月16日' },
|
|
||||||
{ eqName: 'RQ20230917', eqCode: '1-02', level: '成品库C-D区-12', product: '4.2-1033*2089', productCode: 'CP5651692323', time: '2023年9月17日' },
|
|
||||||
{ eqName: 'RQ20230918', eqCode: '2-01', level: '成品库A-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696232', time: '2023年9月18日' },
|
|
||||||
{ eqName: 'RQ20230919', eqCode: '2-02', level: '成品库C-D区-9', product: ' 1.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月19日' },
|
|
||||||
{ eqName: 'RQ20230920', eqCode: '2-03', level: '成品库D-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
|
|
||||||
{ eqName: 'RQ20230920', eqCode: '2-04', level: '成品库D-D区-4', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
|
|
||||||
{ eqName: 'RQ20230920', eqCode: '2-05', level: '成品库A-D区-4', product: ' 5.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
|
|
||||||
{ eqName: 'RQ20230920', eqCode: '3-03', level: '成品库B-D区-4', product: ' 3.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' },
|
|
||||||
{ eqName: 'RQ20230920', eqCode: '1-03', level: '成品库C-D区-4', product: ' 2.2-1033*2089', productCode: 'CP5651696323', time: '2023年9月20日' }
|
|
||||||
]
|
|
||||||
const qualityMonthTableProps = [
|
|
||||||
{
|
|
||||||
prop: 'lineName',
|
|
||||||
label: '产线名'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'process',
|
|
||||||
label: '工序'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'eqName',
|
|
||||||
label: '设备名'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'eqCode',
|
|
||||||
label: '设备编码'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
prop: 'long',
|
|
||||||
label: '总运行时长(h)'
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// prop: 'createTime',
|
|
||||||
// label: '保养时间'
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
prop: 'status',
|
|
||||||
label: '设备状态'
|
|
||||||
}
|
|
||||||
// {
|
|
||||||
// prop: 'nextCreateTime',
|
|
||||||
// label: '下次保养时间'
|
|
||||||
// }
|
|
||||||
// {
|
|
||||||
// prop: 'nextLong',
|
|
||||||
// label: '距离保养时间(天)',
|
|
||||||
// // subcomponent: nextDay,
|
|
||||||
// align: 'center'
|
|
||||||
// }
|
|
||||||
]
|
|
||||||
|
|
||||||
const qualityMonthList = [
|
|
||||||
{
|
|
||||||
lineName: '钢一线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '设备1',
|
|
||||||
eqCode: '2312312',
|
|
||||||
long: '255',
|
|
||||||
// createTime: '2021-02-25 12:00:01',
|
|
||||||
status: '报警'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 365
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢二线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '设备2',
|
|
||||||
eqCode: '43434',
|
|
||||||
long: '255',
|
|
||||||
// createTime: '2021-11-25 12:00:01',
|
|
||||||
status: '正常'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 4
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢三线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '设备3',
|
|
||||||
eqCode: '23213212',
|
|
||||||
long: '255',
|
|
||||||
// createTime: '2021-10-25 12:00:01',
|
|
||||||
status: '故障停机'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 24
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢四线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '设备4',
|
|
||||||
eqCode: '23213',
|
|
||||||
long: '255',
|
|
||||||
// createTime: '2021-02-25 12:00:01',
|
|
||||||
status: '故障停机'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: -36
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lineName: '钢五线',
|
|
||||||
process: '41',
|
|
||||||
eqName: '设备5',
|
|
||||||
eqCode: '23121312',
|
|
||||||
long: '255',
|
|
||||||
// createTime: '2021-06-25 12:00:01',
|
|
||||||
status: '待机'
|
|
||||||
// nextCreateTime: '2022-12-25 12:00:01',
|
|
||||||
// nextLong: 111
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
// let resizeFun = null
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'ProductionMonitoringCockpit',
|
|
||||||
components: {
|
|
||||||
baseContainer,
|
|
||||||
baseTable1,
|
|
||||||
baseTable,
|
|
||||||
baseTable2
|
|
||||||
// TopRadioGroup,
|
|
||||||
// doubleYChart
|
|
||||||
// LinearBarChart
|
|
||||||
// pieChart1,
|
|
||||||
// pieChart2
|
|
||||||
// pieChart3
|
|
||||||
// BaseVideo
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
beilv: 1,
|
|
||||||
beilv2: 1,
|
|
||||||
clientWidth:0,
|
|
||||||
value: 100,
|
|
||||||
qualityYearTableProps,
|
|
||||||
cxNameList,
|
|
||||||
inventoryTableProps,
|
|
||||||
inventoryList,
|
|
||||||
locationList,
|
|
||||||
locationTableProps,
|
|
||||||
cxDataList,
|
|
||||||
qualityYearList,
|
|
||||||
isFullScreen: false,
|
|
||||||
orderProcessList: [
|
|
||||||
{
|
|
||||||
name: '作业号RQ232323',
|
|
||||||
outRate: '0.8'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '作业号RQ2232232',
|
|
||||||
outRate: '0.7'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '作业号RQ2232232',
|
|
||||||
outRate: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '作业号RQ2545444',
|
|
||||||
outRate: '0.6'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '作业号RQ232322',
|
|
||||||
outRate: '0.5'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '作业号RQ20230911',
|
|
||||||
outRate: '0.4'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
qualityTableProps1,
|
|
||||||
qualityMonthList,
|
|
||||||
qualityMonthTableProps,
|
|
||||||
modelMonth: '',
|
|
||||||
qualityList1,
|
|
||||||
qualityTableProps2,
|
|
||||||
qualityList2,
|
|
||||||
dateType: '0',
|
|
||||||
legendData1,
|
|
||||||
legendData2,
|
|
||||||
legendData3
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
// ...mapGetters(['sidebar']),
|
|
||||||
styles() {
|
|
||||||
const v = Math.floor(this.value * this.beilv2 * 100) / 10000
|
|
||||||
return {
|
|
||||||
transform: `scale(${v})`,
|
|
||||||
transformOrigin: 'top left'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// watch: {
|
|
||||||
// clientWidth(val) {
|
|
||||||
// if (!this.timer) {
|
|
||||||
// this.clientWidth = val
|
|
||||||
// this.beilv2 = this.clientWidth / 1920
|
|
||||||
// this.timer = true
|
|
||||||
// let _this = this
|
|
||||||
// setTimeout(function () {
|
|
||||||
// _this.timer = false
|
|
||||||
// }, 500)
|
|
||||||
// }
|
|
||||||
// // 这里可以添加修改时的方法
|
|
||||||
// this.windowWidth(val);
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
created() {
|
|
||||||
// this.fetchList('exception-alarm')
|
|
||||||
// this.fetchList('inAndOutOfEachLine')
|
|
||||||
// this.fetchList('order-process')
|
|
||||||
// this.fetchList('line-chart-data')
|
|
||||||
this.init()
|
|
||||||
this.windowWidth(document.documentElement.clientWidth)
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const _this = this;
|
|
||||||
window.onresize = () => {
|
|
||||||
return (() => {
|
|
||||||
_this.clientWidth = `${document.documentElement.clientWidth}`
|
|
||||||
this.beilv2 = _this.clientWidth / 1920
|
|
||||||
})()
|
|
||||||
}
|
|
||||||
// this.beilv2 = window.innerWidth / 1920
|
|
||||||
// addEventListener('resize', resizeFun = () => {
|
|
||||||
// this.beilv2 = window.innerWidth / 1920
|
|
||||||
// })
|
|
||||||
// erd.listenTo(document, (element) => {
|
|
||||||
// console.log(element.offsetWidth)
|
|
||||||
// this.beilv2 = element.offsetWidth / 1920
|
|
||||||
|
|
||||||
// // var width = element.offsetWidth;
|
|
||||||
// // var height = element.offsetHeight;
|
|
||||||
// });
|
|
||||||
},
|
|
||||||
// beforeDestroy() {
|
|
||||||
// //离开页面删除检测器和所有侦听器
|
|
||||||
// // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
|
|
||||||
// removeEventListener('resize', resizeFun)
|
|
||||||
// },
|
|
||||||
methods: {
|
|
||||||
windowWidth(value) {
|
|
||||||
this.clientWidth = value
|
|
||||||
},
|
|
||||||
// fetchList(type) {
|
|
||||||
// switch (type) {
|
|
||||||
// case 'order-process':
|
|
||||||
// return axios({
|
|
||||||
// url: '/analysis/factory-monitor/order',
|
|
||||||
// method: 'post'
|
|
||||||
// }).then(res => {
|
|
||||||
// if (res.data) {
|
|
||||||
// console.log(res)
|
|
||||||
// this.orderProcessList = res.data
|
|
||||||
// // this.orderProcessList = [
|
|
||||||
// // { id: 1, name: '订单1', outRate: 0.5 },
|
|
||||||
// // { id: 2, name: '订单2', outRate: 0.54 },
|
|
||||||
// // { id: 3, name: '订单3', outRate: 0.45 },
|
|
||||||
// // { id: 4, name: '订单4', outRate: 0.65 },
|
|
||||||
// // { id: 5, name: '订单5', outRate: 0.35 },
|
|
||||||
// // { id: 6, name: '订单6', outRate: 0.15 },
|
|
||||||
// // { id: 7, name: '订单7', outRate: 0.5 },
|
|
||||||
// // { id: 8, name: '订单8', outRate: 0.5 }
|
|
||||||
// // ]
|
|
||||||
// } else {
|
|
||||||
// this.orderProcessList.splice(0)
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
change() {
|
|
||||||
this.isFullScreen = screenfull.isFullscreen
|
|
||||||
},
|
|
||||||
init() {
|
|
||||||
if (screenfull.enabled) {
|
|
||||||
screenfull.on('change', this.change)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
destroy() {
|
|
||||||
if (screenfull.enabled) {
|
|
||||||
screenfull.off('change', this.change)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
changeFullScreen() {
|
|
||||||
console.log(this.beilv);
|
|
||||||
if (!screenfull.enabled) {
|
|
||||||
this.$message({
|
|
||||||
message: 'you browser can not work',
|
|
||||||
type: 'warning'
|
|
||||||
})
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
screenfull.toggle(this.$refs.container)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.visual-container {
|
|
||||||
width: 1920px;
|
|
||||||
height: 1080px;
|
|
||||||
background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
// opacity: .8;
|
|
||||||
.container-title {
|
|
||||||
width: 100%;
|
|
||||||
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
color: #00fff0;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.title-button {
|
|
||||||
color: #00fff0;
|
|
||||||
font-size: 20px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-main {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.now-team-title {
|
|
||||||
margin: 0;
|
|
||||||
margin-top: -1em;
|
|
||||||
font-size: 1.2em;
|
|
||||||
line-height: 2em;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-title {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.now-secondary-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 2em;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.now-team-content {
|
|
||||||
font-size: 3em;
|
|
||||||
line-height: 1em;
|
|
||||||
color: #52fff1;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-progress-bar__inner {
|
|
||||||
background-color: unset;
|
|
||||||
background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
|
||||||
}
|
|
||||||
.visual-select {
|
|
||||||
position: absolute;
|
|
||||||
right: 1em;
|
|
||||||
top: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
// .container-main {
|
|
||||||
// padding: 5px;
|
|
||||||
// }
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.visual-container {
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track-piece {
|
|
||||||
background: #1b2b3d;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-corner {
|
|
||||||
background: #1b2b3d;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
width: 6px;
|
|
||||||
background: #1b2b3d;
|
|
||||||
-webkit-border-radius: 2em;
|
|
||||||
-moz-border-radius: 2em;
|
|
||||||
border-radius: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba($color: #5bc4be, $alpha: 0.7);
|
|
||||||
background-clip: padding-box;
|
|
||||||
min-height: 28px;
|
|
||||||
-webkit-border-radius: 2em;
|
|
||||||
-moz-border-radius: 2em;
|
|
||||||
border-radius: 2em;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background-color: rgba($color: #5bc4be, $alpha: 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-input {
|
|
||||||
min-height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-input__inner {
|
|
||||||
background-color: rgba($color: #31878c, $alpha: 0.29);
|
|
||||||
border: rgba($color: #31878c, $alpha: 0.29);
|
|
||||||
color: aliceblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-divider--vertical {
|
|
||||||
height: 174px;
|
|
||||||
width: 1px;
|
|
||||||
border: rgba(255, 255, 255, 0.15);
|
|
||||||
color: rgba(255, 255, 255, 0.15);
|
|
||||||
margin-left: 3em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.flex-col {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-1 {
|
|
||||||
flex: 1 1;
|
|
||||||
}
|
|
||||||
.h-full {
|
|
||||||
height: calc(100vh - 150px);
|
|
||||||
}
|
|
||||||
/* .container-main {
|
|
||||||
min-height: calc(100vh - 10em);
|
|
||||||
} */
|
|
||||||
</style>
|
|
@ -1,127 +0,0 @@
|
|||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div :id="id" :class="className" :style="{ height: height, width:width}" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import echarts from 'echarts'
|
|
||||||
import 'echarts/theme/macarons' // echarts theme
|
|
||||||
import resize from './mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'OverviewBar',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'OverviewLine'
|
|
||||||
},
|
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: 'chart'
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '100%'
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: '300px'
|
|
||||||
},
|
|
||||||
showLegend: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
legendData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initChart()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (!this.chart) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
|
||||||
this.chart.setOption({
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
|
||||||
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: 10,
|
|
||||||
left: '2%',
|
|
||||||
right: '2%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#123341', // 左边线的颜色
|
|
||||||
width: '1'// 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#666a74' // 坐标值得具体的颜色
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#123341', // 左边线的颜色
|
|
||||||
width: '1'// 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#666a74' // 坐标值得具体的颜色
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: [120, 200, 150, 80, 70, 110, 130],
|
|
||||||
type: 'bar',
|
|
||||||
showBackground: true,
|
|
||||||
backgroundStyle: {
|
|
||||||
color: 'rgba(180, 180, 180, 0.2)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
@ -1,253 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zwq
|
|
||||||
* @Date: 2022-01-21 14:43:06
|
|
||||||
* @LastEditors: zwq
|
|
||||||
* @LastEditTime: 2022-01-24 13:27:41
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
|
|
||||||
<div :id="id" :class="className" :style="{ paddingTop: '1.25em', height: height + 'px', width:width}" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import echarts from 'echarts'
|
|
||||||
import 'echarts/theme/macarons' // echarts theme
|
|
||||||
import resize from './mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'OverviewBar',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'OverviewLine'
|
|
||||||
},
|
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: 'chart'
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '100%'
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: '300px'
|
|
||||||
},
|
|
||||||
legendPosition: {
|
|
||||||
type: String,
|
|
||||||
default: 'center'
|
|
||||||
},
|
|
||||||
showLegend: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
legendData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initChart()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (!this.chart) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
|
||||||
this.chart.setOption({
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis'
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '1%',
|
|
||||||
right: '1%',
|
|
||||||
bottom: '0',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
itemHeight: 10,
|
|
||||||
itemWidth: 10,
|
|
||||||
x: this.legendPosition, // 可设定图例在左、右、居中
|
|
||||||
y: 'top', // 可设定图例在上、下、居中
|
|
||||||
show: this.showLegend,
|
|
||||||
data: this.legendData,
|
|
||||||
top: 28,
|
|
||||||
right: '1%',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: '#ced1d5'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
splitLine: { show: false }, // 去除网格线
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#123341', // 左边线的颜色
|
|
||||||
width: '1'// 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#666a74' // 坐标值得具体的颜色
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: ['1', '5', '15', '20', '25', '30']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
splitLine: { show: false }, // 去除网格线
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#123341', // 左边线的颜色
|
|
||||||
width: '1'// 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#666a74' // 坐标值得具体的颜色
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: this.showLegend ? this.legendData[0].name : '',
|
|
||||||
type: 'line',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: '#3574a8',
|
|
||||||
lineStyle: {
|
|
||||||
color: '#3574a8'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [120, 32, 101, 134, 90, 230, 210]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.showLegend ? this.legendData[1].name : '',
|
|
||||||
type: 'line',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: '#9f3476',
|
|
||||||
lineStyle: {
|
|
||||||
color: '#9f3476'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [270, 182, 191, 234, 290, 230, 210]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.showLegend ? this.legendData[2].name : '',
|
|
||||||
type: 'line',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: '#30959d',
|
|
||||||
lineStyle: {
|
|
||||||
color: '#30959d'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [160, 32, 301, 154, 190, 330, 210]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.showLegend ? this.legendData[3].name : '',
|
|
||||||
type: 'line',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: '#5255be',
|
|
||||||
lineStyle: {
|
|
||||||
color: '#5255be'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [150, 132, 21, 234, 190, 130, 320]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.showLegend ? this.legendData[4].name : '',
|
|
||||||
type: 'line',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: '#8b4449',
|
|
||||||
lineStyle: {
|
|
||||||
color: '#8b4449'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [210, 332, 201, 34, 290, 230, 320]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.showLegend ? this.legendData[5].name : '',
|
|
||||||
type: 'line',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: '#a29848',
|
|
||||||
lineStyle: {
|
|
||||||
color: '#a29848'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [20, 62, 101, 34, 190, 30, 120]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.showLegend && this.legendData[6] ? this.legendData[6].name : '',
|
|
||||||
type: 'line',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: '#a29848',
|
|
||||||
lineStyle: {
|
|
||||||
color: '#a29848'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [20, 62, 101, 34, 190, 30, 120]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.showLegend && this.legendData[7] ? this.legendData[7].name : '',
|
|
||||||
type: 'line',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: '#a29848',
|
|
||||||
lineStyle: {
|
|
||||||
color: '#a29848'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [20, 62, 101, 34, 190, 30, 120]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chart{
|
|
||||||
margin-top: -3em
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,221 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zwq
|
|
||||||
* @Date: 2022-01-21 14:43:06
|
|
||||||
* @LastEditors: zwq
|
|
||||||
* @LastEditTime: 2022-01-24 09:12:18
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div :id="id" :class="className" :style="{ height: computedHeight, width: width }" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import echarts from 'echarts'
|
|
||||||
import 'echarts/theme/macarons' // echarts theme
|
|
||||||
import resize from './mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'OverviewBar',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'DefaultPieChart'
|
|
||||||
},
|
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: 'chart'
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '100%'
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: '300px'
|
|
||||||
},
|
|
||||||
showCenterTitle: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
showLegend: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
legendConfig: {
|
|
||||||
type: Object,
|
|
||||||
default: function() {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
seriesConfig: {
|
|
||||||
type: Object,
|
|
||||||
default: function() {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
seriesData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
barColor: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [
|
|
||||||
'#5fe1d2',
|
|
||||||
'#ffb2b0',
|
|
||||||
'#8e90ff',
|
|
||||||
'#f058aa',
|
|
||||||
'#8652da',
|
|
||||||
'#87fb84',
|
|
||||||
'#61b9ff',
|
|
||||||
'#fdf6a6',
|
|
||||||
'#ffc465',
|
|
||||||
'#98d9ff'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
const lData = this.seriesData
|
|
||||||
return {
|
|
||||||
chart: null,
|
|
||||||
defaultConfig: {
|
|
||||||
// 默认的legend配置
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
left: '75%',
|
|
||||||
bottom: 0,
|
|
||||||
itemHeight: 10,
|
|
||||||
itemWidth: 10,
|
|
||||||
formatter: function(name) {
|
|
||||||
let pieLegendVale = {}
|
|
||||||
lData.filter((item, index) => {
|
|
||||||
if (item.name === name) {
|
|
||||||
pieLegendVale = item
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const arr = ['{b|' + pieLegendVale.name + '}', '{a|' + pieLegendVale.value + '}']
|
|
||||||
return arr.join(' ')
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
rich: {
|
|
||||||
a: {
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 10,
|
|
||||||
color: '#f988bf',
|
|
||||||
lineHeight: 16
|
|
||||||
},
|
|
||||||
b: {
|
|
||||||
// verticalAlign: 'top',
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 10,
|
|
||||||
color: '#dddfe1'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 默认的series配置
|
|
||||||
series: {
|
|
||||||
center: ['35%', '50%'],
|
|
||||||
radius: ['40%', '70%'],
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: '20',
|
|
||||||
fontWeight: 'bold'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
computedHeight: function() {
|
|
||||||
if (/[0-9]+%$/.test(this.height)) {
|
|
||||||
// 如果是百分比
|
|
||||||
return this.height
|
|
||||||
}
|
|
||||||
return this.height * this.beilv + 'px'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initChart()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (!this.chart) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
|
||||||
this.chart.setOption({
|
|
||||||
title: this.showCenterTitle
|
|
||||||
? {
|
|
||||||
text: '总共',
|
|
||||||
subtext: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
|
|
||||||
top: '32%',
|
|
||||||
left: '49%',
|
|
||||||
textAlign: 'center',
|
|
||||||
itemGap: 5,
|
|
||||||
textStyle: {
|
|
||||||
color: '#c0c0c0',
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: 'lighter',
|
|
||||||
lineHeight: 15
|
|
||||||
},
|
|
||||||
subtextStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 24,
|
|
||||||
lineHeight: 20
|
|
||||||
}
|
|
||||||
}
|
|
||||||
: {},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '0px',
|
|
||||||
right: '0px',
|
|
||||||
bottom: '0px',
|
|
||||||
left: '0px',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
// 默认配置
|
|
||||||
...this.defaultConfig.legend,
|
|
||||||
// 外部传入配置
|
|
||||||
...this.legendConfig
|
|
||||||
},
|
|
||||||
color: this.barColor,
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: 'default name',
|
|
||||||
type: 'pie',
|
|
||||||
// 默认series配置
|
|
||||||
...this.defaultConfig.series,
|
|
||||||
// 外部传入配置
|
|
||||||
...this.seriesConfig,
|
|
||||||
data: this.seriesData
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* .chart >>> div:first-child{
|
|
||||||
background-color: red;
|
|
||||||
height: 100% !important;
|
|
||||||
} */
|
|
||||||
</style>
|
|
@ -1,158 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zhp
|
|
||||||
* @Date: 2022-01-23 16:50:39
|
|
||||||
* @LastEditTime: 2022-01-25 15:43:52
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div :id="id" :class="className" :style="{ height: height, width:width}" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import echarts from 'echarts'
|
|
||||||
import 'echarts/theme/macarons' // echarts theme
|
|
||||||
import resize from '../mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'OverviewBar',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'OverviewLine'
|
|
||||||
},
|
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: 'chart'
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '100%'
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: '300px'
|
|
||||||
},
|
|
||||||
showLegend: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
legendData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initChart()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (!this.chart) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
|
||||||
this.chart.setOption({
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
|
||||||
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '10%',
|
|
||||||
left: '2%',
|
|
||||||
right: '2%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
itemHeight: 10,
|
|
||||||
x: 'right', // 可设定图例在左、右、居中
|
|
||||||
y: 'top', // 可设定图例在上、下、居中
|
|
||||||
itemWidth: 10,
|
|
||||||
show: this.showLegend,
|
|
||||||
data: this.legendData,
|
|
||||||
right: '1%',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: '#ced1d5'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#123341', // 左边线的颜色
|
|
||||||
width: '1'// 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#666a74' // 坐标值得具体的颜色
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
scale: true,
|
|
||||||
max: 12,
|
|
||||||
min: 0,
|
|
||||||
splitNumber: 5,
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#213259'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
boundaryGap: [0.2, 0.2],
|
|
||||||
axisLabel: {
|
|
||||||
formatter: '{value} h',
|
|
||||||
textStyle: {
|
|
||||||
color: 'white'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: this.legendData[0].name,
|
|
||||||
type: 'bar',
|
|
||||||
data: this.legendData[0].data,
|
|
||||||
markLine: {
|
|
||||||
data: [{ type: 'average', name: 'Avg' }]
|
|
||||||
},
|
|
||||||
barWidth: '10%',
|
|
||||||
itemStyle: this.legendData[0].itemStyle
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.legendData[1].name,
|
|
||||||
type: 'bar',
|
|
||||||
data: this.legendData[1].data,
|
|
||||||
barWidth: '10%',
|
|
||||||
itemStyle: this.legendData[1].itemStyle
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
@ -1,158 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zhp
|
|
||||||
* @Date: 2022-01-23 16:50:39
|
|
||||||
* @LastEditTime: 2022-01-25 15:44:26
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div :id="id" :class="className" :style="{ height: height, width:width}" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import echarts from 'echarts'
|
|
||||||
import 'echarts/theme/macarons' // echarts theme
|
|
||||||
import resize from '../mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'OverviewBar',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'OverviewLine'
|
|
||||||
},
|
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: 'chart'
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '100%'
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: '300px'
|
|
||||||
},
|
|
||||||
showLegend: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
legendData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initChart()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (!this.chart) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
|
||||||
this.chart.setOption({
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: { // 坐标轴指示器,坐标轴触发有效
|
|
||||||
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '10%',
|
|
||||||
left: '2%',
|
|
||||||
right: '2%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
itemHeight: 10,
|
|
||||||
x: 'right', // 可设定图例在左、右、居中
|
|
||||||
y: 'top', // 可设定图例在上、下、居中
|
|
||||||
itemWidth: 10,
|
|
||||||
show: this.showLegend,
|
|
||||||
data: this.legendData,
|
|
||||||
right: '1%',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: '#ced1d5'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#123341', // 左边线的颜色
|
|
||||||
width: '1'// 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#666a74' // 坐标值得具体的颜色
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
scale: true,
|
|
||||||
max: 12,
|
|
||||||
min: 0,
|
|
||||||
splitNumber: 5,
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#213259'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
boundaryGap: [0.2, 0.2],
|
|
||||||
axisLabel: {
|
|
||||||
formatter: '{value} h',
|
|
||||||
textStyle: {
|
|
||||||
color: 'white'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: this.legendData[0].name,
|
|
||||||
type: 'bar',
|
|
||||||
data: this.legendData[0].data,
|
|
||||||
markLine: {
|
|
||||||
data: [{ type: 'average', name: 'Avg' }]
|
|
||||||
},
|
|
||||||
barWidth: '10%',
|
|
||||||
itemStyle: this.legendData[0].itemStyle
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.legendData[1].name,
|
|
||||||
type: 'bar',
|
|
||||||
data: this.legendData[1].data,
|
|
||||||
barWidth: '10%',
|
|
||||||
itemStyle: this.legendData[1].itemStyle
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
@ -1,144 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: gtz
|
|
||||||
* @Date: 2022-01-19 15:58:17
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2022-01-24 09:01:07
|
|
||||||
* @Description: file content
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px'}">
|
|
||||||
<div class="line" />
|
|
||||||
<div class="line line-vertical" />
|
|
||||||
<div class="line line-right" />
|
|
||||||
<div class="line line-right-vertical" />
|
|
||||||
<div class="line line-bottom" />
|
|
||||||
<div class="line line-bottom-vertical" />
|
|
||||||
<div class="line line-bottom-right" />
|
|
||||||
<div class="line line-bottom-right-vertical" />
|
|
||||||
<div class="bar-item">
|
|
||||||
<div v-if="title" class="bar-title">
|
|
||||||
<span>
|
|
||||||
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
|
|
||||||
{{ title }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="bar-content">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'BaseContainer',
|
|
||||||
props: {
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
titleIcon: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: 200
|
|
||||||
},
|
|
||||||
baseSize: {
|
|
||||||
type: Number,
|
|
||||||
default: 12
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
curIndex: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeTab(num) {
|
|
||||||
this.curIndex = num
|
|
||||||
this.$emit('tabSelect', num)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.base-container {
|
|
||||||
color: #fff;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba($color: #061027, $alpha: 0.15);
|
|
||||||
position: relative;
|
|
||||||
padding: .5em;
|
|
||||||
border: 2px solid;
|
|
||||||
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
|
|
||||||
.line {
|
|
||||||
position: absolute;
|
|
||||||
border-top: 4px solid #52FFF1;
|
|
||||||
width: 2em;
|
|
||||||
top: -.25em;
|
|
||||||
left: -.25em;
|
|
||||||
&-vertical {
|
|
||||||
top: calc(-5em / 12);
|
|
||||||
left: calc(-1em / 12);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
transform-origin: left;
|
|
||||||
}
|
|
||||||
&-right {
|
|
||||||
top: -.25em;
|
|
||||||
right: -.25em;
|
|
||||||
left: inherit;
|
|
||||||
}
|
|
||||||
&-right-vertical {
|
|
||||||
top: calc(-5em / 12);
|
|
||||||
right: calc(-1em / 12);
|
|
||||||
left: inherit;
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
transform-origin: right;
|
|
||||||
}
|
|
||||||
&-bottom {
|
|
||||||
top: inherit;
|
|
||||||
left: -.25em;
|
|
||||||
bottom: -.25em;
|
|
||||||
}
|
|
||||||
&-bottom-vertical {
|
|
||||||
top: inherit;
|
|
||||||
left: calc(-1em / 12);
|
|
||||||
bottom: calc(-5em / 12);
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
transform-origin: left;
|
|
||||||
}
|
|
||||||
&-bottom-right {
|
|
||||||
top: inherit;
|
|
||||||
left: inherit;
|
|
||||||
right: -.25em;
|
|
||||||
bottom: -.25em;
|
|
||||||
}
|
|
||||||
&-bottom-right-vertical {
|
|
||||||
top: inherit;
|
|
||||||
left: inherit;
|
|
||||||
right: calc(-1em / 12);
|
|
||||||
bottom: calc(-5em / 12);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
transform-origin: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bar-title {
|
|
||||||
width: 100%;
|
|
||||||
color: #52FFF1;
|
|
||||||
font-size: 1.5em;
|
|
||||||
padding: .1em;
|
|
||||||
}
|
|
||||||
.bar-content{
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,170 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Date: 2020-12-14 09:07:03
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2023-11-13 16:41:13
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\ProductionAndOperationCenterCockpit\baseTable.vue
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="visual-base-table-container">
|
|
||||||
<el-table
|
|
||||||
v-loading="isLoading"
|
|
||||||
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 + 'px',padding: 0}"
|
|
||||||
:row-style="setRowStyle"
|
|
||||||
:data="renderData"
|
|
||||||
border
|
|
||||||
style="width: 100%; background: transparent"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
v-for="item in renderTableHeadList"
|
|
||||||
:key="item.prop"
|
|
||||||
:show-overflow-tooltip="showOverflow"
|
|
||||||
v-bind="item"
|
|
||||||
>
|
|
||||||
<template slot-scope="scope">
|
|
||||||
|
|
||||||
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
|
|
||||||
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<slot name="content" />
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { isObject, isString } from 'lodash'
|
|
||||||
export default {
|
|
||||||
name: 'BaseTable',
|
|
||||||
filters: {
|
|
||||||
commonFilter: (source, filterType = a => a) => {
|
|
||||||
return filterType(source)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
tableData: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
validator: val => val.filter(item => !isObject(item)).length === 0
|
|
||||||
},
|
|
||||||
tableConfig: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
|
|
||||||
},
|
|
||||||
isLoading: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
page: {
|
|
||||||
type: Number,
|
|
||||||
required: false,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
limit: {
|
|
||||||
type: Number,
|
|
||||||
required: false,
|
|
||||||
default: 5
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
showOverflow: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableConfigBak: [],
|
|
||||||
selectedBox: new Array(20).fill(true)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
renderData() {
|
|
||||||
if (this.tableData && !this.tableData[0]._pageIndex) {
|
|
||||||
this.tableData.forEach((item, index) => {
|
|
||||||
item._pageIndex = (this.page - 1) * this.limit + index + 1
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
|
|
||||||
},
|
|
||||||
renderTableHeadList() {
|
|
||||||
return this.tableConfig.filter((item, index) => {
|
|
||||||
return this.selectedBox[index]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeMount() {
|
|
||||||
this.selectedBox = new Array(20).fill(true)
|
|
||||||
},
|
|
||||||
// mounted() {
|
|
||||||
// this.tableConfigBak = cloneDeep(this.tableConfig).map(item => {
|
|
||||||
// return {
|
|
||||||
// ...item,
|
|
||||||
// selected: true
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
methods: {
|
|
||||||
emitData(val) {
|
|
||||||
this.$emit('emitFun', val)
|
|
||||||
},
|
|
||||||
setRowStyle(v) {
|
|
||||||
if (v.rowIndex % 2 === 0) {
|
|
||||||
return {
|
|
||||||
background: 'rgba(76,97,123,0.2)',
|
|
||||||
color: '#fff',
|
|
||||||
height: 26 * this.beilv + 'px',
|
|
||||||
padding: 0
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return {
|
|
||||||
background: 'rgba(79,114,136,0.29)',
|
|
||||||
color: '#fff',
|
|
||||||
height: 26 * this.beilv + 'px',
|
|
||||||
padding: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
@import "~@/styles/index.scss";
|
|
||||||
.visual-base-table-container {
|
|
||||||
.el-table {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
.el-table::before,.el-table--border::after {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.el-table th,td{
|
|
||||||
border-color: #0D1728 !important;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.el-table tr {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.el-table__row:hover > td {
|
|
||||||
background-color: rgba(79,114,136,0.29) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table__row--striped:hover > td {
|
|
||||||
background-color: rgba(79,114,136,0.29) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .setting {
|
|
||||||
// text-align: right;
|
|
||||||
// padding: 15px;
|
|
||||||
// .setting-box {
|
|
||||||
// width: 100px;
|
|
||||||
// }
|
|
||||||
// i {
|
|
||||||
// color: #aaa;
|
|
||||||
// @extend .pointer;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
</style>
|
|
@ -1,31 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zhp
|
|
||||||
* @Date: 2022-01-23 21:02:57
|
|
||||||
* @LastEditTime: 2022-01-23 21:08:21
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
style=" width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin:auto"
|
|
||||||
:style="{background:injectData.colour}"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
injectData: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
emitClick() {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
@ -1,60 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zhp
|
|
||||||
* @Date: 2022-01-22 18:05:45
|
|
||||||
* @LastEditTime: 2022-01-23 10:50:29
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div style="width:100%,text-align:center">
|
|
||||||
<div style="text-align:center">
|
|
||||||
<el-radio-group v-model="dateType" size="mini">
|
|
||||||
<el-radio-button v-for="item in labelList" :key="item.index" :label="item.index">
|
|
||||||
{{ item.label }}
|
|
||||||
</el-radio-button>
|
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'TopGroup',
|
|
||||||
props: {
|
|
||||||
dateType: {
|
|
||||||
type: String,
|
|
||||||
default: '0'
|
|
||||||
},
|
|
||||||
labelList: {
|
|
||||||
type: Array,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
mounted() {},
|
|
||||||
methods: {}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep .el-radio-button__inner {
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
background: #133648;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
margin-top: -0.5em;
|
|
||||||
color: white;
|
|
||||||
line-height: 14px;
|
|
||||||
outline: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
||||||
background: #3eb0ae;
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
outline: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,83 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: gtz
|
|
||||||
* @Date: 2022-01-20 14:12:10
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2022-01-25 16:57:00
|
|
||||||
* @Description: file content
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\ProductionLineMonitoringCockpit\nowTeam.vue
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="now-team">
|
|
||||||
<el-row style="margin-bottom: 3em">
|
|
||||||
<p class="now-team-title">- 开始时间 -</p>
|
|
||||||
<p class="now-team-content blue">2021.1.26 13:30:21</p>
|
|
||||||
</el-row>
|
|
||||||
<el-row style="margin-bottom: 1em">
|
|
||||||
<el-col :span="8">
|
|
||||||
<p class="now-team-title">- 班组名称 -</p>
|
|
||||||
<p style="font-size:2em" class="now-team-content blue">中班执行一组</p>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="8">
|
|
||||||
<p class="now-team-title">- 原片投入(片) -</p>
|
|
||||||
<p class="now-team-content blue">122</p>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="8">
|
|
||||||
<p class="now-team-title">- 投入面积(㎡) -</p>
|
|
||||||
<p class="now-team-content blue">12000</p>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="8">
|
|
||||||
<p class="now-team-title">- 产品规格 -</p>
|
|
||||||
<p class="now-team-content blue">110</p>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="8">
|
|
||||||
<p class="now-team-title">- 执行工单 -</p>
|
|
||||||
<p class="now-team-content blue">110</p>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="8">
|
|
||||||
<p class="now-team-title">- 成品率 -</p>
|
|
||||||
<p class="now-team-content blue">98.8%</p>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'ProductionMonitoringCockpit',
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
computed: {},
|
|
||||||
mounted() {},
|
|
||||||
methods: {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.now-team{
|
|
||||||
width: 100%;
|
|
||||||
.now-team-title{
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 2em;
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.now-team-content{
|
|
||||||
font-size: 2.5em;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1em;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.blue {
|
|
||||||
color: #52FFF1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,229 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: lb
|
|
||||||
* @Date: 2022-01-21 14:43:06
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2023-02-07 13:46:05
|
|
||||||
* @Description: 简单折线图
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div ref="SimpleLineChart" :style="{ height: height ? height + 'px' : '100%', width: '100%' }" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import echarts from 'echarts'
|
|
||||||
import 'echarts/theme/macarons' // echarts theme
|
|
||||||
import resize from './mixins/resize'
|
|
||||||
|
|
||||||
const AxisLine = {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#123341',
|
|
||||||
width: '1'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const AxisLabel = {
|
|
||||||
textStyle: {
|
|
||||||
color: '#666a74'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 2022.8.23 TODO:
|
|
||||||
* 1.一份数据三张表
|
|
||||||
* 2.切换选项卡时只更新一张表的数据
|
|
||||||
* 3.注释掉成品率条形图,改为将“投入、产出”拆分图,与“成品率”合计三张
|
|
||||||
*/
|
|
||||||
|
|
||||||
class ChartOption {
|
|
||||||
constructor() {
|
|
||||||
this.color = [
|
|
||||||
'#3574a8',
|
|
||||||
'#9f3476',
|
|
||||||
'#30959d',
|
|
||||||
'#5255be',
|
|
||||||
'#8b4449',
|
|
||||||
'#a29848',
|
|
||||||
'#FF6600',
|
|
||||||
'#FFFF00',
|
|
||||||
'#91cc75',
|
|
||||||
'#fac858',
|
|
||||||
'#ee6666',
|
|
||||||
'#73c0de',
|
|
||||||
'#3ba272',
|
|
||||||
'#fc8452',
|
|
||||||
'#9a60b4',
|
|
||||||
'#ea7ccc'
|
|
||||||
]
|
|
||||||
this.tooltip = { trigger: 'axis' }
|
|
||||||
this.grid = {
|
|
||||||
left: '2%',
|
|
||||||
right: '2%',
|
|
||||||
bottom: '5%',
|
|
||||||
height: '80%',
|
|
||||||
containLabel: true
|
|
||||||
}
|
|
||||||
this.legend = {
|
|
||||||
itemHeight: 10,
|
|
||||||
itemWidth: 10,
|
|
||||||
y: 'top',
|
|
||||||
x: 'center',
|
|
||||||
top: 0,
|
|
||||||
// right: '1%',
|
|
||||||
data: [
|
|
||||||
/** dynamic */
|
|
||||||
],
|
|
||||||
// right: '1%',
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: '#ced1d5'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.xAxis = {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
splitLine: { show: false },
|
|
||||||
axisLine: AxisLine,
|
|
||||||
axisLabel: { ...AxisLabel, rotate: 20 },
|
|
||||||
data: [
|
|
||||||
/** dynamic */
|
|
||||||
]
|
|
||||||
}
|
|
||||||
this.yAxis = {
|
|
||||||
type: 'value',
|
|
||||||
splitLine: { show: false },
|
|
||||||
axisLine: AxisLine,
|
|
||||||
axisLabel: AxisLabel
|
|
||||||
}
|
|
||||||
this.series = [
|
|
||||||
/** dynmaic */
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {object} rawdata
|
|
||||||
*/
|
|
||||||
setLegend(rawdata) {
|
|
||||||
if (rawdata) {
|
|
||||||
const data = Object.keys(rawdata)
|
|
||||||
this.legend.data = data.map(item => ({ icon: 'roundRect', name: item }))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {object} rawdata
|
|
||||||
*/
|
|
||||||
setCategory(rawdata) {
|
|
||||||
if (rawdata) {
|
|
||||||
if (Object.keys(rawdata).length > 0) {
|
|
||||||
const first = rawdata[Object.keys(rawdata)[0]]
|
|
||||||
this.xAxis.data = Object.keys(first)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {object} rawdata
|
|
||||||
*/
|
|
||||||
setData(rawdata) {
|
|
||||||
if (rawdata) {
|
|
||||||
this.series = []
|
|
||||||
for (const key in rawdata) {
|
|
||||||
this.series.push({
|
|
||||||
name: key,
|
|
||||||
type: 'line',
|
|
||||||
data: Object.entries(rawdata[key]).map(([subkey, value]) => value)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
clearOptions() {
|
|
||||||
this.legend.data.splice(0)
|
|
||||||
this.xAxis.data.splice(0)
|
|
||||||
this.series.splice(0)
|
|
||||||
}
|
|
||||||
// add more...
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'SimpleLineChart',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
caty: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
dataList: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null,
|
|
||||||
defaultOpts: new ChartOption()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
showLegend() {
|
|
||||||
return this.legend.length > 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
dataList: {
|
|
||||||
handler: function(val) {
|
|
||||||
this.updateChartOptions()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initChart()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
if (!this.chart) {
|
|
||||||
this.chart = echarts.init(this.$refs.SimpleLineChart)
|
|
||||||
this.updateChartOptions()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
updateChartOptions() {
|
|
||||||
if (!this.chart) return
|
|
||||||
this.defaultOpts.clearOptions()
|
|
||||||
/** set */
|
|
||||||
this.defaultOpts.setLegend(this.dataList)
|
|
||||||
this.defaultOpts.setCategory(this.dataList)
|
|
||||||
this.defaultOpts.setData(this.dataList)
|
|
||||||
/** log */
|
|
||||||
this.chart.setOption({ ...this.defaultOpts })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chart {
|
|
||||||
margin-top: -3em;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,51 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Date: 2020-12-14 09:07:03
|
|
||||||
* @LastEditors: zwq
|
|
||||||
* @LastEditTime: 2022-01-23 00:14:53
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<span class="alarm-level">
|
|
||||||
<span
|
|
||||||
style="display: inline-block; height: .6em;width: .6em; border-radius: .3em; position: relative;"
|
|
||||||
:style="{background: colorList[injectData.level].back, boxShadow: `0px 0px 2px 2px ${colorList[injectData.level].border}`}"
|
|
||||||
/>
|
|
||||||
{{ injectData.level }}级
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'NextDay',
|
|
||||||
props: {
|
|
||||||
injectData: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
colorList: {
|
|
||||||
1: {
|
|
||||||
back: 'rgba(255, 12, 12, 1)',
|
|
||||||
border: 'rgba(255, 12, 12, .5)'
|
|
||||||
},
|
|
||||||
2: {
|
|
||||||
back: 'rgba(255, 183, 12, 1)',
|
|
||||||
border: 'rgba(255, 183, 12, .5)'
|
|
||||||
},
|
|
||||||
3: {
|
|
||||||
back: 'rgba(39, 96, 255, 1)',
|
|
||||||
border: 'rgba(39, 96, 255, .5)'
|
|
||||||
},
|
|
||||||
4: {
|
|
||||||
back: 'rgba(12, 255, 30, 1)',
|
|
||||||
border: 'rgba(12, 255, 30, .5)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
@ -1,195 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: gtz
|
|
||||||
* @Date: 2022-01-19 15:58:17
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2023-11-14 13:28:27
|
|
||||||
* @Description: file content
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="base-container" ref="baseContainer" :style="{ height: '100%', fontSize: 12 + 'px', padding: 12 + 'px' }"
|
|
||||||
:class="{ 'no-padding': noPadding, 'border-none': !showLine }">
|
|
||||||
<!-- <div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px', padding: 12 + 'px'}"> -->
|
|
||||||
<template v-if="showLine">
|
|
||||||
<div class="line" />
|
|
||||||
<div class="line line-vertical" />
|
|
||||||
<div class="line line-right" />
|
|
||||||
<div class="line line-right-vertical" />
|
|
||||||
<div class="line line-bottom" />
|
|
||||||
<div class="line line-bottom-vertical" />
|
|
||||||
<div class="line line-bottom-right" />
|
|
||||||
<div class="line line-bottom-right-vertical" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div class="bar-item">
|
|
||||||
<div v-if="title" class="bar-title">
|
|
||||||
<span>
|
|
||||||
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
|
|
||||||
{{ title }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="bar-content" :class="{ 'p-0': noContentPadding }">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'BaseContainer',
|
|
||||||
props: {
|
|
||||||
showLine: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
noPadding: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
back: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
noContentPadding: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
titleIcon: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: 200
|
|
||||||
},
|
|
||||||
baseSize: {
|
|
||||||
type: Number,
|
|
||||||
default: 12
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
curIndex: 0,
|
|
||||||
// imgUrl: require(`../../../../assets/img/${this.back}.png`),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// console.log(this.back);
|
|
||||||
// this.$nextTick(() => {
|
|
||||||
// this.$refs.baseContainer.style = `background:url('../../../../assets/img/${this.back}.png') no-repeat;)`
|
|
||||||
// })
|
|
||||||
// console.log(this.$refs.baseContainer.style)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeTab(num) {
|
|
||||||
this.curIndex = num
|
|
||||||
this.$emit('tabSelect', num)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
.base-container {
|
|
||||||
color: #fff;
|
|
||||||
width: 100%;
|
|
||||||
// background-color: rgba($color: #061027, $alpha: 0.15);
|
|
||||||
position: relative;
|
|
||||||
// border: 2px solid;
|
|
||||||
background: url('../../../../assets/img/energy.png') no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
// border-radius: 40px 0px 40px 0px;
|
|
||||||
// border-image: linear-gradient(360deg, rgba(157, 246, 254, 0.05), rgba(100, 233, 252, 0.9)) 2 2;
|
|
||||||
// .line {
|
|
||||||
// position: absolute;
|
|
||||||
// border-top: 4px solid #52fff1;
|
|
||||||
// width: 2em;
|
|
||||||
// top: -0.25em;
|
|
||||||
// left: -0.25em;
|
|
||||||
// &-vertical {
|
|
||||||
// top: calc(-5em / 12);
|
|
||||||
// left: calc(-1em / 12);
|
|
||||||
// transform: rotate(90deg);
|
|
||||||
// transform-origin: left;
|
|
||||||
// }
|
|
||||||
// &-right {
|
|
||||||
// top: -0.25em;
|
|
||||||
// right: -0.25em;
|
|
||||||
// left: inherit;
|
|
||||||
// }
|
|
||||||
// &-right-vertical {
|
|
||||||
// top: calc(-5em / 12);
|
|
||||||
// right: calc(-1em / 12);
|
|
||||||
// left: inherit;
|
|
||||||
// transform: rotate(-90deg);
|
|
||||||
// transform-origin: right;
|
|
||||||
// }
|
|
||||||
// &-bottom {
|
|
||||||
// top: inherit;
|
|
||||||
// left: -0.25em;
|
|
||||||
// bottom: -0.25em;
|
|
||||||
// }
|
|
||||||
// &-bottom-vertical {
|
|
||||||
// top: inherit;
|
|
||||||
// left: calc(-1em / 12);
|
|
||||||
// bottom: calc(-5em / 12);
|
|
||||||
// transform: rotate(-90deg);
|
|
||||||
// transform-origin: left;
|
|
||||||
// }
|
|
||||||
// &-bottom-right {
|
|
||||||
// top: inherit;
|
|
||||||
// left: inherit;
|
|
||||||
// right: -0.25em;
|
|
||||||
// bottom: -0.25em;
|
|
||||||
// }
|
|
||||||
// &-bottom-right-vertical {
|
|
||||||
// top: inherit;
|
|
||||||
// left: inherit;
|
|
||||||
// right: calc(-1em / 12);
|
|
||||||
// bottom: calc(-5em / 12);
|
|
||||||
// transform: rotate(90deg);
|
|
||||||
// transform-origin: right;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
.bar-item {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-title {
|
|
||||||
width: 100%;
|
|
||||||
color: #52fff1;
|
|
||||||
font-size: 1.5em;
|
|
||||||
padding: 0.67em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-content {
|
|
||||||
padding: 1em;
|
|
||||||
flex: 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-padding {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-0 {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.border-none {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,187 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: gtz
|
|
||||||
* @Date: 2022-01-19 15:58:17
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2023-09-21 16:15:14
|
|
||||||
* @Description: file content
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
class="base-container"
|
|
||||||
:style="{ height: '100%', fontSize: 12 + 'px', padding: 12 + 'px' }"
|
|
||||||
:class="{ 'no-padding': noPadding, 'border-none': !showLine }"
|
|
||||||
>
|
|
||||||
<!-- <div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px', padding: 12 + 'px'}"> -->
|
|
||||||
<template v-if="showLine">
|
|
||||||
<div class="line" />
|
|
||||||
<div class="line line-vertical" />
|
|
||||||
<div class="line line-right" />
|
|
||||||
<div class="line line-right-vertical" />
|
|
||||||
<div class="line line-bottom" />
|
|
||||||
<div class="line line-bottom-vertical" />
|
|
||||||
<div class="line line-bottom-right" />
|
|
||||||
<div class="line line-bottom-right-vertical" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div class="bar-item">
|
|
||||||
<div v-if="title" class="bar-title">
|
|
||||||
<span>
|
|
||||||
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
|
|
||||||
{{ title }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="bar-content" :class="{ 'p-0': noContentPadding }">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'BaseContainer',
|
|
||||||
props: {
|
|
||||||
showLine: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
noPadding: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
noContentPadding: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
titleIcon: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: 200
|
|
||||||
},
|
|
||||||
baseSize: {
|
|
||||||
type: Number,
|
|
||||||
default: 12
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
curIndex: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {},
|
|
||||||
methods: {
|
|
||||||
changeTab(num) {
|
|
||||||
this.curIndex = num
|
|
||||||
this.$emit('tabSelect', num)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
.base-container {
|
|
||||||
color: #fff;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba($color: #061027, $alpha: 0.15);
|
|
||||||
position: relative;
|
|
||||||
// border: 2px solid;
|
|
||||||
background: url('../../../../assets/img/bg-bottom-item.png') no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
// border-radius: 40px 0px 40px 0px;
|
|
||||||
// border-image: linear-gradient(360deg, rgba(157, 246, 254, 0.05), rgba(100, 233, 252, 0.9)) 2 2;
|
|
||||||
// .line {
|
|
||||||
// position: absolute;
|
|
||||||
// border-top: 4px solid #52fff1;
|
|
||||||
// width: 2em;
|
|
||||||
// top: -0.25em;
|
|
||||||
// left: -0.25em;
|
|
||||||
// &-vertical {
|
|
||||||
// top: calc(-5em / 12);
|
|
||||||
// left: calc(-1em / 12);
|
|
||||||
// transform: rotate(90deg);
|
|
||||||
// transform-origin: left;
|
|
||||||
// }
|
|
||||||
// &-right {
|
|
||||||
// top: -0.25em;
|
|
||||||
// right: -0.25em;
|
|
||||||
// left: inherit;
|
|
||||||
// }
|
|
||||||
// &-right-vertical {
|
|
||||||
// top: calc(-5em / 12);
|
|
||||||
// right: calc(-1em / 12);
|
|
||||||
// left: inherit;
|
|
||||||
// transform: rotate(-90deg);
|
|
||||||
// transform-origin: right;
|
|
||||||
// }
|
|
||||||
// &-bottom {
|
|
||||||
// top: inherit;
|
|
||||||
// left: -0.25em;
|
|
||||||
// bottom: -0.25em;
|
|
||||||
// }
|
|
||||||
// &-bottom-vertical {
|
|
||||||
// top: inherit;
|
|
||||||
// left: calc(-1em / 12);
|
|
||||||
// bottom: calc(-5em / 12);
|
|
||||||
// transform: rotate(-90deg);
|
|
||||||
// transform-origin: left;
|
|
||||||
// }
|
|
||||||
// &-bottom-right {
|
|
||||||
// top: inherit;
|
|
||||||
// left: inherit;
|
|
||||||
// right: -0.25em;
|
|
||||||
// bottom: -0.25em;
|
|
||||||
// }
|
|
||||||
// &-bottom-right-vertical {
|
|
||||||
// top: inherit;
|
|
||||||
// left: inherit;
|
|
||||||
// right: calc(-1em / 12);
|
|
||||||
// bottom: calc(-5em / 12);
|
|
||||||
// transform: rotate(90deg);
|
|
||||||
// transform-origin: right;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
.bar-item {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-title {
|
|
||||||
width: 100%;
|
|
||||||
color: #52fff1;
|
|
||||||
font-size: 1.5em;
|
|
||||||
padding: 0.67em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-content {
|
|
||||||
padding: 1em;
|
|
||||||
flex: 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-padding {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-0 {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.border-none {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,187 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Date: 2020-12-14 09:07:03
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2023-11-14 10:11:09
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="visual-base-table-container">
|
|
||||||
<el-table
|
|
||||||
v-loading="isLoading"
|
|
||||||
:header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff'}"
|
|
||||||
:row-style="setRowStyle"
|
|
||||||
:data="renderData"
|
|
||||||
border
|
|
||||||
style="width: 100%; background: transparent"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
v-if="page && limit && showIndex"
|
|
||||||
prop="_pageIndex"
|
|
||||||
:label="'tableHeader.index' | i18nFilter"
|
|
||||||
:width="70"
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
v-for="item in renderTableHeadList"
|
|
||||||
:key="item.prop"
|
|
||||||
:show-overflow-tooltip="showOverflow"
|
|
||||||
v-bind="item"
|
|
||||||
>
|
|
||||||
<template slot-scope="scope">
|
|
||||||
|
|
||||||
<component
|
|
||||||
:is="item.subcomponent"
|
|
||||||
v-if="item.subcomponent"
|
|
||||||
:inject-data="{...scope.row, ...item}"
|
|
||||||
@emitData="emitData"
|
|
||||||
/>
|
|
||||||
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<slot name="content" />
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { isObject, isString } from 'lodash'
|
|
||||||
export default {
|
|
||||||
name: 'BaseTable',
|
|
||||||
filters: {
|
|
||||||
commonFilter: (source, filterType = a => a) => {
|
|
||||||
return filterType(source)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
tableData: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
validator: val => val.filter(item => !isObject(item)).length === 0
|
|
||||||
},
|
|
||||||
tableConfig: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
|
|
||||||
},
|
|
||||||
isLoading: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
},
|
|
||||||
page: {
|
|
||||||
type: Number,
|
|
||||||
required: false,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
limit: {
|
|
||||||
type: Number,
|
|
||||||
required: false,
|
|
||||||
default: 5
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
showOverflow: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
showIndex: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableConfigBak: [],
|
|
||||||
selectedBox: new Array(100).fill(true)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
renderData() {
|
|
||||||
if (this.tableData.length && !this.tableData[0]._pageIndex) {
|
|
||||||
this.tableData.forEach((item, index) => {
|
|
||||||
item._pageIndex = (this.page - 1) * this.limit + index + 1
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
|
|
||||||
},
|
|
||||||
renderTableHeadList() {
|
|
||||||
return this.tableConfig.filter((item, index) => {
|
|
||||||
return this.selectedBox[index]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeMount() {
|
|
||||||
this.selectedBox = new Array(100).fill(true)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
emitData(val) {
|
|
||||||
this.$emit('emitFun', val)
|
|
||||||
},
|
|
||||||
setRowStyle(v) {
|
|
||||||
if (v.rowIndex % 2 === 0) {
|
|
||||||
return {
|
|
||||||
background: 'rgba(14, 32, 62, 1)',
|
|
||||||
color: 'rgba(255,255,255,0.5)',
|
|
||||||
height: 26 + 'px',
|
|
||||||
lineHeight: 26 + 'px',
|
|
||||||
padding: 0,
|
|
||||||
fontSize: 12 + 'px'
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return {
|
|
||||||
background: 'rgba(32, 55, 96, 1)',
|
|
||||||
color: 'rgba(255,255,255,0.5)',
|
|
||||||
height: 26 + 'px',
|
|
||||||
lineHeight: 26 + 'px',
|
|
||||||
padding: 0,
|
|
||||||
fontSize: 12 + 'px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setCellStyle() {
|
|
||||||
return {
|
|
||||||
// lineHeight: 23 + 'px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
@import "../styles/index.scss";
|
|
||||||
.visual-base-table-container {
|
|
||||||
.el-table {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
.el-table::before,.el-table--border::after {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.el-table th,td{
|
|
||||||
border-color: #0D1728 !important;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.el-table tr {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.el-table__row:hover > td {
|
|
||||||
background-color: rgba(79,114,136,0.29) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table__row--striped:hover > td {
|
|
||||||
background-color: rgba(79,114,136,0.29) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .setting {
|
|
||||||
// text-align: right;
|
|
||||||
// padding: 15px;
|
|
||||||
// .setting-box {
|
|
||||||
// width: 100px;
|
|
||||||
// }
|
|
||||||
// i {
|
|
||||||
// color: #aaa;
|
|
||||||
// @extend .pointer;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
</style>
|
|
@ -1,40 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Date: 2020-12-14 09:07:03
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @LastEditTime: 2023-11-13 16:41:28
|
|
||||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div class="base-video-container">
|
|
||||||
<!-- <video id="v1" :style="{height: videoHeight + 'px'}" :src="require('../../../assets/video/3d.mkv')" autoplay loop muted /> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'BaseVideo',
|
|
||||||
props: {
|
|
||||||
videoHeight: {
|
|
||||||
type: Number,
|
|
||||||
default: () => 200
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: () => 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.base-video-container{
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,325 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: zhp
|
|
||||||
* @Date: 2023-09-21 09:06:28
|
|
||||||
* @LastEditTime: 2023-10-16 14:20:45
|
|
||||||
* @LastEditors: zhp
|
|
||||||
* @Description:
|
|
||||||
-->
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import 'echarts/theme/macarons' // echarts theme
|
|
||||||
import resize from './mixins/resize'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'OverviewBar',
|
|
||||||
mixins: [resize],
|
|
||||||
props: {
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'linearBarChart'
|
|
||||||
},
|
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: 'chart'
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: '100%'
|
|
||||||
},
|
|
||||||
borderRadius: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [9, 9, 0, 0]
|
|
||||||
},
|
|
||||||
beilv: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: 200
|
|
||||||
},
|
|
||||||
showLegend: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
nameList: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
dataList: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null,
|
|
||||||
series: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log('mounted')
|
|
||||||
console.log('borderRadius: ', this.borderRadius)
|
|
||||||
|
|
||||||
this.series = [
|
|
||||||
{
|
|
||||||
name: this.dataList[0].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[0].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
|
||||||
]),
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[0].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[1].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[1].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
|
||||||
]),
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[1].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[2].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[2].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[2].bottomColor }
|
|
||||||
]),
|
|
||||||
// borderRadius: [5, 5, 0, 0]
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[2].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[3].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[3].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[3].bottomColor }
|
|
||||||
]),
|
|
||||||
// borderRadius: [5, 5, 0, 0]
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[3].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[4].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[4].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[4].bottomColor }
|
|
||||||
]),
|
|
||||||
// borderRadius: [5, 5, 0, 0]
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[4].data,
|
|
||||||
barWidth: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: this.dataList[5].name,
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: this.dataList[5].topColor },
|
|
||||||
{ offset: 1, color: this.dataList[5].bottomColor }
|
|
||||||
]),
|
|
||||||
// borderRadius: [5, 5, 0, 0]
|
|
||||||
barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: this.dataList[5].data,
|
|
||||||
barWidth: 6
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initChart()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
if (!this.chart) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.dispose()
|
|
||||||
this.chart = null
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart() {
|
|
||||||
console.log(1)
|
|
||||||
const colors = ['#5470C6', '#91CC75', '#EE6666']
|
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
|
||||||
this.chart.setOption({
|
|
||||||
color: colors,
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
right: '20%'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['产线产量', '产线良品率'],
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12 * this.beilv,
|
|
||||||
color: '#ced1d5'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#213259', // 左边线的颜色
|
|
||||||
width: '1' // 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#213259'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线', '钢七线', '钢八线']
|
|
||||||
},
|
|
||||||
// yAxis: {
|
|
||||||
|
|
||||||
// },
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
min: function() { // 取最小值向下取整为最小刻度
|
|
||||||
return 0
|
|
||||||
},
|
|
||||||
max: function(value) { // 取最大值向上取整为最大刻度
|
|
||||||
return Math.ceil(value.max)
|
|
||||||
},
|
|
||||||
scale: true,
|
|
||||||
type: 'value',
|
|
||||||
name: '良品率/%',
|
|
||||||
nameTextStyle: {// y轴上方单位的颜色
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
position: 'right',
|
|
||||||
alignTicks: true,
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#213259', // 左边线的颜色
|
|
||||||
width: '1' // 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: '#ced1d5', // 坐标值得具体的颜色
|
|
||||||
formatter: '{value} 片'
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#213259'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// type: 'value'
|
|
||||||
// axisLine: {
|
|
||||||
// show: true,
|
|
||||||
// lineStyle: {
|
|
||||||
// color: colors[0]
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
min: function() { // 取最小值向下取整为最小刻度
|
|
||||||
return 0
|
|
||||||
},
|
|
||||||
max: function(value) { // 取最大值向上取整为最大刻度
|
|
||||||
return Math.ceil(value.max)
|
|
||||||
},
|
|
||||||
scale: true,
|
|
||||||
type: 'value',
|
|
||||||
name: '产量/片', // y轴上方的单位
|
|
||||||
nameTextStyle: {// y轴上方单位的颜色
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
position: 'left',
|
|
||||||
alignTicks: true,
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
type: 'solid',
|
|
||||||
color: '#213259', // 左边线的颜色
|
|
||||||
width: '1' // 坐标线的宽度
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
|
||||||
formatter: '{value} 片'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#213259'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// type: 'value'
|
|
||||||
// axisLine: {
|
|
||||||
// show: true,
|
|
||||||
// lineStyle: {
|
|
||||||
// color: colors[1]
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '产线产量',
|
|
||||||
type: 'bar',
|
|
||||||
yAxisIndex: 1,
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: '#9DD5FF' },
|
|
||||||
{ offset: 1, color: '#1295FF' }
|
|
||||||
])
|
|
||||||
// barBorderRadius: this.borderRadius
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
2032, 3032, 1802, 2932, 2322, 2613, 2873, 2561
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '产线良品率',
|
|
||||||
type: 'line',
|
|
||||||
yAxisIndex: 0,
|
|
||||||
data: [98, 97, 94, 97.6, 98.2, 98.2, 97.4, 98.5]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|