Compare commits
	
		
			15 Commits
		
	
	
		
			ec5e47a416
			...
			projects/m
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
|  | ceb411180f | ||
|  | 53ec6dacd5 | ||
|  | 72eb06bb2d | ||
|  | e0058df873 | ||
|  | 691f63438a | ||
|  | cddd23855c | ||
|  | d9bfbf0d9a | ||
|  | 8075325f50 | ||
|  | 7c479072e0 | ||
|  | f3e02b01f1 | ||
|  | c02c26f359 | ||
|  | c7ef61b59b | ||
|  | 13285cc2d4 | ||
|  | b11474a8e4 | ||
|  | feb2649c14 | 
| @@ -1,3 +1,3 @@ | ||||
| .dockerignore | ||||
| #dist | ||||
| dist | ||||
| node_modules | ||||
|   | ||||
							
								
								
									
										58
									
								
								.drone.yml
									
									
									
									
									
								
							
							
						
						| @@ -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 | ||||
							
								
								
									
										27
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						| @@ -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 | ||||
|   | ||||
| @@ -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 | ||||
|   | ||||
							
								
								
									
										10
									
								
								.env.prod
									
									
									
									
									
								
							
							
						
						| @@ -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 | ||||
|   | ||||
| @@ -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 | ||||
|   | ||||
| @@ -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 | ||||
|   | ||||
							
								
								
									
										24
									
								
								Dockerfile
									
									
									
									
									
								
							
							
						
						| @@ -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 | ||||
|   | ||||
							
								
								
									
										10
									
								
								package.json
									
									
									
									
									
								
							
							
						
						| @@ -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", | ||||
