15 Commits

Author SHA1 Message Date
DESKTOP-FUDKNA8\znjsz
ceb411180f done home 2024-04-18 17:00:05 +08:00
DESKTOP-FUDKNA8\znjsz
53ec6dacd5 update home 2024-04-18 16:33:16 +08:00
DESKTOP-FUDKNA8\znjsz
72eb06bb2d update 芯片产出 2024-04-18 16:18:38 +08:00
DESKTOP-FUDKNA8\znjsz
e0058df873 update bipv产出 2024-04-18 14:58:16 +08:00
DESKTOP-FUDKNA8\znjsz
691f63438a update 芯片投入 2024-04-18 14:49:49 +08:00
DESKTOP-FUDKNA8\znjsz
cddd23855c update fto data 2024-04-18 14:47:14 +08:00
DESKTOP-FUDKNA8\znjsz
d9bfbf0d9a update copilot state 2024-04-18 11:22:53 +08:00
DESKTOP-FUDKNA8\znjsz
8075325f50 update store 2024-04-17 17:02:52 +08:00
DESKTOP-FUDKNA8\znjsz
7c479072e0 update stdoutput 2024-04-17 13:57:15 +08:00
DESKTOP-FUDKNA8\znjsz
f3e02b01f1 update yield copilot 2024-04-17 11:00:26 +08:00
DESKTOP-FUDKNA8\znjsz
c02c26f359 1 2024-04-16 17:00:51 +08:00
DESKTOP-FUDKNA8\znjsz
c7ef61b59b update jiashicang 2024-04-16 16:52:06 +08:00
DESKTOP-FUDKNA8\znjsz
13285cc2d4 update copilot header 2024-04-16 16:25:09 +08:00
DESKTOP-FUDKNA8\znjsz
b11474a8e4 update Home 2024-04-16 14:50:38 +08:00
DESKTOP-FUDKNA8\znjsz
feb2649c14 新增首页驾驶舱 2024-04-12 10:13:58 +08:00
241 changed files with 10310 additions and 48284 deletions

View File

@@ -1,3 +1,3 @@
.dockerignore
#dist
dist
node_modules

View File

@@ -1,58 +0,0 @@
---
kind: pipeline
type: docker
name: default
steps:
- name: build
image: node:16-alpine
pull: if_not_exists
environment:
NODE_ENV: ""
commands:
- yarn install --frozen-lockfile
- env ${NODE_ENV} yarn build:prod
- name: publish
image: docker:dind
pull: if_not_exists
volumes:
- name: dockersock
path: /var/run/docker.sock
- name: dockerconfig
path: /root/.docker
commands:
- docker build -t hub.kszny.picaiba.com/kszny/glass-ui ./
- docker push hub.kszny.picaiba.com/kszny/glass-ui
depends_on:
- build
- name: deploy
image: appleboy/drone-ssh
pull: if-not-exists
settings:
host:
- 172.24.145.74
username: root
password: Root@123
port: 22
command_timeout: 2m
script:
- docker pull hub.kszny.picaiba.com/kszny/glass-ui
- docker run --rm -v /data/www/ksznpt:/tmp hub.kszny.picaiba.com/kszny/glass-ui sh -c "rm -rf /tmp/* && mv -f /html /tmp"
depends_on:
- publish
volumes:
- name: dockersock
host:
path: /var/run/docker.sock
- name: dockerconfig
host:
path: /root/.docker
trigger:
branch:
- projects/mescc/develop
event:
- push

View File

@@ -1,31 +1,12 @@
###
# @Author: zhp
# @Date: 2024-04-28 13:42:51
# @LastEditTime: 2024-06-24 16:57:53
# @LastEditors: DY
# @Description:
###
# 开发环境配置
ENV = 'development'
# 页面标题
VUE_APP_TITLE = 发电玻璃智能管控平台
VUE_APP_TITLE = 芋道管理系统
# 芋道管理系统/开发环境
# VUE_APP_BASE_API = 'http://192.168.1.70:30307'
VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
# 闫阳
# VUE_APP_BASE_API = 'http://192.168.1.81:48080'
# 徐
# VUE_APP_BASE_API = 'http://192.168.1.56:48080'
# 郭
# VUE_APP_BASE_API = 'http://192.168.1.61:48080'
# sara
# VUE_APP_BASE_API = 'http://192.168.1.63:48080'
# 张一丁
# VUE_APP_BASE_API = 'http://192.168.4.139:48080'
# 蔡
# VUE_APP_BASE_API = 'http://192.168.1.54:48080'
VUE_APP_BASE_API = 'http://192.168.1.61:48080'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
@@ -33,7 +14,7 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
VUE_APP_TENANT_ENABLE = true
# 验证码的开关
VUE_APP_CAPTCHA_ENABLE = false
VUE_APP_CAPTCHA_ENABLE = true
# 文档的开关
VUE_APP_DOC_ENABLE = true

View File

@@ -2,7 +2,7 @@
ENV = 'development'
# 页面标题
VUE_APP_TITLE = 发电玻璃智能管控平台
VUE_APP_TITLE = 芋道管理系统
# 芋道管理系统/本地环境
VUE_APP_BASE_API = 'http://api-dashboard.yudao.iocoder.cn'
@@ -14,7 +14,7 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
VUE_APP_TENANT_ENABLE = true
# 验证码的开关
VUE_APP_CAPTCHA_ENABLE = false
VUE_APP_CAPTCHA_ENABLE = true
# 文档的开关
VUE_APP_DOC_ENABLE = true

View File

@@ -2,21 +2,21 @@
NODE_ENV = 'production'
# 页面标题
VUE_APP_TITLE = 发电玻璃智能管控平台
VUE_APP_TITLE = 芋道管理系统
# 芋道管理系统/生产环境
VUE_APP_BASE_API = ''
VUE_APP_BASE_API = '/prod-api'
# 根据服务器或域名修改
PUBLIC_PATH = ''
PUBLIC_PATH = 'http://my-pi.com:8888/yudao-admin/'
# 二级部署路径
# VUE_APP_APP_NAME ='yudao-admin'
VUE_APP_APP_NAME ='yudao-admin'
# 多租户的开关
VUE_APP_TENANT_ENABLE = true
# 验证码的开关
VUE_APP_CAPTCHA_ENABLE = false
VUE_APP_CAPTCHA_ENABLE = true
# 文档的开关
VUE_APP_DOC_ENABLE = false

View File

@@ -1,7 +1,7 @@
NODE_ENV = production
# 页面标题
VUE_APP_TITLE = 发电玻璃智能管控平台
VUE_APP_TITLE = 芋道管理系统
# 测试环境配置
ENV = 'staging'
@@ -16,7 +16,7 @@ PUBLIC_PATH = 'http://static.yudao.iocoder.cn/'
VUE_APP_TENANT_ENABLE = true
# 验证码的开关
VUE_APP_CAPTCHA_ENABLE = false
VUE_APP_CAPTCHA_ENABLE = true
# 文档的开关
VUE_APP_DOC_ENABLE = false

View File

@@ -4,7 +4,7 @@ NODE_ENV = development
ENV = 'staging'
# 页面标题
VUE_APP_TITLE = 发电玻璃智能管控平台
VUE_APP_TITLE = 芋道管理系统
# 芋道管理系统/测试环境
VUE_APP_BASE_API = 'http://127.0.0.1:48080'
@@ -18,7 +18,7 @@ VUE_APP_APP_NAME ='/admin-ui-vue2/'
VUE_APP_TENANT_ENABLE = true
# 验证码的开关
VUE_APP_CAPTCHA_ENABLE = false
VUE_APP_CAPTCHA_ENABLE = true
# 文档的开关
VUE_APP_DOC_ENABLE = true

View File

@@ -1,3 +1,21 @@
FROM busybox
LABEL maintainer thomas.hairong@gmail.com
COPY dist /html/
FROM node:16-alpine as build-stage
WORKDIR /admim
COPY .npmrc package.json yarn.lock ./
RUN --mount=type=cache,id=yarn-store,target=/root/.yarn-store \
yarn install --frozen-lockfile
COPY . .
ARG NODE_ENV=""
RUN env ${NODE_ENV} yarn build:prod
## -- stage: dist => nginx --
FROM nginx:alpine
ENV TZ=Asia/Shanghai
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /admim/dist /usr/share/nginx/html
EXPOSE 80

View File

