Compare commits
32 Commits
ebae332674
...
bbdf0a75f0
Author | SHA1 | Date | |
---|---|---|---|
bbdf0a75f0 | |||
26658accfc | |||
31033dd7e2 | |||
|
3832aee028 | ||
|
2fbc6ea5e7 | ||
d0cb4d383e | |||
|
4ce62c14ee | ||
|
e5966c27a3 | ||
3e9f629888 | |||
|
ecabeeeea9 | ||
3da077bdf3 | |||
|
aef062b4c9 | ||
|
952490f0d4 | ||
51d6ce5dbb | |||
0ae68aacef | |||
2ab686a797 | |||
a37fa65e8f | |||
887390cf91 | |||
5d054254f7 | |||
76cdc34af1 | |||
0fefe4d432 | |||
|
ecc84a1c4b | ||
|
95f7004d1c | ||
9a1aa047b0 | |||
de06dfddf4 | |||
26100af90a | |||
67612c79df | |||
26862423c1 | |||
a1a7256af5 | |||
d2c82fa692 | |||
5654b3aeef | |||
afae859d8b |
8
.env.dev
@ -1,8 +1,8 @@
|
||||
###
|
||||
# @Author: Do not edit
|
||||
# @Date: 2023-08-29 09:40:39
|
||||
# @LastEditTime: 2023-11-11 20:50:30
|
||||
# @LastEditors: DY
|
||||
# @LastEditTime: 2023-11-16 08:52:02
|
||||
# @LastEditors: zhp
|
||||
# @Description:
|
||||
###
|
||||
# 开发环境配置
|
||||
@ -13,12 +13,12 @@ VUE_APP_TITLE = MES系统
|
||||
|
||||
# 芋道管理系统/开发环境
|
||||
# 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.2.173: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.0.33:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.56:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
||||
# 路由懒加载
|
||||
|
68
src/api/base/coreHotMaterial.js
Normal file
@ -0,0 +1,68 @@
|
||||
/*
|
||||
* @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
|
||||
* @Date: 2023-10-21 11:50:46
|
||||
* @LastEditTime: 2023-11-06 17:49:42
|
||||
* @LastEditTime: 2023-11-15 17:19:19
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
@ -67,6 +67,14 @@ 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) {
|
||||
return request({
|
||||
@ -136,3 +144,12 @@ export function statusChange(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
|
||||
* @Date: 2023-11-08 15:56:52
|
||||
* @LastEditTime: 2023-11-11 19:52:54
|
||||
* @LastEditTime: 2023-11-13 09:15:17
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
|
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-11-08 15:56:52
|
||||
* @LastEditTime: 2023-11-10 09:04:50
|
||||
* @LastEditTime: 2023-11-13 08:52:12
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
@ -58,10 +58,10 @@ export function getCheckDetPage(query) {
|
||||
})
|
||||
}
|
||||
|
||||
// 获得x巡检所有列表
|
||||
// 获得设备巡检所有列表
|
||||
export function getcheckList(query) {
|
||||
return request({
|
||||
url: '/base/equipment-check/list',
|
||||
url: '/base/equipment-check/listAll',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2023-11-07 14:10:18
|
||||
* @LastEditTime: 2023-11-07 16:29:55
|
||||
* @LastEditTime: 2023-11-14 14:46:04
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
|
12
src/assets/icons/svg/exitbtn.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?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>
|
After Width: | Height: | Size: 1.8 KiB |
20
src/assets/icons/svg/helpbtn.svg
Normal file
@ -0,0 +1,20 @@
|
||||
<?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>
|
After Width: | Height: | Size: 5.8 KiB |
BIN
src/assets/images/choicepart/Core.png
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/images/choicepart/Delivery.png
Normal file
After Width: | Height: | Size: 47 KiB |
BIN
src/assets/images/choicepart/Energy.png
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/images/choicepart/Equipment.png
Normal file
After Width: | Height: | Size: 50 KiB |
BIN
src/assets/images/choicepart/Extend.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/images/choicepart/Group.png
Normal file
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/images/choicepart/Material.png
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/images/choicepart/Order.png
Normal file
After Width: | Height: | Size: 9.1 KiB |
BIN
src/assets/images/choicepart/Packaging.png
Normal file
After Width: | Height: | Size: 53 KiB |
BIN
src/assets/images/choicepart/Quality.png
Normal file
After Width: | Height: | Size: 44 KiB |
BIN
src/assets/images/choicepart/Report.png
Normal file
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/images/choicepart/System.png
Normal file
After Width: | Height: | Size: 8.8 KiB |
BIN
src/assets/images/choicepart/Warehouse.png
Normal file
After Width: | Height: | Size: 52 KiB |
BIN
src/assets/images/choicepart/avatar.png
Normal file
After Width: | Height: | Size: 6.6 KiB |
BIN
src/assets/images/choicepart/choice-item-back.png
Normal file
After Width: | Height: | Size: 94 KiB |
BIN
src/assets/images/choicepart/choicepart-back.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/images/cnbm.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/img/1.jpg
Normal file
After Width: | Height: | Size: 370 KiB |
BIN
src/assets/img/OperationalOverview/back.png
Normal file
After Width: | Height: | Size: 2.7 MiB |
BIN
src/assets/img/OperationalOverview/title.png
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/img/Toughenedfurnace.png
Normal file
After Width: | Height: | Size: 310 KiB |
BIN
src/assets/img/back.jpg
Normal file
After Width: | Height: | Size: 349 KiB |
BIN
src/assets/img/back.png
Normal file
After Width: | Height: | Size: 99 KiB |
BIN
src/assets/img/back1.png
Normal file
After Width: | Height: | Size: 198 KiB |
BIN
src/assets/img/bg-bottom-item.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/img/choicepart/ArtManager.png
Normal file
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/img/choicepart/ArticleManager.png
Normal file
After Width: | Height: | Size: 8.8 KiB |
BIN
src/assets/img/choicepart/DataAnalysis.png
Normal file
After Width: | Height: | Size: 8.5 KiB |
BIN
src/assets/img/choicepart/EquipmentManager.png
Normal file
After Width: | Height: | Size: 50 KiB |
BIN
src/assets/img/choicepart/MaterialsManage.png
Normal file
After Width: | Height: | Size: 52 KiB |
BIN
src/assets/img/choicepart/OperationalOverview.png
Normal file
After Width: | Height: | Size: 7.4 KiB |
BIN
src/assets/img/choicepart/WarehouseManager.png
Normal file
After Width: | Height: | Size: 9.3 KiB |
BIN
src/assets/img/choicepart/basicData.png
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/img/choicepart/choice-item-back.png
Normal file
After Width: | Height: | Size: 94 KiB |
BIN
src/assets/img/choicepart/choicepart-back.png
Normal file
After Width: | Height: | Size: 3.5 MiB |
BIN
src/assets/img/choicepart/energyManage.png
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/img/choicepart/factoryManage.png
Normal file
After Width: | Height: | Size: 46 KiB |
BIN
src/assets/img/choicepart/formManage.png
Normal file
After Width: | Height: | Size: 9.1 KiB |
BIN
src/assets/img/choicepart/orderManage.png
Normal file
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/img/choicepart/packingManage.png
Normal file
After Width: | Height: | Size: 53 KiB |
BIN
src/assets/img/choicepart/qualityManage.png
Normal file
After Width: | Height: | Size: 44 KiB |
BIN
src/assets/img/cnbm.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/img/empty.png
Normal file
After Width: | Height: | Size: 63 KiB |
BIN
src/assets/img/energy.png
Normal file
After Width: | Height: | Size: 241 KiB |
BIN
src/assets/img/head-w.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/img/head.png
Normal file
After Width: | Height: | Size: 10 KiB |
18
src/assets/img/jiantou.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<?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>
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/img/login-back.jpg
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/img/login-back.png
Normal file
After Width: | Height: | Size: 42 KiB |
BIN
src/assets/img/login-new.jpg
Normal file
After Width: | Height: | Size: 340 KiB |
BIN
src/assets/img/login.gif
Normal file
After Width: | Height: | Size: 4.6 MiB |
BIN
src/assets/img/login1.gif
Normal file
After Width: | Height: | Size: 5.3 MiB |
BIN
src/assets/img/logo.png
Normal file
After Width: | Height: | Size: 2.3 KiB |
BIN
src/assets/img/medal/champion.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/img/medal/secondPlace.png
Normal file
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/img/medal/thirdPlace.png
Normal file
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/img/status.png
Normal file
After Width: | Height: | Size: 42 KiB |
BIN
src/assets/img/uploadIcon.png
Normal file
After Width: | Height: | Size: 237 B |
@ -6,6 +6,7 @@
|
||||
@import './btn.scss';
|
||||
|
||||
body {
|
||||
// min-height: 1024px;
|
||||
height: 100%;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
@ -114,40 +114,61 @@ $buttonHeight: $buttonH * 1px;
|
||||
}
|
||||
}
|
||||
.field {
|
||||
// background: #ccc3;
|
||||
position: relative;
|
||||
padding-top: 196px;
|
||||
margin-top: 8%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.pc-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
position: relative;
|
||||
top: -36px;
|
||||
height: 128px;
|
||||
|
||||
// h3.title {
|
||||
// position: relative;
|
||||
|
||||
// &::before {
|
||||
// content: '';
|
||||
// background: url($cnbmLogo) 100% / 100% no-repeat;
|
||||
// height: 48px;
|
||||
// width: 48px;
|
||||
// position: absolute;
|
||||
// left: 0px;
|
||||
// top: 4px;
|
||||
// display: inline-block;
|
||||
// }
|
||||
// }
|
||||
.title {
|
||||
margin: 0;
|
||||
margin-left: 32px;
|
||||
font-weight: 400;
|
||||
user-select: none;
|
||||
color: #000;
|
||||
font-size: 36px;
|
||||
line-height: 54px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-title,
|
||||
.mobile-switch {
|
||||
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 {
|
||||
margin-top: 32px;
|
||||
box-sizing: border-box;
|
||||
@ -283,24 +304,6 @@ $buttonHeight: $buttonH * 1px;
|
||||
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 最小尺寸设置
|
||||
|
@ -104,8 +104,8 @@ h6 {
|
||||
word-break: break-word;
|
||||
background-color: #f8f8f9;
|
||||
color: #515a6e;
|
||||
height: 40px;
|
||||
font-size: 13px;
|
||||
// height: 40px;
|
||||
// font-size: 13px;
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper {
|
||||
|
@ -35,7 +35,7 @@ export default {
|
||||
const first = matched[0]
|
||||
|
||||
if (!this.isDashboard(first)) {
|
||||
matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
|
||||
matched = [{ path: '/', meta: { title: '首页' }}].concat(matched)
|
||||
}
|
||||
|
||||
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
||||
|
@ -5,8 +5,12 @@
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
|
||||
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
|
||||
|
||||
<div class="right-menu">
|
||||
<template v-if="device!=='mobile'">
|
||||
<div style="padding-top: 5px; padding-right: 38px;">
|
||||
<navbar-right :blackTitle='true'/>
|
||||
</div>
|
||||
|
||||
<!-- <div class="right-menu"> -->
|
||||
<!-- <template v-if="device!=='mobile'"> -->
|
||||
<!-- <search id="header-search" class="right-menu-item" /> -->
|
||||
|
||||
<!-- 站内信 -->
|
||||
@ -18,27 +22,27 @@
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip> -->
|
||||
|
||||
</template>
|
||||
<!-- </template> -->
|
||||
|
||||
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
||||
<div class="avatar-wrapper">
|
||||
<!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
||||
<div class="avatar-wrapper"> -->
|
||||
<!-- <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" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<router-link to="/user/profile">
|
||||
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||
</router-link>
|
||||
</router-link> -->
|
||||
<!-- <el-dropdown-item @click.native="setting = true">
|
||||
<span>布局设置</span>
|
||||
</el-dropdown-item> -->
|
||||
<el-dropdown-item divided @click.native="logout">
|
||||
<!-- <el-dropdown-item divided @click.native="logout">
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-dropdown> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -51,7 +55,8 @@ import Screenfull from '@/components/Screenfull'
|
||||
import SizeSelect from '@/components/SizeSelect'
|
||||
import Search from '@/components/HeaderSearch'
|
||||
import NotifyMessage from '@/layout/components/Message'
|
||||
import {getPath} from "@/utils/ruoyi";
|
||||
// import {getPath} from "@/utils/ruoyi";
|
||||
import NavbarRight from './NavbarRight.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -61,7 +66,8 @@ export default {
|
||||
Screenfull,
|
||||
SizeSelect,
|
||||
Search,
|
||||
NotifyMessage
|
||||
NotifyMessage,
|
||||
NavbarRight
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
111
src/layout/components/NavbarRight.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<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>
|
96
src/layout/components/Sidebar/SidebarItem copy.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<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>
|
71
src/layout/components/Sidebar/index copy.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<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">
|
||||
<!-- 根据 sidebarRouters 路由,生成菜单 -->
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
v-for="(route, index) in routeList"
|
||||
:key="route.path + index"
|
||||
:item="route"
|
||||
:base-path="route.path" />
|
||||
@ -47,7 +47,12 @@ export default {
|
||||
components: { SidebarItem, Logo },
|
||||
computed: {
|
||||
...mapState(['settings']),
|
||||
...mapGetters(['sidebarRouters', 'sidebar']),
|
||||
...mapGetters(['sidebarRouters', 'sidebar', 'choicepart']),
|
||||
routeList() {
|
||||
// return [this.partList[this.choicepart]]
|
||||
// return [this.sidebarRouters[29]]
|
||||
return [this.sidebarRouters[this.choicepart]]
|
||||
},
|
||||
activeMenu() {
|
||||
const route = this.$route;
|
||||
const { meta, path } = route;
|
||||
|
@ -9,7 +9,7 @@ import { isRelogin } from '@/utils/request'
|
||||
NProgress.configure({ showSpinner: false })
|
||||
|
||||
// 增加三方登陆 update by 芋艿
|
||||
const whiteList = ['/login', '/social-login', '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee']
|
||||
const whiteList = ['/login', '/social-login', '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee', '/AGVBoard', '/coldBoard', '/processingBoard']
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start()
|
||||
@ -19,7 +19,12 @@ router.beforeEach((to, from, next) => {
|
||||
if (to.path === '/login') {
|
||||
next({ path: '/' })
|
||||
NProgress.done()
|
||||
} else {
|
||||
}
|
||||
// else if (to.path === '/AGVBoard') {
|
||||
// next({ path: '/AGVBoard' })
|
||||
// NProgress.done()
|
||||
// }
|
||||
else {
|
||||
if (store.getters.roles.length === 0) {
|
||||
isRelogin.show = true
|
||||
// 获取字典数据 add by 芋艿
|
||||
|
@ -71,16 +71,47 @@ export const constantRoutes = [
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: Layout,
|
||||
// redirect: 'core/base/factory',
|
||||
// children: [{
|
||||
// path: 'index',
|
||||
// redirect: 'core/base/factory',
|
||||
// component: (resolve) => require(['@/views/index'], resolve),
|
||||
// name: '首页',
|
||||
// meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||
// }
|
||||
// ]
|
||||
component: () => import('@/views/choicePart'),
|
||||
hidden: true,
|
||||
meta: { requireToken: true }
|
||||
},
|
||||
// {
|
||||
// path: '/',
|
||||
// component: Layout,
|
||||
// // redirect: 'core/base/factory',
|
||||
// // 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',
|
||||
|
@ -17,6 +17,7 @@ const getters = {
|
||||
topbarRouters:state => state.permission.topbarRouters,
|
||||
defaultRoutes:state => state.permission.defaultRoutes,
|
||||
sidebarRouters:state => state.permission.sidebarRouters,
|
||||
choicepart: state => state.app.choicepart,
|
||||
// 数据字典
|
||||
dict_datas: state => state.dict.dictDatas
|
||||
}
|
||||
|
@ -8,6 +8,7 @@ const state = {
|
||||
},
|
||||
device: "desktop",
|
||||
size: localStorage.getItem("size") || "medium",
|
||||
choicepart: localStorage.getItem('choicepart') || null
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
@ -38,6 +39,10 @@ const mutations = {
|
||||
SET_SIDEBAR_HIDE: (state, status) => {
|
||||
state.sidebar.hide = status;
|
||||
},
|
||||
SET_CHOICEPART: (state, choicepart) => {
|
||||
state.choicepart = choicepart
|
||||
localStorage.setItem('choicepart', choicepart)
|
||||
}
|
||||
};
|
||||
|
||||
const actions = {
|
||||
@ -56,6 +61,9 @@ const actions = {
|
||||
toggleSideBarHide({ commit }, status) {
|
||||
commit("SET_SIDEBAR_HIDE", status);
|
||||
},
|
||||
setChoicepart({ commit }, choicepart) {
|
||||
commit('SET_CHOICEPART', choicepart)
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
|
976
src/views/OperationalOverview/AGVBoard.vue
Normal file
@ -0,0 +1,976 @@
|
||||
<!--
|
||||
* @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>
|
1132
src/views/OperationalOverview/coldBoard.vue
Normal file
127
src/views/OperationalOverview/components/BarChart.vue
Normal file
@ -0,0 +1,127 @@
|
||||
|
||||
<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>
|
253
src/views/OperationalOverview/components/LineChart.vue
Normal file
@ -0,0 +1,253 @@
|
||||
<!--
|
||||
* @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>
|
221
src/views/OperationalOverview/components/PieChart.vue
Normal file
@ -0,0 +1,221 @@
|
||||
<!--
|
||||
* @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>
|
@ -0,0 +1,158 @@
|
||||
<!--
|
||||
* @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>
|
@ -0,0 +1,158 @@
|
||||
<!--
|
||||
* @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>
|
@ -0,0 +1,144 @@
|
||||
<!--
|
||||
* @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>
|
@ -0,0 +1,170 @@
|
||||
<!--
|
||||
* @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>
|
@ -0,0 +1,31 @@
|
||||
<!--
|
||||
* @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>
|
@ -0,0 +1,60 @@
|
||||
<!--
|
||||
* @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>
|
@ -0,0 +1,83 @@
|
||||
<!--
|
||||
* @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>
|
229
src/views/OperationalOverview/components/SimpleLineChart.vue
Normal file
@ -0,0 +1,229 @@
|
||||
<!--
|
||||
* @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>
|
51
src/views/OperationalOverview/components/alarmLevel.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<!--
|
||||
* @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>
|
195
src/views/OperationalOverview/components/baseContainer/index.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<!--
|
||||
* @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>
|
@ -0,0 +1,187 @@
|
||||
<!--
|
||||
* @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>
|
187
src/views/OperationalOverview/components/baseTable.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<!--
|
||||
* @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>
|
40
src/views/OperationalOverview/components/baseVideo.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<!--
|
||||
* @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>
|
325
src/views/OperationalOverview/components/doubleYChart .vue
Normal file
@ -0,0 +1,325 @@
|
||||
<!--
|
||||
* @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>
|