|   | ||||
| @@ -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 | ||||
|   }) | ||||
| } | ||||
| @@ -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 | ||||
|   }) | ||||
| } | ||||
| @@ -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 | ||||
|   }) | ||||
| } | ||||
| @@ -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' | ||||
|   }) | ||||
| } | ||||
| @@ -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' | ||||
|   }) | ||||
| } | ||||
| @@ -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 | ||||
|   }) | ||||
| } | ||||
| @@ -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', | ||||
|   }) | ||||
| } | ||||
| @@ -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 | ||||
|   }) | ||||
| } | ||||
| Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 7.6 MiB | 
| @@ -1,14 +0,0 @@ | ||||
| <?xml version="1.0" encoding="UTF-8"?> | ||||
| <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||||
|     <title>编组</title> | ||||
|     <g id="01数字驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||
|         <g id="产量驾驶舱" transform="translate(-1438.000000, -12.000000)" fill="#FFFFFF" fill-rule="nonzero"> | ||||
|             <g id="编组-20" transform="translate(1438.000000, 8.000000)"> | ||||
|                 <g id="编组" transform="translate(0.000000, 4.000000)"> | ||||
|                     <rect id="矩形" opacity="0" x="0" y="0" width="24" height="24"></rect> | ||||
|                     <path d="M11.1710783,2.42919989 C11.7298936,2.09409047 12.4328291,2.12455473 12.9654367,2.52059014 L20.3218013,7.99000647 L20.4665209,8.10559268 C21.0744501,8.62656431 21.4302636,9.40344805 21.4302636,10.227099 L21.4302636,19.0470569 L21.4250327,19.2212289 C21.3382831,20.6611171 20.1833875,21.8011882 18.7715031,21.8011882 L5.2284969,21.8011882 L5.06035624,21.7957697 C3.67032883,21.7059084 2.56973638,20.5095861 2.56973638,19.0470569 L2.56973638,10.2273587 L2.57600507,10.0381789 C2.63012926,9.22282649 3.03207443,8.47038558 3.67819781,7.99000711 L11.034559,2.52059336 Z M12.0713092,3.55793652 C11.9772762,3.53774358 11.8769764,3.55793433 11.7954857,3.6185066 L4.43911542,9.0879271 L4.32641124,9.18150853 C4.04059293,9.44596068 3.87451485,9.82573182 3.87451485,10.2273587 L3.87451485,19.0470569 L3.880713,19.1821318 C3.94632222,19.8933667 4.52470053,20.4496068 5.2284969,20.4496068 L11.2507497,20.4487759 L11.3507364,20.3451977 L11.3512202,14.4627186 L11.3582338,14.3683764 C11.4044406,14.0603828 11.6734228,13.8227675 12,13.8227675 C12.3345637,13.8227675 12.6123182,14.0734451 12.6454705,14.3976012 L12.6489183,14.4681588 L12.6487364,20.3451881 L12.7487231,20.4487759 L18.7714898,20.4496068 L18.9018895,20.4431864 C19.5885066,20.3752237 20.1254851,19.7760987 20.1254851,19.0470569 L20.1254851,10.2273587 L20.1177907,10.0779557 C20.0769951,9.68325297 19.8759128,9.32208831 19.5608746,9.08791971 L12.2045243,3.61851399 L12.1402672,3.58065321 Z" id="形状结合" stroke="#FFFFFF" stroke-width="0.1"></path> | ||||
|                 </g> | ||||
|             </g> | ||||
|         </g> | ||||
|     </g> | ||||
| </svg> | ||||
| Before Width: | Height: | Size: 2.2 KiB | 
| @@ -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 | 
| @@ -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 | 
| @@ -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 | 
| @@ -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 | 
| Before Width: | Height: | Size: 511 B | 
| Before Width: | Height: | Size: 812 B | 
| Before Width: | Height: | Size: 226 B | 
| Before Width: | Height: | Size: 326 B | 
| Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 6.5 MiB | 
| Before Width: | Height: | Size: 662 B | 
| Before Width: | Height: | Size: 796 B | 
| Before Width: | Height: | Size: 257 KiB | 
| Before Width: | Height: | Size: 12 KiB | 
| Before Width: | Height: | Size: 9.5 KiB | 
| Before Width: | Height: | Size: 269 B | 
| Before Width: | Height: | Size: 592 B | 
| Before Width: | Height: | Size: 530 KiB | 
| Before Width: | Height: | Size: 8.5 MiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/logo/logo.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 2.7 KiB | 
| @@ -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; | ||||
| } | ||||
|   | ||||
| @@ -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, | ||||
|   | ||||
| @@ -1,13 +1,11 @@ | ||||
| <template> | ||||
|   <el-breadcrumb class="app-breadcrumb" separator="/"> | ||||
|     <transition-group name="breadcrumb"> | ||||
|       <el-breadcrumb-item v-for=" (item, index) in levelList" :key="item.path"> | ||||
|         <span :style="{ color: (changeColor == true ? 'rgba(255, 255, 255, 0.45)' :' rgba(0, 0, 0, .65)')}" | ||||
|           v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{ | ||||
|           item.meta.title | ||||
|           }}</span> | ||||
|         <a :style="{ color: (changeColor == true ? 'rgba(255, 255, 255, 0.45)' :' rgba(0, 0, 0, .45)')}" v-else | ||||
|           @click.prevent="handleLink(item)">{{ item.meta.title }}</a> | ||||
|       <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path"> | ||||
|         <span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{ | ||||
|         item.meta.title | ||||
|       }}</span> | ||||
|         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> | ||||
|       </el-breadcrumb-item> | ||||
|     </transition-group> | ||||
|   </el-breadcrumb> | ||||
| @@ -20,29 +18,7 @@ export default { | ||||
|       levelList: null | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     changeColor() { | ||||
|       // console.log(this.$route); | ||||
|       if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') { | ||||
|         return true | ||||
|       } else { | ||||
|         return false | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   watch: { | ||||
|     changeColor(val) { | ||||
|       if (val == true) { | ||||
|         let item = document.getElementsByClassName('el-breadcrumb__separator') | ||||
|         // let item  =document.getElementsByClassName('') | ||||
|         item[0].style.color = rgba(255, 255, 255, 0.45) | ||||
|         item[1].style.color = rgba(255, 255, 255, 0.45) | ||||
|       } else { | ||||
|         let item = document.getElementsByClassName('el-breadcrumb__separator') | ||||
|         item[0].style.color = '' | ||||
|           item[1].style.color = '' | ||||
|       } | ||||
|     }, | ||||
|     $route(route) { | ||||
|       // if you go to the redirect page, do not update the breadcrumbs | ||||
|       if (route.path.startsWith('/redirect/')) { | ||||
| @@ -94,20 +70,13 @@ export default { | ||||
|   margin-left: 8px; | ||||
|  | ||||
|   .no-redirect { | ||||
|     color: rgba(0, 0, 0, .45); | ||||
|     color: rgba(0, 0, 0, 0.65); | ||||
|     cursor: text; | ||||
|   } | ||||
| } | ||||
|  | ||||
| .app-breadcrumb .el-breadcrumb__inner a, | ||||
| .el-breadcrumb__inner.is-link { | ||||
|   color:rgba(0, 0, 0, 0.65) | ||||
|   color: rgba(0, 0, 0, 0.45); | ||||
| } | ||||
| </style> | ||||
| <!-- <style lang="scss"> | ||||
| .changeColor { | ||||
|   --theme-color: rgba(255, 255, 255, 0.45); | ||||
| } | ||||
| .el-breadcrumb__separator { | ||||
|   color:var(--theme-color); | ||||
| } | ||||
| </style> --> | ||||
|   | ||||
| @@ -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; | ||||
|   | ||||
| @@ -1,16 +1,14 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-03 15:38:31 | ||||
|  * @LastEditTime: 2024-07-11 13:56:19 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="padding: 0 15px;" @click="toggleClick"> | ||||
|     <svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" | ||||
|       width="64" height="64" :fill="changeColor === true ? 'rgba(255, 255, 255, 1)' : '' "> | ||||
|       <path | ||||
|         d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> | ||||
|     <svg | ||||
|       :class="{'is-active':isActive}" | ||||
|       class="hamburger" | ||||
|       viewBox="0 0 1024 1024" | ||||
|       xmlns="http://www.w3.org/2000/svg" | ||||
|       width="64" | ||||
|       height="64" | ||||
|     > | ||||
|       <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> | ||||
|     </svg> | ||||
|   </div> | ||||
| </template> | ||||
| @@ -24,15 +22,6 @@ export default { | ||||
|       default: false | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     changeColor() { | ||||
|       if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') { | ||||
|         return true | ||||
|       } else { | ||||
|         return false | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|   methods: { | ||||
|     toggleClick() { | ||||
|       this.$emit('toggleClick') | ||||
|   | ||||
| @@ -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; | ||||
|   } | ||||
| } | ||||
|   | ||||
| @@ -1,6 +1,5 @@ | ||||
| <template> | ||||
|   <div ref="navbar" class="navbar" | ||||
|     :style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35)' : ''"> | ||||
|   <div class="navbar"> | ||||
|     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" | ||||
|       @toggleClick="toggleSideBar" /> | ||||
|  | ||||
| @@ -42,13 +41,6 @@ export default { | ||||
|       'nickname', | ||||
|       'device' | ||||
|     ]), | ||||
|     changeColor() { | ||||
|       if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') { | ||||
|         return true | ||||
|       } else { | ||||
|         return false | ||||
|       } | ||||
|     }, | ||||
|     setting: { | ||||
|       get() { | ||||
|         return this.$store.state.settings.showSettings | ||||
| @@ -66,23 +58,6 @@ export default { | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   watch: { | ||||
|     // changeColor: { | ||||
|     //   handler(val){ | ||||
|     //     if (val == true) { | ||||
|     //       let svg = document.getElementsByClassName('hamburger') | ||||
|     //       console.log('svg', svg) | ||||
|     //       svg[0].style.color = 'rgba(255, 255, 255, 1)' | ||||
|     //       svg[0].setAttribute('fill', 'rgba(255, 255, 255, 1)') | ||||
|     //     } else { | ||||
|     //       let svg = document.getElementsByClassName('hamburger') | ||||
|     //       console.log('svg', svg); | ||||
|     //       svg[0].setAttribute('fill', '') | ||||
|     //     } | ||||
|     //   }, | ||||
|     //   immediate: true, //立即执行 | ||||
|     // } | ||||
|   }, | ||||
|   methods: { | ||||
|     toggleSideBar() { | ||||
|       this.$store.dispatch('app/toggleSideBar') | ||||
|   | ||||
| @@ -1,31 +1,25 @@ | ||||
| <template> | ||||
|   <div class="right-msg" :style="blackTitle ? 'color: #000' : 'color: #fff'"> | ||||
|     <div class="home-icon" v-if='blackTitle'> | ||||
|       <svg-icon :icon-class="changeColor === true ? 'darkHome' : 'home'" | ||||
|         style="font-size: 24px; cursor: pointer;color: aqua;" @click="toHome" /> | ||||
|       <svg-icon icon-class="home" style="font-size: 24px; cursor: pointer;" @click="toHome" /> | ||||
|     </div> | ||||
|     <div class="time-msg"> | ||||
|       <div class="line1" :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''">{{ timeZone | ||||
|         }}    {{ topTime }}</div> | ||||
|       <div :style="changeColor === true ? 'color:rgba(255, 255, 255, .65)' : ''" class="line2">{{ topDate }}</div> | ||||
|       <div class="line1">{{ timeZone }}    {{ topTime }}</div> | ||||
|       <div class="line2">{{ topDate }}</div> | ||||
|     </div> | ||||
|     <div class="base-msg"> | ||||
|       <div class="avatar"> | ||||
|         <el-dropdown> | ||||
|           <img :src="require(`../../assets/images/choicepart/avatar.png`)" alt="" width="32" height="32" /> | ||||
|           <el-dropdown-menu slot="dropdown"> | ||||
|             <el-dropdown-item> | ||||
|               <svg-icon icon-class="helpbtn" />帮助文档 | ||||
|             </el-dropdown-item> | ||||
|             <el-dropdown-item @click.native="logout"> | ||||
|               <svg-icon icon-class="exitbtn" />退出登录 | ||||
|             </el-dropdown-item> | ||||
|             <el-dropdown-item><svg-icon icon-class="helpbtn" />帮助文档</el-dropdown-item> | ||||
|             <el-dropdown-item @click.native="logout"><svg-icon icon-class="exitbtn" />退出登录</el-dropdown-item> | ||||
|           </el-dropdown-menu> | ||||
|         </el-dropdown> | ||||
|       </div> | ||||
|       <div class="use-msg"> | ||||
|         <div :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''" class="line1">{{ nickname }}</div> | ||||
|         <div :style="changeColor === true ? 'color:rgba(255, 255, 255, .65)' : ''" class="line2">{{ dept }}</div> | ||||
|         <div class="line1">{{ nickname }}</div> | ||||
|         <div class="line2">{{ dept }}</div> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| @@ -54,15 +48,6 @@ export default { | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     changeColor() { | ||||
|       if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') { | ||||
|         return true | ||||
|       } else { | ||||
|         return false | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|   created() { | ||||
|     // this.getUserMsg() | ||||
|     this.getTime() | ||||
| @@ -139,4 +124,4 @@ export default { | ||||
|     opacity: 0.65; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| </style> | ||||
| @@ -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; | ||||
|     } | ||||
|   | ||||
| @@ -1,10 +1,3 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-03 15:38:31 | ||||
|  * @LastEditTime: 2024-07-04 10:44:35 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll"> | ||||
|     <slot /> | ||||
| @@ -24,9 +17,7 @@ export default { | ||||
|   computed: { | ||||
|     scrollWrapper() { | ||||
|       return this.$refs.scrollContainer.$refs.wrap | ||||
|     }, | ||||
|   }, | ||||
|   watch: { | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.scrollWrapper.addEventListener('scroll', this.emitScroll, true) | ||||
|   | ||||
| @@ -1,7 +1,5 @@ | ||||
| <template> | ||||
|   <div ref="tagsViewContainer" | ||||
|     :style="changeColor === true ? 'background:rgba(0, 21, 41, 1);borderTop:0px solid #d8dce5' : ''" id="tags-view-container" | ||||
|     class="tags-view-container"> | ||||
|   <div id="tags-view-container" class="tags-view-container"> | ||||
|     <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"> | ||||
|       <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''" | ||||
|         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item" | ||||
| @@ -38,13 +36,6 @@ export default { | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     changeColor() { | ||||
|       if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') { | ||||
|         return true | ||||
|       } else { | ||||
|         return false | ||||
|       } | ||||
|     }, | ||||
|     visitedViews() { | ||||
|       return this.$store.state.tagsView.visitedViews | ||||
|     }, | ||||
| @@ -53,31 +44,9 @@ export default { | ||||
|     }, | ||||
|     theme() { | ||||
|       return this.$store.state.settings.theme; | ||||
|     }, | ||||
|     } | ||||
|   }, | ||||
|   watch: { | ||||
|     changeColor(val) { | ||||
|       if (val == true) { | ||||
|         // console.log('this.$refs.tagsViewContainer', this.$refs.tagsViewContainer); | ||||
|         // this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)' | ||||
|         // this.$refs.tagsViewContainer.style.borderTop = '0px solid #d8dce5' | ||||
|         var tag = document.getElementsByClassName("tags-view-item") | ||||
|         console.log('tag', tag) | ||||
|         for (let i in tag) { | ||||
|           tag[i].classList.add("changeColor") | ||||
|           // tag[i].classList.remove("default") | ||||
|         } | ||||
|         // console.log('this.$refs.scrollContainer', this.$refs.tag); | ||||
|       } else { | ||||
|         // this.$refs.tagsViewContainer.style.backgroundColor = '' | ||||
|         // this.$refs.tagsViewContainer.style.borderTop = '1px solid #d8dce5' | ||||
|         var tag = document.getElementsByClassName("tags-view-item") | ||||
|         for (let i in tag) { | ||||
|           tag[i].classList.remove("changeColor") | ||||
|           // tag[i].classList.add("default") | ||||
|         } | ||||
|       } | ||||
|     }, | ||||
|     $route() { | ||||
|       this.addTags() | ||||
|       this.moveToCurrentTag() | ||||
| @@ -91,7 +60,6 @@ export default { | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|     console.log(this.$route, this.changeColor); | ||||
|     this.initTags() | ||||
|     this.addTags() | ||||
|   }, | ||||
| @@ -100,23 +68,11 @@ export default { | ||||
|       return route.path === this.$route.path | ||||
|     }, | ||||
|     activeStyle(tag) { | ||||
|       if (this.changeColor) { | ||||
|         if (!this.isActive(tag)) return { | ||||
|           "background-color": 'rgba(0, 59, 115, 1)', | ||||
|           "border-color": 'rgba(0, 59, 115, 1)', | ||||
|           "color": 'rgba(255, 255, 255, 1)' | ||||
|         }; | ||||
|         return { | ||||
|           "background-color": this.theme, | ||||
|           "border-color": this.theme | ||||
|         }; | ||||
|       } else { | ||||
|         if (!this.isActive(tag)) return {}; | ||||
|         return { | ||||
|           "background-color": this.theme, | ||||
|           "border-color": this.theme | ||||
|         }; | ||||
|       } | ||||
|       if (!this.isActive(tag)) return {}; | ||||
|       return { | ||||
|         "background-color": this.theme, | ||||
|         "border-color": this.theme | ||||
|       }; | ||||
|     }, | ||||
|     isAffix(tag) { | ||||
|       return tag.meta && tag.meta.affix | ||||
| @@ -274,14 +230,6 @@ export default { | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| // :root{ | ||||
| //   --theme-color: rgba(0, 0, 0, 0.45); | ||||
| //   --theme-background: #f4f4f4ff; | ||||
| // } | ||||
| .changeColor{ | ||||
|   --theme-background: rgba(0, 59, 115, 1); | ||||
|   --theme-color: rgba(255, 255, 255, 1); | ||||
| } | ||||
| .tags-view-container { | ||||
|   height: 42px; | ||||
|   width: 100%; | ||||
| @@ -297,8 +245,8 @@ export default { | ||||
|       cursor: pointer; | ||||
|       height: 28px; | ||||
|       line-height: 28px; | ||||
|       color: var(--theme-color,rgba(0, 0, 0, 0.45)); | ||||
|       background:var(--theme-background,#f4f4f4ff); | ||||
|       color: rgba(0, 0, 0, 0.45); | ||||
|       background: #F4F4F4FF; | ||||
|       padding: 0 8px 0 12px; | ||||
|       font-size: 14px; | ||||
|       letter-spacing: 1px; | ||||
| @@ -383,7 +331,7 @@ export default { | ||||
|       .el-icon-close { | ||||
|         &:hover { | ||||
|           background-color: #fff; | ||||
|           color: rgba(62, 142, 247, 1); | ||||
|           color: #409eff; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   | ||||
| @@ -2,8 +2,7 @@ | ||||
|   <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }"> | ||||
|     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> | ||||
|     <sidebar v-if="!sidebar.hide" class="sidebar-container" /> | ||||
|     <div :style="changeColor ? 'background: rgba(0, 21, 41, 1)' : ''" ref="mainContainer" | ||||
|       :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container"> | ||||
|     <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container"> | ||||
|       <div :class="{ 'fixed-header': fixedHeader }"> | ||||
|         <navbar /> | ||||
|         <tags-view v-if="needTagsView" /> | ||||
| @@ -40,13 +39,6 @@ export default { | ||||
|       needTagsView: state => state.settings.tagsView, | ||||
|       fixedHeader: state => state.settings.fixedHeader | ||||
|     }), | ||||
|     changeColor() { | ||||
|       if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') { | ||||
|         return true | ||||
|       } else { | ||||
|         return false | ||||
|       } | ||||
|     }, | ||||
|     classObj() { | ||||
|       return { | ||||
|         hideSidebar: !this.sidebar.opened, | ||||
| @@ -59,16 +51,6 @@ export default { | ||||
|       return variables; | ||||
|     } | ||||
|   }, | ||||
|   watch: { | ||||
|     // changeColor(val) { | ||||
|     //   if (val == true) { | ||||
|     //     // console.log('this.$refs.mainContainer', this.$refs.mainContainer); | ||||
|     //     this.$refs.mainContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)' | ||||
|     //   } else { | ||||
|     //     this.$refs.mainContainer.style.backgroundColor = '' | ||||
|     //   } | ||||
|     // }, | ||||
|   }, | ||||
|   methods: { | ||||
|     handleClickOutside() { | ||||
|       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) | ||||
|   | ||||
							
								
								
									
										26
									
								
								src/main.js
									
									
									
									
									
								
							
							
						
						| @@ -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); | ||||
|   | ||||
| @@ -1,23 +1,19 @@ | ||||
| import * as echarts from "echarts"; | ||||
|  | ||||
| function __resizeHandler(entries) { | ||||
|   console.log(entries) | ||||
|   for (const entry of entries) { | ||||
|     if (entry.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, | ||||
|           height: contentBoxSize.blockSize, | ||||
|         }); | ||||
|       // 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, | ||||
|         height: contentBoxSize.blockSize, | ||||
|       }); | ||||
|     } else { | ||||
|       // manipulate contentRect | ||||
|       this.chart_mixin_chartInstance.resize({ | ||||
| @@ -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: { | ||||
|   | ||||
| @@ -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] | ||||
|   } | ||||
| } | ||||
| @@ -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() | ||||
|     } | ||||
|   } | ||||
| } | ||||
| @@ -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); | ||||
| 		}, | ||||
| 	}, | ||||
| }; | ||||
| @@ -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, | ||||
| }); | ||||
|   | ||||
| @@ -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 | ||||
|   | ||||
| @@ -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() | ||||
|             ); | ||||
|             break; | ||||
|           case 1: | ||||
|             // 标准组件 产出 | ||||
|             stdOutput.current.splice( | ||||
|               factoryId, | ||||
|               1, | ||||
|               factory.outputNumber ?? random_default() | ||||
|             ); | ||||
|             stdOutput.previous.splice( | ||||
|               factoryId, | ||||
|               1, | ||||
|               factory.previousYearOutputNumber ?? random_default() | ||||
|             ); | ||||
|             break; | ||||
|           case 2: | ||||
|             // BIPV 产出 | ||||
|             bipvOutput.current.splice( | ||||
|               factoryId, | ||||
|               1, | ||||
|               factory.outputNumber ?? random_default() | ||||
|             ); | ||||
|             bipvOutput.previous.splice( | ||||
|               factoryId, | ||||
|               1, | ||||
|               factory.previousYearOutputNumber ?? random_default() | ||||
|             ); | ||||
|             break; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       /* 更新 state */ | ||||
|       commit("SET_HOME_INFO", { | ||||
|         ftoInvest, | ||||
|         chipInvest, | ||||
|         chipOutput, | ||||
|         stdOutput, | ||||
|         bipvOutput, | ||||
|       }); | ||||
|     } | ||||
|   ); | ||||
|   if (code == 0) { | ||||
|     return data; | ||||
|   } | ||||
|   console.warn("[doFetch] failed, code: ", code); | ||||
|   return null; | ||||
| } | ||||
|   }, | ||||
|   /** 初始化驾驶舱数据 */ | ||||
|   async initCopilot({ commit }) {}, | ||||
| }; | ||||
|  | ||||
| /** | ||||
|  * | ||||
|  * @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; | ||||
|       break; | ||||
|     case "月": | ||||
|       queryParams.date = 3; | ||||
|       break; | ||||
|     case "年": | ||||
|       queryParams.date = 4; | ||||
|       break; | ||||
|     default: | ||||
|       queryParams.date = 1; | ||||
|       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, | ||||
|   }; | ||||
| } | ||||
| export default { | ||||
|   namespaced: true, | ||||
|   state, | ||||
|   mutations, | ||||
|   actions, | ||||
| }; | ||||
|   | ||||
| @@ -163,4 +163,4 @@ textarea { | ||||
|  | ||||
| .el-upload__tip { | ||||
|   line-height: 1.2; | ||||
| } | ||||
| } | ||||
| @@ -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 | ||||
|   } | ||||
| ] | ||||
|  | ||||
| /** | ||||
|  * 代码生成模板类型 | ||||
|  */ | ||||
|   | ||||
| @@ -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 | ||||
|   } | ||||
| } | ||||
| @@ -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] | ||||
|   } | ||||
| } | ||||
|   | ||||
| @@ -1,16 +1,8 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-07-10 15:17:28 | ||||
|  * @LastEditTime: 2024-07-19 15:18:00 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
|  | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: ChartContainer.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-10 08:54:33 | ||||
|     description: | ||||
|     description:  | ||||
|     todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高 | ||||
| --> | ||||
|  | ||||
| @@ -51,7 +43,7 @@ export default { | ||||
| } | ||||
|  | ||||
| ::-webkit-scrollbar { | ||||
|   width: 80%; | ||||
|   width: 8px; | ||||
|   height: 8px; | ||||
| } | ||||
|  | ||||
|   | ||||
| Before Width: | Height: | Size: 5.0 KiB | 
| @@ -1,321 +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.72vw' : '0.7vw' }">{{ 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)", | ||||
|             }, | ||||
|           }, | ||||
|           backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|           formatter: params => { | ||||
|             var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${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:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` + | ||||
|                 `<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0}</span>`; | ||||
|             } | ||||
|             const htmlContent = ` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                 ${res} | ||||
|               </div> | ||||
|               `; | ||||
|  | ||||
|             return htmlContent; | ||||
|           }, | ||||
|         }, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             lineStyle: { | ||||
|               color: "#4561AE", | ||||
|             }, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|           }, | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/片", | ||||
|           nameTextStyle: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             align: "right", | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             show: true, | ||||
|             lineStyle: { | ||||
|               color: "#4561AE", | ||||
|             }, | ||||
|           }, | ||||
|           splitLine: { | ||||
|             lineStyle: { | ||||
|               color: "#4561AE", | ||||
|             }, | ||||
|           }, | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             name: "", // this.series[0].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             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: 16, | ||||
|             // 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 : 16; | ||||
|       }); | ||||
|       this.options.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       this.options.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       this.initChart(this.options); | ||||
|       // this.actualOptions.series.map((item) => { | ||||
|       //   item.barWidth = val ? 18 : 16; | ||||
|       // }); | ||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       // 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> | ||||
| @@ -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> | ||||
| @@ -1,14 +1,15 @@ | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: Container.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-09 10:44:09 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <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> | ||||
| @@ -73,7 +91,6 @@ export default { | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|  | ||||
| .copilot-container { | ||||
|   height: 0; | ||||
|   flex: 1; | ||||
| @@ -92,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; | ||||
|   } | ||||
|  | ||||
| @@ -123,7 +135,7 @@ export default { | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       font-size: 1.18vw; | ||||
|       line-height: 1.39vw; | ||||
|       font-weight: normal; | ||||
|       letter-spacing: 2px; | ||||
| @@ -143,8 +155,8 @@ export default { | ||||
|     position: absolute; | ||||
|     // width: 16px; | ||||
|     // height: 16px; | ||||
|     width: 0.7vw; | ||||
|     height: 0.7vw; | ||||
|     width: 0.95vw; | ||||
|     height: 0.95vw; | ||||
|   } | ||||
|  | ||||
|   .corner.tl { | ||||
|   | ||||
| @@ -1,9 +1,8 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-07-09 16:55:58 | ||||
|  * @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]; | ||||
|     }, | ||||
|   }, | ||||
| @@ -61,8 +51,8 @@ export default { | ||||
| .container-icon { | ||||
|   //   width: 32px; | ||||
|   //   height: 32px; | ||||
|   width: 1.4vw; | ||||
|   height: 1.4vw; | ||||
|   width: 1.701vw; | ||||
|   height: 1.701vw; | ||||
|   background: #ccc2; | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -1,37 +1,46 @@ | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: CopilotHeader.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-16 15:14:01 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <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> | ||||
|   | ||||
| @@ -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> | ||||
| @@ -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> | ||||
| @@ -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> | ||||
| @@ -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> | ||||
| @@ -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> | ||||
| @@ -1,226 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-07-09 15:07:50 | ||||
|  * @LastEditTime: 2024-07-09 15:41:38 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-05 09:43:51 | ||||
|  * @LastEditTime: 2024-07-09 15:06: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; | ||||
|   border-left: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, | ||||
|         #024798 20%, | ||||
|         transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     right: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 90%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 8%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right, transparent 60%, #024798 98%, transparent 90%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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> | ||||
| @@ -1,219 +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; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, | ||||
|         #024798 20%, | ||||
|         transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 95%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     right: 3%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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> | ||||
| @@ -1,15 +1,8 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-05-31 13:26:32 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: button.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-16 15:02:34 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| @@ -57,7 +50,7 @@ button { | ||||
|   padding: 12px; | ||||
|   padding-left: 20px; | ||||
|   color: #fff; | ||||
|   font-size: 18px; | ||||
|   font-size: 22px; | ||||
|   letter-spacing: 10px; | ||||
|   cursor: pointer; | ||||
| } | ||||
| @@ -75,8 +68,8 @@ button { | ||||
| .copilot-btn::after { | ||||
|   content: ""; | ||||
|   position: absolute; | ||||
|   width: 0.7vw; | ||||
|   height: 0.7vw; | ||||
|   width: 16px; | ||||
|   height: 16px; | ||||
|   top: 0; | ||||
|   background: transparent; | ||||
|   border-style: solid; | ||||
|   | ||||
| @@ -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 {}; | ||||
|   }, | ||||
| @@ -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 {}; | ||||
|   }, | ||||
| @@ -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 {}; | ||||
|   }, | ||||
							
								
								
									
										119
									
								
								src/views/copilot/components/charts/base/DoubleRingChart.vue
									
									
									
									
									
										Normal 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> | ||||
| @@ -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> | ||||
| @@ -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 ({ | ||||
|       ], | ||||
|     }, | ||||
|   ], | ||||
| }); | ||||
| }; | ||||
| @@ -0,0 +1,10 @@ | ||||
| export default { | ||||
|   getData: async function (url) { | ||||
|     // | ||||
|     return await new Promise((resolve, reject) => { | ||||
|       setTimeout(() => { | ||||
|         resolve([90119, 40801, 44028]); | ||||
|       }, 1200); | ||||
|     }); | ||||
|   }, | ||||
| }; | ||||
| @@ -1,220 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-07-09 15:15:00 | ||||
|  * @LastEditTime: 2024-07-19 16:11:37 | ||||
|  * @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; | ||||
|   border-left: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 5%, | ||||
|         #024798 10%, | ||||
|         transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     right: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 5%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 90%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 10%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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.7vw; | ||||
|     height: 0.7vw; | ||||
|   } | ||||
|  | ||||
|   .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> | ||||
| @@ -1,220 +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; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom,transparent 5%, | ||||
|     #024798 10%, | ||||
|     transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 95%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     right: 3%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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.7vw; | ||||
|     height: 0.7vw; | ||||
|   } | ||||
|  | ||||
|   .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> | ||||
| @@ -1,322 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-23 15:49:14 | ||||
|  * @LastEditTime: 2024-07-19 16:08:27 | ||||
|  * @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.72vw' : '0.7vw' }">{{ 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)", | ||||
|             }, | ||||
|           }, | ||||
|           backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|           formatter: params => { | ||||
|             var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${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:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` + | ||||
|                 `<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0 }</span>`; | ||||
|             } | ||||
|             const htmlContent = ` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                 ${res} | ||||
|               </div> | ||||
|               `; | ||||
|  | ||||
|             return htmlContent; | ||||
|           }, | ||||
|         }, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             lineStyle: { | ||||
|               color: "#4561AE", | ||||
|             }, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|           }, | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/片", | ||||
|           nameTextStyle: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             align: "right", | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             show: true, | ||||
|             lineStyle: { | ||||
|               color: "#4561AE", | ||||
|             }, | ||||
|           }, | ||||
|           splitLine: { | ||||
|             lineStyle: { | ||||
|               color: "#4561AE", | ||||
|             }, | ||||
|           }, | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             name: "", // this.series[0].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             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: 16, | ||||
|             // 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 : 16; | ||||
|       }); | ||||
|       this.options.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       this.options.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       this.initChart(this.options); | ||||
|       // this.actualOptions.series.map((item) => { | ||||
|       //   item.barWidth = val ? 18 : 16; | ||||
|       // }); | ||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       // 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> | ||||
| @@ -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> | ||||
| @@ -1,218 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-05 09:43:51 | ||||
|  * @LastEditTime: 2024-07-19 16:11:59 | ||||
|  * @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; | ||||
|   border-left: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, | ||||
|         #024798 20%, | ||||
|         transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     right: 0; | ||||
|     background: radial-gradient(circle at center, | ||||
|           #024798 2%, | ||||
|           #024798 100%, | ||||
|           transparent); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 90%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 7%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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.7vw; | ||||
|     height: 0.7vw; | ||||
|   } | ||||
|  | ||||
|   .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> | ||||
							
								
								
									
										0
									
								
								src/views/copilot/components/name.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -1,220 +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; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom,transparent 10%, | ||||