@@ -42,24 +42,17 @@
},
"dependencies": {
"@babel/parser": "7.18.4",
"@jiaminghi/data-view": "^2.10.0",
"@riophae/vue-treeselect": "0.4.0",
"axios": "^1.6.8",
"clipboard": "2.0.8",
"code-brick-zj": "^1.1.0",
"core-js": "^3.26.0",
"crypto-js": "^4.0.0",
"echarts": "5.4.0",
"element-ui": "2.15.12",
"exceljs": "^4.4.0",
"file-saver": "^2.0.5",
"fuse.js": "6.6.2",
"highlight.js": "^11.9.0",
"html2canvas": "^1.4.1",
"js-beautify": "^1.15.1",
"jsencrypt": "3.3.1",
"jspdf": "^2.5.1",
"lodash": "^4.17.21",
"mockjs": "^1.1.0",
"moment": "^2.30.1",
"nprogress": "0.2.0",
@@ -73,8 +66,7 @@
"vue-quill-editor": "^3.0.6",
"vue-router": "3.4.9",
"vuedraggable": "2.24.3",
"vuex": "3.6.2",
"xlsx": "^0.18.5"
"vuex": "3.6.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.5.18",

View File

@@ -1,32 +0,0 @@
/*
* @Author: zhp
* @Date: 2024-04-26 14:53:45
* @LastEditTime: 2024-05-06 14:55:33
* @LastEditors: zhp
* @Description:
*/
import request from '@/utils/request'
// 查询部门列表
export function getOrderList(data) {
return request({
url: 'ip/prod-order/prodOrderList',
method: 'post',
data: data
})
}
export function getCostPage(data) {
return request({
url: 'ip/cost/costPage',
method: 'post',
data: data
})
}
export function getCostList(data) {
return request({
url: 'ip/cost/costList',
method: 'post',
data: data
})
}

View File

@@ -1,23 +0,0 @@
/*
* @Author: zhp
* @Date: 2024-04-28 09:28:12
* @LastEditTime: 2024-05-16 08:56:59
* @LastEditors: zhp
* @Description:
*/
import request from '@/utils/request'
export function getEnergyPage(data) {
return request({
url: 'ip/energy/page',
method: 'post',
data: data
})
}
export function getEnergySumPage(data) {
return request({
url: 'ip/prod-output/cockpitComprehensiveDataMonitor',
method: 'post',
data: data
})
}

View File

@@ -1,32 +0,0 @@
/*
* @Author: zhp
* @Date: 2024-04-26 14:53:45
* @LastEditTime: 2024-05-06 14:53:04
* @LastEditors: zhp
* @Description:
*/
import request from '@/utils/request'
// 查询部门列表
export function getOrderList(data) {
return request({
url: 'ip/prod-order/prodOrderList',
method: 'post',
data: data
})
}
export function getEpPage(data) {
return request({
url: 'ip/environment-protection/environmentPage',
method: 'post',
data: data
})
}
export function getCostList(data) {
return request({
url: 'ip/cost/costList',
method: 'post',
data: data
})
}

View File

@@ -1,168 +0,0 @@
/*
* @Author: zhp
* @Date: 2024-05-07 08:54:59
* @LastEditTime: 2024-06-19 15:22:10
* @LastEditors: DY
* @Description:
*/
import request from '@/utils/request'
// 查询生产数据管理分页
export function getProduceDataPage(data) {
return request({
url: '/ip/proddata/page',
method: 'post',
data: data
})
}
// 查询图数据
export function getproddata(data) {
return request({
url: '/ip/proddata/list',
method: 'post',
data: data
})
}
export function getProduceDataDetail(data){
return request({
url: '/ip/proddata/get',
method: 'post',
data: data
})
}
// 导出生产数据
export function exportOutPutExcel(data) {
return request({
url: '/ip/proddata/export-excel',
method: 'post',
data: data,
responseType: 'blob'
})
}
// 获取生产数据管理列表
export function prodOutputDataList(data) {
return request({
url: '/ip/prod-output/prodOutputDataList',
method: 'post',
data: data
})
}
// 获取生产管理生产目标管理碲化镉工厂分页
export function prodTargetDiPage(data) {
return request({
url: '/ip/prod-target/prodTargetDiPage',
method: 'post',
data: data
})
}
// 获取生产管理生产目标管理铜铟镓硒工厂分页
export function prodTargetToPage(data) {
return request({
url: '/ip/prod-target/prodTargetToPage',
method: 'post',
data: data
})
}
// 创建生产目标
export function createProduce(data) {
return request({
url: '/ip/prod-target/create',
method: 'post',
data: data
})
}
// 获得生产目标
export function getProduceTargetDetail(id){
return request({
url: '/ip/prod-target/get?id=' + id,
method: 'get'
})
}
// 修改生产目标
export function updateProduceTarget(data) {
return request({
url: '/ip/prod-target/update',
method: 'put',
data: data
})
}
// 导出碲化镉生产目标数据
export function exportDiTargetExcel(data) {
return request({
url: '/ip/prod-target/di-target-export-excel',
method: 'post',
data: data,
responseType: 'blob'
})
}
// 导出铜铟镓硒生产目标数据
export function exportToTargetExcel(data) {
return request({
url: '/ip/prod-target/to-target-export-excel',
method: 'post',
data: data,
responseType: 'blob'
})
}
// 删除生产目标
export function delTarget(id) {
return request({
url: '/ip/prod-target/delete?id=' + id,
method: 'delete'
})
}
// 导入铜铟镓硒工厂
export function importToTarget(data) {
return request({
url: '/ip/prod-target/to-target-import-excel',
method: 'post',
data: data
})
}
// 导入碲化镉工厂
export function importDiTarget(data) {
return request({
url: '/ip/prod-target/di-target-import-excel',
method: 'post',
data: data
})
}
// export function cockpitDataMonitor(data) {
// return request({
// url: '/ip/prod-output/cockpitDataMonitor',
// method: 'post',
// data: data
// })
// }
export function cockpitDataMonitor(data) {
return request({
url: '/ip/prod-output/cockpitDataMonitor',
method: 'post',
data: data
})
}
export function exportFactoryDataExcel(data) {
return request({
url: '/ip/prod-output-month/export/excel',
method: 'post',
data: data,
responseType: 'blob'
})
}

View File

@@ -1,60 +0,0 @@
/*
* @Author: zhp
* @Date: 2024-05-07 08:54:59
* @LastEditTime: 2024-06-03 14:25:02
* @LastEditors: DY
* @Description:
*/
import request from '@/utils/request'
// 查询工单分页
export function getWorkOrderPage(data) {
return request({
url: '/ip/prod-work-order/page',
method: 'post',
data: data
})
}
// 查询工单趋势数据
export function getDailyTrend(data) {
return request({
url: '/ip/prod-work-order/getDailyTrend',
method: 'post',
data: data
})
}
// 获得工单
export function getWorkOrderDetail(id){
return request({
url: '/ip/prod-work-order/get?id=' + id,
method: 'get'
})
}
// 获得工单设备加工数量
export function getEqNum(id){
return request({
url: '/ip/prod-work-order/getEqNum?workOrderId=' + id,
method: 'get'
})
}
// 导出工单数据
export function exportExcel(data) {
return request({
url: '/ip/prod-work-order/export-excel',
method: 'post',
data: data,
responseType: 'blob'
})
}
// 获得工单数据概览
export function getOverView(){
return request({
url: '/ip/prod-work-order/getOverView',
method: 'get'
})
}

View File

@@ -1,219 +0,0 @@
// 对标报表的接口
import request from '@/utils/request'
// 产量对标FTO
export function fTOReportByDateRangePage(data) {
return request({
url: '/ip/prod-output/queryOBFTOReportByDateRange',
method: 'post',
data: data
})
}
// 产量对标FTO导出
export function fTOReportByDateRangeExport(data) {
return request({
url: '/ip/prod-output/queryOBFTOReportByDateRangeExcel',
method: 'post',
responseType: 'blob',
data: data
})
}
// 芯片产量对标
export function cPReportByDateRangePage(data) {
return request({
url: '/ip/prod-output/queryCPReportByDateRange',
method: 'post',
data: data
})
}
// 芯片产量对标导出
export function cPReportByDateRangeExport(data) {
return request({
url: '/ip/prod-output/queryCPReportByDateRangeExport',
method: 'post',
responseType: 'blob',
data: data
})
}
// 标准组件产量对标
export function sCPReportByDateRangePage(data) {
return request({
url: '/ip/prod-output/querySCPReportByDateRange',
method: 'post',
data: data
})
}
// 标准组件产量对标导出
export function sCPReportByDateRangeExport(data) {
return request({
url: '/ip/prod-output/querySCPReportByDateRangeExport',
method: 'post',
responseType: 'blob',
data: data
})
}
// 转化效率对标
export function componentconvertrateCPage(data) {
return request({
url: '/ip/componentconvertrate-compare/page',
method: 'post',
data: data
})
}
// 转化效率对标导出
export function componentconvertrateCExport(data) {
return request({
url: '/ip/componentconvertrate-compare/export-excel',
method: 'post',
responseType: 'blob',
data: data
})
}
// 芯片良率对标
export function chipyieldRatePage(data) {
return request({
url: '/ip/chipyield-rate/page',
method: 'post',
data: data
})
}
// 芯片良率对标导出
export function chipyieldRateExport(data) {
return request({
url: '/ip/chipyield-rate/export-excel',
method: 'post',
responseType: 'blob',
data: data
})
}
// 标准组件良率对标
export function componentyieldRatePage(data) {
return request({
url: '/ip/componentyield-rate/page',
method: 'post',
data: data
})
}
// 标准组件良率对标导出
export function componentyieldRateExport(data) {
return request({
url: '/ip/componentyield-rate/export-excel',
method: 'post',
responseType: 'blob',
data: data
})
}
// 稼动率对标
export function utilzationComparePage(data) {
return request({
url: '/ip/utilzation-compare/page',
method: 'post',
data: data
})
}
// 稼动率对标导出
export function utilzationCompareExport(data) {
return request({
url: '/ip/utilzation-compare/export-excel',
method: 'post',
responseType: 'blob',
data: data
})
}
// 芯片OEE对标
export function chipoeeComparePage(data) {
return request({
url: '/ip/chipoee-compare/page',
method: 'post',
data: data
})
}
// 芯片OEE对标导出
export function chipoeeCompareExport(data) {
return request({
url: '/ip/chipoee-compare/export-excel',
method: 'post',
responseType: 'blob',
data: data
})
}
// 封装OEE对标
export function componentOEEPage(data) {
return request({
url: '/ip/component-oee/page',
method: 'post',
data: data
})
}
// 封装OEE对标导出
export function componentOEEExport(data) {
return request({
url: '/ip/component-oee/export',
method: 'post',
responseType: 'blob',
data: data
})
}
// 芯片人均产量
export function chipAnnualAverageProductionPage(data) {
return request({
url: '/ip/chip-annual-average-production/page',
method: 'post',
data: data
})
}
// 芯片人均产量导出
export function chipAnnualAverageProductionExport(data) {
return request({
url: '/ip/chip-annual-average-production/export',
method: 'post',
responseType: 'blob',
data: data
})
}
// 标准组件人均产量对标
export function componentAapPage(data) {
return request({
url: '/ip/prod-output/componentAap',
method: 'post',
data: data
})
}
// 标准组件人均产量对标导出
export function componentAapExport(data) {
return request({
url: '/ip/prod-output/componentAap-export',
method: 'post',
responseType: 'blob',
data: data
})
}
// 指标完成情况对标
export function targetCompletionPage(data) {
return request({
url: '/ip/prod-output/TargetCompletion',
method: 'post',
data: data
})
}
// 指标完成情况对标导出
export function targetCompletionExport(data) {
return request({
url: '/ip/prod-output/TargetCompletion-export',
method: 'post',
responseType: 'blob',
data: data
})
}

View File

@@ -1,95 +0,0 @@
/*
* @Author: zhp
* @Date: 2024-06-17 09:41:03
* @LastEditTime: 2024-06-20 15:39:21
* @LastEditors: zhp
* @Description:
*/
import request from '@/utils/request'
export function getComprehensiveDataPage(data) {
return request({
url: 'ip/comprehensive/data/get/comprehensive/data',
method: 'post',
data: data
})
}
export function exportComprehensiveDataPage(data) {
return request({
url: 'ip/comprehensive/data/export/comprehensive/data',
method: 'post',
data: data,
responseType: 'blob',
})
}
export function getProduceTransData(data) {
return request({
url: 'ip/prod-output/queryYCEReportByDateRange',
method: 'post',
data: data
})
}
export function exportProduceTransData(data) {
return request({
url: 'ip/prod-output/queryYCEReportByDateRangeExcel',
method: 'post',
data: data,
responseType: 'blob',
})
}
export function getProduceSituationData(data) {
return request({
url: 'ip/production/situation/get/production/situation',
method: 'post',
data: data
})
}
export function exportProduceSituationData(data) {
return request({
url: 'ip/production/situation/export/production/situation',
method: 'post',
data: data,
responseType: 'blob',
})
}
export function getProductionSituationMWData(data) {
return request({
url: 'ip/production/situation/power/get/production/situation',
method: 'post',
data: data
})
}
export function exportProductionSituationMWData(data) {
return request({
url: 'ip/production/situation/power/export/production/situation',
method: 'post',
data: data,
responseType: 'blob',
})
}
export function getProductionYieldSituationMWData(data) {
return request({
url: 'ip/product/yield/get/production/situation',
method: 'post',
data: data
})
}
export function exportProductionYieldSituationMWData(data) {
return request({
url: 'ip/product/yield/export/production/situation',
method: 'post',
data: data,
responseType: 'blob',
})
}

View File

@@ -1,15 +0,0 @@
/*
* @Author: zhp
* @Date: 2024-04-28 09:28:12
* @LastEditTime: 2024-04-28 15:52:36
* @LastEditors: zhp
* @Description:
*/
import request from '@/utils/request'
export function getStockPage(data) {
return request({
url: 'ip/stock/page',
method: 'post',
data: data
})
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 7.6 MiB

View File

@@ -1,17 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 15</title>
<g id="03设备管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="工单管理" transform="translate(-714.000000, -131.000000)">
<g id="编组-15" transform="translate(714.000000, 131.000000)">
<g id="编组-13备份" fill="#0B58FF" opacity="0.227236793">
<rect id="矩形备份-2" x="0" y="0" width="26" height="26" rx="6"></rect>
</g>
<g id="公司" transform="translate(4.749735, 4.749735)" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16.50053" height="16.50053"></rect>
<path d="M11.933204,3.46511501 L11.933204,1 C11.933204,0.44771525 11.4854888,-1.01453063e-16 10.933204,0 L7.7088886,0 L7.7088886,0 C3.83109495,0 0.687522083,3.16186639 0.687522083,7.06222625 L0.687522083,15.50053 C0.687522083,16.0528147 1.13523733,16.50053 1.68752208,16.50053 L14.8130079,16.50053 C15.3652927,16.50053 15.8130079,16.0528147 15.8130079,15.50053 L15.8130079,6.45996015 L15.8130079,6.45996015 L11.933204,3.46511501 Z M10.8812851,15.4709239 L1.80917527,15.4709239 L1.80917527,6.9505448 C1.81175925,3.6815283 4.55432163,1.03209261 7.93823277,1.02960612 L10.8812851,1.02960612 L10.8812851,15.4709239 Z M14.8298514,15.4709239 L11.9257773,15.4709239 L11.9257773,5.179727 L14.850314,7.12879718 L14.8298514,15.4709239 Z M3.75976827,9.04329837 L8.75976827,9.04329837 L8.75976827,10.3766317 L3.75976827,10.3766317 L3.75976827,9.04329837 Z M3.75976827,6.3766317 L8.75976827,6.3766317 L8.75976827,7.70996504 L3.75976827,7.70996504 L3.75976827,6.3766317 Z" id="形状" fill="#0B58FF"></path>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

View File

@@ -1,14 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>菜单</title>
<g id="10系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="用户管理" transform="translate(-284.000000, -164.000000)" fill-rule="nonzero">
<g id="编组-7" transform="translate(284.000000, 162.000000)">
<g id="菜单" transform="translate(0.000000, 2.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
<path d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z" id="形状" fill="#373738"></path>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -1,15 +0,0 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="127.000000pt" height="127.000000pt" viewBox="0 0 127.000000 127.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,127.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M520 831 c-19 -10 -48 -35 -64 -55 -25 -30 -31 -48 -34 -100 -8 -122
69 -206 188 -206 119 0 196 84 188 205 -5 74 -36 123 -98 155 -51 26 -133 26
-180 1z m137 -32 c67 -25 111 -99 98 -165 -8 -45 -57 -100 -101 -114 -100 -33
-209 62 -190 165 12 62 82 124 143 125 12 0 34 -5 50 -11z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 725 B

View File

@@ -1,15 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 13</title>
<g id="03设备管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="工单管理" transform="translate(-474.000000, -131.000000)">
<g id="编组-13" transform="translate(474.000000, 131.000000)">
<rect id="矩形备份-2" fill="#66DD89" opacity="0.227236793" x="0" y="0" width="26" height="26" rx="6"></rect>
<g id="机床、加工中心" transform="translate(3.000000, 3.000000)" fill-rule="nonzero">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="20" height="20"></rect>
<path d="M18.1818304,15.1909171 L18.1818304,2.5 C18.1818304,2.22385763 17.9579728,2 17.6818304,2 L2.7272736,2 C2.45113122,2 2.2272736,2.22385763 2.2272736,2.5 L2.2272736,10.195451 C2.2272736,10.3084167 2.31885035,10.3999934 2.431816,10.3999934 C2.54478165,10.3999934 2.63635841,10.4915702 2.63635841,10.6045358 L2.63635841,10.999993 C2.63635841,11.3313636 2.90498735,11.5999925 3.23635794,11.5999925 L3.24999521,11.5999925 C3.58889745,11.5999925 3.86363201,11.8747271 3.86363201,12.2136293 L3.86363201,12.7909094 C3.86363201,13.016846 4.04678981,13.2000037 4.2727264,13.2000037 C4.498663,13.2000037 4.6818208,13.016846 4.6818208,12.7909094 L4.6818208,12.2136293 C4.6818208,11.8747271 4.95655535,11.5999925 5.2954576,11.5999925 L5.30909486,11.5999925 C5.64046546,11.5999925 5.9090944,11.3313636 5.9090944,10.999993 L5.9090944,10.6045358 C5.9090944,10.4915702 6.00067115,10.3999934 6.1136368,10.3999934 C6.22660245,10.3999934 6.3181792,10.3084167 6.3181792,10.195451 L6.3181792,6.5 C6.3181792,6.22385763 6.54203683,6 6.8181792,6 L12.772736,6 C13.0488784,6 13.272736,6.22385763 13.272736,6.5 L13.272736,15.1000019 C13.272736,15.3761442 13.0488784,15.6000019 12.772736,15.6000019 L11.7272736,15.6000019 C11.4511312,15.6000019 11.2272736,15.3761442 11.2272736,15.1000019 L11.2272736,14.8000009 C11.2272736,14.3581726 10.869101,14 10.4272727,14 L8.75453855,14 C8.31271023,14 7.95453761,14.3581726 7.95453761,14.8000009 L7.95453761,15.1000019 C7.95453761,15.3761442 7.73067998,15.6000019 7.45453761,15.6000019 L6.4090944,15.6000019 C6.13295202,15.6000019 5.9090944,15.3761442 5.9090944,15.1000019 L5.9090944,14.8000009 C5.9090944,14.3581726 5.55092178,14 5.10909346,14 L3.43635934,14 C2.99453103,14 2.63635841,14.3581726 2.63635841,14.8000009 L2.63635841,15.1000019 C2.63635841,15.3761442 2.41250078,15.6000019 2.13635841,15.6000019 L1.8181792,15.6000019 C1.36631131,15.6000019 1,15.9663132 1,16.4181811 L1,17.5 C1,17.7761424 1.22385763,18 1.5,18 L18.5,18 C18.7761424,18 19,17.7761424 19,17.5 L19,16.0090867 C19,15.7831554 18.8168465,15.6000019 18.5909152,15.6000019 C18.3649839,15.6000019 18.1818304,15.4168484 18.1818304,15.1909171 Z M5.0909056,10.8000056 L3.4545472,10.8000056 L3.4545472,10.3999934 L5.0909056,10.3999934 L5.0909056,10.8000056 Z M5.49999041,6.20000375 L5.49999041,9.60000656 L5.49999041,9.60000656 L3.04544321,9.60000656 L3.04544321,2.80000562 L17.3636416,2.80000562 L17.3636416,15.6000019 L14.0909056,15.6000019 L14.0909056,6.20000375 C14.0909056,5.647719 13.6431904,5.20000375 13.0909056,5.20000375 L6.49999041,5.20000375 C5.94770566,5.20000375 5.49999041,5.647719 5.49999041,6.20000375 Z M8.7727264,14.7999963 L10.4090848,14.7999963 L10.4090848,15.6000019 L8.7727264,15.6000019 L8.7727264,14.7999963 Z M3.4545472,14.7999963 L5.0909056,14.7999963 L5.0909056,15.6000019 L3.4545472,15.6000019 L3.4545472,14.7999963 Z M18.1818304,17.1999944 L1.81816962,17.1999944 L1.81816962,16.3999888 L18.1818304,16.3999888 L18.1818304,17.1999944 Z M12.0454528,4.00000469 C12.0440427,4.28673847 12.1996755,4.55228735 12.4534043,4.69605646 C12.707133,4.83982557 13.0201502,4.83982557 13.2738789,4.69605646 C13.5276077,4.55228735 13.6832405,4.28673847 13.6818304,4.00000469 C13.6832405,3.71327091 13.5276077,3.44772202 13.2738789,3.30395291 C13.0201502,3.1601838 12.707133,3.1601838 12.4534043,3.30395291 C12.1996755,3.44772202 12.0440427,3.71327091 12.0454528,4.00000469 L12.0454528,4.00000469 Z M5.49999041,3.60001125 L11.2272736,3.60001125 L11.2272736,4.39999813 L5.49999041,4.39999813 L5.49999041,3.60001125 Z M15.3181792,11.5999925 L16.136368,11.5999925 L16.136368,14.7999963 L15.3181792,14.7999963 L15.3181792,11.5999925 Z M15.3181792,9.19999438 L16.136368,9.19999438 L16.136368,10.8000056 L15.3181792,10.8000056 L15.3181792,9.19999438 Z M15.3181792,6.79999625 L16.136368,6.79999625 L16.136368,8.4000075 L15.3181792,8.4000075 L15.3181792,6.79999625 Z" id="形状" fill="#43B866"></path>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 511 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 812 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 226 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 326 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 6.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 662 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 796 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 257 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 269 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 592 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 530 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.5 MiB

BIN
src/assets/logo/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@@ -123,7 +123,7 @@ aside {
//main-container全局样式
.app-container {
// padding: 16px;
padding: 16px;
}
.components-container {
@@ -232,8 +232,6 @@ aside {
background-color: #d9d9d9;
}
// 大屏滚动表格
.no-data-bg {
position: absolute;
display: inline-block;
@@ -254,13 +252,3 @@ aside {
letter-spacing: 1px;
}
}
.dv-scroll-board .rows .ceil,
.dv-scroll-board .header .header-item {
border-right: 1px solid rgba(13, 23, 40, 1);
}
.dv-scroll-board .rows .ceil:last-child,
.dv-scroll-board .header .header-item:last-child {
border-right: none;
}

View File

@@ -133,8 +133,8 @@ $base1px: 0.15vh; // 1px / 1080px;
width: 100%;
clear: both;
position: relative;
top: calc(#{$base1px});
height: calc(100 * #{$base1px});
top: calc(56 * #{$base1px});
height: calc(128 * #{$base1px});
display: flex;
align-items: center;
justify-content: center;
@@ -189,7 +189,7 @@ $base1px: 0.15vh; // 1px / 1080px;
height: calc(16 * 0.12vh);
line-height: calc(16 * 0.12vh);
font-size: calc(12 * 0.12vh);
color: #C7C7C7;
color: #8c8c8c;
a,
a:hover,

View File

@@ -82,8 +82,6 @@ export default {
border: none;
background: #fff;
border-radius: 8px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 20px;
color: #888;
letter-spacing: 2px;

View File

@@ -1,10 +1,3 @@
<!--
* @Author: zhp
* @Date: 2024-04-12 11:13:06
* @LastEditTime: 2024-05-08 13:37:05
* @LastEditors: zhp
* @Description:
-->
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
@@ -17,20 +10,20 @@
</template>
<script>
import iframeToggle from "./IframeToggle/index";
import iframeToggle from "./IframeToggle/index"
export default {
name: "AppMain",
name: 'AppMain',
components: { iframeToggle },
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews;
return this.$store.state.tagsView.cachedViews
},
key() {
return this.$route.path;
},
},
};
return this.$route.path
}
}
}
</script>
<style lang="scss" scoped>
@@ -42,10 +35,10 @@ export default {
overflow: visible;
margin: 8px 14px 0px 16px;
border-radius: 8px;
// background-color: #fff;
background-color: #fff;
}
.fixed-header + .app-main {
.fixed-header+.app-main {
padding-top: 56px;
}
@@ -57,7 +50,7 @@ export default {
flex-direction: column;
}
.fixed-header + .app-main {
.fixed-header+.app-main {
padding-top: 90px;
}
}

View File

@@ -49,7 +49,7 @@
</template>
<script>
import logoImg from "@/assets/logo/cnbm.png";
import logoImg from "@/assets/logo/logo.png";
import variables from "@/assets/styles/variables.scss";
export default {
@@ -70,7 +70,7 @@ export default {
},
data() {
return {
title: "发电玻璃智能管控平台",
title: "玻璃控股信息平台",
logo: logoImg,
};
},
@@ -104,7 +104,7 @@ export default {
width: 32px;
height: 32px;
vertical-align: middle;
margin-right: 10px;
margin-right: 12px;
}
& .sidebar-title {
@@ -113,7 +113,7 @@ export default {
color: #fff;
font-weight: 600;
line-height: 50px;
font-size: 19px;
font-size: 14px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
}

View File

@@ -1,12 +1,5 @@
/*
* @Author: zhp
* @Date: 2024-04-12 11:13:06
* @LastEditTime: 2024-04-12 16:20:31
* @LastEditors: zhp
* @Description:
*/
import Vue from 'vue'
import Element from 'element-ui'
import Vue from "vue";
import Element from "element-ui";
// 修改如下样式文件,覆盖样式,或者新增样式文件
import "./assets/styles/element-variables.scss";
@@ -18,7 +11,6 @@ import store from "./store";
import router from "./router";
import directive from "./directive"; // directive
import plugins from "./plugins"; // plugins
import { scrollBoard } from '@jiaminghi/data-view'
import "./assets/icons"; // icon
import "./permission"; // permission control
@@ -42,7 +34,7 @@ import {
getDictDatas,
getDictDatas2,
} from "@/utils/dict";
import CodeBrickZj from 'code-brick-zj';
import "./theme/index.css"; // 自定义主题包 - code-brick-zj
// 全局方法挂载
@@ -56,9 +48,6 @@ Vue.prototype.DICT_TYPE = DICT_TYPE;
Vue.prototype.handleTree = handleTree;
Vue.prototype.addBeginAndEndTime = addBeginAndEndTime;
Vue.prototype.divide = divide;
Vue.prototype.tableHeight = function (n) {
return window.innerHeight - n;
};
// 全局组件挂载
Vue.component("DictTag", DictTag);
@@ -69,11 +58,10 @@ import DictTag from "@/components/DictTag";
// 头部标签插件
import VueMeta from "vue-meta";
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
Vue.use(CodeBrickZj);
Vue.use(scrollBoard)
Vue.use(directive);
Vue.use(plugins);
Vue.use(VueMeta);
// Form Generator 组件需要使用到 tinymce
import Tinymce from "@/components/tinymce/index.vue";
Vue.component("tinymce", Tinymce);

View File

@@ -1,21 +1,17 @@
import * as echarts from "echarts";
function __resizeHandler(entries) {
console.log(entries)
for (const entry of entries) {
if (entry.contentBoxSize) {
// manipulate contentBoxSize
const contentBoxSize = Array.isArray(entry.contentBoxSize)
? entry.contentBoxSize[0]
: entry.contentBoxSize;
this.chart_mixin_chartInstance.resize({
// width:
// contentBoxSize.inlineSize < this.MIN_WIDTH
// ? this.MIN_WIDTH
// : contentBoxSize.inlineSize,
// width:
// entry.contentRect.width < this.MIN_WIDTH
// ? this.MIN_WIDTH
// : entry.contentRect.width,
width:
contentBoxSize.inlineSize < this.MIN_WIDTH
? this.MIN_WIDTH
: contentBoxSize.inlineSize,
height: contentBoxSize.blockSize,
});
} else {
@@ -36,7 +32,7 @@ export default {
const resizeObserver = new ResizeObserver(__resizeHandler.bind(this));
return {
MIN_WIDTH: 390,
MIN_WIDTH: 400,
chart_mixin_chartInstance: null,
chart_mixin_observer: resizeObserver,
chart_mixin_options: {

View File

@@ -1,87 +0,0 @@
/*
* @Author: zhp
* @Date: 2024-04-28 15:18:21
* @LastEditTime: 2024-04-28 15:18:21
* @LastEditors: zhp
* @Description:
*/
/*
* @Date: 2020-12-29 16:49:28
* @LastEditors: DY
* @LastEditTime: 2024-02-23 14:50:22
* @FilePath: \basic-admin\src\filters\basicData\index.js
* @Description:
*/
const table = {
lineStatus: {
1: '生产中',
2: '停止',
3: '未知',
},
reportType: {
1: '日',
2: '周',
3: '月'
}
}
// 日期格式化
export function parseTime(time, pattern) {
if (arguments.length === 0 || !time) {
return null
}
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.\d{3}/gm),'');
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
export function toDay(time) {
if (time < 24) {
return time + '小时'
} else {
const day = ~~(time / 24)
const hour = time % 24
return day + '天' + hour + '小时'
}
}
export default function (dictTable) {
return function (val) {
return table?.[dictTable]?.[val]
}
}

View File

@@ -1,63 +0,0 @@
/*
* @Author: zhp
* @Date: 2024-04-16 09:31:41
* @LastEditTime: 2024-04-16 09:31:41
* @LastEditors: zhp
* @Description:
*/
import { debounce } from '@/utils'
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
}
},
mounted() {
this.initListener()
},
activated() {
if (!this.$_resizeHandler) {
// avoid duplication init
this.initListener()
}
// when keep-alive chart activated, auto resize
this.resize()
},
beforeDestroy() {
this.destroyListener()
},
deactivated() {
this.destroyListener()
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
initListener() {
this.$_resizeHandler = debounce(() => {
this.resize()
}, 100)
window.addEventListener('resize', this.$_resizeHandler)
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
destroyListener() {
window.removeEventListener('resize', this.$_resizeHandler)
this.$_resizeHandler = null
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
},
resize() {
const { chart } = this
chart && chart.resize()
}
}
}

View File

@@ -1,20 +0,0 @@
export default {
data() {
return {
tableH: this.tableHeight(260),
};
},
created() {
this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
window.addEventListener('resize', this._setTableHeight);
},
destroyed() {
window.removeEventListener('resize', this._setTableHeight);
},
methods: {
_setTableHeight() {
this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
// this.tableH = this.tableHeight(260);
},
},
};

View File

@@ -127,8 +127,7 @@ Router.prototype.push = function push(location) {
export default new Router({
base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : "/",
// mode: "history", // 去掉url中的#
mode: "hash",
mode: "history", // 去掉url中的#
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes,
});

View File

@@ -1,15 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-05-16 11:59:04
* @LastEditors: zhp
* @Description:
*/
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import home from './modules/home'
import tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
@@ -27,7 +19,6 @@ const store = new Vuex.Store({
permission,
settings,
dict,
home,
copilot
},
getters

View File

@@ -1,625 +1,19 @@
import axios from "@/utils/request";
import { deepClone } from "../../utils";
/* 状态 */
const state = {
copilot: {
/* 产量驾驶舱 */
yield: {
ftoInvest: null,
chipInvest: null,
chipOutput: null,
stdOutput: null,
bipvOutput: null,
},
/* 能源驾驶舱 */
energy: {
stockDOData: [],
waterList: {},
gasList: [],
elecList:{}
},
/* 效率驾驶舱 */
efficiency: {
chipOee: {
current: [],
previous: [],
target:[]
},
transformRate: {
current: [],
previous: [],
target:[]
},
chipRate: {
target: [],
current: [],
previous: [],
outputNumber:[],
},
stdRate: {
target: [],
current: [],
previous: [],
outputNumber:[]
},
},
},
home: {
/** 主页状态 */
ftoInvest: null,
chipInvest: null,
chipOutput: null,
stdOutput: null,
bipvOutput: null,
},
};
const mutations = {
SET_HOME_INFO: (state, payload) => {
state.home.ftoInvest = payload.ftoInvest;
state.home.chipInvest = payload.chipInvest;
state.home.chipOutput = payload.chipOutput;
state.home.stdOutput = payload.stdOutput;
state.home.bipvOutput = payload.bipvOutput;
},
SET_COPILOT_INFO: (state, { type, payload }) => {
switch (type) {
case "yield":
state.copilot.yield.ftoInvest = payload.ftoInvest;
state.copilot.yield.chipInvest = payload.chipInvest;
state.copilot.yield.chipOutput = payload.chipOutput;
state.copilot.yield.stdOutput = payload.stdOutput;
state.copilot.yield.bipvOutput = payload.bipvOutput;
break;
case "energy":
state.copilot.energy.stockDOData = payload.stockDOData;
state.copilot.energy.gasList = payload.gasList;
state.copilot.energy.waterList = payload.waterList;
state.copilot.energy.elecList = payload.elecList;
break;
case "efficiency":
state.copilot.efficiency.chipOeeRate = payload.chipOeeRate;
state.copilot.efficiency.transformRate = payload.transformRate;
state.copilot.efficiency.chipRate = payload.chipRate;
state.copilot.efficiency.stdRate = payload.stdRate;
break;
}
},
};
const actions = {
/** 初始化首页数据 */
async initHome({ commit }) {
const dataArr = await getHomeInfo();
// console.log('dataArr', dataArr);
let preData = dataArr.previousProdOutputOutDO
let preFtoData = dataArr.previousProdOutputFtoDO
// const targetArr = await getHomeInfo();
// factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData
const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetOutputDO,dataArr.prodOutputFtoDO,preData,preFtoData);
commit("SET_HOME_INFO", payload);
},
/** 初始化驾驶舱数据 */
async initCopilot({ commit }, { period,source,than}) {
// if (source == "energy") return;
const fetcher = {
yield: getCopilotYield,
energy: getCopilotEnergy,
efficiency: getCopilotEfficiency,
}[source];
const handler = {
yield: splitCurrentAndPrevious,
energy: splitCurrentAndPreviousB,
efficiency: splitCurrentAndPreviousA,
}[source]
// 获取产量数据
let { data: factoryList, type } = await fetcher(period,than)
// let targetList = null;
// if (source === "yield" || source === "efficiency") {
// // 获取目标数据
// let { data } = await fetcher(period,than, true)
// targetList = data
// }
// if (source == "energy") {
// let factoryData = factoryList
// const payload = handler(factoryData)
// commit("SET_COPILOT_INFO", { type, payload });
// } else {
// console.log('factoryList',factoryList)
let factoryData = factoryList.prodOutputOutDO ? factoryList.prodOutputOutDO : factoryList.prodOutputRateDO
let preData = factoryList.previousProdOutputOutDO ? factoryList.previousProdOutputOutDO : factoryList.previousProdOutputRateDO
let preFtoData = factoryList.previousProdOutputFtoDO ? factoryList.previousProdOutputFtoDO : []
let prodOutputFtoDO = factoryList.prodOutputFtoDO ? factoryList.prodOutputFtoDO : []
let targetData = factoryList.prodTargetOutputDO ? factoryList.prodTargetOutputDO : factoryList.prodTargetRateDO
const payload = handler(factoryData,targetData,prodOutputFtoDO,preData,preFtoData)
commit("SET_COPILOT_INFO", { type, payload });
// }
},
};
export default {
namespaced: true,
state,
mutations,
actions,
};
function splitCurrentAndPreviousB(factoryListResponse) {
let factoryArr = [
{
id: 0,
name: '瑞昌中建材光电材料有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
{
id: 1,
name: '邯郸中建材光电材料有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
{
id: 2,
name: '中建材株洲光电材料有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
{
id: 3,
name: '佳木斯中建材光电材料有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
{
id: 4,
name: '成都中建材光电材料有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
{
id: 5,
name: '凯盛光伏材料有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
{
id: 6,
name: '蚌埠兴科玻璃有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
]
if (factoryListResponse) {
for (let i in factoryListResponse.stockDO) {
const index = factoryArr.findIndex(item => item.id == factoryListResponse.stockDO[i].factory)
if (index != -1) {
factoryListResponse.stockDO[i].stockInfo.forEach(ele => {
factoryArr[index].stockData.push(ele)
});
}
}
let stockDOData = []
factoryArr.forEach((ele, index) => [
stockDOData[index] = [],
ele.stockData.forEach((item) => {
let obj = {}
obj.name = item.glassType == 0 ? '玻璃芯片' : item.glassType == 1 ? '标准组件' : item.glassType == 2 ? 'BIPV' : '定制组件'
obj.value = item.stockNumber
stockDOData[index].push(obj)
}),
])
let gasList = []
// if (factoryListResponse.gasDO) {
factoryListResponse.gasDO.forEach((ele) => {
gasList[ele.factory] = ele.totalEnergyValue
})
// }
// console.log(factoryListResponse.gasDO);
let waterObj = Object.groupBy(factoryListResponse.waterDO, ({ groupName }) => groupName)
let waterList = {
times: [],
0: [],
1: [],
2: [],
3: [],
4: [],
5: [],
6: [],
}
for (let i in waterObj) {
waterList.times.push(i)
waterObj[i].forEach((ele, index) => {
waterList[ele.factory].push(ele.totalEnergyValue)
})
}
let elecObj = Object.groupBy(factoryListResponse.elecDO, ({ groupName }) => groupName)
let elecList = {
times: [],
0: [],
1: [],
2: [],
3: [],
4: [],
5: [],
6: [],
}
for (let i in elecObj) {
elecList.times.push(i)
elecObj[i].forEach((ele, index) => {
elecList[ele.factory].push(ele.totalEnergyValue)
})
}
return {
stockDOData,
waterList,
gasList,
elecList,
};
} else {
let stockDOData = Array[7].fill([])
let waterList = {}
return {
stockDOData,
waterList,
gasList,
elecList
};
}
}
function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
// console.log('工厂',preData);
// 初始数据
const { chipOeeRate, transformRate, chipRate, stdRate } = initA();
// factoryListResponse = [
// {
// factory: 0,
// oee: 0.8,
// previousYearOee: 0.7,
// componentConversionEfficiency: 0.8,
// previousYearComponentConversionEfficiency: 0.7,
// glassType: 0,
// yieldRate: 0.8,
// previousYearYieldRate: 0.7,
// chipYieldRate: 0.38,
// componentYieldRate: 0.73,
// },
// {
// factory: 1,
// oee: 0.8,
// previousYearOee: 0.7,
// componentConversionEfficiency: 0.8,
// previousYearComponentConversionEfficiency: 0.7,
// glassType: 1,
// yieldRate: 0.8,
// previousYearYieldRate: 0.7,
// chipYieldRate: 0.38,
// componentYieldRate: 0.73,
// },
// {
// factory: 2,
// oee: 0.8,
// previousYearOee: 0.7,
// componentConversionEfficiency: 0.8,
// previousYearComponentConversionEfficiency: 0.7,
// glassType: 1,
// yieldRate: 0.8,
// previousYearYieldRate: 0.7,
// chipYieldRate: 0.38,
// componentYieldRate: 0.73,
// },
// {
// factory: 3,
// oee: 0.8,
// previousYearOee: 0.7,
// componentConversionEfficiency: 0.8,
// previousYearComponentConversionEfficiency: 0.7,
// glassType: 0,
// yieldRate: 0.8,
// previousYearYieldRate: 0.7,
// chipYieldRate: 0.38,
// componentYieldRate: 0.73,
// },
// ];
if (preData) {
for (const factory of preData) {
const fId = getPreFactoryId(factory)
// console.log('factory',factory.previousYearOee);
// chipInvest.previous[fId] = factory.previousYearInputNumber;
// chipOeeRate.current[fId] = factory.oee;
if (factory.previousGlassType === 0) {
chipOeeRate.previous[fId] = factory.previousYearOee;
}
// chipOeeRate.previous[fId] = factory.previousYearOee;
// 转化效率
if (factory.previousGlassType === 1) {
transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency;
}
// transformRate.previous[fId] =factory.previousYearComponentConversionEfficiency ;
// 芯片良率 与 标准组件良率
if (![0, 1].includes(factory.previousGlassType)) continue;
const _t = [chipRate, stdRate][factory.previousGlassType]
// _t.current[fId] = factory.yieldRate ;
_t.previous[fId] = factory.previousYearYieldRate ;
// }
// debugger;
}
}
if (factoryListResponse) {
for (const factory of factoryListResponse) {
const fId = getFactoryId(factory);
// 获取目标值
if (targetListResponse) {
const {
chipYieldRate,
componentYieldRate,
chipOee,
componentConversionEfficiency,
componentYield
} = getFactoryTargetValueA(targetListResponse, fId)
stdRate.target[fId] = componentYieldRate
chipRate.target[fId] = chipYieldRate
chipOeeRate.target[fId] = chipOee
transformRate.target[fId] = componentConversionEfficiency
}
// 芯片OEE
if (factory.glassType === 0) {
chipOeeRate.current[fId] = factory.oee;
}
// chipOeeRate.previous[fId] = factory.previousYearOee;
// 转化效率
if (factory.glassType === 1) {
transformRate.current[fId] = factory.componentConversionEfficiency;
}
// transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency ;
// 芯片良率 与 标准组件良率
if (![0, 1].includes(factory.glassType)) continue;
const _t = [chipRate, stdRate][factory.glassType]
_t.current[fId] = factory.yieldRate ;
// _t.previous[fId] = factory.previousYearYieldRate ;
}
// console.log('chipOeeRate',stdRate);
// console.log('chipOeeRate',chipOeeRate);
return {
chipOeeRate,
transformRate,
chipRate,
stdRate,
};
}
}
function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
// console.log('prodOutputFtoListRes',preFtoData);
// 初始数据
const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init()
if (prodOutputFtoListRes.length !== 0 ) {
for (const factory of prodOutputFtoListRes) {
// console.log(factory);
const fId = getFactoryId(factory);
// const preFId = getPreFactoryId(factory);
// if (fId) {
ftoInvest.current[fId] = factory.chipInput;
// }
// if (preFId) {
// ftoInvest.previous[fId] = factory.previousYearChipInput;
// }
}
}
if (preFtoData) {
for (const factory of preFtoData) {
// console.log(factory);
const fId = getPreFactoryId(factory);
// const preFId = getPreFactoryId(factory);
// if (fId) {
ftoInvest.previous[fId] = factory.previousYearChipInput;
// }
// if (preFId) {
// ftoInvest.previous[fId] = factory.previousYearChipInput;
// }
}
}
if (preData) {
for (const factory of preData) {
const fId = getPreFactoryId(factory);
if (factory.previousGlassType === 0) {
chipInvest.previous[fId] = factory.previousYearInputNumber
}
// chipInvest.previous[fId] = factory.previousYearInputNumber;
if (![0, 1, 2].includes(factory.previousGlassType)) continue;
const _t = [chipOutput, stdOutput, bipvOutput][factory.previousGlassType];
// if (fId) {
// _t.current[fId] = factory.outputNumber;
// }
// if (preFId) {
_t.previous[fId] = factory.previousYearOutputNumber
// }
// debugger;
}
}
// console.log('ftoInvest',ftoInvest)
if (factoryListResponse) {
for (const factory of factoryListResponse) {
const fId = getFactoryId(factory);
// console.log('factory.inputNumber', factory, fId);
if (factory.glassType === 0) {
chipInvest.current[fId] = factory.inputNumber
}
// const preFId = getPreFactoryId(factory);
// 获取目标值
if (targetListResponse) {
const { chipYield, componentYield, bipvProductOutput } =
getFactoryTargetValue(targetListResponse, fId);
chipOutput.target[fId] = chipYield;
stdOutput.target[fId] = componentYield;
bipvOutput.target[fId] = bipvProductOutput;
}
// 芯片投入
// 产出数据, 0 - (玻璃)芯片产出, 1 - 标准组件产出, 2 - BIPV产出
// 因为后端写的垃圾数据,所以这里要做一下判断
if (![0, 1, 2].includes(factory.glassType)) continue;
const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType];
_t.current[fId] = factory.outputNumber;
}
// console.log('chipInvest',ftoInvest);
return {
chipInvest,
// ftoInvest,
ftoInvest,
chipOutput,
stdOutput,
bipvOutput,
};
}
}
function getFactoryId(factory) {
return factory.factory;
}
function getPreFactoryId(factory) {
return factory.previousFactory;
}
function getFactoryTargetValue(targetList, factoryId) {
const target = targetList.find((item) => item.factory === factoryId);
if (target) {
return {
// 自带模拟数据了.... random_default
chipYield: target.chipYield ?? 0,
componentYield: target.componentYield ?? 0,
bipvProductOutput: target.bipvProductOutput ?? 0,
};
}
return {
chipYield: 0,
componentYield: 0,
bipvProductOutput: 0,
};
}
/**
* 获取 芯片良率目标值 和 标准组件良率目标值
* @param {*} targetList 目标值列表
* @param {*} factoryId 工厂ID
* @returns
*/
function getFactoryTargetValueA(targetList, factoryId) {
const target = targetList.find((item) => item.factory === factoryId)
if (target) {
return {
chipYieldRate: target.chipYieldRate ?? 0,
componentYieldRate: target.componentYieldRate ?? 0,
componentYield: target.componentYield ?? 0,
// componentYield: target.componentYield ?? 0,
chipOee: target.chipOee ?? 0,
};
}
return {
chipYieldRate:0,
componentYieldRate:0,
componentYield: 0,
chipOee:0,
};
}
/**
*
* @returns 初始化 效率模块里 初始状态值
*/
function initA() {
const t_ = {
current: Array(7).fill(0),
previous: Array(7).fill(0),
};
// 芯片OEE
// 转化效率
// 标准组件良率
const stdRate = {
...deepClone(t_),
target: Array(7).fill(0),
};
// 芯片良率
const transformRate = deepClone(stdRate);
const chipRate = deepClone(stdRate);
const chipOeeRate = deepClone(stdRate);
return {
chipOeeRate,
transformRate,
chipRate,
stdRate,
};
}
/**
*
* @returns 初始化 产量模块里 初始状态值
*/
function init() {
const t_ = {
current: Array(7).fill(0),
previous: Array(7).fill(0),
};
// 芯片投入
const chipInvest = deepClone(t_);
// FTO投入
const ftoInvest = deepClone(t_);
// 芯片产出
const chipOutput = {
...deepClone(t_),
target: Array(7).fill(0),
};
// 标准组件产出
const stdOutput = deepClone(chipOutput);
// BIPV产出
const bipvOutput = deepClone(chipOutput);
return {
chipInvest, // 芯片投入
ftoInvest, // FTO投入
chipOutput, // 芯片产出
stdOutput, // 标准组件产出
bipvOutput, // BIPV产出
};
}
function random_default(min = 0, max = 1) {
// return 0;
let a = Math.floor(Math.random() * max);
while (a < min) {
a = Math.floor(Math.random() * max);
function random_default() {
return 0;
let a = Math.floor(Math.random() * 1000);
while (a < 600) {
a = Math.floor(Math.random() * 1000);
}
return a;
}
/* 接口 */
async function getHomeInfo() {
const { code, data } = await axios.post("ip/prod-output/cockpitData", {
const { code, data } = await axios.post("/ip/prod-output/query-by-date", {
factorys: [],
date: 4,
mode:0
});
if (code == 0) {
return data;
@@ -640,105 +34,162 @@ async function getHomeTarget() {
return null;
}
function getUrl(copilot_module) {
let url = {
// 对比数据的 URL
comparison: "",
// 目标数据的 URL
// target: "",
};
switch (copilot_module) {
case "yield":
url.comparison = "ip/prod-output/cockpitData";
// url.target = "/ip/prod-target/query-by-date";
break;
case "energy":
url.comparison = "ip/prod-output/cockpitComprehensiveDataMonitor";
break;
case "efficiency":
url.comparison = "ip/prod-output/cockpitDataRate";
// url.target = "/ip/prod-target/query-rate-target";
break;
}
/* 状态 */
const state = {
copilot: {
/* 产量驾驶舱 */
yield: {},
/* 能源驾驶舱 */
energy: {},
/* 效率驾驶舱 */
efficiency: {},
},
home: {
ftoInvest: null,
chipInvest: null,
chipOutput: null,
stdOutput: null,
bipvOutput: null,
},
};
return url;
}
const mutations = {
SET_HOME_INFO: (state, payload) => {
state.home.ftoInvest = payload.ftoInvest;
state.home.chipInvest = payload.chipInvest;
state.home.chipOutput = payload.chipOutput;
state.home.stdOutput = payload.stdOutput;
state.home.bipvOutput = payload.bipvOutput;
},
SET_COPILOT_INFO: (state) => {},
};
async function doFetch(copilot_module = "yield", fetch_target, params) {
const url = getUrl(copilot_module);
const { code, data } = await axios.post(
url.comparison,
{
...params,
const actions = {
/** 初始化首页数据 */
async initHome({ commit }) {
const dataArr = await getHomeInfo();
const targetArr = await getHomeTarget();
const chipInvest = {
current: Array(7).fill(0),
previous: Array(7).fill(0),
}; // 芯片投入
const ftoInvest = {
current: Array(7).fill(0),
previous: Array(7).fill(0),
}; // FTO投入
const chipOutput = {
current: Array(7).fill(0),
previous: Array(7).fill(0),
target: Array(7).fill(0),
}; // 芯片产出
const stdOutput = {
current: Array(7).fill(0),
previous: Array(7).fill(0),
target: Array(7).fill(0),
}; // 标准组件产出
const bipvOutput = {
current: Array(7).fill(0),
previous: Array(7).fill(0),
target: Array(7).fill(0),
}; // BIPV产出
if (dataArr) {
for (const factory of dataArr) {
/* 工厂索引 */
const factoryId = factory.factory;
/* 收集目标数据 */
if (targetArr) {
const target = targetArr.find((item) => item.factory === factoryId);
if (target) {
chipOutput.target.splice(factoryId, 1, target.chipYield ?? 0);
stdOutput.target.splice(factoryId, 1, target.componentYield ?? 0);
bipvOutput.target.splice(factoryId, 1, target.bipvProductOutput ?? 0);
}
}
/* 收集芯片投入数据 */
chipInvest.current.splice(
factoryId,
1,
factory.inputNumber ?? random_default()
);
chipInvest.previous.splice(
factoryId,
1,
factory.previousYearInputNumber ?? random_default()
);
/* 收集FTO投入数据 */
ftoInvest.current.splice(
factoryId,
1,
factory.chipInput ?? random_default()
);
ftoInvest.previous.splice(
factoryId,
1,
factory.previousYearChipInput ?? random_default()
);
/* 收集产出数据 */
switch (factory.glassType) {
case 0:
// 玻璃芯片 产出
chipOutput.current.splice(
factoryId,
1,
factory.outputNumber ?? random_default()
);
chipOutput.previous.splice(
factoryId,
1,
factory.previousYearOutputNumber ?? random_default()
);
if (code == 0) {
return data;
}
console.warn("[doFetch] failed, code: ", code);
return null;
}
/**
*
* @param {*} period 日周月年1,2,3,4
* @param {*} target 是否获取目标数据
* @returns
*/
function getCopilotYield(period,than,target = false) {
return getCopilotData("yield", period,than, target);
}
function getCopilotEnergy(period, target = false) {
return getCopilotData("energy", period,than, target);
}
function getCopilotEfficiency(period,than, target = false) {
return getCopilotData("efficiency", period,than, target);
}
/**
*
* @param {*} period 周期: 日周月年
* @param {*} target 是否获取目标数据:默认 否
* @returns
*/
async function getCopilotData(copilot_module, period,than, target = false) {
if (!copilot_module) copilot_module = "yield";
// 请求参数,直接一次性获取所有工厂
let queryParams = {
factorys: [],
date: 4,
mode:0
};
switch (period) {
case "日":
queryParams.date = 1;
break;
case "周":
queryParams.date = 2;
case 1:
// 标准组件 产出
stdOutput.current.splice(
factoryId,
1,
factory.outputNumber ?? random_default()
);
stdOutput.previous.splice(
factoryId,
1,
factory.previousYearOutputNumber ?? random_default()
);
break;
case "月":
queryParams.date = 3;
break;
case "年":
queryParams.date = 4;
break;
default:
queryParams.date = 1;
case 2:
// BIPV 产出
bipvOutput.current.splice(
factoryId,
1,
factory.outputNumber ?? random_default()
);
bipvOutput.previous.splice(
factoryId,
1,
factory.previousYearOutputNumber ?? random_default()
);
break;
}
switch (than) {
case "同比":
queryParams.mode = 0;
break;
case "环比":
queryParams.mode = 1;
break;
}
return {
data: await doFetch(copilot_module, target ? true : false, queryParams),
type: copilot_module,
};
}
/* 更新 state */
commit("SET_HOME_INFO", {
ftoInvest,
chipInvest,
chipOutput,
stdOutput,
bipvOutput,
});
}
},
/** 初始化驾驶舱数据 */
async initCopilot({ commit }) {},
};
export default {
namespaced: true,
state,
mutations,
actions,
};

View File

@@ -71,102 +71,6 @@ export const SystemDataScopeEnum = {
DEPT_SELF: 5 // 仅本人数据权限
}
/**
* 工厂名称
*/
// export const factoryList =['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司']
export const factoryArray1 =[
{
name: '瑞昌中建材光电材料有限公司',
id: 0
},
{
name: '邯郸中建材光电材料有限公司',
id: 1
},
{
name: '中建材株洲光电材料有限公司',
id: 2
},
{
name: '佳木斯中建材光电材料有限公司',
id: 3
},
{
name: '成都中建材光电材料有限公司',
id: 4
},
{
name: '凯盛光伏材料有限公司',
id: 5
},
{
name: '蚌埠兴科玻璃有限公司',
id: 6
}
]
// export const dhgfactoryList =[
// {
// name: '瑞昌中建材光电材料有限公司',
// id: 0
// },
// {
// name: '邯郸中建材光电材料有限公司',
// id: 1
// },
// {
// name: '中建材株洲光电材料有限公司',
// id: 2
// },
// {
// name: '佳木斯中建材光电材料有限公司',
// id: 3
// },
// {
// name: '成都中建材光电材料有限公司',
// id: 4
// },
// {
// name: '蚌埠兴科玻璃有限公司',
// id: 6
// }
// ]
export const tyjxfactoryList =[
{
name: '凯盛光伏材料有限公司',
id: 5
}
]
// 暂时只有瑞昌邯郸数据
export const factoryList =['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司']
export const factoryListabbr =['瑞昌', '邯郸']
export const factoryArray =[
{
name: '瑞昌中建材光电材料有限公司',
id: 0
},
{
name: '邯郸中建材光电材料有限公司',
id: 1
}
]
export const dhgfactoryList =[
{
name: '瑞昌中建材光电材料有限公司',
id: 0
},
{
name: '邯郸中建材光电材料有限公司',
id: 1
}
]
/**
* 代码生成模板类型
*/

View File

@@ -1,47 +0,0 @@
/*
* @Author: zhp
* @Date: 2024-04-16 09:32:29
* @LastEditTime: 2024-04-16 09:32:29
* @LastEditors: zhp
* @Description:
*/
/**
* @param {Function} func
* @param {number} wait
* @param {boolean} immediate
* @return {*}
*/
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function () {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
return function (...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在,重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return result
}
}

View File

@@ -139,15 +139,3 @@ export function getDictDataLabel(dictType, value) {
const dict = getDictData(dictType, value);
return dict ? dict.label : '';
}
// table中用来过滤字典
export function publicFormatter(dictTable) {
const dictDatas = getDictDatas(dictTable)
return function (val) {
const arr = {}
dictDatas.map((item) => {
arr[item.value] = item.label
})
return arr?.[val]
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

View File

@@ -1,317 +0,0 @@
<!--
filename: BarChartBase.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div>
<div ref="chart" style="height:94%;width:100%"></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainer from "./ChartContainer.vue";
import { debounce } from "@/utils/debounce";
// import chartMixin from "@/mixins/chart.js";
import * as echarts from "echarts";
export default {
name: "BarChartBase",
components: {
ChartContainer,
},
// mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 34,
},
legend: {
type: Array,
required: true,
},
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: true,
},
in: {
type: String,
default: "",
},
},
data() {
return {
width: '100%',
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "5%",
right: "4%",
bottom: "3%",
top: "15%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#4561AE",
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#4561AE",
},
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
},
series: [
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[1].data,
},
],
},
};
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened
},
},
watch: {
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isOpen(val) {
// console.log(val)
this.canvasReset()
},
isFullscreen(val) {
this.options.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options);
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.initChart(this.actualOptions);
this.canvasReset()
},
series(val) {
if (!val) {
this.initChart(this.options);
return;
}
// const actualOptions = JSON.parse(JSON.stringify(this.options));
// console.log('actualOptions', this.options)
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data || [];
this.options.series[1].name = val?.[1]?.name || "";
// this.actualOptions = actualOptions;
this.initChart(this.options);
},
},
mounted() {
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.chart);
this.chart.setOption(this.options);
},
},
};
</script>
<style scoped lang="scss">
.bar-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 0.67vw;
&::before {
content: "";
display: inline-block;
width: 0.531vw;
height: 0.531vw;
background-color: #ccc;
border-radius: 2px;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(1):before {
background-color: #12f7f1;
}
.legend-item:nth-child(2):before {
background-color: #58adfa;
}
}
</style>

View File

@@ -1,69 +0,0 @@
<!--
filename: ChartContainer.vue
author: liubin
date: 2024-04-10 08:54:33
description:
todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
-->
<template>
<div class="chart-container" :class="{ 'no-scroll': noScroll }">
<slot />
</div>
</template>
<script>
export default {
name: "ChartContainer",
components: {},
props: {
noScroll: {
type: Boolean,
default: false,
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.chart-container {
height: 0;
flex: 1;
overflow-x: scroll;
}
.no-scroll::-webkit-scrollbar {
width: 0;
height: 0;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
// width: 10px;
// height: 10px;
// background: #14305f;
}
::-webkit-scrollbar-track {
background: #14305f;
border: 0 none;
border-radius: 0;
}
::-webkit-scrollbar-thumb {
background: #004798;
border: 0 none;
border-radius: 6px;
}
</style>

View File

@@ -8,7 +8,8 @@
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="0" style="
<button
style="
appearance: none;
outline: none;
border: none;
@@ -18,11 +19,22 @@
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
"
@click="$emit('refresh')"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 24px; height: 24px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</button>
<!-- decoration -->
@@ -31,13 +43,19 @@
<div v-if="side == 'left'" class="corner bl"></div>
<div v-if="side == 'right'" class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<div
class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
<div
class="container-body"
:class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
]"
>
<slot />
</div>
</div>
@@ -91,12 +109,7 @@ export default {
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
background: radial-gradient(circle at center , #024798 2%, #024798 30%, transparent);
z-index: 1;
}

View File

@@ -1,9 +1,8 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-05-07 16:54:54
* @LastEditors: zhp
* @Description:
filename: ContainerIcon.vue
author: liubin
date: 2024-04-09 16:41:36
description:
-->
<template>
@@ -15,13 +14,8 @@ import cube from "@/assets/images/homeindex/fto-icon.png";
import chip from "@/assets/images/homeindex/chip-icon.png";
import chip2 from "@/assets/images/homeindex/chip-icon-2.png";
import bipv from "@/assets/images/homeindex/bipv-icon.png";
import water from "@/assets/images/homeindex/water-icon.png";
import gas from "@/assets/images/homeindex/gas-icon.png";
import ware from "@/assets/images/homeindex/ware-icon.png";
import flash from "@/assets/images/homeindex/flash-icon.png";
import std from "@/assets/images/homeindex/std-icon.png";
export default {
name: "ContainerIcon",
components: {},
@@ -46,10 +40,6 @@ export default {
bipv:
"background: url(" + bipv + ") no-repeat center center / 100% 100%",
std: "background: url(" + std + ") no-repeat center center / 100% 100%",
water: "background: url(" + water + ") no-repeat center center / 100% 100%",
gas: "background: url(" + gas + ") no-repeat center center / 100% 100%",
flash: "background: url(" + flash + ") no-repeat center center / 100% 100%",
ware: "background: url(" + ware + ") no-repeat center center / 100% 100%",
}[this.icon];
},
},

View File

@@ -8,30 +8,39 @@
<template>
<div class="copilot-header">
<section class="menu">
<CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active"
@click="() => $emit('update:active', i)" />
<div class="type-name"></div>
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
@click="() => $emit('update:than', i)" />
<CopilotButton
v-for="i in ['产量', '效率', '能源']"
:key="i"
:label="i"
:active="i === active"
@click="() => $emit('update:active', i)"
/>
</section>
<div class="page-title">{{ active }}驾驶舱</div>
<section class="menu" style="width: 24vw;float: right;">
<CopilotButton v-for="i in ['日', '周', '月', '年']" :key="i" :label="i" :active="i === period"
@click="() => $emit('update:period', i)" />
<section class="menu">
<CopilotButton
v-for="i in ['日', '周', '月', '年']"
:key="i"
:label="i"
:active="i === period"
@click="() => $emit('update:period', i)"
/>
<div class="btn-group">
<!-- <button type="button" class="export-btn" @click="handleExport" /> -->
<button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
@click="toggleFullScreen" />
<!-- <button class="times-btn"> {{ times }} </button> -->
<button type="button" class="export-btn" />
<button
type="button"
class="fullscreen-btn"
:class="[isFullscreen ? 'exit-fullscreen' : '']"
@click="toggleFullScreen"
/>
</div>
</section>
<div class="page-title">{{ active }}驾驶舱</div>
</div>
</template>
<script>
import CopilotButton from "./button.vue";
import screenfull from "screenfull";
import { exportFactoryDataExcel } from "@/api/produceData";
export default {
name: "CopilotHeader",
@@ -43,73 +52,18 @@ export default {
period: {
type: String,
},
than: {
type: String,
},
},
data() {
return {
times:'',
isFullscreen: false,
};
},
mounted () {
this.getTimes()
this.getTimesInterval();
},
computed: {},
methods: {
handleExport() {
exportFactoryDataExcel({
// factoryId: this.companyId,
timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
}).then(response => {
this.$download.excel(response, `生产数据.xls`);
// this.exportLoading = false;
}).catch(() => { });
},
getTimes() {
setInterval(this.getTimesInterval, 60000);
},
getTimesInterval() {
var now = new Date();
var weekDay = now.getDay();
var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var week = weeks[weekDay]
let _this = this;
let year = new Date().getFullYear(); //获取当前时间的年份
let month = new Date().getMonth() + 1; //获取当前时间的月份
let day = new Date().getDate(); //获取当前时间的天数
let hours = new Date().getHours(); //获取当前时间的小时
let minutes = new Date().getMinutes(); //获取当前时间的分数
// let seconds = new Date().getSeconds(); //获取当前时间的秒数
//当小于 10 的是时候,在前面加 0
if (hours < 10) {
hours = '0' + hours;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
// if (seconds < 10) {
// seconds = '0' + seconds;
// }
//拼接格式化当前时间
this.times =
year +
'.' +
month +
'.' +
day +
" " + hours +
'.' +
minutes +
'.' +
week
},
toggleFullScreen() {
this.isFullscreen = !this.isFullscreen;
screenfull.toggle(document.querySelector(".copilot-layout"))
screenfull.toggle(document.querySelector(".copilot-layout"));
// 矫正宽度
// const el = document.querySelector(".copilot-layout");
// el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
@@ -129,11 +83,10 @@ export default {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
}
.copilot-header > section {
width: 26vw;
width: 24vw;
display: flex;
align-items: center;
gap: 8px;
@@ -147,17 +100,6 @@ export default {
cursor: pointer;
}
.times-btn {
width: 240px;
height: 32px;
margin-left: 24px;
cursor: pointer;
color: white;
font-size: 20px;
line-height: 30px;
float: right;
/* margin-bottom: 20px; */
}
.export-btn {
background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
no-repeat;
@@ -171,27 +113,15 @@ export default {
background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 / 100% 100%
no-repeat;
}
.type-name {
/* content: ""; */
display: inline-block;
width: 1px;
height: 59px;
border: 1px solid;
opacity: 0.9;
border-image: linear-gradient(180deg, rgba(0, 176, 243, 0), rgba(88, 194, 255, 1), rgba(0, 120, 228, 0)) 2 2;
/* position: absolute; */
/* left: 0; */
/* top: 10px; */
}
.page-title {
width: 25vw;
flex: 1;
font-size: 54px;
line-height: 70px;
letter-spacing: 5px;
font-family: 优设标题黑;
color: #6db6ff;
text-align: center;
text-align: right;
user-select: none;
background: url(../../../assets/images/homeindex/page-title.png) 0 0 / 100% 100% no-repeat;
}
</style>

View File

@@ -1,167 +0,0 @@
<template>
<div class="factory-header">
<section class="menu1">
<!-- <CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active"
@click="() => $emit('update:active', i)" />
<div class="type-name"></div> -->
<CopilotButton v-for="i in dataList" :key="i.id" :label="i.name" :active="i.id === period"
@click="() => $emit('update:period', i.id)" />
<!-- <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
@click="() => $emit('update:than', i)" /> -->
</section>
<div class="page-title">{{ companyName }}</div>
<section class="menu2">
<div class="btn-group">
<el-tooltip v-if="showPeriod" class="item" effect="dark" content="导出" placement="top">
<button type="button" class="export-btn" @click="handleExport" />
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="isFullscreen === false ? '退出全屏' : '全屏'" placement="top">
<button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
@click="toggleFullScreen" />
</el-tooltip>
</div>
</section>
</div>
</template>
<script>
// import CopilotButton from "./button.vue";
import FactorySelect from "./FactorySelect.vue";
import screenfull from "screenfull";
import CopilotButton from "./button.vue";
import { exportFactoryDataExcel } from "@/api/produceData";
export default {
name: "FactoryDataHeader",
components: { CopilotButton, FactorySelect },
props: {
companyName: {
type: String,
},
companyId: {
type: Number,
},
period: {
type: Number,
},
than: {
type: String,
},
},
watch: {
period(val) {
if (val != 1) {
this.showPeriod = true
} else {
this.showPeriod = false
}
}
},
data() {
return {
isFullscreen: false,
content: '全屏',
showPeriod:false,
dataList: [
{ id: 1, name: "日" },
{ id: 2, name: "周" },
{ id: 3, name: "月" },
{ id: 4, name: "年" },
],
};
},
computed: {},
methods: {
handleExport() {
// if (this.period != 1) {
this.showPeriod = true
exportFactoryDataExcel({
factoryId: this.companyId,
timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
compare: this.than === '同比' ? 1 : 2
}).then(response => {
this.$download.excel(response, `${this.companyName}生产数据.xls`);
// this.exportLoading = false;
}).catch(() => { });
// } else {
// this.showPeriod = false
// }
},
toggleFullScreen() {
this.isFullscreen = !this.isFullscreen;
screenfull.toggle(document.querySelector(".factory-layout"));
// 矫正宽度
// const el = document.querySelector(".factory-layout");
// el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
// el.style.left = this.isFullscreen ? "0" : "54px";
},
updateCompany(obj) {
this.$emit("updateCompany", obj);
},
},
};
</script>
<style scoped>
@font-face {
font-family: 优设标题黑;
src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
}
.factory-header {
display: flex;
gap: 12px;
align-items: center;
}
.factory-header > .menu1 {
width: 20vw;
display: flex;
align-items: center;
gap: 8px;
}
.factory-header > .menu2 {
width: 20vw;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
}
.export-btn,
.fullscreen-btn {
/* float: right; */
width: 32px;
height: 32px;
margin-left: 24px;
cursor: pointer;
}
.export-btn {
background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
no-repeat;
}
.fullscreen-btn {
background: url(../../../assets/images/full-icon.png) 0 0 / 100% 100%
no-repeat;
}
.exit-fullscreen {
background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 /
100% 100% no-repeat;
}
.page-title {
flex: 1 1 auto;
font-size: 40px;
line-height: 70px;
letter-spacing: 5px;
font-family: 优设标题黑;
color: #6db6ff;
text-align: center;
user-select: none;
background: url(../../../assets/images/homeindex/page-title-two.png) 0 0 / 100% 100% no-repeat;
}
</style>

View File

@@ -1,137 +0,0 @@
<template>
<div class="factory-select">
<div class="label-box" @click="openList">
<span>{{ companyName }}</span>
<span
class="triangle"
:style="{ transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)' }"
></span>
</div>
<div class="option-list" v-show="isOpen">
<div
v-for="item in company"
:key="item.id"
@click="chooseCompany(item.id, item.name)"
>
{{ item.name }}
</div>
</div>
</div>
</template>
<script>
export default {
name: "FactorySelect",
props: {
companyName: {
type: String,
},
companyId: {
type: Number,
},
},
data() {
return {
isOpen: false,
company: [
{ id: 0, name: "瑞昌中建材光电材料有限公司" },
{ id: 1, name: "邯郸中建材光电材料有限公司" },
{ id: 2, name: "株洲中建材光电材料有限公司" },
{ id: 3, name: "佳木斯中建材光电材料有限公司" },
{ id: 4, name: "成都中建材光电材料有限公司" },
{ id: 5, name: "凯盛中建材光电材料有限公司" },
{ id: 6, name: "蚌埠中建材光电材料有限公司" },
],
};
},
methods: {
openList() {
this.isOpen = !this.isOpen;
},
chooseCompany(id, name) {
// this.companyId = id;
// this.companyName = name;
this.$emit("updateCompany", { companyName: name, companyId: id });
this.isOpen = false;
},
},
};
</script>
<style lang="scss" scoped>
.factory-select {
width: 100%;
position: relative;
.label-box {
flex: 1;
position: relative;
background: #006acd40;
backdrop-filter: blur(3px);
padding: 12px;
padding-left: 20px;
color: #fff;
font-size: 22px;
cursor: pointer;
}
.label-box::before,
.label-box::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
background: transparent;
border-style: solid;
border-width: 2px;
border-color: transparent;
border-top-color: #007be4;
}
.label-box::before {
left: 0;
border-left-color: #007be4;
}
.label-box::after {
right: 0;
border-right-color: #007be4;
}
.triangle {
position: absolute;
right: 15px;
top: 18px;
display: inline-block;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid #1d74d8;
}
.option-list {
width: 100%;
position: absolute;
z-index: 1000;
div {
padding-left: 23px;
font-size: 20px;
width: 100%;
height: 44px;
line-height: 44px;
background-color: rgba(1, 34, 86, 0.8);
cursor: pointer;
}
div:hover {
background-color: rgba(0, 106, 205, 0.61);
}
}
.option-list::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(1, 34, 86, 0.9);
filter: blur(2px);
z-index: -1;
}
}
</style>

View File

@@ -1,521 +0,0 @@
<!--
filename: LineChartBase.vue
author: liubin
date: 2024-04-30 08:59:28
description:
-->
<template>
<chart-container class="line-chart-base">
<div class="legend">
<span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div>
<div ref="elsChart" :style="{ height: '95%',width: width}"></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import { debounce } from "@/utils/debounce";
import ChartContainer from "./ChartContainer.vue";
// import chartMixin from "@/mixins/chart.js";
import * as echarts from "echarts";
export default {
name: "LineChartBase",
components: {
ChartContainer,
},
// mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 38,
},
legend: {
type: Array,
required: true,
},
// xAxis: {
// type: Array,
// required: true,
// },
series: {
type: Object,
required: true,
},
in: {
type: String,
default: "",
},
},
data() {
return {
width: '100%',
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "5%",
right: "4%",
bottom: "3%",
top: "15%",
containLabel: true,
},
// title: {
// text: 'Stacked Area Chart'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
// legend: {
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
// },
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
grid: {
left: '3%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis:{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
min: function () { // 取最小值向下取整为最小刻度
return 0
},
max: function (value) { // 取最大值向上取整为最大刻度
},
scale: true,
type: 'value',
name: 'kw/h',
// max: 100,//最大值
// min: 0,//最小值
// interval: 20,//间隔
nameTextStyle: {// y轴上方单位的颜色
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
align: "right",
padding: [0, 0, 0, 2]
},
// position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
// type: 'solid',
color: '#25528f',
// width: '1' // 坐标线的宽度
}
},
axisLabel: {
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
fontSize: 12,
// formatter: '{value}'
formatter: '{value}'
// }
},
splitLine: {
lineStyle: {
color: '#25528f'
}
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[0]
// }
// },
},
series: [
{
name: '瑞昌',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#8167F6'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#8167F6', //改变折线点的颜色
lineStyle: {
color: '#8167F6' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '邯郸',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#2760FF'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#2760FF', //改变折线点的颜色
lineStyle: {
color: '#2760FF' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '株洲',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#5996F7'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#5996F7', //改变折线点的颜色
lineStyle: {
color: '#5996F7' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '佳木斯',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#8BC566'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#8BC566', //改变折线点的颜色
lineStyle: {
color: '#8BC566' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '成都',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#11FAF0'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#11FAF0', //改变折线点的颜色
lineStyle: {
color: '#11FAF0' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '凯盛',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#F3C000'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#F3C000', //改变折线点的颜色
lineStyle: {
color: '#F3C000' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '蚌埠',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#F38600'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#F38600', //改变折线点的颜色
lineStyle: {
color: '#F38600' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
]
},
};
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened
},
},
watch: {
isOpen(val) {
if (val === true) {
this.width = 97 + '%'
this.canvasReset()
console.log(this.width)
} else {
this.width = 100 + '%'
this.canvasReset()
}
},
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
if (val === false && this.isOpen === true) {
this.width = 97 + '%'
this.canvasReset()
} else if (val === false && this.isOpen === false) {
this.width = 100 + '%'
this.canvasReset()
}
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions);
},
series(val) {
if (!val) {
this.initChart(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.xAxis.data = val.times
actualOptions.series[0].data = val[0]
actualOptions.series[1].data = val[1];
actualOptions.series[2].data = val[2];
actualOptions.series[3].data = val[3];
actualOptions.series[4].data = val[4];
actualOptions.series[5].data = val[5];
actualOptions.series[6].data = val[6];
this.actualOptions = actualOptions;
this.initChart(actualOptions);
},
},
mounted() {
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.elsChart);
this.chart.setOption(this.actualOptions);
},
},
};
</script>
<style scoped lang="scss">
.line-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 2vw;
&::before {
content: "";
display: inline-block;
width: 0.432vw;
height: 0.432vw;
border-radius: 100%;
margin-right: 0.4vw;
}
&::after {
content: "";
display: inline-block;
width: 1vw;
height: 0.125vw;
position: absolute;
top: 54%;
left: -15%;
transform: translateY(-50%);
border-radius: 100;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(1):after,
.legend-item:nth-child(1):before {
background-color: #8167F6;
}
.legend-item:nth-child(2):after,
.legend-item:nth-child(2):before {
background-color: #2760FF;
}
.legend-item:nth-child(3):after,
.legend-item:nth-child(3):before {
background-color: #5996F7;
}
.legend-item:nth-child(4):after,
.legend-item:nth-child(4):before {
background-color: #8BC566;
}
.legend-item:nth-child(5):after,
.legend-item:nth-child(5):before {
background-color: #11FAF0;
}
.legend-item:nth-child(6):after,
.legend-item:nth-child(6):before {
background-color: #F3C000;
}
.legend-item:nth-child(7):after,
.legend-item:nth-child(7):before {
background-color: #F38600;
}
}
</style>

View File

@@ -1,528 +0,0 @@
<!--
filename: LineChartBase.vue
author: liubin
date: 2024-04-30 08:59:28
description:
-->
<template>
<chart-container class="line-chart-base">
<div class="legend">
<span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div>
<div ref="waterChart" :style="{ height: '95%',width: width}"></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import { debounce } from "@/utils/debounce";
import ChartContainer from "./ChartContainer.vue";
// import chartMixin from "@/mixins/chart.js";
import * as echarts from "echarts";
export default {
name: "LineChartBase",
components: {
ChartContainer,
},
// mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 38,
},
legend: {
type: Array,
required: true,
},
// xAxis: {
// type: Array,
// required: true,
// },
series: {
type: Object,
required: true,
},
in: {
type: String,
default: "",
},
},
data() {
return {
width:'',
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "3%",
right: "2%",
bottom: "3%",
top: "15%",
containLabel: true,
},
// title: {
// text: 'Stacked Area Chart'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
// legend: {
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
// },
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis:{
type: 'category',
// boundaryGap: false,
data: []
},
yAxis: {
min: function () { // 取最小值向下取整为最小刻度
return 0
},
max: function (value) { // 取最大值向上取整为最大刻度
},
scale: true,
type: 'value',
name: 'kw/h',
// max: 100,//最大值
// min: 0,//最小值
// interval: 20,//间隔
nameTextStyle: {// y轴上方单位的颜色
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
align: "right",
padding: [0, 0, 0, 2]
},
// position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
// type: 'solid',
color: '#25528f',
// width: '1' // 坐标线的宽度
}
},
axisLabel: {
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
fontSize: 12,
// formatter: '{value}'
formatter: '{value}'
// }
},
splitLine: {
lineStyle: {
color: '#25528f'
}
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[0]
// }
// },
},
series: [
{
name: '瑞昌',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#8167F6'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#8167F6', //改变折线点的颜色
lineStyle: {
color: '#8167F6' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: []
},
{
name: '邯郸',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#2760FF'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#2760FF', //改变折线点的颜色
lineStyle: {
color: '#2760FF' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: []
},
{
name: '株洲',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#5996F7'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#5996F7', //改变折线点的颜色
lineStyle: {
color: '#5996F7' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: []
},
{
name: '佳木斯',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#8BC566'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#8BC566', //改变折线点的颜色
lineStyle: {
color: '#8BC566' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: []
},
{
name: '成都',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#11FAF0'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#11FAF0', //改变折线点的颜色
lineStyle: {
color: '#11FAF0' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: []
},
{
name: '凯盛',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#F3C000'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#F3C000', //改变折线点的颜色
lineStyle: {
color: '#F3C000' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: []
},
{
name: '蚌埠',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#F38600'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#F38600', //改变折线点的颜色
lineStyle: {
color: '#F38600' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: []
},
]
},
};
},
watch: {
isOpen(val) {
// console.log(val)
if (val === true) {
console.log('ztl')
this.width = 97 + '%'
this.canvasReset()
console.log(this.width)
} else {
this.width = 100 + '%'
this.canvasReset()
}
},
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
if (val === false && this.isOpen === true) {
console.log(val)
this.width = 97 + '%'
this.canvasReset()
} else if(val === false && this.isOpen === false) {
this.width = 100 + '%'
this.canvasReset()
}
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions);
},
series(val) {
if (!val) {
this.initChart(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options))
// console.log(actualOptions)
actualOptions.xAxis.data = val.times
// actualOptions.series.forEach((ele,index) => {
// ele.data = val.index
// })
actualOptions.series[0].data = val[0]
actualOptions.series[1].data = val[1];
actualOptions.series[2].data = val[2];
actualOptions.series[3].data = val[3];
actualOptions.series[4].data = val[4];
actualOptions.series[5].data = val[5];
actualOptions.series[6].data = val[6];
// actualOptions.series[1].data = val?.[1]?.data || [];
// actualOptions.series[1].name = val?.[1]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
},
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened
},
},
mounted() {
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.waterChart);
this.chart.setOption(this.actualOptions);
},
},
};
</script>
<style scoped lang="scss">
.line-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 2vw;
&::before {
content: "";
display: inline-block;
width: 0.432vw;
height: 0.432vw;
border-radius: 100%;
margin-right: 0.4vw;
}
&::after {
content: "";
display: inline-block;
width: 1vw;
height: 0.125vw;
position: absolute;
top: 54%;
left: -15%;
transform: translateY(-50%);
border-radius: 100;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(1):after,
.legend-item:nth-child(1):before {
background-color: #8167F6;
}
.legend-item:nth-child(2):after,
.legend-item:nth-child(2):before {
background-color: #2760FF;
}
.legend-item:nth-child(3):after,
.legend-item:nth-child(3):before {
background-color: #5996F7;
}
.legend-item:nth-child(4):after,
.legend-item:nth-child(4):before {
background-color: #8BC566;
}
.legend-item:nth-child(5):after,
.legend-item:nth-child(5):before {
background-color: #11FAF0;
}
.legend-item:nth-child(6):after,
.legend-item:nth-child(6):before {
background-color: #F3C000;
}
.legend-item:nth-child(7):after,
.legend-item:nth-child(7):before {
background-color: #F38600;
}
}
</style>

View File

@@ -1,27 +0,0 @@
<template>
<div class="notmsg">暂无数据</div>
</template>
<script>
export default {
name: 'NotMsg',
components: {},
data() {
return {
};
},
computed: {
},
methods: {
},
};
</script>
<style scoped lang="scss">
.notmsg {
padding-top: 72px;
color: rgba(255, 255, 255, 0.4);
text-align: center;
font-size: 24px;
}
</style>

View File

@@ -1,10 +1,3 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-05-31 13:26:32
* @LastEditors: zhp
* @Description:
-->
<!--
filename: button.vue
author: liubin
@@ -57,7 +50,7 @@ button {
padding: 12px;
padding-left: 20px;
color: #fff;
font-size: 18px;
font-size: 22px;
letter-spacing: 10px;
cursor: pointer;
}

View File

@@ -6,21 +6,16 @@
-->
<template>
<DoubleRingWrapperVue data-source="BIPV产出" :period="period" />
<DoubleRingWrapperVue />
</template>
<script>
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
export default {
name: "BipvOutput",
components: { DoubleRingWrapperVue },
props: {
period: {
type: String,
default: "日",
},
},
props: {},
data() {
return {};
},

View File

@@ -6,21 +6,16 @@
-->
<template>
<DoubleRingWrapperVue data-source="芯片产出" :period="period" />
<DoubleRingWrapperVue />
</template>
<script>
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
export default {
name: "ChipOutput",
components: { DoubleRingWrapperVue },
props: {
period: {
type: String,
default: "日",
},
},
props: {},
data() {
return {};
},

View File

@@ -6,21 +6,16 @@
-->
<template>
<DoubleRingWrapperVue data-source="标准组件产出" :period="period" />
<DoubleRingWrapperVue />
</template>
<script>
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
export default {
name: "StdOutput",
components: { DoubleRingWrapperVue },
props: {
period: {
type: String,
default: "日",
},
},
props: {},
data() {
return {};
},

View File

@@ -0,0 +1,119 @@
<!--
filename: DoubleRingChart.vue
author: liubin
date: 2024-04-17 11:01:55
description:
-->
<template>
<div class="double-ring-chart">
<div ref="chart" class="double-ring-chart__container"></div>
<!-- :style="{ height: vHeight + 'vh' }" -->
<div class="double-ring-chart__legend">
<div v-for="item in legendItems" :key="item.label" class="legend-item">
<span class="legend-item__label">{{ item.label }}</span>
<span class="legend-item__value">{{
item.value.toLocaleString()
}}</span>
</div>
</div>
</div>
</template>
<script>
import chartMixin from "@/mixins/chart.js";
import fullscreenMixin from "@/mixins/fullscreen.js";
import options from "./double-ring-chart-options";
export default {
name: "DoubleRingChart",
mixins: [chartMixin, fullscreenMixin],
props: {
vHeight: {
type: Number,
default: 24,
},
legendItems: {
type: Array,
default: () => [
{ label: "2023年累计", value: 88002 },
{ label: "2024年累计", value: 88002 },
{ label: "2025年累计", value: 88002 },
],
},
},
data() {
return {};
},
computed: {},
mounted() {
this.initOptions(options);
},
methods: {
// fullscreen mixin 需要的回调
fullscreenCallback(isFullscreen) {
console.log("isFullscreen--->", isFullscreen);
},
},
};
</script>
<style scoped>
.double-ring-chart {
height: 100%;
display: flex;
flex-direction: column;
}
.double-ring-chart__container {
flex: 1;
height: 0;
}
.double-ring-chart__legend {
padding: 12px;
color: #fff;
display: flex;
justify-content: center;
gap: 32px;
}
.legend-item {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.legend-item__label {
position: relative;
}
.legend-item__label::before {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #ccc;
border-radius: 2px;
top: 6px;
left: -18px;
}
.legend-item:nth-child(1) .legend-item__label::before {
background: #0f65ff;
}
.legend-item:nth-child(1) .legend-item__value {
color: #0f65ff;
}
.legend-item:nth-child(2) .legend-item__label::before {
background: #12fff5;
}
.legend-item:nth-child(2) .legend-item__value {
color: #12fff5;
}
.legend-item:nth-child(3) .legend-item__label::before {
background: #003982;
}
</style>

View File

@@ -0,0 +1,66 @@
<!--
filename: DoubleRingWrapper.vue
author: liubin
date: 2024-04-17 09:55:12
description:
-->
<template>
<div class="double-ring-wrapper">
<copilot-select :options="cityOptions" />
<div class="flex-1 stretch">
<DoubleRingChartVue />
</div>
</div>
</template>
<script>
import CopilotSelect from "../../select.vue";
import fetcher from "./fetcherDoubleRing";
import DoubleRingChartVue from "./DoubleRingChart.vue";
export default {
name: "DoubleRingWrapper",
components: { CopilotSelect, DoubleRingChartVue },
props: {},
data() {
return {
cityOptions: [
"成都",
"邯郸",
"株洲",
"瑞昌",
"佳木斯",
"凯盛光伏",
"蚌埠兴科",
],
};
},
computed: {},
mounted() {
fetcher.getData().then((res) => {
console.log("getData--->", res);
});
},
methods: {},
};
</script>
<style scoped lang="scss">
.double-ring-wrapper {
height: 100%;
padding: 12px 24px;
display: flex;
gap: 12px;
flex-direction: column;
align-items: center;
}
.flex-1 {
flex: 1;
}
.stretch {
align-self: stretch;
}
</style>

View File

@@ -1,12 +1,6 @@
export default ({
titleValue,
subtitle,
previousSum,
currentSum,
targetSum,
}) => ({
export default {
grid: {
left: '50%',
left: 0,
right: 0,
bottom: 0,
top: 0,
@@ -14,16 +8,16 @@ export default ({
},
tooltip: {},
title: {
text: titleValue,
left: "49%",
top: "39%",
text: "78%",
left: "50%",
top: "40%",
textAlign: "center",
textStyle: {
fontWeight: 600,
fontSize: 32,
color: "#fffd",
},
subtext: `\u2002${subtitle}\u2002`,
subtext: "\u200224年累计产出\u2002",
subtextStyle: {
fontSize: 14,
fontWeight: 100,
@@ -32,17 +26,17 @@ export default ({
},
},
series: [
// 背景 series
// 背景 series - 2024计划
{
type: "pie",
name: "当前目标",
name: "2024目标",
radius: ["70%", "85%"],
center: ["50%", "52%"],
emptyCircleStyle: {
color: "#042c5f33",
},
},
// 数据 series
// 数据 series - 2024累计
{
type: "pie",
radius: ["70%", "85%"],
@@ -50,14 +44,15 @@ export default ({
avoidLabelOvervlap: false,
label: {
show: false,
// position: "center",
},
labelLine: {
show: false,
},
data: [
{
value: currentSum,
name: "当前累计产出",
value: 90,
name: "2024累计产出",
selected: false,
itemStyle: {
borderJoin: "round",
@@ -78,16 +73,8 @@ export default ({
},
},
{
value:
targetSum > currentSum
? targetSum - currentSum
: targetSum == 0
? currentSum == 0
? 1
: 0
: 0,
name: "未达成累计",
value: 20,
name: "-",
itemStyle: { color: "transparent" },
label: { show: false },
},
@@ -107,8 +94,8 @@ export default ({
},
data: [
{
value: previousSum,
name: "上期累计产出",
value: 90,
name: "2023累计产出",
selected: false,
itemStyle: {
borderJoin: "round",
@@ -129,12 +116,7 @@ export default ({
},
},
{
value:
targetSum > previousSum
? targetSum - previousSum
: previousSum == 0
? 1
: 0,
value: 20,
name: "-",
itemStyle: { color: "transparent" },
label: { show: false },
@@ -142,4 +124,4 @@ export default ({
],
},
],
});
};

View File

@@ -0,0 +1,10 @@
export default {
getData: async function (url) {
//
return await new Promise((resolve, reject) => {
setTimeout(() => {
resolve([90119, 40801, 44028]);
}, 1200);
});
},
};

View File

@@ -1,318 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:49:14
* @LastEditTime: 2024-07-03 14:08:52
* @LastEditors: zhp
* @Description:
-->
<template>
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div>
<div ref="ftoChart" style="height:94%;width:100%"></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainer from "./ChartContainer.vue";
import { debounce } from "@/utils/debounce";
// import chartMixin from "@/mixins/chart.js";
import * as echarts from "echarts";
export default {
name: "BarChartBase",
components: {
ChartContainer,
},
// mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 34,
},
legend: {
type: Array,
required: true,
},
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: true,
},
in: {
type: String,
default: "",
},
},
data() {
return {
width: '100%',
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "5%",
right: "4%",
bottom: "3%",
top: "15%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#4561AE",
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#4561AE",
},
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
},
series: [
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[1].data,
},
],
},
};
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened
},
},
watch: {
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isOpen(val) {
// console.log(val)
this.canvasReset()
},
isFullscreen(val) {
this.options.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options);
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.initChart(this.actualOptions);
this.canvasReset()
},
series(val) {
if (!val) {
this.initChart(this.options);
return;
}
// const actualOptions = JSON.parse(JSON.stringify(this.options));
// console.log('actualOptions', this.options)
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val[1].data;
this.options.series[1].name = val[1].name;
// this.actualOptions = actualOptions;
this.initChart(this.options);
},
},
mounted() {
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.ftoChart);
this.chart.setOption(this.options);
},
},
};
</script>
<style scoped lang="scss">
.bar-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 0.67vw;
&::before {
content: "";
display: inline-block;
width: 0.531vw;
height: 0.531vw;
background-color: #ccc;
border-radius: 2px;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(1):before {
background-color: #12f7f1;
}
.legend-item:nth-child(2):before {
background-color: #58adfa;
}
}
</style>

View File

@@ -1,309 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-05-13 14:08:51
* @LastEditTime: 2024-05-23 15:18:53
* @LastEditors: zhp
* @Description:
-->
<template>
<chart-container class="bar-chart-base">
<div class="legend">
<!-- <span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> -->
</div>
<div ref="gasChart" :style="{ height: '95%',width: width}"></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainer from "./ChartContainer.vue";
// import chartMixin from "@/mixins/chart.js";
import { debounce } from "@/utils/debounce";
import * as echarts from "echarts";
export default {
name: "BarChartBase",
components: {
ChartContainer,
},
// mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 38,
},
// legend: {
// type: Array,
// required: false,
// },
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: false,
},
// in: {
// type: String,
// default: "",
// },
},
data() {
return {
width: '100%',
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "3%",
right: "2%",
bottom: "3%",
top: "15%",
containLabel: true,
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#4561AE",
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#4561AE",
},
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
},
series: [
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
// {
// name: "", // this.series[1].name,
// type: "bar",
// barWidth: 12,
// // tooltip: {
// // valueFormatter: function (value) {
// // return value + " ml";
// // },
// // },
// itemStyle: {
// borderRadius: [10, 10, 0, 0],
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#57abf8", // 0% 处的颜色
// },
// {
// offset: 1,
// color: "#364BFE66", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
// data: [], // this.series[1].data,
// },
],
},
};
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened
},
},
watch: {
isOpen(val) {
// console.log(val)
if (val === true) {
this.width = 97 + '%'
this.canvasReset()
console.log(this.width)
} else {
console.log('ryf')
this.width = 100 + '%'
this.canvasReset()
}
},
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
if (val === false && this.isOpen === true) {
this.width = 97 + '%'
this.canvasReset()
} else if (val === false && this.isOpen === false) {
this.width = 100 + '%'
this.canvasReset()
}
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions);
},
series(val) {
if (!val) {
this.initChart(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
console.log('actualOptions', this.options)
actualOptions.series[0].data = val;
// actualOptions.series[0].name = val[0].name;
// actualOptions.series[1].data = val?.[1]?.data || [];
// actualOptions.series[1].name = val?.[1]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
},
},
mounted() {
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.gasChart);
this.chart.setOption(this.actualOptions);
},
},
// mounted() {
// this.actualOptions = this.options;
// this.initOptions(this.options);
// window.addEventListener("resize", this.initOptions(this.actualOptions))
// if (screenfull.isEnabled) {
// screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen;
// });
// }
// },
};
</script>
<style scoped lang="scss">
.bar-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 0.67vw;
&::before {
content: "";
display: inline-block;
width: 0.531vw;
height: 0.531vw;
background-color: #ccc;
border-radius: 2px;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(1):before {
background-color: #12f7f1;
}
.legend-item:nth-child(2):before {
background-color: #58adfa;
}
}
</style>

View File

@@ -1,215 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:43:51
* @LastEditTime: 2024-06-05 09:43:52
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 60%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1.18vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
border-left: 0.532vw solid transparent;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid #0175dc;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

View File

@@ -1,214 +0,0 @@
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 60%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1.18vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid #0175dc;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@@ -33,28 +33,9 @@ export default {
},
data() {
return {
currentActive: this.options[0],
currentActive: '',
};
},
watch: {
currentActive: {
handler(val) {
this.$emit(
"update:active",
[
"瑞昌",
"邯郸",
"株洲",
"佳木斯",
"成都",
"凯盛光伏",
"蚌埠兴科",
].indexOf(val)
);
},
immediate: true,
},
},
computed: {},
methods: {},
};
@@ -74,7 +55,7 @@ button {
padding: 8px 12px;
cursor: pointer;
position: relative;
transition: all 0.3s;
transition: all .3s;
}
button.active,

View File

@@ -1,239 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:48:37
* @LastEditTime: 2024-06-05 09:53:49
* @LastEditors: zhp
* @Description:
-->
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button
v-if="0"
style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
"
@click="$emit('refresh')"
>rotate
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
style="width: 24px; height: 24px"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div
class="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
>
<Icon :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div
class="container-body"
:class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]"
>
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 60%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1.18vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid #0175dc;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
border-left: 0.532vw solid transparent;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid #0175dc;
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@@ -6,14 +6,18 @@
-->
<template>
<!-- <div class="copilot-layout" ref="copilot-layout"> -->
<div class="copilot-layout produce" ref="copilot-layout">
<CopilotHeaderVue :than="than" :active="page" :period="period" @update:active="updateActive" @update:period="period = $event"
@update:than="updateThan" />
<div class="copilot-layout">
<CopilotHeaderVue
:active="page"
:period="period"
@update:active="page = $event"
@update:period="period = $event"
/>
<YieldCopilot v-if="page == '产量'" :period="period" />
<EnergyCopilot v-if="page == '能源'" :period="period" />
<EfficiencyCopilot v-if="page == '效率'" :period="period" />
<YieldCopilot :period="period" :than="than" />
<!-- <EnergyCopilot v-if="page == '综合'" :period="period" /> -->
<!-- <EfficiencyCopilot v-if="page == '效率'" :period="period" /> -->
<div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
</div>
</template>
@@ -21,88 +25,34 @@
<script>
import CopilotHeaderVue from "./components/CopilotHeader.vue";
import YieldCopilot from "./yield/index.vue";
// import EnergyCopilot from "./energy/index.vue";
// import EfficiencyCopilot from "./efficiency/index.vue";
import EnergyCopilot from "./energy/index.vue";
import EfficiencyCopilot from "./efficiency/index.vue";
export default {
name: "copilotContainer",
name: "CopilotContainer",
components: {
CopilotHeaderVue,
YieldCopilot,
// EnergyCopilot,
// EfficiencyCopilot,
EnergyCopilot,
EfficiencyCopilot,
},
data() {
return {
page: "产量",
period: "",
than:'同比',
currentsStyles: '',
period: "",
};
},
methods: {
updateThan(val) {
console.log(val);
this.than = val;
// this.getMes();
},
updateActive(val, oldVal) {
console.log(val)
if (val === '效率') {
this.$router.push({
path: 'efficiency-container',
query: {
name: '效率'
}
})
// this.page = oldVal
} else if (val === '产量') {
this.$router.push({
path: 'main',
query: {
name: '产量'
}
})
// this.page = oldVal
}
}
},
// mounted() {
// this.page = this.$route.query.name
// },
// watch: {
// page(val) {
// if (val === '产量') {
// console.log(val)
// this.currentsStyles =
// 'height: calc(100% + 38px)'
// console.log(this.currentsStyles)
// } else {
// console.log(val)
// this.currentsStyles = 'height:100%+38px'
// console.log(this.currentsStyles)
// }
// immediate: true
// }
// }
// mounted() {
// document.body.style.minHeight = "1024px";
// document.body.style.minWidth = "1550px";
// },
// destroyed() {
// document.body.style.minHeight = "1024px";
// document.body.style.minWidth = "1550px";
// },
};
</script>
<style>
.copilot-layout {
padding: 16px;
background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
position: absolute;
height: calc(100% + 38px);
left: -16px;
/* top: -8px; */
/* height: calc(100% + 38px); */
top: -8px;
width: calc(100% + 30px);
z-index: 1001;
color: #fff;
@@ -111,14 +61,6 @@ export default {
gap: 8px;
}
.produce {
height: calc(100% + 38px);
}
.other {
height: calc(100% + 240px);
}
.copilot-footer {
/** position: absolute;
bottom: 10px; **/

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

View File

@@ -1,106 +0,0 @@
<!--
filename: FtoInvest.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<BarChartBase
:legend="legend"
:series="series"
:xAxis="xAxis"
in="ChipInvest"
class="chip-invest-chart"
/>
</template>
<script>
import BarChartBase from "./sub/bar/BarChartBase.vue";
export default {
name: "ChipInvest",
components: { BarChartBase },
data() {
// 城市数组的顺序必须是固定的
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return {
xAxis: cities,
};
},
props: {
period: {
type: String,
default: "日",
},
},
computed: {
legend() {
switch (this.period) {
case "日":
return [{ label: "昨日", color: "#12f7f1" }];
case "周":
return [{ label: "本周", color: "#12f7f1" }];
case "月": {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return [
{ label: `${year - 1}${month}`, color: "#12f7f1" },
{ label: `${year}${month}`, color: "#58adfa" },
];
}
case "年": {
const year = new Date().getFullYear();
return [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
];
}
default:
return [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
];
}
},
series() {
const { chipInvest } = this.$store.getters.copilot.yield;
let dataList = null;
switch (this.period) {
case "日":
case "周":
dataList = chipInvest?.current;
break;
default:
dataList = [];
dataList[0] = chipInvest?.pervious;
dataList[1] = chipInvest?.current;
}
return getTemplate(this.period, dataList);
},
},
};
function getTemplate(period, dataList) {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return period == "日" || period == "周"
? [
{
name: period == "日" ? "昨日" : "本周",
data: dataList ?? [],
},
]
: [
{
name: period == "年" ? `${year - 1}` : `${year - 1}${month}`,
data: dataList ? dataList[0] : [],
},
{
name: period == "年" ? `${year}` : `${year}${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
</script>

View File

@@ -1,306 +0,0 @@
<!--
filename: ChipOee.vue
author: liubin
date: 2024-04-29 08:51:04
description: 芯片OEE
-->
<template>
<BarChartBase
:legend="legend"
:series="series"
:xAxis="xAxis"
in="chipOEE"
class="chip-oee"
/>
</template>
<script>
import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
export default {
name: "ChipOEE",
components: { BarChartBase },
props: {
period: {
type: String,
default: "日",
},
than: {
type: String,
default: "同比",
},
chipOeeRate: {
type: Object,
default:{}
}
},
data() {
// 城市数组的顺序必须是固定的
const cities = ["瑞昌", "邯郸",
// "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
];
return {
xAxis: cities,
};
},
computed: {
legend() {
let items = [];
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
//今天的时间
// var day2 = new Date();
// day2.setTime(day2.getTime());
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
const today = new Date().getDate();
// let yesterday = new Date().getDate() -1;
const month = new Date().getMonth() + 1;
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `${year-1}年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `上周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${year-1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else if (this.period === '月' && this.than === '环比') {
items = [
{ label: `${lastMonth}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else {
items = [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
{ label: `${year}年目标`, color: "#58adfa" },
// { label: `${year}年目标`, value: valueTuple[2] },
];
}
return items
// switch (this.period) {
// case "日":
// return [{ label: "昨日", color: "#12f7f1" }];
// case "周":
// return [{ label: "本周", color: "#12f7f1" }];
// case "月": {
// const year = new Date().getFullYear();
// const month = new Date().getMonth() + 1;
// return [
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
// { label: `${year}年${month}月`, color: "#58adfa" },
// ];
// }
// case "年": {
// const year = new Date().getFullYear();
// return [
// { label: `${year - 1}年`, color: "#12f7f1" },
// { label: `${year}年`, color: "#58adfa" },
// ];
// }
// default:
// return [
// { label: `${year - 1}年`, color: "#12f7f1" },
// { label: `${year}年`, color: "#58adfa" },
// ];
// }
},
// chipOeeRate() {
// return this.$store.getters.copilot.efficiency.chipOeeRate
// },
series() {
// console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
const chipOeeRate = this.chipOeeRate
// console.log('chipOee', chipOeeRate)
let dataList = null
switch (this.period) {
default:
dataList = [];
dataList[0] = chipOeeRate?.previous;
dataList[1] = chipOeeRate?.current
dataList[2] = chipOeeRate?.target
}
console.log(dataList)
return getTemplate(this.period, dataList,this.than);
},
},
methods: {},
};
function getTemplate(period, dataList, than) {
// console.log('dataList',dataList);
let items = [];
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
//今天的时间
// var day2 = new Date();
// day2.setTime(day2.getTime());
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
const today = new Date().getDate();
// let yesterday = new Date().getDate() -1;
const month = new Date().getMonth() + 1;
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
const year = new Date().getFullYear();
if (period === '日' && than === '同比') {
items = [
{
name: `${year - 1}${yesterday}`,
data: dataList ? dataList[0] : [],
},
{
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${dayBeYes}`,
data: dataList ? dataList[0] : [],
},
{
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '同比') {
items = [
{
name: `${year-1}年本周`,
data: dataList ? dataList[0] : [],
},
{
name: `本周`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `上周`,
data: dataList ? dataList[0] : [],
},
{
name: `本周`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '同比') {
items = [
{
name: `${year-1}${month}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '环比') {
items = [
{
name: `${lastMonth}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else {
items = [
{
name: `${year - 1}`,
data: dataList ? dataList[0] : [],
},
{
name: `${year}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
return items
}
</script>
<style scoped lang="scss">
</style>

View File

@@ -1,57 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-05-10 11:10:54
* @LastEditTime: 2024-06-06 10:04:49
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="chip-rate">
<ChipRateItem :period="period" :than="than" :cities="['邯郸',]" :color="1" />
<ChipRateItem :period="period" :than="than" :cities="['瑞昌']" :color="2" />
</div>
</template>
<script>
import ChipRateItemVue from "./sub/chip/ChipRateItem.vue";
export default {
name: "ChipRate",
components: { ChipRateItem: ChipRateItemVue },
props: {
period: {
type: String,
default: "日",
},
than: {
type: String,
default: '同比',
}
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.chip-rate {
flex: 1;
display: flex;
gap: 5px;
position: relative;
&:after {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 3px;
height: 100%;
transform: translateX(-50%);
background: linear-gradient(to bottom, transparent, #00f2ff, transparent);
}
}
</style>

View File

@@ -1,108 +0,0 @@
<!--
filename: FtoInvest.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<BarChartBase
:legend="legend"
:series="series"
:xAxis="xAxis"
in="ftoInvest"
class="fto-chart"
/>
</template>
<script>
import BarChartBase from "./sub/bar/BarChartBase.vue";
export default {
name: "FtoInvest",
components: { BarChartBase },
data() {
// 城市数组的顺序必须是固定的
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return {
xAxis: cities,
};
},
props: {
period: {
type: String,
default: "日",
},
},
computed: {
legend() {
switch (this.period) {
case "日":
return [{ label: "昨日", color: "#12f7f1" }];
case "周":
return [{ label: "本周", color: "#12f7f1" }];
case "月": {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return [
{ label: `${year - 1}${month}`, color: "#12f7f1" },
{ label: `${year}${month}`, color: "#58adfa" },
];
}
case "年": {
const year = new Date().getFullYear();
return [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
];
}
default:
return [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
];
}
},
series() {
const { ftoInvest } = this.$store.getters.copilot.yield;
let dataList = null;
switch (this.period) {
case "日":
case "周":
dataList = ftoInvest?.current;
break;
default:
dataList = [];
dataList[0] = ftoInvest?.pervious;
dataList[1] = ftoInvest?.current;
}
return getTemplate(this.period, dataList);
},
},
};
function getTemplate(period, dataList) {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return period == "日" || period == "周"
? [
{
name: period == "日" ? "昨日" : "本周",
data: dataList ?? [],
},
]
: [
{
name: period == "年" ? `${year - 1}` : `${year - 1}${month}`,
data: dataList ? dataList[0] : [],
},
{
name: period == "年" ? `${year}` : `${year}${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
</script>

View File

@@ -1,142 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-06-06 13:55:10
* @LastEditors: zhp
* @Description:
-->
<template>
<!-- <div class="order"> -->
<div class="std-rate" style="width: 100%">
<!-- <div class="span-2">
<StdRateItem :period="period" :city="cities[5]" />
</div> -->
<div class="span-2" v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
<StdRateItem :period="period" :than="than" :city="item" />
</div>
</div>
</template>
<script>
import StdRateItem from "./sub/std/StdRateItem.vue";
export default {
name: "StdRate",
components: { StdRateItem },
props: {
period: {
type: String,
default: "日",
},
than: {
type: String,
default: "同比",
},
},
data() {
return {
// data: null
}
},
computed: {
stdData() {
return this.$store.getters.copilot.efficiency.stdRate
},
cities() {
console.log('ztl', this.$store.getters.copilot.efficiency.stdRate)
// let getterName = "";
// switch (this.dataSource) {
// case "标准组件产出":
// getterName = "stdOutput";
// break;
// case "芯片产出":
// getterName = "chipOutput";
// break;
// case "BIPV产出":
// getterName = "bipvOutput";
// break;
// }
const _cities = [
{ name: "瑞昌", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
{ name: "邯郸",target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
{ name: "株洲", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
{ name: "佳木斯", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
{ name: "成都", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
{ name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
{ name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
]
if (this.stdData?.previous) {
this.stdData?.previous.forEach(
(v, idx) => {
_cities[idx].previous = v ?? 0;
}
);
}
if (this.stdData?.target) {
this.stdData?.target.forEach(
(v, idx) => {
_cities[idx].target = v ?? 0;
}
)
}
if (this.stdData?.current) {
this.stdData?.current.forEach(
(v, idx) => {
_cities[idx].current = v ?? 0;
}
);
}
// 删掉凯盛光伏
// _cities.splice(4, 1);
let arr = []
arr.push(_cities[0])
arr.push(_cities[1])
return arr;
},
},
watch: {
period() {
this.data = this.$store.getters.copilot.efficiency.stdRate
}
},
// data() {
// return {
// // cities: [
// // { name: "瑞昌", target: 100, total: 200, current: 20 },
// // { name: "邯郸", target: 200, total: 300, current: 20 },
// // { name: "株洲", target: 300, total: 400, current: 20 },
// // { name: "佳木斯", target: 400, total: 500, current: 20 },
// // { name: "成都", target: 500, total: 600, current: 20 },
// // { name: "凯盛光伏", target: 400, total: 500, current: 20 },
// // { name: "蚌埠", target: 500, total: 600, current: 20 },
// // ],
// };
// },
methods: {},
};
</script>
<style scoped lang="scss">
.std-rate {
display: flex;
gap: 16px;
// flex: 1 1 auto;
flex-direction: column;
// display: -webkit-box;
flex-wrap: wrap;
// align-items: center;
// grid-template-columns: repeat(2, 1fr);
// grid-template-rows: repeat(4, 1fr);
}
.std-rate::-webkit-scrollbar {
display: none;
}
.flex-item{
// flex: 1 1 auto;
// width: 50%;
}
.span-2 {
// flex: 1 1 auto;
flex-basis: 100%;
}
</style>

View File

@@ -1,295 +0,0 @@
<!--
filename: TransformRate.vue
author: liubin
date: 2024-04-29 08:50:34
description: 转化效率
-->
<template>
<BarChartBase
:legend="legend"
:series="series"
:xAxis="xAxis"
in="chipOEE"
class="chip-oee"
/>
</template>
<script>
import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue";
export default {
name: "TransformRate",
components: { BarChartBase },
props: {
period: {
type: String,
default: "日",
},
than: {
type: String,
default: '同比',
},
transformRate: {
type: Object,
default: {}
}
},
data() {
// 城市数组的顺序必须是固定的
const cities = ["瑞昌", "邯郸",
// "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
];
return {
xAxis: cities,
};
},
computed: {
legend() {
let items = [];
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
//今天的时间
// var day2 = new Date();
// day2.setTime(day2.getTime());
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
const today = new Date().getDate();
// let yesterday = new Date().getDate() -1;
const month = new Date().getMonth() + 1;
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `${year-1}年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `上周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${year-1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else if (this.period === '月' && this.than === '环比') {
items = [
{ label: `${lastMonth}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
];
} else {
items = [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
{ label: `${year}年目标`, color: "#58adfa" },
// { label: `${year}年目标`, value: valueTuple[2] },
];
}
return items
},
// transformRate() {
// return this.$store.getters.copilot.efficiency.transformRate
// },
series() {
// console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
const transformRate = this.transformRate
console.log('chipOee', transformRate)
let dataList = null;
switch (this.period) {
default:
dataList = [];
dataList[0] = transformRate.previous;
dataList[1] = transformRate.current
dataList[2] = transformRate.target
}
console.log('transformRate', dataList)
return getTemplate(this.period, dataList, this.than);
},
// series() {
// const { transformRate } = this.$store.getters.copilot.efficiency;
// let dataList = null;
// switch (this.period) {
// case "日":
// case "周":
// dataList = transformRate?.current;
// break;
// default:
// dataList = [];
// dataList[0] = transformRate?.previous;
// dataList[1] = transformRate?.current;
// }
// return getTemplate(this.period, dataList);
// },
},
methods: {},
};
function getTemplate(period, dataList,than) {
// console.log('dataList',dataList);
let items = [];
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
//今天的时间
// var day2 = new Date();
// day2.setTime(day2.getTime());
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
const today = new Date().getDate();
// let yesterday = new Date().getDate() -1;
const month = new Date().getMonth() + 1;
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
const year = new Date().getFullYear();
if (period === '日' && than === '同比') {
items = [
{
name: `${year - 1}${yesterday}`,
data: dataList ? dataList[0] : [],
},
{
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${dayBeYes}`,
data: dataList ? dataList[0] : [],
},
{
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '同比') {
items = [
{
name: `${year-1}年本周`,
data: dataList ? dataList[0] : [],
},
{
name: `本周`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `上周`,
data: dataList ? dataList[0] : [],
},
{
name: `本周`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '同比') {
items = [
{
name: `${year-1}${month}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '环比') {
items = [
{
name: `${lastMonth}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else {
items = [
{
name: `${year - 1}`,
data: dataList ? dataList[0] : [],
},
{
name: `${year}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
return items
}
</script>
<style scoped lang="scss"></style>

View File

@@ -1,257 +0,0 @@
<!--
filename: BarChartBase.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<chart-container class="bar-chart-base">
<div class="legend">
<span
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
>{{ item.label }}</span
>
</div>
<div
ref="chart"
style="max-width: 50vw"
:style="{ height: vHeight + 'vh' }"
></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainer from "../../../../components/ChartContainer.vue";
import chartMixin from "@/mixins/chart.js";
export default {
name: "BarChartBase",
components: {
ChartContainer,
},
mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 34,
},
legend: {
type: Array,
required: true,
},
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: true,
},
in: {
type: String,
default: "",
},
},
data() {
return {
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "5%",
right: "4%",
bottom: "3%",
top: "15%",
containLabel: true,
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#4561AE",
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#4561AE",
},
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
},
series: [
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[1].data,
},
],
},
};
},
watch: {
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initOptions(this.actualOptions);
},
series(val) {
if (!val) {
this.initOptions(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || "";
this.actualOptions = actualOptions;
this.initOptions(actualOptions);
},
},
mounted() {
this.actualOptions = this.options;
this.initOptions(this.options);
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
},
};
</script>
<style scoped lang="scss">
.bar-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 0.67vw;
&::before {
content: "";
display: inline-block;
width: 0.531vw;
height: 0.531vw;
background-color: #ccc;
border-radius: 2px;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(1):before {
background-color: #12f7f1;
}
.legend-item:nth-child(2):before {
background-color: #58adfa;
}
}
</style>

View File

@@ -1,395 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-07-03 14:08:44
* @LastEditors: zhp
* @Description:
-->
<template>
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div>
<div ref="oeeChart" style="height:94%;width:100%"></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainer from "../../../../components/ChartContainer.vue";
// import chartMixin from "@/mixins/chart.js";
import { debounce } from "@/utils/debounce";
import * as echarts from "echarts";
export default {
name: "barChartBaseoee",
components: {
ChartContainer,
},
// mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 36,
},
legend: {
type: Array,
required: true,
},
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: true,
},
in: {
type: String,
default: "",
},
},
data() {
return {
width: '100%',
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "5%",
right: "0%",
bottom: "3%",
top: "15%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#4561AE",
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
data: this.xAxis,
},
yAxis: {
name: "单位/%",
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#4561AE",
},
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
},
series: [
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[1].data,
},
{
name: "", // "2024年目标值",
type: "line",
lineStyle: {
color: "#f3c000",
},
itemStyle: {
color: "#f3c000",
},
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#f3c000", // 0% 处的颜色
// },
// {
// offset: 0.55,
// color: "#f3c00033",
// },
// {
// offset: 1,
// color: "transparent", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
data: [], // this.series[0].data,
},
],
},
};
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened
},
},
watch: {
isOpen(val) {
this.canvasReset()
},
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
// this.canvasReset()
// } else if (val === false && this.isOpen === false) {
// this.width = 100 + '%'
// this.canvasReset()
// }
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options)
this.canvasReset()
},
series(val) {
if (!val) {
this.initChart(this.options);
return;
}
// console.log('val', val)
const actualOptions = JSON.parse(JSON.stringify(this.options))
console.log(actualOptions)
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data;
this.options.series[1].name = val?.[1]?.name;
this.options.series[2].data = val?.[2]?.data || [];
this.options.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions;
this.initChart(this.options);
},
},
mounted() {
// if (screenfull.isEnabled) {
// screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen;
// });
// }
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.options);
},
},
};
</script>
<style scoped lang="scss">
.bar-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 1.3vw;
&::before {
content: "";
display: inline-block;
width: 0.531vw;
height: 0.531vw;
background-color: #ccc;
border-radius: 2px;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(3) {
margin-left: 1vw;
}
.legend-item:nth-child(3):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -0.951vw;
transform: translateY(-50%);
}
.legend-item:nth-child(3):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(1):before {
background-color: #12f7f1;
}
.legend-item:nth-child(2):before {
background-color: #58adfa;
}
}
</style>

View File

@@ -1,394 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-07-03 14:08:12
* @LastEditors: zhp
* @Description:
-->
<template>
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div>
<div ref="oeeChart" style="height:94%;width:100%"></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainer from "../../../../components/ChartContainer.vue";
// import chartMixin from "@/mixins/chart.js";
import { debounce } from "@/utils/debounce";
import * as echarts from "echarts";
export default {
name: "barChartBaseoee",
components: {
ChartContainer,
},
// mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 36,
},
legend: {
type: Array,
required: true,
},
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: true,
},
in: {
type: String,
default: "",
},
},
data() {
return {
width: '100%',
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "5%",
right: "0%",
bottom: "3%",
top: "15%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#4561AE",
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
data: this.xAxis,
},
yAxis: {
name: "单位/%",
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#4561AE",
},
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
},
series: [
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[1].data,
},
{
name: "", // "2024年目标值",
type: "line",
lineStyle: {
color: "#f3c000",
},
itemStyle: {
color: "#f3c000",
},
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#f3c000", // 0% 处的颜色
// },
// {
// offset: 0.55,
// color: "#f3c00033",
// },
// {
// offset: 1,
// color: "transparent", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
data: [], // this.series[0].data,
},
],
},
};
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened
},
},
watch: {
isOpen(val) {
this.canvasReset()
},
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
// this.canvasReset()
// } else if (val === false && this.isOpen === false) {
// this.width = 100 + '%'
// this.canvasReset()
// }
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options)
this.canvasReset()
},
series(val) {
if (!val) {
this.initChart(this.options);
return;
}
console.log(val)
// const actualOptions = JSON.parse(JSON.stringify(this.options))
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data || [];
this.options.series[1].name = val?.[1]?.name || "";
this.options.series[2].data = val?.[2]?.data || [];
this.options.series[2].name = val?.[2]?.name || "";
// this.actualOptions = actualOptions;
this.initChart(this.options);
},
},
mounted() {
// if (screenfull.isEnabled) {
// screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen;
// });
// }
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.options);
},
},
};
</script>
<style scoped lang="scss">
.bar-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right:1.3vw;
&::before {
content: "";
display: inline-block;
width: 0.531vw;
height: 0.531vw;
background-color: #ccc;
border-radius: 2px;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(3) {
margin-left: 1vw;
}
.legend-item:nth-child(1):before {
background-color: #12f7f1;
}
.legend-item:nth-child(2):before {
background-color: #58adfa;
}
.legend-item:nth-child(3):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -0.951vw;
transform: translateY(-50%);
}
.legend-item:nth-child(3):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
}
</style>