|     #024798 20%, | ||||
|     transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 95%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     right: 1%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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.7vw; | ||||
|     height: 0.7vw; | ||||
|   } | ||||
|  | ||||
|   .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> | ||||
| @@ -1,8 +1,8 @@ | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: select.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-17 09:50:03 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| @@ -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, | ||||
|   | ||||
| @@ -1,243 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-05 09:48:37 | ||||
|  * @LastEditTime: 2024-07-19 16:14:07 | ||||
|  * @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; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, | ||||
|           #024798 20%, | ||||
|           transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient(circle at center, | ||||
|           #024798 2%, | ||||
|           #024798 100%, | ||||
|           transparent); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 60%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 6%; | ||||
|     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: 1vw; | ||||
|       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.7vw; | ||||
|       height: 0.7vw; | ||||
|   } | ||||
|  | ||||
|   .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> | ||||
| @@ -1,19 +1,23 @@ | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: container.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-16 14:51:25 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <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; **/ | ||||
|   | ||||
| Before Width: | Height: | Size: 5.0 KiB | 
| @@ -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> | ||||
| @@ -1,304 +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: `${yesterday}日目标`, color: "#58adfa" }, | ||||
|           { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" }, | ||||
|           { label: `${yesterday}日`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '日' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${yesterday}日目标`, color: "#58adfa" }, | ||||
|           { label: `${dayBeYes}日`, color: "#12f7f1" }, | ||||
|           { label: `${yesterday}日`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `本周目标`, color: "#58adfa" }, | ||||
|           { label: `${year - 1}年本周`, color: "#12f7f1" }, | ||||
|           { label: `本周`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `本周目标`, color: "#58adfa" }, | ||||
|           { label: `上周`, color: "#12f7f1" }, | ||||
|           { label: `本周`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${month}月目标`, color: "#58adfa" }, | ||||
|           { label: `${year - 1}年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `${month}月`, color: "#58adfa" }, | ||||
|           // { label: `${month}月目标`, value: valueTuple[2] }, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${month}月目标`, color: "#58adfa" }, | ||||
|           { label: `${lastMonth}月`, color: "#12f7f1" }, | ||||
|           { label: `${month}月`, color: "#58adfa" }, | ||||
|           // { label: `${month}月目标`, value: valueTuple[2] }, | ||||
|         ]; | ||||
|       } else { | ||||
|         items = [ | ||||
|           { label: `${year}年目标`, color: "#58adfa" }, | ||||
|           { label: `${year - 1}年`, color: "#12f7f1" }, | ||||
|           { 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> | ||||
| @@ -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> | ||||
| @@ -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> | ||||
| @@ -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> | ||||