View File

@@ -1,379 +0,0 @@
<!--
filename: ChipRateItem.vue
author: liubin
date: 2024-04-29 14:25:18
description:
-->
<template>
<div class="chip-rate-item">
<div class="cities">
<CopilotButtons :options="cities" @update:active="handleCityUpdate" />
</div>
<!-- <div style="flex:1;padding: 0 20%;"> -->
<div class="chart" ref="chart"></div>
<!-- </div> -->
<div class="legend">
<div class="legend-item" v-for="lgd in legend" :key="lgd.label">
<span class="legend-item__label">{{ lgd.label }}</span>
<span class="legend-item__value">{{ lgd.value }}</span>
</div>
</div>
</div>
</template>
<script>
import CopilotButtons from "@/views/copilot/components/select.vue";
import chartMixin from "@/mixins/chart.js";
import fullscreenMixin from "@/mixins/fullscreen.js";
import getOptions from "../../../options/chipOptions.js";
import { mapGetters } from "vuex";
export default {
name: "ChipRateItem",
components: { CopilotButtons },
mixins: [chartMixin, fullscreenMixin],
props: {
cities: {
type: Array,
default: () => [],
},
color: {
type: Number,
default: 1,
},
period: {
type: String,
default: "日",
},
than: {
type: String,
default: '同比',
}
},
data() {
return {
factoryId: 0,
count: 1,
};
},
computed: {
chipRate() {
return this.$store.getters.copilot.efficiency.chipRate;
},
valueTuple() {
const getter = this.chipRate;
// console.log(getter)
// if (this.period === "日" || this.period === "周") {
// return [
// getter.previous[this.factoryId],
// getter.current[this.factoryId],
// 0,
// ];
// }
// [100, 200, 200]
return [
getter.previous[this.factoryId],
getter.current[this.factoryId],
getter.target[this.factoryId],
];
},
options() {
// const single = this.period === "日" || this.period === "周";
const today = new Date().getDate();
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
const vt = this.valueTuple;
let items = [];
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
//今天的时间
// var day2 = new Date();
// day2.setTime(day2.getTime());
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
// const today = new Date().getDate();
// let yesterday = new Date().getDate() -1;
// const month = new Date().getMonth() + 1;
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
// const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${yesterday}日良率`, },
{ label: `${year - 1}${yesterday}日良率` },
{ label: `${yesterday}日目标` },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${yesterday}日良率` },
{ label: `${dayBeYes}日良率` },
{ label: `${yesterday}日目标` },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `本周良率`, },
{ label: `${year - 1}年本周良率` },
{ label: `本周目标`, },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `本周良率`, },
{ label: `上周良率`, },
{ label: `本周目标`, },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${month}月良率`, },
{ label: `${year-1}${month}月良率`, },
{ label: `${month}月目标良率`, },
];
} else if (this.period === '月' && this.than === '环比') {
items = [
{ label: `${month}月良率`, },
{ label: `${lastMonth}月良率`, },
{ label: `${month}月目标良率`, },
];
} else {
items = [
{ label: `${year}年良率`, },
{ label: `${year - 1}年良率` },
{ label: `${year}年目标良率` },
];
}
let titleValue = vt[1] === null ? 0 + '%' : this.formatNumber(vt[1]) + '%',
subtitle = {
: "昨日良率",
: "本周良率",
: `${month}月良率`,
: `${year}良率`,
}[this.period];
console.log(vt[0]);
const t = getOptions({
// single,
color: this.color == 1 ? "#4CF0E8" : "#1065ff",
titleValue,
subtitle,
yesterday,
currentName: items[0].label,
preName: items[1].label,
previousSum: vt[0],
currentSum: vt[1],
targetSum: vt[2],
});
return t;
},
legend() {
let items = [];
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
//今天的时间
// var day2 = new Date();
// day2.setTime(day2.getTime());
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
const today = new Date().getDate();
// let yesterday = new Date().getDate() -1;
const month = new Date().getMonth() + 1;
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${year - 1}${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" },
{ label: `${yesterday}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `${yesterday}日目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${dayBeYes}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `${yesterday}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `${yesterday}日目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `${year-1}年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `本周目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `上周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `本周目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${year-1}${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `${month}月目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
} else if (this.period === '月' && this.than === '环比') {
items = [
{ label: `${lastMonth}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `${month}月目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
} else {
items = [
{ label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" },
{ label: `${year}年良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" },
{ label: `${year}年目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" },
];
}
return items
// [
// {
// label:
// this.period == "月"
// ? `${year - 1}年${month}月良率`
// : `${year - 1}年良率`,
// value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
// },
// {
// label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
// value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
// },
// ];
},
},
mounted() {
this.initOptions(this.options);
},
watch: {
period() {
console.log(this.$store.getters.copilot.efficiency)
this.initOptions(this.options);
},
factoryId() {
this.initOptions(this.options);
},
chipRate() {
this.initOptions(this.options);
},
},
methods: {
formatNumber(num) {
console.log(num);
// 判断是否为整数
if (Number.isInteger(num)) {
return num; // 如果是整数,直接转换为字符串
} else {
// 如果不是整数,保留两位小数并转换为字符串
return num.toFixed(2);
}
},
handleCityUpdate(id) {
this.factoryId = id;
},
fullscreenCallback(isFullscreen) {},
},
};
</script>
<style scoped lang="scss">
.chip-rate-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
// padding: 0 3px;
// justify-content: center;
gap: 3px;
backdrop-filter: blur(24px);
.cities {
height: 40px;
}
.chart {
// margin-left: 5%;
// width: 290px;
flex: 1 1 auto;
padding: 0 20%;
/* margin: 10%; */
height: 16vh;
/* min-width: 300px; */
align-self: stretch;
}
.legend {
height: 80px;
display: flex;
color: #fff;
justify-content: flex-end;
gap:20px;
// justify-content: space-between;
}
// .legend:nth-child(3){
// margin-left: 30px;
// }
.legend-item {
margin-left: 15px;
display: flex;
font-size: 16px;
// font-weight: 600;
flex-direction: column;
// align-items: center;
align-items: flex-start;
gap: 3px;
&:first-child {
// margin-left: 5px;
.legend-item__value {
color: #0e61f5;
}
}
&:nth-child(2) {
.legend-item__value {
color: #0fd5d1;
}
}
}
.legend-item__label {
position: relative;
}
.legend-item__label::before {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #ccc;
border-radius: 2px;
top: 6px;
left: -18px;
}
.legend-item:nth-child(2) .legend-item__label::before {
background: #12fff5;
}
.legend-item:nth-child(2) .legend-item__value {
color: #12fff5;
}
.legend-item:nth-child(1) .legend-item__label::before {
background: #0f65ff;
}
.legend-item:nth-child(1) .legend-item__value {
color: #0f65ff;
}
.legend-item:nth-child(3) .legend-item__label::before {
background: #003982;
}
.legend-item__value {
}
}
</style>

View File

@@ -1,149 +0,0 @@
<!--
filename: CityData.vue
author: liubin
date: 2024-04-17 09:55:12
description:
-->
<template>
<div class="city-data">
<div class="headquarter">
<div class="inner-shadow w-1"></div>
<div class="inner-shadow flex-1 flex">
<CityName value="凯盛光伏" />
<CityValue :value="headquarterValue" horizontal :period="period" />
</div>
<div class="inner-shadow w-1"></div>
</div>
<div class="city-item-container">
<CityItem
v-for="city in cities"
:key="city.name"
:location="city.name"
:value="city.value"
:period="period"
/>
</div>
</div>
</template>
<script>
import CityItemVue from "./CityItem.vue";
import CityNameVue from "./CityName.vue";
import CityValueVue from "./CityValue.vue";
export default {
name: "CityData",
components: {
CityItem: CityItemVue,
CityName: CityNameVue,
CityValue: CityValueVue,
},
props: {
dataSource: {
type: String,
default: null,
},
period: {
type: String,
default: "日",
},
},
data() {
return {};
},
computed: {
headquarterValue() {
let getterName = "";
switch (this.dataSource) {
case "标准组件产出":
getterName = "stdOutput";
break;
case "芯片产出":
getterName = "chipOutput";
break;
case "BIPV产出":
getterName = "bipvOutput";
break;
}
return (
"" + (this.$store.getters.copilot.yield[getterName]?.current?.[5] ?? 0)
);
},
cities() {
let getterName = "";
switch (this.dataSource) {
case "标准组件产出":
getterName = "stdOutput";
break;
case "芯片产出":
getterName = "chipOutput";
break;
case "BIPV产出":
getterName = "bipvOutput";
break;
}
const _cities = [
{ name: "瑞昌", value: 0 },
{ name: "邯郸", value: 0 },
{ name: "株洲", value: 0 },
{ name: "佳木斯", value: 0 },
{ name: "成都", value: 0 },
{ name: "凯盛光伏", value: 0 },
{ name: "蚌埠兴科", value: 0 },
];
this.$store.getters.copilot.yield[getterName]?.current?.forEach(
(v, idx) => {
_cities[idx].value = v ?? 0;
}
);
// 删掉凯盛光伏
_cities.splice(4, 1);
return _cities;
},
},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
.city-data {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.headquarter {
flex: 1;
display: flex;
gap: 8px;
}
.w-1 {
width: 70px;
}
.flex {
display: flex;
}
.flex-1 {
flex: 1;
}
.inner-shadow {
box-shadow: inset 0 0 12px 2px #fff3;
border-radius: 4px;
}
.city-item-container {
flex: 3;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
</style>

View File

@@ -1,59 +0,0 @@
<!--
filename: CityItem.vue
author: liubin
date: 2024-04-17 09:55:12
description:
-->
<template>
<div class="city-item inner-shadow">
<CityName :value="location" />
<CityValue :value="value + ''" :period="period" />
</div>
</template>
<script>
import CityNameVue from "./CityName.vue";
import CityValueVue from "./CityValue.vue";
import GradientTextVue from "../gradient/GradientText.vue";
export default {
name: "CityItem",
components: {
GradientTextVue,
CityName: CityNameVue,
CityValue: CityValueVue,
},
props: {
location: {
type: String,
default: "",
},
value: {
type: Number,
default: 0,
},
period: {
type: String,
default: "日",
},
},
data() {
return {};
},
computed: {},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
.city-item {
display: flex;
}
.inner-shadow {
box-shadow: inset 0 0 12px 2px #fff3;
border-radius: 4px;
}
</style>

View File

@@ -1,55 +0,0 @@
<!--
filename: CityName.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<div class="city-name">
<img :src="Icon" alt="city icon" />
<span>{{ value }}</span>
</div>
</template>
<script>
import Icon from "../../../assets/icon.png";
export default {
name: "CityName",
props: {
value: {
type: String,
default: "",
},
},
data() {
return { Icon };
},
};
</script>
<style scoped>
.city-name {
min-width: 80px;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 8px;
flex: 1;
}
img {
/* width: 32px; */
width: 1.543vw;
}
span {
/* font-size: 12px; */
font-size: 0.77vw;
letter-spacing: 2px;
text-align: center;
}
</style>

View File

@@ -1,127 +0,0 @@
<!--
filename: CityValue.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<div class="city-value" :class="[horizontal ? 'horizontal' : '']">
<span class="hint" :class="[horizontal ? 'horizontal' : '']">{{
period == "周" ? "本周产出" : "今日产出"
}}</span>
<span class="value" :class="[horizontal ? 'horizontal' : '']">{{
value | numberFilter
}}</span>
<!-- <GradientTextVue :text="value" :size="horizontal ? 32 : 26" /> -->
</div>
</template>
<script>
import GradientTextVue from "../gradient/GradientText.vue";
export default {
name: "CityValue",
components: { GradientTextVue },
props: {
period: {
type: String,
default: "日",
},
value: {
type: String,
default: "",
},
horizontal: {
type: Boolean,
default: false,
},
},
filters: {
numberFilter(value) {
if (value != null && !isNaN(parseInt(value))) {
return parseInt(value).toLocaleString();
} else {
return value;
}
},
},
data() {
return {};
},
};
</script>
<style scoped>
.city-value {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 8px;
flex: 2;
position: relative;
}
.city-value.horizontal {
flex-direction: row;
}
.city-value::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: linear-gradient(
to bottom,
transparent 20%,
#fff 50%,
transparent 80%
);
}
span.hint {
margin: 0 0.77vw;
font-size: 0.77vw;
order: 2;
/* margin: 0 12px;
width: 32px;
font-size: 12px; */
}
span.hint.horizontal {
margin: 0 1.235vw;
width: 1.543vw;
order: 1;
font-size: 0.77vw;
/* margin: 0 12px;
width: 32px;
font-size: 12px; */
}
.value {
color: #4dd2fe;
text-align: center;
font-size: 1.132vw;
order: 1;
}
.value.horizontal {
text-align: left;
flex: 1;
font-size: 1.543vw;
order: 2;
}
svg,
.value {
width: 100px;
order: 1;
}
.value.horizontal,
svg.horizontal {
order: 2;
}
</style>

View File

@@ -1,64 +0,0 @@
<!--
filename: GradientText.vue
author: liubin
date: 2024-04-24 16:33:25
description:
-->
<template>
<svg :height="size + 8" width="100%">
<defs>
<linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: #00fff4; stop-opacity: 1" />
<stop offset="100%" style="stop-color: #37bdfe; stop-opacity: 1" />
</linearGradient>
</defs>
<text
x="0"
:y="size"
fill="url(#smoke-text)"
:style="{
fontSize: `${size}px`,
letterSpacing: spacing || '2px',
fontFamily: 'Calibri, Verdana, sans-serif',
}"
>
{{ text | numberFilter }}
</text>
</svg>
</template>
<script>
export default {
name: "GradientText",
components: {},
props: {
text: {
type: String,
default: "Test",
},
spacing: {
type: String,
default: "1px",
},
size: {
type: Number,
default: 24,
},
},
filters: {
numberFilter(value) {
if (value != null && !isNaN(parseInt(value))) {
return parseInt(value).toLocaleString();
} else {
return value;
}
},
},
data() {
return {};
},
};
</script>
<style scoped lang="scss"></style>

View File

@@ -1,221 +0,0 @@
<!--
filename: DoubleRingChart.vue
author: liubin
date: 2024-04-17 11:01:55
description:
-->
<template>
<div class="double-ring-chart">
<div ref="chart" class="double-ring-chart__container"></div>
<!-- style="{ height: vHeight + 'vh' }" -->
<div class="double-ring-chart__legend">
<div v-for="item in legendItems" :key="item.label" class="legend-item">
<span class="legend-item__label">{{ item.label }}</span>
<span class="legend-item__value">{{ item.value | numberFilter }}</span>
</div>
</div>
</div>
</template>
<script>
import chartMixin from "@/mixins/chart.js";
import fullscreenMixin from "@/mixins/fullscreen.js";
import getOptions from "../../../options/double-ring-chart-options";
export default {
name: "DoubleRingChart",
mixins: [chartMixin, fullscreenMixin],
props: {
vHeight: {
type: Number,
default: 24,
},
factoryId: {
type: Number,
required: true,
},
period: {
type: String,
default: "日",
},
dataSource: {
type: String,
default: null,
},
},
data() {
return {};
},
filters: {
numberFilter(val) {
if (!isNaN(val)) {
return (+val).toLocaleString();
}
return 0;
},
},
computed: {
dataSourceField() {
switch (this.dataSource) {
case "标准组件产出":
return "stdOutput";
case "芯片产出":
return "chipOutput";
case "BIPV产出":
return "bipvOutput";
}
},
valueTuple() {
// [previousValue, currentValue, sumValue?]
const getter = this.$store.getters.copilot.yield[this.dataSourceField];
if (this.period === "日" || this.period === "周") {
return [
getter.previous[this.factoryId],
getter.current[this.factoryId],
];
}
// [100, 200, 200]
return [
getter.previous[this.factoryId],
getter.current[this.factoryId],
getter.target[this.factoryId],
];
},
options() {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
const vt = this.valueTuple;
let titleValue =
vt[0] != null && vt[2] != null && vt[2] !== 0
? `${vt[1] / vt[2]}%`
: "0%",
subtitle =
this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
return getOptions({
titleValue,
subtitle,
previousSum: this.valueTuple[0],
currentSum: this.valueTuple[1],
targetSum: this.valueTuple[2],
});
},
legendItems() {
return calculateItems(this.period, this.valueTuple);
},
},
watch: {
legendItems() {
this.initOptions(this.options);
},
},
mounted() {
this.initOptions(this.options);
},
methods: {
// fullscreen mixin 需要的回调
fullscreenCallback(isFullscreen) {
console.log("isFullscreen--->", isFullscreen);
},
},
};
function calculateItems(period, valueTuple) {
let items = [];
const today = new Date().getDate();
const month = new Date().getMonth() + 1;
const year = new Date().getFullYear();
switch (period) {
case "日":
items = [
{ label: `${month}${today}日累计`, value: valueTuple[1] },
{ label: `${year-1}${month}${today}日累计`, value: valueTuple[0] },
];
break;
case "周":
items = [
{ label: `本周累计`, value: valueTuple[1] },
{ label: `${year-1}年本周累计`, value: valueTuple[0] },
];
break;
case "月":
items = [
{ label: `${month}月累计`, value: valueTuple[1] },
{ label: `${year-1}${month}月累计`, value: valueTuple[0] },
{ label: `${month}月目标`, value: valueTuple[2] },
];
break;
case "年":
items = [
{ label: `${year}年累计`, value: valueTuple[1] },
{ label: `${year - 1}年累计`, value: valueTuple[0] },
{ label: `${year}年目标`, value: valueTuple[2] },
];
break;
}
return items;
}
</script>
<style scoped>
.double-ring-chart {
height: 100%;
display: flex;
flex-direction: column;
}
.double-ring-chart__container {
flex: 1;
height: 0;
}
.double-ring-chart__legend {
padding: 12px;
color: #fff;
display: flex;
justify-content: center;
gap: 32px;
}
.legend-item {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.legend-item__label {
position: relative;
}
.legend-item__label::before {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #ccc;
border-radius: 2px;
top: 6px;
left: -18px;
}
.legend-item:nth-child(1) .legend-item__label::before {
background: #12fff5;
}
.legend-item:nth-child(1) .legend-item__value {
color: #12fff5;
}
.legend-item:nth-child(2) .legend-item__label::before {
background: #0f65ff;
}
.legend-item:nth-child(2) .legend-item__value {
color: #0f65ff;
}
.legend-item:nth-child(3) .legend-item__label::before {
background: #003982;
}
</style>

View File

@@ -1,86 +0,0 @@
<!--
filename: DoubleRingWrapper.vue
author: liubin
date: 2024-04-17 09:55:12
description:
-->
<template>
<div class="double-ring-wrapper">
<template v-if="period == '月' || period == '年'">
<copilot-select
@update:active="handleActiveUpdate"
:options="cityOptions"
/>
<div class="flex-1 stretch">
<DoubleRingChartVue
:data-source="dataSource"
:period="period"
:factoryId="factoryId"
/>
</div>
</template>
<template v-else>
<CityData :data-source="dataSource" :period="period" />
</template>
</div>
</template>
<script>
import CopilotSelect from "@/views/copilot/components/select.vue";
import DoubleRingChartVue from "./DoubleRingChart.vue";
import CityData from "../city/CityData.vue";
export default {
name: "DoubleRingWrapper",
components: { CopilotSelect, DoubleRingChartVue, CityData },
props: {
dataSource: {
type: String,
default: null,
},
period: {
type: String,
default: "日",
},
},
data() {
return {
factoryId: 4, // 默认成都
cityOptions: [
"成都",
"邯郸",
"株洲",
"瑞昌",
"佳木斯",
"凯盛光伏",
"蚌埠兴科",
],
};
},
methods: {
handleActiveUpdate(index) {
this.factoryId = index;
},
},
};
</script>
<style scoped lang="scss">
.double-ring-wrapper {
height: 100%;
padding: 12px 24px;
display: flex;
gap: 12px;
flex-direction: column;
align-items: center;
}
.flex-1 {
flex: 1;
}
.stretch {
align-self: stretch;
}
</style>

View File

@@ -1,66 +0,0 @@
<!--
filename: CityName.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<div class="city-name">
<img :src="Icon" alt="city icon" />
<span>{{ value }}</span>
</div>
</template>
<script>
import Icon from "@/views/copilot/assets/icon.png";
export default {
name: "CityName",
props: {
value: {
type: String,
default: "",
},
},
data() {
return { Icon };
},
};
</script>
<style scoped>
.city-name {
min-width: 80px;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 8px;
position: relative;
}
.city-name::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 2px;
background: linear-gradient(to top, transparent, #0b5be1ee, transparent);
height: 100%;
transform: translateY(-50%);
}
img {
/* width: 32px; */
width: 1.543vw;
}
span {
/* font-size: 12px; */
font-size: 0.77vw;
letter-spacing: 2px;
text-align: center;
}
</style>

View File

@@ -1,133 +0,0 @@
<!--
filename: ProgressBar.vue
author: liubin
date: 2024-04-29 09:18:30
description:
-->
<template>
<div class="progress-bar" :data-title="title" :data-rate="current + '%'">
<div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
</div>
</template>
<script>
export default {
name: "ProgressBar",
components: {},
props: {
value: {
type: Number,
default: 0,
},
target: {
type: Number,
default: 0,
},
previous: {
type: Number,
default: 0,
},
current: {
type: Number,
default: 0,
},
// total: {
// type: Number,
// default: 0,
// },
title: {
type: String,
default: "",
},
},
data() {
return {};
},
computed: {
dataRate() {
// if (this.current != 0 && this.target != 0) {
console.log( '1111111111', this.current, this.target,this.previous);
return this.current == 0 && this.target == 0
? 0
: this.current != 0 && this.target != 0
? `${((this.current / this.target) * 100).toFixed(2)}%`
: this.current != 0 && this.target == 0 && this.current >= 100 ? 100 + '%' : this.current != 0 && this.target == 0 && this.current < 100 ? this.current + '%' : 0 + '%'
// } else if(this.previous != 0) {
// return this.previous + '%'
// }
},
},
methods: {},
};
</script>
<style scoped lang="scss">
.progress-bar {
height: 10px;
background-color: #002f6b;
border-radius: 4px;
margin-bottom: 12px;
position: relative;
&:before {
content: attr(data-title);
display: inline-block;
color: #fff;
position: absolute;
bottom: -200%;
font-size: 12px;
}
&:after {
content: attr(data-rate);
display: inline-block;
color: #fff;
position: absolute;
bottom: -200%;
right: 0;
font-size: 12px;
}
&:first-child {
&:after {
color: #11eae3;
}
}
&:nth-child(2) {
&:after {
color: #0e65fd;
}
}
.progress-bar__rate {
position: absolute;
display: inline-block;
height: 100%;
width: 0;
border-radius: 4px;
background: linear-gradient(to right,
#004c5e11 10%,
#004c5e,
#0ac0c0,
#11eae3);
}
&:first-child {
.progress-bar__rate {
background: linear-gradient(to right,
#004c5e11 10%,
#004c5e,
#0ac0c0,
#11eae3);
}
}
&:nth-child(2) {
.progress-bar__rate {
background: linear-gradient(to right, #0048a811, #0048a8, #0e65fd);
}
}
}
</style>

Some files were not shown because too many files have changed in this diff Show More