Compare commits
	
		
			15 Commits
		
	
	
		
			projects/m
			...
			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
									
									
									
									
									
								
							
							
						
						
									
										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 | ||||
							
								
								
									
										1
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						
									
										1
									
								
								.env.dev
									
									
									
									
									
								
							| @@ -6,7 +6,6 @@ VUE_APP_TITLE = 芋道管理系统 | ||||
|  | ||||
| # 芋道管理系统/开发环境 | ||||
| VUE_APP_BASE_API = 'http://192.168.1.61:48080' | ||||
| # VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com' | ||||
|  | ||||
| # 路由懒加载 | ||||
| VUE_CLI_BABEL_TRANSPILE_MODULES = true | ||||
|   | ||||
| @@ -2,15 +2,15 @@ | ||||
| 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 | ||||
|   | ||||
							
								
								
									
										24
									
								
								Dockerfile
									
									
									
									
									
								
							
							
						
						
									
										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 | ||||
|   | ||||
| @@ -45,7 +45,6 @@ | ||||
|     "@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", | ||||
| @@ -54,7 +53,6 @@ | ||||
|     "highlight.js": "^11.9.0", | ||||
|     "js-beautify": "^1.15.1", | ||||
|     "jsencrypt": "3.3.1", | ||||
|     "lodash": "^4.17.21", | ||||
|     "mockjs": "^1.1.0", | ||||
|     "moment": "^2.30.1", | ||||
|     "nprogress": "0.2.0", | ||||
|   | ||||
| @@ -1,10 +1,3 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-12 11:13:06 | ||||
|  * @LastEditTime: 2024-04-15 13:52:16 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <section class="app-main"> | ||||
|     <transition name="fade-transform" mode="out-in"> | ||||
| @@ -42,7 +35,7 @@ export default { | ||||
|   overflow: visible; | ||||
|   margin: 8px 14px 0px 16px; | ||||
|   border-radius: 8px; | ||||
|   // background-color: #fff; | ||||
|   background-color: #fff; | ||||
| } | ||||
|  | ||||
| .fixed-header+.app-main { | ||||
|   | ||||
							
								
								
									
										21
									
								
								src/main.js
									
									
									
									
									
								
							
							
						
						
									
										21
									
								
								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"; | ||||
| @@ -41,7 +34,7 @@ import { | ||||
|   getDictDatas, | ||||
|   getDictDatas2, | ||||
| } from "@/utils/dict"; | ||||
| import CodeBrickZj from 'code-brick-zj'; | ||||
|  | ||||
| import "./theme/index.css"; // 自定义主题包 - code-brick-zj | ||||
|  | ||||
| // 全局方法挂载 | ||||
| @@ -65,10 +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(directive); | ||||
| Vue.use(plugins); | ||||
| Vue.use(VueMeta); | ||||
|  | ||||
| // Form Generator 组件需要使用到 tinymce | ||||
| import Tinymce from "@/components/tinymce/index.vue"; | ||||
| Vue.component("tinymce", Tinymce); | ||||
|   | ||||
| @@ -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,359 +1,10 @@ | ||||
| import axios from "@/utils/request"; | ||||
| import { deepClone } from "../../utils"; | ||||
|  | ||||
| /* 状态 */ | ||||
| const state = { | ||||
|   copilot: { | ||||
|     /* 产量驾驶舱 */ | ||||
|     yield: { | ||||
|       ftoInvest: null, | ||||
|       chipInvest: null, | ||||
|       chipOutput: null, | ||||
|       stdOutput: null, | ||||
|       bipvOutput: null, | ||||
|     }, | ||||
|     /* 能源驾驶舱 */ | ||||
|     energy: {}, | ||||
|     /* 效率驾驶舱 */ | ||||
|     efficiency: { | ||||
|       chipOee: { | ||||
|         current: [], | ||||
|         previous: [], | ||||
|       }, | ||||
|       transformRate: { | ||||
|         current: [], | ||||
|         previous: [], | ||||
|       }, | ||||
|       chipRate: { | ||||
|         target: [], | ||||
|         current: [], | ||||
|         previous: [], | ||||
|       }, | ||||
|       stdRate: { | ||||
|         target: [], | ||||
|         current: [], | ||||
|       }, | ||||
|     }, | ||||
|   }, | ||||
|   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 = payload.data; | ||||
|         break; | ||||
|       case "efficiency": | ||||
|         state.copilot.efficiency.chipOee = payload.chipOee; | ||||
|         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(); | ||||
|     const targetArr = await getHomeTarget(); | ||||
|     const payload = splitCurrentAndPrevious(dataArr, targetArr); | ||||
|     commit("SET_HOME_INFO", payload); | ||||
|   }, | ||||
|   /** 初始化驾驶舱数据 */ | ||||
|   async initCopilot({ commit }, { period, source }) { | ||||
|     if (source == "comprehensive") return; | ||||
|  | ||||
|     const fetcher = { | ||||
|       yield: getCopilotYield, | ||||
|       comprehensive: getCopilotEnergy, | ||||
|       efficiency: getCopilotEfficiency, | ||||
|     }[source]; | ||||
|     const handler = { | ||||
|       yield: splitCurrentAndPrevious, | ||||
|       comprehensive: () => null, | ||||
|       efficiency: splitCurrentAndPreviousA, | ||||
|     }[source]; | ||||
|     // 获取产量数据 | ||||
|     let { data: factoryList, type } = await fetcher(period); | ||||
|     let targetList = null; | ||||
|     if (source === "yield" || source === "efficiency") { | ||||
|       // 获取目标数据 | ||||
|       let { data } = await fetcher(period, true); | ||||
|       targetList = data; | ||||
|     } | ||||
|     const payload = handler(factoryList, targetList); | ||||
|     commit("SET_COPILOT_INFO", { type, payload }); | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| export default { | ||||
|   namespaced: true, | ||||
|   state, | ||||
|   mutations, | ||||
|   actions, | ||||
| }; | ||||
|  | ||||
| function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) { | ||||
|   // 初始数据 | ||||
|   const { chipOee, 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 (factoryListResponse) { | ||||
|     for (const factory of factoryListResponse) { | ||||
|       const fId = getFactoryId(factory); | ||||
|       // 获取目标值 | ||||
|       if (targetListResponse) { | ||||
|         const { | ||||
|           chipYieldRate, | ||||
|           componentYieldRate, | ||||
|           chipOee, | ||||
|           componentConversionEfficiency, | ||||
|         } = getFactoryTargetValueA(targetListResponse, fId); | ||||
|         stdRate.target[fId] = chipYieldRate; | ||||
|         chipRate.target[fId] = componentYieldRate; | ||||
|       } | ||||
|       // 芯片OEE | ||||
|       chipOee.current[fId] = factory.oee || random_default(); | ||||
|       chipOee.previous[fId] = factory.previousYearOee || random_default(); | ||||
|       // 转化效率 | ||||
|       transformRate.current[fId] = | ||||
|         factory.componentConversionEfficiency || random_default(); | ||||
|       transformRate.previous[fId] = | ||||
|         factory.previousYearComponentConversionEfficiency || random_default(); | ||||
|       // 芯片良率 与 标准组件良率 | ||||
|       if (![0, 1].includes(factory.glassType)) continue; | ||||
|       const _t = [chipRate, stdRate][factory.glassType]; | ||||
|       _t.current[fId] = factory.yieldRate || random_default(); | ||||
|       _t.previous[fId] = factory.previousYearYieldRate || random_default(); | ||||
|     } | ||||
|  | ||||
|     return { | ||||
|       chipOee, | ||||
|       transformRate, | ||||
|       chipRate, | ||||
|       stdRate, | ||||
|     }; | ||||
|   } | ||||
| } | ||||
|  | ||||
| function splitCurrentAndPrevious(factoryListResponse, targetListResponse) { | ||||
|   // 初始数据 | ||||
|   const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init(); | ||||
|   if (factoryListResponse) { | ||||
|     for (const factory of factoryListResponse) { | ||||
|       const fId = getFactoryId(factory); | ||||
|       // 获取目标值 | ||||
|       if (targetListResponse) { | ||||
|         const { chipYield, componentYield, bipvProductOutput } = | ||||
|           getFactoryTargetValue(targetListResponse, fId); | ||||
|         chipOutput.target[fId] = chipYield; | ||||
|         stdOutput.target[fId] = componentYield; | ||||
|         bipvOutput.target[fId] = bipvProductOutput; | ||||
|       } | ||||
|       // 芯片投入 | ||||
|       chipInvest.current[fId] = factory.inputNumber; | ||||
|       chipInvest.previous[fId] = factory.previousYearInputNumber; | ||||
|       // FTO投入 | ||||
|       ftoInvest.current[fId] = factory.chipInput; | ||||
|       ftoInvest.previous[fId] = factory.previousYearChipInput; | ||||
|       // 产出数据, 0 - (玻璃)芯片产出, 1 - 标准组件产出, 2 - BIPV产出 | ||||
|       // 因为后端写的垃圾数据,所以这里要做一下判断 | ||||
|       if (![0, 1, 2].includes(factory.glassType)) continue; | ||||
|       const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType]; | ||||
|       _t.current[fId] = factory.outputNumber; | ||||
|       _t.previous[fId] = factory.previousYearOutputNumber; | ||||
|       // debugger; | ||||
|     } | ||||
|  | ||||
|     return { | ||||
|       chipInvest, | ||||
|       ftoInvest, | ||||
|       chipOutput, | ||||
|       stdOutput, | ||||
|       bipvOutput, | ||||
|     }; | ||||
|   } | ||||
| } | ||||
|  | ||||
| function getFactoryId(factory) { | ||||
|   return factory.factory; | ||||
| } | ||||
|  | ||||
| function getFactoryTargetValue(targetList, factoryId) { | ||||
|   const target = targetList.find((item) => item.factory === factoryId); | ||||
|   if (target) { | ||||
|     return { | ||||
|       // 自带模拟数据了.... random_default | ||||
|       chipYield: target.chipYield ?? random_default(), | ||||
|       componentYield: target.componentYield ?? random_default(), | ||||
|       bipvProductOutput: target.bipvProductOutput ?? random_default(), | ||||
|     }; | ||||
|   } | ||||
|   return { | ||||
|     chipYield: random_default(), | ||||
|     componentYield: random_default(), | ||||
|     bipvProductOutput: random_default(), | ||||
|   }; | ||||
| } | ||||
|  | ||||
| /** | ||||
|  * 获取 芯片良率目标值 和 标准组件良率目标值 | ||||
|  * @param {*} targetList 目标值列表 | ||||
|  * @param {*} factoryId 工厂ID | ||||
|  * @returns | ||||
|  */ | ||||
| function getFactoryTargetValueA(targetList, factoryId) { | ||||
|   const target = targetList.find((item) => item.factory === factoryId); | ||||
|   if (target) { | ||||
|     return { | ||||
|       chipYieldRate: target.chipYieldRate ?? random_default(), | ||||
|       componentYieldRate: target.componentYieldRate ?? random_default(), | ||||
|     }; | ||||
|   } | ||||
|   return { | ||||
|     chipYieldRate: random_default(), | ||||
|     componentYieldRate: random_default(), | ||||
|   }; | ||||
| } | ||||
|  | ||||
| /** | ||||
|  * | ||||
|  * @returns 初始化 效率模块里 初始状态值 | ||||
|  */ | ||||
| function initA() { | ||||
|   const t_ = { | ||||
|     current: Array(7).fill(0), | ||||
|     previous: Array(7).fill(0), | ||||
|   }; | ||||
|   // 芯片OEE | ||||
|   const chipOee = deepClone(t_); | ||||
|   // 转化效率 | ||||
|   const transformRate = deepClone(t_); | ||||
|   // 标准组件良率 | ||||
|   const stdRate = { | ||||
|     ...deepClone(t_), | ||||
|     target: Array(7).fill(0), | ||||
|   }; | ||||
|   // 芯片良率 | ||||
|   const chipRate = deepClone(stdRate); | ||||
|  | ||||
|   return { | ||||
|     chipOee, | ||||
|     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; | ||||
| } | ||||
| @@ -383,96 +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/query-by-date"; | ||||
|       url.target = "/ip/prod-target/query-by-date"; | ||||
|       break; | ||||
|     case "energy": | ||||
|       break; | ||||
|     case "efficiency": | ||||
|       url.comparison = "/ip/prod-output/query-Rate-List"; | ||||
|       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( | ||||
|     fetch_target ? url.target : 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, target = false) { | ||||
|   return getCopilotData("yield", period, target); | ||||
| } | ||||
|  | ||||
| function getCopilotEnergy(period, target = false) { | ||||
|   return getCopilotData("energy", period, target); | ||||
| } | ||||
|  | ||||
| function getCopilotEfficiency(period, target = false) { | ||||
|   return getCopilotData("efficiency", period, target); | ||||
| } | ||||
|  | ||||
| /** | ||||
|  * | ||||
|  * @param {*} period 周期: 日周月年 | ||||
|  * @param {*} target 是否获取目标数据:默认 否 | ||||
|  * @returns | ||||
|  */ | ||||
| async function getCopilotData(copilot_module, period, target = false) { | ||||
|   if (!copilot_module) copilot_module = "yield"; | ||||
|   // 请求参数,直接一次性获取所有工厂 | ||||
|   let queryParams = { | ||||
|     factorys: [], | ||||
|     date: 4, | ||||
|   }; | ||||
|  | ||||
|   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; | ||||
|   } | ||||
|  | ||||
|   return { | ||||
|     data: await doFetch(copilot_module, target ? true : false, queryParams), | ||||
|     type: copilot_module, | ||||
|   }; | ||||
| } | ||||
| export default { | ||||
|   namespaced: true, | ||||
|   state, | ||||
|   mutations, | ||||
|   actions, | ||||
| }; | ||||
|   | ||||
| @@ -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 | ||||
|   } | ||||
| } | ||||
										
											Binary file not shown.
										
									
								
							| Before Width: | Height: | Size: 5.0 KiB | 
| @@ -1,257 +0,0 @@ | ||||
| <!--  | ||||
|     filename: BarChartBase.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-10 08:59:28 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <chart-container class="bar-chart-base"> | ||||
|     <div class="legend"> | ||||
|       <span | ||||
|         v-for="item in legend" | ||||
|         :key="item.label" | ||||
|         class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }" | ||||
|         >{{ item.label }}</span | ||||
|       > | ||||
|     </div> | ||||
|     <div | ||||
|       ref="chart" | ||||
|       style="max-width: 50vw" | ||||
|       :style="{ height: vHeight + 'vh' }" | ||||
|     ></div> | ||||
|   </chart-container> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import screenfull from "screenfull"; | ||||
| import ChartContainer from "./ChartContainer.vue"; | ||||
| import chartMixin from "@/mixins/chart.js"; | ||||
|  | ||||
| export default { | ||||
|   name: "BarChartBase", | ||||
|   components: { | ||||
|     ChartContainer, | ||||
|   }, | ||||
|   mixins: [chartMixin], | ||||
|   props: { | ||||
|     vHeight: { | ||||
|       type: Number, | ||||
|       default: 34, | ||||
|     }, | ||||
|     legend: { | ||||
|       type: Array, | ||||
|       required: true, | ||||
|     }, | ||||
|     xAxis: { | ||||
|       type: Array, | ||||
|       required: true, | ||||
|     }, | ||||
|     series: { | ||||
|       type: Array, | ||||
|       required: true, | ||||
|     }, | ||||
|     in: { | ||||
|       type: String, | ||||
|       default: "", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       isFullscreen: false, | ||||
|       actualOptions: null, | ||||
|       options: { | ||||
|         grid: { | ||||
|           left: "5%", | ||||
|           right: "4%", | ||||
|           bottom: "3%", | ||||
|           top: "15%", | ||||
|           containLabel: true, | ||||
|         }, | ||||
|         tooltip: {}, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             lineStyle: { | ||||
|               color: "#4561AE", | ||||
|             }, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/片", | ||||
|           nameTextStyle: { | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             show: true, | ||||
|             lineStyle: { | ||||
|               color: "#4561AE", | ||||
|             }, | ||||
|           }, | ||||
|           splitLine: { | ||||
|             lineStyle: { | ||||
|               color: "#4561AE", | ||||
|             }, | ||||
|           }, | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             name: "", // this.series[0].name, | ||||
|             type: "bar", | ||||
|             barWidth: 12, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color: { | ||||
|                 type: "linear", | ||||
|                 x: 0, | ||||
|                 y: 0, | ||||
|                 x2: 0, | ||||
|                 y2: 1, | ||||
|                 colorStops: [ | ||||
|                   { | ||||
|                     offset: 0, | ||||
|                     color: "#12f7f1", // 0% 处的颜色 | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 0.35, | ||||
|                     color: "#12f7f177", // 100% 处的颜色 | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 0.75, | ||||
|                     color: "#12f7f133", // 100% 处的颜色 | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 1, | ||||
|                     color: "transparent", // 100% 处的颜色 | ||||
|                   }, | ||||
|                 ], | ||||
|                 global: false, // 缺省为 false | ||||
|               }, | ||||
|             }, | ||||
|             data: [], // this.series[0].data, | ||||
|           }, | ||||
|           { | ||||
|             name: "", // this.series[1].name, | ||||
|             type: "bar", | ||||
|             barWidth: 12, | ||||
|             // tooltip: { | ||||
|             //   valueFormatter: function (value) { | ||||
|             //     return value + " ml"; | ||||
|             //   }, | ||||
|             // }, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color: { | ||||
|                 type: "linear", | ||||
|                 x: 0, | ||||
|                 y: 0, | ||||
|                 x2: 0, | ||||
|                 y2: 1, | ||||
|                 colorStops: [ | ||||
|                   { | ||||
|                     offset: 0, | ||||
|                     color: "#57abf8", // 0% 处的颜色 | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 1, | ||||
|                     color: "#364BFE66", // 100% 处的颜色 | ||||
|                   }, | ||||
|                 ], | ||||
|                 global: false, // 缺省为 false | ||||
|               }, | ||||
|             }, | ||||
|             data: [], // this.series[1].data, | ||||
|           }, | ||||
|         ], | ||||
|       }, | ||||
|     }; | ||||
|   }, | ||||
|   watch: { | ||||
|     /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | ||||
|     isFullscreen(val) { | ||||
|       this.actualOptions.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 12; | ||||
|       }); | ||||
|       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||
|       this.initOptions(this.actualOptions); | ||||
|     }, | ||||
|     series(val) { | ||||
|       if (!val) { | ||||
|         this.initOptions(this.options); | ||||
|         return; | ||||
|       } | ||||
|       const actualOptions = JSON.parse(JSON.stringify(this.options)); | ||||
|       actualOptions.series[0].data = val[0].data; | ||||
|       actualOptions.series[0].name = val[0].name; | ||||
|       actualOptions.series[1].data = val?.[1]?.data || []; | ||||
|       actualOptions.series[1].name = val?.[1]?.name || ""; | ||||
|       this.actualOptions = actualOptions; | ||||
|       this.initOptions(actualOptions); | ||||
|     }, | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.actualOptions = this.options; | ||||
|     this.initOptions(this.options); | ||||
|  | ||||
|     if (screenfull.isEnabled) { | ||||
|       screenfull.on("change", () => { | ||||
|         this.isFullscreen = screenfull.isFullscreen; | ||||
|       }); | ||||
|     } | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .bar-chart-base { | ||||
|   // position: relative; | ||||
|  | ||||
|   .legend { | ||||
|     position: absolute; | ||||
|     top: 5.2vh; | ||||
|     right: 1vw; | ||||
|   } | ||||
|  | ||||
|   .legend-item { | ||||
|     position: relative; | ||||
|     // font-size: 12px; | ||||
|     margin-right: 0.67vw; | ||||
|  | ||||
|     &::before { | ||||
|       content: ""; | ||||
|       display: inline-block; | ||||
|       width: 0.531vw; | ||||
|       height: 0.531vw; | ||||
|       background-color: #ccc; | ||||
|       border-radius: 2px; | ||||
|       margin-right: 0.22vw; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .legend-item:nth-child(1):before { | ||||
|     background-color: #12f7f1; | ||||
|   } | ||||
|  | ||||
|   .legend-item:nth-child(2):before { | ||||
|     background-color: #58adfa; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -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> | ||||
| @@ -9,7 +9,6 @@ | ||||
|   <div class="copilot-container"> | ||||
|     <!-- refresh btn  --> | ||||
|     <button | ||||
|       v-if="0" | ||||
|       style=" | ||||
|         appearance: none; | ||||
|         outline: none; | ||||
| @@ -110,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; | ||||
|   } | ||||
|  | ||||
|   | ||||
| @@ -9,7 +9,7 @@ | ||||
|   <div class="copilot-header"> | ||||
|     <section class="menu"> | ||||
|       <CopilotButton | ||||
|         v-for="i in ['产量', '效率', '综合']" | ||||
|         v-for="i in ['产量', '效率', '能源']" | ||||
|         :key="i" | ||||
|         :label="i" | ||||
|         :active="i === active" | ||||
|   | ||||
| @@ -1,296 +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="chart" | ||||
|       style="max-width: 50vw" | ||||
|       :style="{ height: vHeight + 'vh' }" | ||||
|     ></div> | ||||
|   </chart-container> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import screenfull from "screenfull"; | ||||
| import ChartContainer from "./ChartContainer.vue"; | ||||
| import chartMixin from "@/mixins/chart.js"; | ||||
|  | ||||
| export default { | ||||
|   name: "LineChartBase", | ||||
|   components: { | ||||
|     ChartContainer, | ||||
|   }, | ||||
|   mixins: [chartMixin], | ||||
|   props: { | ||||
|     vHeight: { | ||||
|       type: Number, | ||||
|       default: 34, | ||||
|     }, | ||||
|     legend: { | ||||
|       type: Array, | ||||
|       required: true, | ||||
|     }, | ||||
|     xAxis: { | ||||
|       type: Array, | ||||
|       required: true, | ||||
|     }, | ||||
|     series: { | ||||
|       type: Array, | ||||
|       required: true, | ||||
|     }, | ||||
|     in: { | ||||
|       type: String, | ||||
|       default: "", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       isFullscreen: false, | ||||
|       actualOptions: null, | ||||
|       options: { | ||||
|         grid: { | ||||
|           left: "5%", | ||||
|           right: "4%", | ||||
|           bottom: "3%", | ||||
|           top: "15%", | ||||
|           containLabel: true, | ||||
|         }, | ||||
|         tooltip: {}, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             lineStyle: { | ||||
|               color: "#4561AE", | ||||
|             }, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/片", | ||||
|           nameTextStyle: { | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             show: true, | ||||
|             lineStyle: { | ||||
|               color: "#4561AE", | ||||
|             }, | ||||
|           }, | ||||
|           splitLine: { | ||||
|             lineStyle: { | ||||
|               color: "#4561AE", | ||||
|             }, | ||||
|           }, | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             name: "", // this.series[0].name, | ||||
|             type: "bar", | ||||
|             barWidth: 12, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color: { | ||||
|                 type: "linear", | ||||
|                 x: 0, | ||||
|                 y: 0, | ||||
|                 x2: 0, | ||||
|                 y2: 1, | ||||
|                 colorStops: [ | ||||
|                   { | ||||
|                     offset: 0, | ||||
|                     color: "#12f7f1", // 0% 处的颜色 | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 0.35, | ||||
|                     color: "#12f7f177", // 100% 处的颜色 | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 0.75, | ||||
|                     color: "#12f7f133", // 100% 处的颜色 | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 1, | ||||
|                     color: "transparent", // 100% 处的颜色 | ||||
|                   }, | ||||
|                 ], | ||||
|                 global: false, // 缺省为 false | ||||
|               }, | ||||
|             }, | ||||
|             data: [], // this.series[0].data, | ||||
|           }, | ||||
|           { | ||||
|             name: "", // this.series[1].name, | ||||
|             type: "bar", | ||||
|             barWidth: 12, | ||||
|             // tooltip: { | ||||
|             //   valueFormatter: function (value) { | ||||
|             //     return value + " ml"; | ||||
|             //   }, | ||||
|             // }, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color: { | ||||
|                 type: "linear", | ||||
|                 x: 0, | ||||
|                 y: 0, | ||||
|                 x2: 0, | ||||
|                 y2: 1, | ||||
|                 colorStops: [ | ||||
|                   { | ||||
|                     offset: 0, | ||||
|                     color: "#57abf8", // 0% 处的颜色 | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 1, | ||||
|                     color: "#364BFE66", // 100% 处的颜色 | ||||
|                   }, | ||||
|                 ], | ||||
|                 global: false, // 缺省为 false | ||||
|               }, | ||||
|             }, | ||||
|             data: [], // this.series[1].data, | ||||
|           }, | ||||
|         ], | ||||
|       }, | ||||
|     }; | ||||
|   }, | ||||
|   watch: { | ||||
|     /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | ||||
|     isFullscreen(val) { | ||||
|       this.actualOptions.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 12; | ||||
|       }); | ||||
|       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||
|       this.initOptions(this.actualOptions); | ||||
|     }, | ||||
|     series(val) { | ||||
|       if (!val) { | ||||
|         this.initOptions(this.options); | ||||
|         return; | ||||
|       } | ||||
|       const actualOptions = JSON.parse(JSON.stringify(this.options)); | ||||
|       actualOptions.series[0].data = val[0].data; | ||||
|       actualOptions.series[0].name = val[0].name; | ||||
|       actualOptions.series[1].data = val?.[1]?.data || []; | ||||
|       actualOptions.series[1].name = val?.[1]?.name || ""; | ||||
|       this.actualOptions = actualOptions; | ||||
|       this.initOptions(actualOptions); | ||||
|     }, | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.actualOptions = this.options; | ||||
|     this.initOptions(this.options); | ||||
|  | ||||
|     if (screenfull.isEnabled) { | ||||
|       screenfull.on("change", () => { | ||||
|         this.isFullscreen = screenfull.isFullscreen; | ||||
|       }); | ||||
|     } | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .line-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.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: #fad162; | ||||
|   } | ||||
|  | ||||
|   .legend-item:nth-child(2):after, | ||||
|   .legend-item:nth-child(2):before { | ||||
|     background-color: #2160f3; | ||||
|   } | ||||
|  | ||||
|   .legend-item:nth-child(3):after, | ||||
|   .legend-item:nth-child(3):before { | ||||
|     background-color: #13dbf3; | ||||
|   } | ||||
|  | ||||
|   .legend-item:nth-child(4):after, | ||||
|   .legend-item:nth-child(4):before { | ||||
|     background-color: #88ca67; | ||||
|   } | ||||
|  | ||||
|   .legend-item:nth-child(5):after, | ||||
|   .legend-item:nth-child(5):before { | ||||
|     background-color: #5c97fc; | ||||
|   } | ||||
|  | ||||
|   .legend-item:nth-child(6):after, | ||||
|   .legend-item:nth-child(6):before { | ||||
|     background-color: #f48900; | ||||
|   } | ||||
|  | ||||
|   .legend-item:nth-child(7):after, | ||||
|   .legend-item:nth-child(7):before { | ||||
|     background-color: #776bf0; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -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
									
								
							
							
						
						
									
										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,10 +1,4 @@ | ||||
| export default ({ | ||||
|   titleValue, | ||||
|   subtitle, | ||||
|   previousSum, | ||||
|   currentSum, | ||||
|   targetSum, | ||||
| }) => ({ | ||||
| export default { | ||||
|   grid: { | ||||
|     left: 0, | ||||
|     right: 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); | ||||
|     }); | ||||
|   }, | ||||
| }; | ||||
							
								
								
									
										0
									
								
								src/views/copilot/components/name.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										0
									
								
								src/views/copilot/components/name.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -33,28 +33,9 @@ export default { | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       currentActive: this.options[0], | ||||
|       currentActive: '', | ||||
|     }; | ||||
|   }, | ||||
|   watch: { | ||||
|     currentActive: { | ||||
|       handler(val) { | ||||
|         this.$emit( | ||||
|           "update:active", | ||||
|           [ | ||||
|             "瑞昌", | ||||
|             "邯郸", | ||||
|             "株洲", | ||||
|             "佳木斯", | ||||
|             "成都", | ||||
|             "凯盛光伏", | ||||
|             "蚌埠兴科", | ||||
|           ].indexOf(val) | ||||
|         ); | ||||
|       }, | ||||
|       immediate: true, | ||||
|     }, | ||||
|   }, | ||||
|   computed: {}, | ||||
|   methods: {}, | ||||
| }; | ||||
| @@ -74,7 +55,7 @@ button { | ||||
|   padding: 8px 12px; | ||||
|   cursor: pointer; | ||||
|   position: relative; | ||||
|   transition: all 0.3s; | ||||
|   transition: all .3s; | ||||
| } | ||||
|  | ||||
| button.active, | ||||
|   | ||||
| @@ -15,7 +15,7 @@ | ||||
|     /> | ||||
|  | ||||
|     <YieldCopilot v-if="page == '产量'" :period="period" /> | ||||
|     <EnergyCopilot v-if="page == '综合'" :period="period" /> | ||||
|     <EnergyCopilot v-if="page == '能源'" :period="period" /> | ||||
|     <EfficiencyCopilot v-if="page == '效率'" :period="period" /> | ||||
|  | ||||
|     <div class="copilot-footer">© 中建材智能自动化研究院有限公司</div> | ||||
| @@ -42,14 +42,6 @@ export default { | ||||
|       period: "日", | ||||
|     }; | ||||
|   }, | ||||
|   // mounted() { | ||||
|   //   document.body.style.minHeight = "1024px"; | ||||
|   //   document.body.style.minWidth = "1550px"; | ||||
|   // }, | ||||
|   // destroyed() { | ||||
|   //   document.body.style.minHeight = "1024px"; | ||||
|   //   document.body.style.minWidth = "1550px"; | ||||
|   // }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
|   | ||||
| @@ -1,110 +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/components/BarChartBase.vue"; | ||||
| export default { | ||||
|   name: "ChipOEE", | ||||
|   components: { BarChartBase }, | ||||
|   props: { | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | ||||
|     return { | ||||
|       xAxis: cities, | ||||
|     }; | ||||
|   }, | ||||
|   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); | ||||
|     }, | ||||
|   }, | ||||
|   methods: {}, | ||||
| }; | ||||
|  | ||||
| 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> | ||||
|  | ||||
| <style scoped lang="scss"></style> | ||||
| @@ -1,60 +0,0 @@ | ||||
| <!--  | ||||
|     filename: ChipRate.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-29 08:50:54 | ||||
|     description: 芯片良率 | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="chip-rate"> | ||||
|     <ChipRateItem | ||||
|       :period="period" | ||||
|       :cities="['成都', '邯郸', '株洲', '瑞昌']" | ||||
|       :color="1" | ||||
|     /> | ||||
|     <ChipRateItem | ||||
|       :period="period" | ||||
|       :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: "日", | ||||
|     }, | ||||
|   }, | ||||
|   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,57 +0,0 @@ | ||||
| <!--  | ||||
|     filename: StdRate.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-29 08:50:43 | ||||
|     description: 标准组件良率 | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="std-rate"> | ||||
|     <div class="span-2"> | ||||
|       <StdRateItem :city="cities[5]" /> | ||||
|     </div> | ||||
|     <div | ||||
|       v-for="item in cities.filter((val, index) => index != 5)" | ||||
|       :key="item.name" | ||||
|     > | ||||
|       <StdRateItem :city="item" /> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import StdRateItem from "./sub/std/StdRateItem.vue"; | ||||
| export default { | ||||
|   name: "StdRate", | ||||
|   components: { StdRateItem }, | ||||
|   props: {}, | ||||
|   data() { | ||||
|     return { | ||||
|       cities: [ | ||||
|         { name: "瑞昌", target: 100, total: 200, thisYear: 20 }, | ||||
|         { name: "邯郸", target: 200, total: 300, thisYear: 20 }, | ||||
|         { name: "株洲", target: 300, total: 400, thisYear: 20 }, | ||||
|         { name: "佳木斯", target: 400, total: 500, thisYear: 20 }, | ||||
|         { name: "成都", target: 500, total: 600, thisYear: 20 }, | ||||
|         { name: "凯盛光伏", target: 400, total: 500, thisYear: 20 }, | ||||
|         { name: "蚌埠", target: 500, total: 600, thisYear: 20 }, | ||||
|       ], | ||||
|     }; | ||||
|   }, | ||||
|   computed: {}, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .std-rate { | ||||
|   display: grid; | ||||
|   gap: 8px; | ||||
|   grid-template-columns: repeat(2, 1fr); | ||||
|   grid-template-rows: repeat(4, 1fr); | ||||
| } | ||||
|  | ||||
| .span-2 { | ||||
|   grid-column: span 2; | ||||
| } | ||||
| </style> | ||||
| @@ -1,110 +0,0 @@ | ||||
| <!--  | ||||
|     filename: TransformRate.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-29 08:50:34 | ||||
|     description: 转化效率 | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <BarChartBase | ||||
|     :legend="legend" | ||||
|     :series="series" | ||||
|     :xAxis="xAxis" | ||||
|     in="chipOEE" | ||||
|     class="chip-oee" | ||||
|   /> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import BarChartBase from "@/views/copilot/components/BarChartBase.vue"; | ||||
| export default { | ||||
|   name: "TransformRate", | ||||
|   components: { BarChartBase }, | ||||
|   props: { | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | ||||
|     return { | ||||
|       xAxis: cities, | ||||
|     }; | ||||
|   }, | ||||
|   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); | ||||
|     }, | ||||
|   }, | ||||
|   methods: {}, | ||||
| }; | ||||
|  | ||||
| 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> | ||||
|  | ||||
| <style scoped lang="scss"></style> | ||||
| @@ -1,194 +0,0 @@ | ||||
| <!--  | ||||
|     filename: ChipRateItem.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-29 14:25:18 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="chip-rate-item"> | ||||
|     <div class="cities"> | ||||
|       <CopilotButtons :options="cities" @update:active="handleCityUpdate" /> | ||||
|     </div> | ||||
|     <div class="chart" ref="chart"></div> | ||||
|     <div class="legend" v-if="period == '月' || period == '年'"> | ||||
|       <div class="legend-item" v-for="lgd in legend" :key="lgd.label"> | ||||
|         <span class="legend-item__value">{{ lgd.value }}</span> | ||||
|         <span class="legend-item__label">{{ lgd.label }}</span> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import CopilotButtons from "@/views/copilot/components/select.vue"; | ||||
| import chartMixin from "@/mixins/chart.js"; | ||||
| import fullscreenMixin from "@/mixins/fullscreen.js"; | ||||
| import getOptions from "../../../options/chipOptions.js"; | ||||
| import { mapGetters } from "vuex"; | ||||
|  | ||||
| export default { | ||||
|   name: "ChipRateItem", | ||||
|   components: { CopilotButtons }, | ||||
|   mixins: [chartMixin, fullscreenMixin], | ||||
|   props: { | ||||
|     cities: { | ||||
|       type: Array, | ||||
|       default: () => [], | ||||
|     }, | ||||
|     color: { | ||||
|       type: Number, | ||||
|       default: 1, | ||||
|     }, | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       factoryId: 0, | ||||
|       count: 1, | ||||
|     }; | ||||
|   }, | ||||
|   computed: { | ||||
|     chipRate() { | ||||
|       return this.$store.getters.copilot.efficiency.chipRate; | ||||
|     }, | ||||
|     valueTuple() { | ||||
|       const getter = this.chipRate; | ||||
|       if (this.period === "日" || this.period === "周") { | ||||
|         return [ | ||||
|           getter.previous[this.factoryId], | ||||
|           getter.current[this.factoryId], | ||||
|           0, | ||||
|         ]; | ||||
|       } | ||||
|       // [100, 200, 200] | ||||
|       return [ | ||||
|         getter.previous[this.factoryId], | ||||
|         getter.current[this.factoryId], | ||||
|         getter.target[this.factoryId], | ||||
|       ]; | ||||
|     }, | ||||
|     options() { | ||||
|       const single = this.period === "日" || this.period === "周"; | ||||
|       const year = new Date().getFullYear(); | ||||
|       const month = new Date().getMonth() + 1; | ||||
|       const vt = this.valueTuple; | ||||
|       let titleValue = single | ||||
|           ? (vt[1] != null && `${vt[1] * 100}%`) || "0%" | ||||
|           : vt[0] != null && vt[2] != null && vt[2] !== 0 | ||||
|           ? `${((vt[1] / vt[2]) * 100).toFixed(0)}%` | ||||
|           : "0%", | ||||
|         subtitle = { | ||||
|           日: "本日良率", | ||||
|           周: "本周良率", | ||||
|           月: `${month}月良率`, | ||||
|           年: `${year}良率`, | ||||
|         }[this.period]; | ||||
|  | ||||
|       const t = getOptions({ | ||||
|         single, | ||||
|         color: this.color == 1 ? "#4CF0E8" : "#1065ff", | ||||
|         titleValue, | ||||
|         subtitle, | ||||
|         previousSum: vt[0], | ||||
|         currentSum: vt[1], | ||||
|         targetSum: vt[2], | ||||
|       }); | ||||
|       return t; | ||||
|     }, | ||||
|     legend() { | ||||
|       const year = new Date().getFullYear(); | ||||
|       const month = new Date().getMonth() + 1; | ||||
|       return [ | ||||
|         { | ||||
|           label: | ||||
|             this.period == "月" | ||||
|               ? `${year - 1}年${month}月良率` | ||||
|               : `${year - 1}年良率`, | ||||
|           value: (this.valueTuple[0] * 100).toFixed(0) + "%", | ||||
|         }, | ||||
|         { | ||||
|           label: this.period == "月" ? `${month}月良率` : `${year}年良率`, | ||||
|           value:  (this.valueTuple[1] * 100).toFixed(0) + "%", | ||||
|         }, | ||||
|       ]; | ||||
|     }, | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.initOptions(this.options); | ||||
|   }, | ||||
|   watch: { | ||||
|     period() { | ||||
|       this.initOptions(this.options); | ||||
|     }, | ||||
|     factoryId() { | ||||
|       this.initOptions(this.options); | ||||
|     }, | ||||
|     chipRate() { | ||||
|       this.initOptions(this.options); | ||||
|     }, | ||||
|   }, | ||||
|   methods: { | ||||
|     handleCityUpdate(id) { | ||||
|       this.factoryId = id; | ||||
|     }, | ||||
|     fullscreenCallback(isFullscreen) {}, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .chip-rate-item { | ||||
|   flex: 1; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   align-items: center; | ||||
|   justify-content: center; | ||||
|   gap: 3px; | ||||
|   backdrop-filter: blur(24px); | ||||
|  | ||||
|   .cities { | ||||
|     height: 40px; | ||||
|   } | ||||
|  | ||||
|   .chart { | ||||
|     align-self: stretch; | ||||
|     height: 280px; | ||||
|   } | ||||
|  | ||||
|   .legend { | ||||
|     height: 80px; | ||||
|     display: flex; | ||||
|     gap: 40px; | ||||
|     justify-content: space-around; | ||||
|   } | ||||
|  | ||||
|   .legend-item { | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     align-items: center; | ||||
|     gap: 3px; | ||||
|  | ||||
|     &:first-child { | ||||
|       .legend-item__value { | ||||
|         color: #0e61f5; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     &:nth-child(2) { | ||||
|       .legend-item__value { | ||||
|         color: #0fd5d1; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .legend-item__value { | ||||
|     font-size: 24px; | ||||
|     font-weight: 600; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| l | ||||
| @@ -1,66 +0,0 @@ | ||||
| <!--  | ||||
|     filename: CityName.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-10 08:59:28 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="city-name"> | ||||
|     <img :src="Icon" alt="city icon" /> | ||||
|     <span>{{ value }}</span> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import Icon from "@/views/copilot/assets/icon.png"; | ||||
|  | ||||
| export default { | ||||
|   name: "CityName", | ||||
|   props: { | ||||
|     value: { | ||||
|       type: String, | ||||
|       default: "", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return { Icon }; | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| .city-name { | ||||
|   min-width: 80px; | ||||
|   margin: auto; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   align-items: center; | ||||
|   justify-content: center; | ||||
|   padding: 0 8px; | ||||
|   position: relative; | ||||
| } | ||||
|  | ||||
| .city-name::after { | ||||
|   content: ""; | ||||
|   position: absolute; | ||||
|   top: 50%; | ||||
|   right: 0; | ||||
|   width: 2px; | ||||
|   background: linear-gradient(to top, transparent, #0b5be1ee, transparent); | ||||
|   height: 100%; | ||||
|   transform: translateY(-50%); | ||||
| } | ||||
|  | ||||
| img { | ||||
|   /* width: 32px; */ | ||||
|   width: 1.543vw; | ||||
| } | ||||
|  | ||||
| span { | ||||
|   /* font-size: 12px;   */ | ||||
|   font-size: 0.77vw; | ||||
|   letter-spacing: 2px; | ||||
|   text-align: center; | ||||
| } | ||||
| </style> | ||||
| @@ -1,113 +0,0 @@ | ||||
| <!--  | ||||
|     filename: ProgressBar.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-29 09:18:30 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="progress-bar" :data-title="title" :data-rate="dataRate"> | ||||
|     <div | ||||
|       class="progress-bar__rate" | ||||
|       :style="{ width: dataRate == '-' ? 0 : dataRate }" | ||||
|     ></div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
|   name: "ProgressBar", | ||||
|   components: {}, | ||||
|   props: { | ||||
|     value: { | ||||
|       type: Number, | ||||
|       default: 0, | ||||
|     }, | ||||
|     total: { | ||||
|       type: Number, | ||||
|       default: 0, | ||||
|     }, | ||||
|     title: { | ||||
|       type: String, | ||||
|       default: "", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
|   computed: { | ||||
|     dataRate() { | ||||
|       return this.total == 0 | ||||
|         ? "-" | ||||
|         : `${(parseFloat(this.value / this.total) * 100).toFixed(0)}%`; | ||||
|     }, | ||||
|   }, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .progress-bar { | ||||
|   height: 10px; | ||||
|   background-color: #002f6b; | ||||
|   border-radius: 4px; | ||||
|   margin-bottom: 12px; | ||||
|   position: relative; | ||||
|  | ||||
|   &:before { | ||||
|     content: attr(data-title); | ||||
|     display: inline-block; | ||||
|     color: #fff; | ||||
|     position: absolute; | ||||
|     bottom: -200%; | ||||
|     font-size: 12px; | ||||
|   } | ||||
|  | ||||
|   &:after { | ||||
|     content: attr(data-rate); | ||||
|     display: inline-block; | ||||
|     color: #fff; | ||||
|     position: absolute; | ||||
|     bottom: -200%; | ||||
|     right: 0; | ||||
|     font-size: 12px; | ||||
|   } | ||||
|  | ||||
|   &:first-child { | ||||
|     &:after { | ||||
|       color: #11eae3; | ||||
|     } | ||||
|   } | ||||
|   &:nth-child(2) { | ||||
|     &:after { | ||||
|       color: #0e65fd; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .progress-bar__rate { | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 100%; | ||||
|     width: 0; | ||||
|     border-radius: 4px; | ||||
|   } | ||||
|  | ||||
|   &:first-child { | ||||
|     .progress-bar__rate { | ||||
|       background: linear-gradient( | ||||
|         to right, | ||||
|         #004c5e11 10%, | ||||
|         #004c5e, | ||||
|         #0ac0c0, | ||||
|         #11eae3 | ||||
|       ); | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   &:nth-child(2) { | ||||
|     .progress-bar__rate { | ||||
|       background: linear-gradient(to right, #0048a811, #0048a8, #0e65fd); | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -1,60 +0,0 @@ | ||||
| <!--  | ||||
|     filename: StdRateItem.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-29 08:59:33 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="std-rate-item"> | ||||
|     <CityName :value="city.name" /> | ||||
|     <div class="std-rate-item__value"> | ||||
|       <ProgressBar title="24年目标" :total="city.target" :value="city.target" /> | ||||
|       <ProgressBar | ||||
|         title="24年累计" | ||||
|         :total="city.target" | ||||
|         :value="city.thisYear" | ||||
|       /> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import CityName from "./CityName.vue"; | ||||
| import ProgressBar from "./ProgressBar.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "StdRateItem", | ||||
|   components: { CityName, ProgressBar }, | ||||
|   props: { | ||||
|     city: { | ||||
|       type: Object, | ||||
|       required: true, | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .std-rate-item { | ||||
|   box-shadow: inset 0 0 12px 2px #fff3; | ||||
|   border-radius: 4px; | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   gap: 8px; | ||||
|   padding: 12px; | ||||
| } | ||||
|  | ||||
| .std-rate-item__value { | ||||
|   flex: 1; | ||||
|   margin: 6px; | ||||
|   display: flex; | ||||
|   gap: 12px; | ||||
|   height: 60px; | ||||
|   flex-direction: column; | ||||
|   justify-content: center; | ||||
| } | ||||
| </style> | ||||
| @@ -7,63 +7,23 @@ | ||||
|  | ||||
| <template> | ||||
|   <div class="efficiency-copilot"> | ||||
|     <Container title="芯片良率" icon="chip2"> | ||||
|       <ChipRate :period="period" /> | ||||
|     </Container> | ||||
|     <Container title="标准组件良率" icon="std"> | ||||
|       <StdRate :period="period" /> | ||||
|     </Container> | ||||
|     <Container title="芯片OEE" icon="chip"> | ||||
|       <ChipOee :period="period" /> | ||||
|     </Container> | ||||
|     <Container title="转化效率" icon="cube"> | ||||
|       <TransformRate :period="period" /> | ||||
|     </Container> | ||||
|     <db-container title="芯片良率" icon="chip2"></db-container> | ||||
|     <db-container title="标准组件良率" icon="std"></db-container> | ||||
|     <db-container title="芯片OEE" icon="chip"></db-container> | ||||
|     <db-container title="转化效率" icon="cube"></db-container> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import Container from "@/views/copilot/components/Container.vue"; | ||||
| import ChipOeeVue from "./components/ChipOee.vue"; | ||||
| import ChipRateVue from "./components/ChipRate.vue"; | ||||
| import StdRateVue from "./components/StdRate.vue"; | ||||
| import TransformRateVue from "./components/TransformRate.vue"; | ||||
|  | ||||
| import Container from "../../dashboard/components/Container.vue"; | ||||
| export default { | ||||
|   name: "EfficiencyCopilot", | ||||
|   components: { | ||||
|     Container, | ||||
|     ChipOee: ChipOeeVue, | ||||
|     ChipRate: ChipRateVue, | ||||
|     StdRate: StdRateVue, | ||||
|     TransformRate: TransformRateVue, | ||||
|   }, | ||||
|   props: { | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|   }, | ||||
|   components: { DbContainer: Container }, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
|   watch: { | ||||
|     period: { | ||||
|       handler(val) { | ||||
|         val && this.fetchData(val); | ||||
|       }, | ||||
|       immediate: true, | ||||
|     }, | ||||
|   }, | ||||
|   methods: { | ||||
|     fetchData(period = "日") { | ||||
|       console.log(`效率驾驶舱,获取${period}数据`); | ||||
|       this.$store.dispatch("copilot/initCopilot", { | ||||
|         period, | ||||
|         source: "efficiency", | ||||
|       }); | ||||
|     }, | ||||
|   }, | ||||
|   computed: {}, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
|   | ||||
| @@ -1,163 +0,0 @@ | ||||
| export default function ({ | ||||
|   single = false, | ||||
|   color, | ||||
|   titleValue, | ||||
|   subtitle, | ||||
|   previousSum, | ||||
|   currentSum, | ||||
|   targetSum, | ||||
| }) { | ||||
|   return { | ||||
|     grid: { | ||||
|       left: 0, | ||||
|       right: 0, | ||||
|       bottom: 0, | ||||
|       top: 0, | ||||
|       containLabel: true, | ||||
|     }, | ||||
|     tooltip: { | ||||
|       // formatter(params) { | ||||
|       //   return `${params.name}: ${(params.value * 100).toFixed(0)}%`; | ||||
|       // } | ||||
|     }, | ||||
|     title: { | ||||
|       text: titleValue, | ||||
|       left: "49%", | ||||
|       top: "39%", | ||||
|       textAlign: "center", | ||||
|       textStyle: { | ||||
|         fontWeight: 600, | ||||
|         fontSize: 32, | ||||
|         color: "#fffd", | ||||
|       }, | ||||
|       subtext: `\u2002${subtitle}\u2002`, | ||||
|       subtextStyle: { | ||||
|         fontSize: 14, | ||||
|         fontWeight: 100, | ||||
|         color: "#fffd", | ||||
|         align: "right", | ||||
|       }, | ||||
|     }, | ||||
|     series: [ | ||||
|       // 背景 series | ||||
|       { | ||||
|         type: "pie", | ||||
|         name: "当前目标", | ||||
|         radius: ["70%", "85%"], | ||||
|         center: ["50%", "52%"], | ||||
|         emptyCircleStyle: { | ||||
|           color: "#040c5f45", | ||||
|         }, | ||||
|       }, | ||||
|       // 数据 series | ||||
|       { | ||||
|         type: "pie", | ||||
|         radius: ["70%", "85%"], | ||||
|         center: ["50%", "52%"], | ||||
|         avoidLabelOvervlap: false, | ||||
|         label: { | ||||
|           show: false, | ||||
|         }, | ||||
|         labelLine: { | ||||
|           show: false, | ||||
|         }, | ||||
|         data: [ | ||||
|           { | ||||
|             value: currentSum, | ||||
|             name: "当前良率", | ||||
|             selected: false, | ||||
|             itemStyle: { | ||||
|               borderJoin: "round", | ||||
|               borderCap: "round", | ||||
|               borderWidth: 12, | ||||
|               borderRadius: "50%", | ||||
|               color: { | ||||
|                 type: "linear", | ||||
|                 x: 1, | ||||
|                 y: 0, | ||||
|                 x2: 0, | ||||
|                 y2: 1, | ||||
|                 colorStops: single | ||||
|                   ? [ | ||||
|                       { offset: 0, color: `${color}11` }, | ||||
|                       { offset: 1, color: `${color}` }, | ||||
|                     ] | ||||
|                   : [ | ||||
|                       { offset: 0, color: "#4CF0E811" }, | ||||
|                       { offset: 1, color: "#4CF0E8" }, | ||||
|                     ], | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             value: | ||||
|               targetSum > currentSum | ||||
|                 ? targetSum - currentSum | ||||
|                 : targetSum == 0 | ||||
|                 ? currentSum == 0 | ||||
|                   ? 1 | ||||
|                   : 0 | ||||
|                 : targetSum, | ||||
|  | ||||
|             name: "未达成", | ||||
|             itemStyle: { color: "transparent" }, | ||||
|             label: { show: false }, | ||||
|           }, | ||||
|         ], | ||||
|       }, | ||||
|       // 数据 series2 - 2023累计 | ||||
|       single | ||||
|         ? null | ||||
|         : { | ||||
|             type: "pie", | ||||
|             radius: ["55%", "70%"], | ||||
|             center: ["50%", "52%"], | ||||
|             avoidLabelOvervlap: false, | ||||
|             label: { | ||||
|               show: false, | ||||
|             }, | ||||
|             labelLine: { | ||||
|               show: false, | ||||
|             }, | ||||
|             data: [ | ||||
|               { | ||||
|                 value: previousSum, | ||||
|                 name: "上期良率", | ||||
|                 selected: false, | ||||
|                 itemStyle: { | ||||
|                   borderJoin: "round", | ||||
|                   borderCap: "round", | ||||
|                   borderWidth: 12, | ||||
|                   borderRadius: "50%", | ||||
|                   color: { | ||||
|                     type: "linear", | ||||
|                     x: 1, | ||||
|                     y: 0, | ||||
|                     x2: 0, | ||||
|                     y2: 1, | ||||
|                     colorStops: [ | ||||
|                       { offset: 0, color: "#1065ff66" }, | ||||
|                       { offset: 1, color: "#1065ff" }, | ||||
|                     ], | ||||
|                   }, | ||||
|                 }, | ||||
|               }, | ||||
|               { | ||||
|                 value: | ||||
|                   targetSum > previousSum | ||||
|                     ? targetSum - previousSum | ||||
|                     : previousSum == 0 | ||||
|                     ? 1 | ||||
|                     : 0, | ||||
|                 name: "-", | ||||
|                 formatter: { | ||||
|                   show: false | ||||
|                 }, | ||||
|                 itemStyle: { color: "transparent" }, | ||||
|                 label: { show: false }, | ||||
|               }, | ||||
|             ], | ||||
|           }, | ||||
|     ], | ||||
|   }; | ||||
| } | ||||
| @@ -1,128 +0,0 @@ | ||||
| <!--  | ||||
|     filename: ElecCost.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-29 16:37:01 | ||||
|     description: 电能耗 | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <LineChartBase | ||||
|     v-if="1" | ||||
|     :legend="legend" | ||||
|     :series="series" | ||||
|     :xAxis="xAxis" | ||||
|     in="elecCost" | ||||
|     class="elec-cost" | ||||
|   /> | ||||
|   <BarChartBase | ||||
|     v-else | ||||
|     :legend="legend" | ||||
|     :series="series" | ||||
|     :xAxis="xAxis" | ||||
|     in="elecCost" | ||||
|     class="elec-cost" | ||||
|   /> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue"; | ||||
| import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "ElecCost", | ||||
|   components: { | ||||
|     BarChartBase: BarChartBaseVue, | ||||
|     LineChartBase: LineChartBaseVue, | ||||
|   }, | ||||
|   props: { | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | ||||
|     return { | ||||
|       xAxis: cities, | ||||
|     }; | ||||
|   }, | ||||
|   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); | ||||
|     }, | ||||
|   }, | ||||
|   methods: {}, | ||||
| }; | ||||
|  | ||||
| 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> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .elec-cost { | ||||
|   flex: 1; | ||||
| } | ||||
| </style> | ||||
| @@ -1,115 +0,0 @@ | ||||
| <!--  | ||||
|     filename: NatGas.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-29 16:36:27 | ||||
|     description: 天然气能耗 | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <BarChartBase | ||||
|     :legend="legend" | ||||
|     :series="series" | ||||
|     :xAxis="xAxis" | ||||
|     in="nat-gas" | ||||
|     class="nat-gas" | ||||
|   /> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import BarChartBase from "@/views/copilot/components/BarChartBase.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "NatGasCost", | ||||
|   components: { BarChartBase }, | ||||
|   props: { | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | ||||
|     return { | ||||
|       xAxis: cities, | ||||
|     }; | ||||
|   }, | ||||
|   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); | ||||
|     }, | ||||
|   }, | ||||
|   methods: {}, | ||||
| }; | ||||
|  | ||||
| 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> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .nat-gas { | ||||
|   flex: 1; | ||||
| } | ||||
| </style> | ||||
| @@ -1,63 +0,0 @@ | ||||
| <!--  | ||||
|     filename: StockMonitor.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-29 16:35:40 | ||||
|     description: 仓库监控·当前 | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="stock-monitor"> | ||||
|     <MonitorItem | ||||
|       :cities="['成都', '邯郸', '株洲', '瑞昌', '佳木斯']" | ||||
|       :legendList="dhgList" | ||||
|     /> | ||||
|     <MonitorItem :cities="['凯盛光伏', '蚌埠兴科']" :legendList="otherList" /> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import MonitorItemVue from "./sub/monitor/MonitorItem.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "StockMonitor", | ||||
|   components: { MonitorItem: MonitorItemVue }, | ||||
|   props: {}, | ||||
|   data() { | ||||
|     return { | ||||
|       dhgList: [ | ||||
|         { name: "总库存", value: "1000" }, | ||||
|         { name: "已用库存", value: "500" }, | ||||
|         { name: "剩余库存", value: "500" }, | ||||
|       ], | ||||
|       otherList: [ | ||||
|         { name: "分类1", value: "1000" }, | ||||
|         { name: "分类2", value: "1000" }, | ||||
|         { name: "分类3", value: "1000" }, | ||||
|         { name: "分类4", value: "1000" }, | ||||
|       ], | ||||
|     }; | ||||
|   }, | ||||
|   computed: {}, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .stock-monitor { | ||||
|   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,128 +0,0 @@ | ||||
| <!--  | ||||
|     filename: WaterCost.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-29 16:37:34 | ||||
|     description: 水能耗 | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <LineChartBase | ||||
|     v-if="0" | ||||
|     :legend="legend" | ||||
|     :series="series" | ||||
|     :xAxis="xAxis" | ||||
|     in="waterCost" | ||||
|     class="water-cost" | ||||
|   /> | ||||
|   <BarChartBase | ||||
|     v-else | ||||
|     :legend="legend" | ||||
|     :series="series" | ||||
|     :xAxis="xAxis" | ||||
|     in="waterCost" | ||||
|     class="water-cost" | ||||
|   /> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue"; | ||||
| import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "WaterCost", | ||||
|   components: { | ||||
|     BarChartBase: BarChartBaseVue, | ||||
|     LineChartBase: LineChartBaseVue, | ||||
|   }, | ||||
|   props: { | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | ||||
|     return { | ||||
|       xAxis: cities, | ||||
|     }; | ||||
|   }, | ||||
|   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); | ||||
|     }, | ||||
|   }, | ||||
|   methods: {}, | ||||
| }; | ||||
|  | ||||
| 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> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .water-cost { | ||||
|   flex: 1; | ||||
| } | ||||
| </style> | ||||
| @@ -1,139 +0,0 @@ | ||||
| <!--  | ||||
|     filename: ChipRateItem.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-29 14:25:18 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="monitor-item"> | ||||
|     <div class="cities"> | ||||
|       <CopilotButtons :options="cities" @update:active="handleCityUpdate" /> | ||||
|     </div> | ||||
|     <div class="chart" ref="chart"></div> | ||||
|     <div class="legend" v-if="1"> | ||||
|       <div class="legend-item" v-for="lgd in legendList" :key="lgd.name"> | ||||
|         <span class="legend-item__label">{{ lgd.name }}</span> | ||||
|         <span class="legend-item__value">{{ lgd.value }}</span> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import CopilotButtons from "@/views/copilot/components/select.vue"; | ||||
| import chartMixin from "@/mixins/chart.js"; | ||||
| import fullscreenMixin from "@/mixins/fullscreen.js"; | ||||
| import getOptions from "../../../options/monitorOptions.js"; | ||||
|  | ||||
| export default { | ||||
|   name: "ChipRateItem", | ||||
|   components: { CopilotButtons }, | ||||
|   mixins: [chartMixin, fullscreenMixin], | ||||
|   props: { | ||||
|     cities: { | ||||
|       type: Array, | ||||
|       default: () => [], | ||||
|     }, | ||||
|     legendList: { | ||||
|       type: Array, | ||||
|       default: () => [], | ||||
|     }, | ||||
|     color: { | ||||
|       type: Number, | ||||
|       default: 1, | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       period: "月", | ||||
|       valueTuple: [100, 100, 200], | ||||
|     }; | ||||
|   }, | ||||
|   computed: { | ||||
|     options() { | ||||
|       const year = new Date().getFullYear(); | ||||
|       const month = new Date().getMonth() + 1; | ||||
|       const vt = this.valueTuple; | ||||
|       let titleValue = | ||||
|           vt[0] != null && vt[2] != null && vt[2] !== 0 | ||||
|             ? `${((vt[1] / vt[2]) * 100).toFixed(0)}%` | ||||
|             : "0%", | ||||
|         subtitle = | ||||
|           this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`; | ||||
|  | ||||
|       return getOptions({ | ||||
|         single: true, | ||||
|         color: this.color == 1 ? "#4CF0E8" : "#1065ff", | ||||
|         titleValue, | ||||
|         subtitle, | ||||
|         previousSum: this.valueTuple[0], | ||||
|         currentSum: this.valueTuple[1], | ||||
|         targetSum: this.valueTuple[2], | ||||
|       }); | ||||
|     }, | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.initOptions(this.options); | ||||
|   }, | ||||
|   methods: { | ||||
|     handleCityUpdate() {}, | ||||
|     fullscreenCallback(isFullscreen) { | ||||
|       console.log("isFullscreen--->", isFullscreen); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .monitor-item { | ||||
|   flex: 1; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   align-items: center; | ||||
|   justify-content: center; | ||||
|   gap: 3px; | ||||
|   backdrop-filter: blur(24px); | ||||
|  | ||||
|   .cities { | ||||
|     height: 40px; | ||||
|   } | ||||
|  | ||||
|   .chart { | ||||
|     align-self: stretch; | ||||
|     height: 280px; | ||||
|   } | ||||
|  | ||||
|   .legend { | ||||
|     height: 80px; | ||||
|     display: flex; | ||||
|     gap: 40px; | ||||
|     justify-content: space-around; | ||||
|   } | ||||
|  | ||||
|   .legend-item { | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     align-items: center; | ||||
|     gap: 3px; | ||||
|  | ||||
|     &:first-child { | ||||
|       .legend-item__value { | ||||
|         color: #0e61f5; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     &:nth-child(2) { | ||||
|       .legend-item__value { | ||||
|         color: #0fd5d1; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .legend-item__value { | ||||
|     font-size: 24px; | ||||
|     font-weight: 600; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| l | ||||
| @@ -2,81 +2,24 @@ | ||||
|     filename: index.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-16 14:40:15 | ||||
|     description: 综合驾驶舱 | ||||
|     description: 能源驾驶舱 | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="energy-copilot"> | ||||
|     <Container title="仓库监控·当前" icon="chip2"> | ||||
|       <StockMonitorVue :period="period" /> | ||||
|     </Container> | ||||
|     <Container title="天然气能耗" icon="std"> | ||||
|       <NatGasVue :period="period" /> | ||||
|     </Container> | ||||
|     <Container title="电能耗" icon="chip"> | ||||
|       <ElecCostVue :period="period" /> | ||||
|     </Container> | ||||
|     <Container title="水能耗" icon="cube"> | ||||
|       <WaterCostVue :period="period" /> | ||||
|     </Container> | ||||
|   </div> | ||||
|   <div class="energy-copilot">能源驾驶舱</div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import Container from "@/views/copilot/components/Container.vue"; | ||||
| import StockMonitorVue from "./components/StockMonitor.vue"; | ||||
| import ElecCostVue from "./components/ElecCost.vue"; | ||||
| import NatGasVue from "./components/NatGas.vue"; | ||||
| import WaterCostVue from "./components/WaterCost.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "EnergyCopilot", | ||||
|   components: { | ||||
|     Container, | ||||
|     StockMonitorVue, | ||||
|     ElecCostVue, | ||||
|     NatGasVue, | ||||
|     WaterCostVue, | ||||
|   }, | ||||
|   props: { | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|   }, | ||||
|   components: {}, | ||||
|   props: {}, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
|   watch: { | ||||
|     period: { | ||||
|       handler(val) { | ||||
|         val && this.fetchData(val); | ||||
|       }, | ||||
|       immediate: true, | ||||
|     }, | ||||
|   }, | ||||
|   methods: { | ||||
|     fetchData(period = "日") { | ||||
|       console.log(`效率驾驶舱,获取${period}数据`); | ||||
|       this.$store.dispatch("copilot/initCopilot", { | ||||
|         period, | ||||
|         source: "comprehensive", | ||||
|       }); | ||||
|     }, | ||||
|   }, | ||||
|   computed: {}, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| .energy-copilot { | ||||
|   flex: 1; | ||||
|   display: grid; | ||||
|   gap: 16px; | ||||
|   grid-template-columns: 1fr 1fr; | ||||
|   grid-template-rows: 1fr 1fr; | ||||
| } | ||||
|  | ||||
| .energy-copilot > div { | ||||
|   height: 100%; | ||||
| } | ||||
| </style> | ||||
| <style scoped></style> | ||||
|   | ||||
| @@ -1,156 +0,0 @@ | ||||
| export default function ({ | ||||
|   single = false, | ||||
|   color, | ||||
|   titleValue, | ||||
|   subtitle, | ||||
|   previousSum, | ||||
|   currentSum, | ||||
|   targetSum, | ||||
| }) { | ||||
|   return { | ||||
|     grid: { | ||||
|       left: 0, | ||||
|       right: 0, | ||||
|       bottom: 0, | ||||
|       top: 0, | ||||
|       containLabel: true, | ||||
|     }, | ||||
|     tooltip: {}, | ||||
|     title: { | ||||
|       text: titleValue, | ||||
|       left: "49%", | ||||
|       top: "39%", | ||||
|       textAlign: "center", | ||||
|       textStyle: { | ||||
|         fontWeight: 600, | ||||
|         fontSize: 32, | ||||
|         color: "#fffd", | ||||
|       }, | ||||
|       subtext: `\u2002${subtitle}\u2002`, | ||||
|       subtextStyle: { | ||||
|         fontSize: 14, | ||||
|         fontWeight: 100, | ||||
|         color: "#fffd", | ||||
|         align: "right", | ||||
|       }, | ||||
|     }, | ||||
|     series: [ | ||||
|       // 背景 series | ||||
|       { | ||||
|         type: "pie", | ||||
|         name: "当前目标", | ||||
|         radius: ["70%", "85%"], | ||||
|         center: ["50%", "52%"], | ||||
|         emptyCircleStyle: { | ||||
|           color: "#040c5f45", | ||||
|         }, | ||||
|       }, | ||||
|       // 数据 series | ||||
|       { | ||||
|         type: "pie", | ||||
|         radius: ["70%", "85%"], | ||||
|         center: ["50%", "52%"], | ||||
|         avoidLabelOvervlap: false, | ||||
|         label: { | ||||
|           show: false, | ||||
|         }, | ||||
|         labelLine: { | ||||
|           show: false, | ||||
|         }, | ||||
|         data: [ | ||||
|           { | ||||
|             value: currentSum, | ||||
|             name: "当前累计产出", | ||||
|             selected: false, | ||||
|             itemStyle: { | ||||
|               borderJoin: "round", | ||||
|               borderCap: "round", | ||||
|               borderWidth: 12, | ||||
|               borderRadius: "50%", | ||||
|               // color: { | ||||
|               //   type: "linear", | ||||
|               //   x: 1, | ||||
|               //   y: 0, | ||||
|               //   x2: 0, | ||||
|               //   y2: 1, | ||||
|               //   colorStops: single | ||||
|               //     ? [ | ||||
|               //         { offset: 0, color: `${color}11` }, | ||||
|               //         { offset: 1, color: `${color}` }, | ||||
|               //       ] | ||||
|               //     : [ | ||||
|               //         { offset: 0, color: "#4CF0E811" }, | ||||
|               //         { offset: 1, color: "#4CF0E8" }, | ||||
|               //       ], | ||||
|               // }, | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             value: | ||||
|               targetSum > currentSum | ||||
|                 ? targetSum - currentSum | ||||
|                 : targetSum == 0 | ||||
|                 ? currentSum == 0 | ||||
|                   ? 1 | ||||
|                   : 0 | ||||
|                 : 0, | ||||
|  | ||||
|             name: "未达成累计", | ||||
|             itemStyle: { color: "transparent" }, | ||||
|             label: { show: false }, | ||||
|           }, | ||||
|         ], | ||||
|       }, | ||||
|       // 数据 series2 - 2023累计 | ||||
|       single | ||||
|         ? null | ||||
|         : { | ||||
|             type: "pie", | ||||
|             radius: ["55%", "70%"], | ||||
|             center: ["50%", "52%"], | ||||
|             avoidLabelOvervlap: false, | ||||
|             label: { | ||||
|               show: false, | ||||
|             }, | ||||
|             labelLine: { | ||||
|               show: false, | ||||
|             }, | ||||
|             data: [ | ||||
|               { | ||||
|                 value: previousSum, | ||||
|                 name: "上期累计产出", | ||||
|                 selected: false, | ||||
|                 itemStyle: { | ||||
|                   borderJoin: "round", | ||||
|                   borderCap: "round", | ||||
|                   borderWidth: 12, | ||||
|                   borderRadius: "50%", | ||||
|                   // color: { | ||||
|                   //   type: "linear", | ||||
|                   //   x: 1, | ||||
|                   //   y: 0, | ||||
|                   //   x2: 0, | ||||
|                   //   y2: 1, | ||||
|                   //   colorStops: [ | ||||
|                   //     { offset: 0, color: "#1065ff66" }, | ||||
|                   //     { offset: 1, color: "#1065ff" }, | ||||
|                   //   ], | ||||
|                   // }, | ||||
|                 }, | ||||
|               }, | ||||
|               { | ||||
|                 value: | ||||
|                   targetSum > previousSum | ||||
|                     ? targetSum - previousSum | ||||
|                     : previousSum == 0 | ||||
|                     ? 1 | ||||
|                     : 0, | ||||
|                 name: "-", | ||||
|                 itemStyle: { color: "transparent" }, | ||||
|                 label: { show: false }, | ||||
|               }, | ||||
|             ], | ||||
|           }, | ||||
|     ], | ||||
|   }; | ||||
| } | ||||
| @@ -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 "@/views/copilot/components/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,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 "@/views/copilot/components/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,149 +0,0 @@ | ||||
| <!--  | ||||
|     filename: CityData.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-17 09:55:12 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="city-data"> | ||||
|     <div class="headquarter"> | ||||
|       <div class="inner-shadow w-1"></div> | ||||
|       <div class="inner-shadow flex-1 flex"> | ||||
|         <CityName value="凯盛光伏" /> | ||||
|         <CityValue :value="headquarterValue" horizontal :period="period" /> | ||||
|       </div> | ||||
|       <div class="inner-shadow w-1"></div> | ||||
|     </div> | ||||
|  | ||||
|     <div class="city-item-container"> | ||||
|       <CityItem | ||||
|         v-for="city in cities" | ||||
|         :key="city.name" | ||||
|         :location="city.name" | ||||
|         :value="city.value" | ||||
|         :period="period" | ||||
|       /> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import CityItemVue from "./CityItem.vue"; | ||||
| import CityNameVue from "./CityName.vue"; | ||||
| import CityValueVue from "./CityValue.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "CityData", | ||||
|   components: { | ||||
|     CityItem: CityItemVue, | ||||
|     CityName: CityNameVue, | ||||
|     CityValue: CityValueVue, | ||||
|   }, | ||||
|   props: { | ||||
|     dataSource: { | ||||
|       type: String, | ||||
|       default: null, | ||||
|     }, | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
|   computed: { | ||||
|     headquarterValue() { | ||||
|       let getterName = ""; | ||||
|       switch (this.dataSource) { | ||||
|         case "标准组件产出": | ||||
|           getterName = "stdOutput"; | ||||
|           break; | ||||
|         case "芯片产出": | ||||
|           getterName = "chipOutput"; | ||||
|           break; | ||||
|         case "BIPV产出": | ||||
|           getterName = "bipvOutput"; | ||||
|           break; | ||||
|       } | ||||
|       return ( | ||||
|         "" + (this.$store.getters.copilot.yield[getterName]?.current?.[5] ?? 0) | ||||
|       ); | ||||
|     }, | ||||
|     cities() { | ||||
|       let getterName = ""; | ||||
|       switch (this.dataSource) { | ||||
|         case "标准组件产出": | ||||
|           getterName = "stdOutput"; | ||||
|           break; | ||||
|         case "芯片产出": | ||||
|           getterName = "chipOutput"; | ||||
|           break; | ||||
|         case "BIPV产出": | ||||
|           getterName = "bipvOutput"; | ||||
|           break; | ||||
|       } | ||||
|       const _cities = [ | ||||
|         { name: "瑞昌", value: 0 }, | ||||
|         { name: "邯郸", value: 0 }, | ||||
|         { name: "株洲", value: 0 }, | ||||
|         { name: "佳木斯", value: 0 }, | ||||
|         { name: "成都", value: 0 }, | ||||
|         { name: "凯盛光伏", value: 0 }, | ||||
|         { name: "蚌埠兴科", value: 0 }, | ||||
|       ]; | ||||
|       this.$store.getters.copilot.yield[getterName]?.current?.forEach( | ||||
|         (v, idx) => { | ||||
|           _cities[idx].value = v ?? 0; | ||||
|         } | ||||
|       ); | ||||
|       // 删掉凯盛光伏 | ||||
|       _cities.splice(4, 1); | ||||
|       return _cities; | ||||
|     }, | ||||
|   }, | ||||
|   mounted() {}, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .city-data { | ||||
|   width: 100%; | ||||
|   flex: 1; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   gap: 8px; | ||||
| } | ||||
|  | ||||
| .headquarter { | ||||
|   flex: 1; | ||||
|   display: flex; | ||||
|   gap: 8px; | ||||
| } | ||||
|  | ||||
| .w-1 { | ||||
|   width: 70px; | ||||
| } | ||||
|  | ||||
| .flex { | ||||
|   display: flex; | ||||
| } | ||||
|  | ||||
| .flex-1 { | ||||
|   flex: 1; | ||||
| } | ||||
|  | ||||
| .inner-shadow { | ||||
|   box-shadow: inset 0 0 12px 2px #fff3; | ||||
|   border-radius: 4px; | ||||
| } | ||||
|  | ||||
| .city-item-container { | ||||
|   flex: 3; | ||||
|   display: grid; | ||||
|   grid-template-columns: repeat(2, 1fr); | ||||
|   gap: 8px; | ||||
| } | ||||
| </style> | ||||
| @@ -1,59 +0,0 @@ | ||||
| <!--  | ||||
|     filename: CityItem.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-17 09:55:12 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="city-item inner-shadow"> | ||||
|     <CityName :value="location" /> | ||||
|     <CityValue :value="value + ''" :period="period" /> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import CityNameVue from "./CityName.vue"; | ||||
| import CityValueVue from "./CityValue.vue"; | ||||
| import GradientTextVue from "../gradient/GradientText.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "CityItem", | ||||
|   components: { | ||||
|     GradientTextVue, | ||||
|     CityName: CityNameVue, | ||||
|     CityValue: CityValueVue, | ||||
|   }, | ||||
|   props: { | ||||
|     location: { | ||||
|       type: String, | ||||
|       default: "", | ||||
|     }, | ||||
|     value: { | ||||
|       type: Number, | ||||
|       default: 0, | ||||
|     }, | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
|   computed: {}, | ||||
|   mounted() {}, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .city-item { | ||||
|   display: flex; | ||||
| } | ||||
|  | ||||
| .inner-shadow { | ||||
|   box-shadow: inset 0 0 12px 2px #fff3; | ||||
|   border-radius: 4px; | ||||
| } | ||||
| </style> | ||||
| @@ -1,55 +0,0 @@ | ||||
| <!--  | ||||
|     filename: CityName.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-10 08:59:28 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="city-name"> | ||||
|     <img :src="Icon" alt="city icon" /> | ||||
|     <span>{{ value }}</span> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import Icon from "@/views/copilot/assets/icon.png"; | ||||
|  | ||||
| export default { | ||||
|   name: "CityName", | ||||
|   props: { | ||||
|     value: { | ||||
|       type: String, | ||||
|       default: "", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return { Icon }; | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| .city-name { | ||||
|   min-width: 80px; | ||||
|   margin: auto; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   align-items: center; | ||||
|   justify-content: center; | ||||
|   padding: 0 8px; | ||||
|   flex: 1; | ||||
| } | ||||
|  | ||||
| img { | ||||
|   /* width: 32px; */ | ||||
|   width: 1.543vw; | ||||
| } | ||||
|  | ||||
| span { | ||||
|   /* font-size: 12px;   */ | ||||
|   font-size: 0.77vw; | ||||
|   letter-spacing: 2px; | ||||
|   text-align: center; | ||||
| } | ||||
| </style> | ||||
| @@ -1,127 +0,0 @@ | ||||
| <!--  | ||||
|     filename: CityValue.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-10 08:59:28 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="city-value" :class="[horizontal ? 'horizontal' : '']"> | ||||
|     <span class="hint" :class="[horizontal ? 'horizontal' : '']">{{ | ||||
|       period == "周" ? "本周产出" : "今日产出" | ||||
|     }}</span> | ||||
|     <span class="value" :class="[horizontal ? 'horizontal' : '']">{{ | ||||
|       value | numberFilter | ||||
|     }}</span> | ||||
|     <!-- <GradientTextVue :text="value" :size="horizontal ? 32 : 26" /> --> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import GradientTextVue from "../gradient/GradientText.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "CityValue", | ||||
|   components: { GradientTextVue }, | ||||
|   props: { | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|     value: { | ||||
|       type: String, | ||||
|       default: "", | ||||
|     }, | ||||
|     horizontal: { | ||||
|       type: Boolean, | ||||
|       default: false, | ||||
|     }, | ||||
|   }, | ||||
|   filters: { | ||||
|     numberFilter(value) { | ||||
|       if (value != null && !isNaN(parseInt(value))) { | ||||
|         return parseInt(value).toLocaleString(); | ||||
|       } else { | ||||
|         return value; | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| .city-value { | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   align-items: center; | ||||
|   justify-content: center; | ||||
|   padding: 0 8px; | ||||
|   flex: 2; | ||||
|   position: relative; | ||||
| } | ||||
|  | ||||
| .city-value.horizontal { | ||||
|   flex-direction: row; | ||||
| } | ||||
|  | ||||
| .city-value::after { | ||||
|   content: ""; | ||||
|   position: absolute; | ||||
|   top: 0; | ||||
|   left: 0; | ||||
|   width: 1px; | ||||
|   height: 100%; | ||||
|   background: linear-gradient( | ||||
|     to bottom, | ||||
|     transparent 20%, | ||||
|     #fff 50%, | ||||
|     transparent 80% | ||||
|   ); | ||||
| } | ||||
|  | ||||
| span.hint { | ||||
|   margin: 0 0.77vw; | ||||
|   font-size: 0.77vw; | ||||
|   order: 2; | ||||
|   /* margin: 0 12px; | ||||
|   width: 32px; | ||||
|   font-size: 12px; */ | ||||
| } | ||||
|  | ||||
| span.hint.horizontal { | ||||
|   margin: 0 1.235vw; | ||||
|   width: 1.543vw; | ||||
|   order: 1; | ||||
|   font-size: 0.77vw; | ||||
|   /* margin: 0 12px; | ||||
|   width: 32px; | ||||
|   font-size: 12px; */ | ||||
| } | ||||
|  | ||||
| .value { | ||||
|   color: #4dd2fe; | ||||
|   text-align: center; | ||||
|   font-size: 1.132vw; | ||||
|   order: 1; | ||||
| } | ||||
| .value.horizontal { | ||||
|   text-align: left; | ||||
|   flex: 1; | ||||
|   font-size: 1.543vw; | ||||
|   order: 2; | ||||
| } | ||||
|  | ||||
| svg, | ||||
| .value { | ||||
|   width: 100px; | ||||
|   order: 1; | ||||
| } | ||||
|  | ||||
| .value.horizontal, | ||||
| svg.horizontal { | ||||
|   order: 2; | ||||
| } | ||||
| </style> | ||||
| @@ -1,64 +0,0 @@ | ||||
| <!--  | ||||
|     filename: GradientText.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-24 16:33:25 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <svg :height="size + 8" width="100%"> | ||||
|     <defs> | ||||
|       <linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%"> | ||||
|         <stop offset="0%" style="stop-color: #00fff4; stop-opacity: 1" /> | ||||
|         <stop offset="100%" style="stop-color: #37bdfe; stop-opacity: 1" /> | ||||
|       </linearGradient> | ||||
|     </defs> | ||||
|     <text | ||||
|       x="0" | ||||
|       :y="size" | ||||
|       fill="url(#smoke-text)" | ||||
|       :style="{ | ||||
|         fontSize: `${size}px`, | ||||
|         letterSpacing: spacing || '2px', | ||||
|         fontFamily: 'Calibri, Verdana, sans-serif', | ||||
|       }" | ||||
|     > | ||||
|       {{ text | numberFilter }} | ||||
|     </text> | ||||
|   </svg> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
|   name: "GradientText", | ||||
|   components: {}, | ||||
|   props: { | ||||
|     text: { | ||||
|       type: String, | ||||
|       default: "Test", | ||||
|     }, | ||||
|     spacing: { | ||||
|       type: String, | ||||
|       default: "1px", | ||||
|     }, | ||||
|     size: { | ||||
|       type: Number, | ||||
|       default: 24, | ||||
|     }, | ||||
|   }, | ||||
|   filters: { | ||||
|     numberFilter(value) { | ||||
|       if (value != null && !isNaN(parseInt(value))) { | ||||
|         return parseInt(value).toLocaleString(); | ||||
|       } else { | ||||
|         return value; | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"></style> | ||||
| @@ -1,221 +0,0 @@ | ||||
| <!--  | ||||
|     filename: DoubleRingChart.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-17 11:01:55 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="double-ring-chart"> | ||||
|     <div ref="chart" class="double-ring-chart__container"></div> | ||||
|     <!-- style="{ height: vHeight + 'vh' }" --> | ||||
|     <div class="double-ring-chart__legend"> | ||||
|       <div v-for="item in legendItems" :key="item.label" class="legend-item"> | ||||
|         <span class="legend-item__label">{{ item.label }}</span> | ||||
|         <span class="legend-item__value">{{ item.value | numberFilter }}</span> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import chartMixin from "@/mixins/chart.js"; | ||||
| import fullscreenMixin from "@/mixins/fullscreen.js"; | ||||
| import getOptions from "../../../options/double-ring-chart-options"; | ||||
|  | ||||
| export default { | ||||
|   name: "DoubleRingChart", | ||||
|   mixins: [chartMixin, fullscreenMixin], | ||||
|   props: { | ||||
|     vHeight: { | ||||
|       type: Number, | ||||
|       default: 24, | ||||
|     }, | ||||
|     factoryId: { | ||||
|       type: Number, | ||||
|       required: true, | ||||
|     }, | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|     dataSource: { | ||||
|       type: String, | ||||
|       default: null, | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
|   filters: { | ||||
|     numberFilter(val) { | ||||
|       if (!isNaN(val)) { | ||||
|         return (+val).toLocaleString(); | ||||
|       } | ||||
|       return 0; | ||||
|     }, | ||||
|   }, | ||||
|   computed: { | ||||
|     dataSourceField() { | ||||
|       switch (this.dataSource) { | ||||
|         case "标准组件产出": | ||||
|           return "stdOutput"; | ||||
|         case "芯片产出": | ||||
|           return "chipOutput"; | ||||
|         case "BIPV产出": | ||||
|           return "bipvOutput"; | ||||
|       } | ||||
|     }, | ||||
|     valueTuple() { | ||||
|       // [previousValue, currentValue, sumValue?] | ||||
|       const getter = this.$store.getters.copilot.yield[this.dataSourceField]; | ||||
|       if (this.period === "日" || this.period === "周") { | ||||
|         return [ | ||||
|           getter.previous[this.factoryId], | ||||
|           getter.current[this.factoryId], | ||||
|         ]; | ||||
|       } | ||||
|       // [100, 200, 200] | ||||
|       return [ | ||||
|         getter.previous[this.factoryId], | ||||
|         getter.current[this.factoryId], | ||||
|         getter.target[this.factoryId], | ||||
|       ]; | ||||
|     }, | ||||
|  | ||||
|     options() { | ||||
|       const year = new Date().getFullYear(); | ||||
|       const month = new Date().getMonth() + 1; | ||||
|       const vt = this.valueTuple; | ||||
|       let titleValue = | ||||
|           vt[0] != null && vt[2] != null && vt[2] !== 0 | ||||
|             ? `${vt[1] / vt[2]}%` | ||||
|             : "0%", | ||||
|         subtitle = | ||||
|           this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`; | ||||
|  | ||||
|       return getOptions({ | ||||
|         titleValue, | ||||
|         subtitle, | ||||
|         previousSum: this.valueTuple[0], | ||||
|         currentSum: this.valueTuple[1], | ||||
|         targetSum: this.valueTuple[2], | ||||
|       }); | ||||
|     }, | ||||
|  | ||||
|     legendItems() { | ||||
|       return calculateItems(this.period, this.valueTuple); | ||||
|     }, | ||||
|   }, | ||||
|   watch: { | ||||
|     legendItems() { | ||||
|       this.initOptions(this.options); | ||||
|     }, | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.initOptions(this.options); | ||||
|   }, | ||||
|   methods: { | ||||
|     // fullscreen mixin 需要的回调 | ||||
|     fullscreenCallback(isFullscreen) { | ||||
|       console.log("isFullscreen--->", isFullscreen); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| function calculateItems(period, valueTuple) { | ||||
|   let items = []; | ||||
|   const today = new Date().getDate(); | ||||
|   const month = new Date().getMonth() + 1; | ||||
|   const year = new Date().getFullYear(); | ||||
|   switch (period) { | ||||
|     case "日": | ||||
|       items = [ | ||||
|         { label: `${month}月${today}日累计`, value: valueTuple[1] }, | ||||
|         { label: `去年${month}月${today}日累计`, value: valueTuple[0] }, | ||||
|       ]; | ||||
|       break; | ||||
|     case "周": | ||||
|       items = [ | ||||
|         { label: `本周累计`, value: valueTuple[1] }, | ||||
|         { label: `去年本周累计`, value: valueTuple[0] }, | ||||
|       ]; | ||||
|       break; | ||||
|     case "月": | ||||
|       items = [ | ||||
|         { label: `${month}月累计`, value: valueTuple[1] }, | ||||
|         { label: `去年${month}月累计`, value: valueTuple[0] }, | ||||
|         { label: `${month}月目标`, value: valueTuple[2] }, | ||||
|       ]; | ||||
|       break; | ||||
|     case "年": | ||||
|       items = [ | ||||
|         { label: `${year}年累计`, value: valueTuple[1] }, | ||||
|         { label: `${year - 1}年累计`, value: valueTuple[0] }, | ||||
|         { label: `${year}年目标`, value: valueTuple[2] }, | ||||
|       ]; | ||||
|       break; | ||||
|   } | ||||
|   return items; | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| .double-ring-chart { | ||||
|   height: 100%; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
| } | ||||
|  | ||||
| .double-ring-chart__container { | ||||
|   flex: 1; | ||||
|   height: 0; | ||||
| } | ||||
|  | ||||
| .double-ring-chart__legend { | ||||
|   padding: 12px; | ||||
|   color: #fff; | ||||
|   display: flex; | ||||
|   justify-content: center; | ||||
|   gap: 32px; | ||||
| } | ||||
|  | ||||
| .legend-item { | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   align-items: flex-start; | ||||
| } | ||||
|  | ||||
| .legend-item__label { | ||||
|   position: relative; | ||||
| } | ||||
|  | ||||
| .legend-item__label::before { | ||||
|   content: ""; | ||||
|   position: absolute; | ||||
|   width: 12px; | ||||
|   height: 12px; | ||||
|   background: #ccc; | ||||
|   border-radius: 2px; | ||||
|   top: 6px; | ||||
|   left: -18px; | ||||
| } | ||||
|  | ||||
| .legend-item:nth-child(1) .legend-item__label::before { | ||||
|   background: #12fff5; | ||||
| } | ||||
| .legend-item:nth-child(1) .legend-item__value { | ||||
|   color: #12fff5; | ||||
| } | ||||
|  | ||||
| .legend-item:nth-child(2) .legend-item__label::before { | ||||
|   background: #0f65ff; | ||||
| } | ||||
| .legend-item:nth-child(2) .legend-item__value { | ||||
|   color: #0f65ff; | ||||
| } | ||||
|  | ||||
| .legend-item:nth-child(3) .legend-item__label::before { | ||||
|   background: #003982; | ||||
| } | ||||
| </style> | ||||
| @@ -1,86 +0,0 @@ | ||||
| <!--  | ||||
|     filename: DoubleRingWrapper.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-17 09:55:12 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="double-ring-wrapper"> | ||||
|     <template v-if="period == '月' || period == '年'"> | ||||
|       <copilot-select | ||||
|         @update:active="handleActiveUpdate" | ||||
|         :options="cityOptions" | ||||
|       /> | ||||
|       <div class="flex-1 stretch"> | ||||
|         <DoubleRingChartVue | ||||
|           :data-source="dataSource" | ||||
|           :period="period" | ||||
|           :factoryId="factoryId" | ||||
|         /> | ||||
|       </div> | ||||
|     </template> | ||||
|     <template v-else> | ||||
|       <CityData :data-source="dataSource" :period="period" /> | ||||
|     </template> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import CopilotSelect from "@/views/copilot/components/select.vue"; | ||||
| import DoubleRingChartVue from "./DoubleRingChart.vue"; | ||||
| import CityData from "../city/CityData.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "DoubleRingWrapper", | ||||
|   components: { CopilotSelect, DoubleRingChartVue, CityData }, | ||||
|   props: { | ||||
|     dataSource: { | ||||
|       type: String, | ||||
|       default: null, | ||||
|     }, | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       factoryId: 4, // 默认成都 | ||||
|       cityOptions: [ | ||||
|         "成都", | ||||
|         "邯郸", | ||||
|         "株洲", | ||||
|         "瑞昌", | ||||
|         "佳木斯", | ||||
|         "凯盛光伏", | ||||
|         "蚌埠兴科", | ||||
|       ], | ||||
|     }; | ||||
|   }, | ||||
|   methods: { | ||||
|     handleActiveUpdate(index) { | ||||
|       this.factoryId = index; | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .double-ring-wrapper { | ||||
|   height: 100%; | ||||
|   padding: 12px 24px; | ||||
|   display: flex; | ||||
|   gap: 12px; | ||||
|   flex-direction: column; | ||||
|   align-items: center; | ||||
| } | ||||
|  | ||||
| .flex-1 { | ||||
|   flex: 1; | ||||
| } | ||||
|  | ||||
| .stretch { | ||||
|   align-self: stretch; | ||||
| } | ||||
| </style> | ||||
| @@ -9,67 +9,47 @@ | ||||
|   <div class="yield-copilot"> | ||||
|     <section class="top flex"> | ||||
|       <db-container class="std-yield" title="标准组件产出" icon="std"> | ||||
|         <std-output :period="period" /> | ||||
|         <std-output /> | ||||
|       </db-container> | ||||
|       <db-container class="chip-yield" title="芯片产出" icon="chip2"> | ||||
|         <chip-output :period="period" /> | ||||
|         <chip-output /> | ||||
|       </db-container> | ||||
|       <db-container class="bipv-yield" title="BIPV产出" icon="bipv"> | ||||
|         <bipv-output :period="period" /> | ||||
|         <bipv-output /> | ||||
|       </db-container> | ||||
|     </section> | ||||
|     <section class="bottom flex"> | ||||
|       <db-container class="fto-involve" title="FTO投入"> | ||||
|         <fto-invest :period="period" /> | ||||
|       </db-container> | ||||
|       <db-container class="chip-involve" title="芯片投入" icon="chip"> | ||||
|         <chip-invest :period="period" /> | ||||
|       </db-container> | ||||
|       <db-container class="fto-involve" title="FTO投入"></db-container> | ||||
|       <db-container | ||||
|         class="chip-involve" | ||||
|         title="芯片投入" | ||||
|         icon="chip" | ||||
|       ></db-container> | ||||
|     </section> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import Container from "@/views/copilot/components/Container.vue"; | ||||
| import StdOutput from "./components/StdOutput.vue"; | ||||
| import ChipOutput from "./components/ChipOutput.vue"; | ||||
| import FtoInvest from "./components/FtoInvest.vue"; | ||||
| import BipvOutput from "./components/BipvOutput.vue"; | ||||
| import ChipInvest from "./components/ChipInvest.vue"; | ||||
| import Container from "../components/Container.vue"; | ||||
| import StdOutputVue from "../components/charts/StdOutput.vue"; | ||||
| import ChipOutputVue from "../components/charts/ChipOutput.vue"; | ||||
|  | ||||
| import BipvOutputVue from "../components/charts/BipvOutput.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "YieldCopilot", | ||||
|   components: { | ||||
|     DbContainer: Container, | ||||
|     StdOutput, | ||||
|     ChipOutput, | ||||
|     BipvOutput, | ||||
|     FtoInvest, | ||||
|     ChipInvest, | ||||
|   }, | ||||
|   props: { | ||||
|     period: { | ||||
|       type: String, | ||||
|       default: "日", | ||||
|     }, | ||||
|     StdOutput: StdOutputVue, | ||||
|     ChipOutput: ChipOutputVue, | ||||
|     BipvOutput: BipvOutputVue, | ||||
|   }, | ||||
|   props: {}, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
|   watch: { | ||||
|     period: { | ||||
|       handler(val) { | ||||
|         val && this.fetchData(val); | ||||
|       }, | ||||
|       immediate: true, | ||||
|     }, | ||||
|   }, | ||||
|   methods: { | ||||
|     fetchData(period = "日") { | ||||
|       console.log(`产量驾驶舱,获取${period}数据`); | ||||
|       this.$store.dispatch("copilot/initCopilot", { period, source: "yield" }); | ||||
|     }, | ||||
|   }, | ||||
|   computed: {}, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
|   | ||||
| @@ -1,413 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-15 10:49:13 | ||||
|  * @LastEditTime: 2024-04-17 16:14:51 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)"> | ||||
|     <div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;"> | ||||
|       <search-bar :formConfigs="mainFormConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|         <el-row :gutter="24"> | ||||
|           <el-col :span="12" v-for="item in  dataList" :key="item.id"> | ||||
|             <line-chart :id="item.id"  class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart> | ||||
|           </el-col> | ||||
|           <!-- <el-col :span="12"> | ||||
|             <line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart> | ||||
|           </el-col> --> | ||||
|         </el-row> | ||||
|     </div> | ||||
|     <div class="app-container" style="margin-top: 18px;flex-grow: 1; height: auto; padding: 16px;"> | ||||
|       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|       <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" | ||||
|         :table-data="tableData"> | ||||
|       </base-table> | ||||
|     </div> | ||||
|     <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all" | ||||
|       :type="listQuery.reportType" @refreshDataList="getDataList" /> --> | ||||
|     <!-- <pagination | ||||
| 			:limit.sync="listQuery.pageSize" | ||||
| 			:page.sync="listQuery.pageNo" | ||||
| 			:total="listQuery.total" | ||||
| 			@pagination="getDataList" /> --> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // import { parseTime } from '../../core/mixins/code-filter'; | ||||
| // import { getGlassPage, exportGlasscExcel } from '@/api/report/glass'; | ||||
| // import inputTable from './inputTable.vue'; | ||||
| import lineChart from './lineChart'; | ||||
| import moment from 'moment' | ||||
| // import FileSaver from 'file-saver' | ||||
| // import * as XLSX from 'xlsx' | ||||
| export default { | ||||
|   components: { lineChart }, | ||||
| 	data() { | ||||
|     return { | ||||
|       listQuery: { | ||||
|         pageSize: 10, | ||||
|         pageNo: 1, | ||||
|         factoryId: null, | ||||
|         total: 0, | ||||
|         type: null, | ||||
|         // reportType: 2, | ||||
|         reportTime: [] | ||||
|       }, | ||||
|       dataList: [ | ||||
|         { | ||||
|           id:'first', | ||||
|         }, | ||||
|          { | ||||
|           id: 'second', | ||||
|         }, | ||||
|          { | ||||
|           id: 'third', | ||||
|         }, | ||||
|          { | ||||
|           id: 'fourth', | ||||
|         }, | ||||
|          { | ||||
|           id: 'fifth', | ||||
|         }, | ||||
|          { | ||||
|           id: 'sixth', | ||||
|         }, | ||||
|       ], | ||||
| 			urlOptions: { | ||||
| 				// getDataListURL: getGlassPage, | ||||
| 				// exportURL: exportGlasscExcel | ||||
|       }, | ||||
|       mainFormConfig: [ | ||||
|       	{ | ||||
|           type: 'select', | ||||
|           label: '工单', | ||||
|           placeholder: '请选择工单', | ||||
|           param: 'workOrderId', | ||||
|           selectOptions: [], | ||||
|           clearable: true, | ||||
|         }, | ||||
|         // { | ||||
|         // 	type: 'select', | ||||
|         // 	label: '产线', | ||||
|         // 	placeholder: '请选择产线', | ||||
|         // 	param: 'lineId', | ||||
|         // 	selectOptions: [], | ||||
|         // }, | ||||
|         // 选项切换 | ||||
|         // { | ||||
|         // 	type: 'select', | ||||
|         // 	label: '时间类型', | ||||
|         // 	param: 'dateFilterType', | ||||
|         // 	defaultSelect: 0, | ||||
|         // 	selectOptions: [ | ||||
|         // 		{ id: 0, name: '按时间段' }, | ||||
|         // 		{ id: 1, name: '按日期' }, | ||||
|         // 	], | ||||
|         // 	index: 2, | ||||
|         // 	extraOptions: [ | ||||
|         { | ||||
|           // parent: 'dateFilterType', | ||||
|           // 时间段选择 | ||||
|           type: 'datePicker', | ||||
|           label: '时间段', | ||||
|           // dateType: 'datetimerange', | ||||
|           dateType: 'datetimerange', | ||||
|           format: 'yyyy-MM-dd HH:mm:ss', | ||||
|           valueFormat: 'yyyy-MM-ddTHH:mm:ss', | ||||
|           rangeSeparator: '-', | ||||
|           rangeSeparator: '-', | ||||
|           startPlaceholder: '开始时间', | ||||
|           endPlaceholder: '结束时间', | ||||
|           param: 'recordTime', | ||||
|           clearable:true, | ||||
|         }, | ||||
|         // 		{ | ||||
|         // 			parent: 'dateFilterType', | ||||
|         // 			// 日期选择 | ||||
|         // 			type: 'datePicker', | ||||
|         // 			// label: '日期', | ||||
|         // 			dateType: 'date', | ||||
|         // 			placeholder: '选择日期', | ||||
|         // 			format: 'yyyy-MM-dd', | ||||
|         // 			valueFormat: 'yyyy-MM-dd', | ||||
|         // 			param: 'timeday', | ||||
|         // 		}, | ||||
|         // 	], | ||||
|         // }, | ||||
|         { | ||||
|           type:'button', | ||||
|           btnName: '查询', | ||||
|           name: 'search', | ||||
|           color: 'primary', | ||||
|         }, | ||||
|          { | ||||
|           type:'separate' | ||||
|         }, | ||||
|         // { | ||||
|         //   type: this.$auth.hasPermi( | ||||
|         //     'analysis:equipment:export' | ||||
|         //   ) | ||||
|         //     ? 'separate' | ||||
|         //     : '', | ||||
|         // }, | ||||
|         { | ||||
|           type:'button', | ||||
|           btnName: '导出', | ||||
|           name: 'export', | ||||
|           color: 'warning', | ||||
|         }, | ||||
|       ], | ||||
|       formConfig: [ | ||||
|         { | ||||
|           type: 'title', | ||||
|           label: '成本管理', | ||||
|         }, | ||||
|       ], | ||||
|       timeList: [ | ||||
|         { | ||||
|           value: 'month', | ||||
|           label:'月' | ||||
|         }, | ||||
|         { | ||||
|           value: 'year', | ||||
|           label: '年' | ||||
|         } | ||||
|       ], | ||||
|       factoryList: [ | ||||
|         { | ||||
|           name: '测试', | ||||
|           id:1 | ||||
|         } | ||||
|       ], | ||||
|       tableProps: [ | ||||
|         // { | ||||
|         // 	prop: 'createTime', | ||||
|         // 	label: '添加时间', | ||||
|         // 	fixed: true, | ||||
|         // 	width: 180, | ||||
|         // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | ||||
|         // }, | ||||
|         { | ||||
|           prop: 'userName', | ||||
|           label: '日期', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'nickName', | ||||
|           label: '工厂名称', | ||||
|         } | ||||
|       ], | ||||
|       timeSelect:'month', | ||||
|       startTimeStamp:null, //开始时间 | ||||
|       endTimeStamp:null, //结束时间 | ||||
|       // date:'凯盛玻璃控股成员企业2024生产数据', | ||||
| 			// reportTime: '', | ||||
| 			startTimeStamp: '', | ||||
| 			endTimeStamp: '', | ||||
|       tableData: [ | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas:'111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|           // subcomponent: row | ||||
|         } | ||||
|       ], | ||||
| 			// proLineList: [], | ||||
| 			// all: {} | ||||
| 		}; | ||||
| 	}, | ||||
| 	mounted() { | ||||
|     this.getDict() | ||||
|     // this.getCurrentYearFirst() | ||||
|     // this.getDataList() | ||||
| 	}, | ||||
|   methods: { | ||||
|     buttonClick() { | ||||
|  | ||||
|     }, | ||||
|     // handleTime() { | ||||
|     //   this.$forceUpdate() | ||||
|     //   // this.$nextTick(() => [ | ||||
|  | ||||
|     //   // ]) | ||||
|     // }, | ||||
|     // getCurrentYearFirst() { | ||||
|     //   let date = new Date(); | ||||
|     //   date.setDate(1); | ||||
|     //   date.setMonth(0); | ||||
|     //   this.reportTime = date; | ||||
|     //   this.startTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()); //开始时间 | ||||
|     //   this.endTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()); //结束时间 | ||||
|     //   this.listQuery.reportTime[0] = parseTime(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|     //   this.listQuery.reportTime[1] = parseTime(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 100 | ||||
|     // }, | ||||
|     changeTime(val) { | ||||
|       if (val) { | ||||
|         // let timeStamp = val.getTime(); //标准时间转为时间戳,毫秒级别 | ||||
|         // this.endTimeStamp = this.timeFun(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()); //开始时间 | ||||
|         // this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()); //结束时间 | ||||
|         // this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|         // this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|       } else { | ||||
|         this.listQuery.reportTime = [] | ||||
|       } | ||||
|     }, | ||||
|     async getDict() { | ||||
|       this.$refs.lineChart.initChart() | ||||
| 			// 产线列表 | ||||
| 			// const res = await getCorePLList(); | ||||
| 			// this.proLineList = res.data; | ||||
| 		}, | ||||
|     // 获取数据列表 | ||||
|     multipliedByHundred(str) { | ||||
|       console.log(str); | ||||
|       // console.log(str) | ||||
|       if ( str != 0) { | ||||
|         let floatVal = parseFloat(str); | ||||
|         if (isNaN(floatVal)) { | ||||
|           return 0; | ||||
|         } | ||||
|         floatVal = Math.round(str * 10000) / 100; | ||||
|         let strVal = floatVal.toString(); | ||||
|         let searchVal = strVal.indexOf('.'); | ||||
|         if (searchVal < 0) { | ||||
|           searchVal = strVal.length; | ||||
|           strVal += '.'; | ||||
|         } | ||||
|         while (strVal.length <= searchVal + 2) { | ||||
|           strVal += '0'; | ||||
|         } | ||||
|         return parseFloat(strVal); | ||||
|       } | ||||
|  | ||||
|     }, | ||||
|     async getDataList() { | ||||
|     }, | ||||
|     add0(m) { | ||||
|       return m < 10 ? '0' + m : m | ||||
|     }, | ||||
|     format(shijianchuo) { | ||||
|       //shijianchuo是整数,否则要parseInt转换 | ||||
|       var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss') | ||||
|       // console.log(time) | ||||
|       // var y = time.getFullYear(); | ||||
|       // var m = time.getMonth() + 1; | ||||
|       // var d = time.getDate(); | ||||
|       // var h = time.getHours(); | ||||
|       // var mm = time.getMinutes(); | ||||
|       // var s = time.getSeconds(); | ||||
|       return time | ||||
|     }, | ||||
| 		changeTime(val) { | ||||
|       if (val) { | ||||
|         // console.log(val) | ||||
|         // console.log(val.setHours(7, 0, 0)) | ||||
|         // console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) | ||||
|         // let time = this.format(val.setHours(7, 0, 0)) | ||||
|         this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|         this.startTimeStamp  = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|         // console.log(this.listQuery.reportTime); | ||||
|         this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|         this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|         console.log(this.listQuery.reportTime); | ||||
| 			} else { | ||||
| 					this.listQuery.reportTime = [] | ||||
| 			} | ||||
| 		}, | ||||
|  | ||||
| 		//时间戳转为yy-mm-dd hh:mm:ss | ||||
| 		timeFun(unixtimestamp) { | ||||
| 				var unixtimestamp = new Date(unixtimestamp); | ||||
| 				var year = 1900 + unixtimestamp.getYear(); | ||||
| 				var month = "0" + (unixtimestamp.getMonth() + 1); | ||||
| 				var date = "0" + unixtimestamp.getDate(); | ||||
| 				return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length) | ||||
| 		}, | ||||
| 		buttonClick(val) { | ||||
| 			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; | ||||
| 			switch (val.btnName) { | ||||
| 				case 'search': | ||||
| 					this.listQuery.pageNo = 1; | ||||
| 					this.listQuery.pageSize = 10; | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'export': | ||||
| 					this.handleExport(); | ||||
| 					break; | ||||
| 				default: | ||||
| 					console.log(val); | ||||
| 			} | ||||
| 		}, | ||||
| 		/** 导出按钮操作 */ | ||||
|     handleExport() { | ||||
|       // 处理查询参数 | ||||
|       // var xlsxParam = { raw: true }; | ||||
|       // /* 从表生成工作簿对象 */ | ||||
|       // import('xlsx').then(excel => { | ||||
|       //   var wb = excel.utils.table_to_book( | ||||
|       //     document.querySelector("#exportTable"), | ||||
|       //     xlsxParam | ||||
|       //   ); | ||||
|       //   /* 获取二进制字符串作为输出 */ | ||||
|       //   var wbout = excel.write(wb, { | ||||
|       //     bookType: "xlsx", | ||||
|       //     bookSST: true, | ||||
|       //     type: "array", | ||||
|       //   }); | ||||
|       //   try { | ||||
|       //     FileSaver.saveAs( | ||||
|       //       //Blob 对象表示一个不可变、原始数据的类文件对象。 | ||||
|       //       //Blob 表示的不一定是JavaScript原生格式的数据。 | ||||
|       //       //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 | ||||
|       //       //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。 | ||||
|       //       new Blob([wbout], { type: "application/octet-stream" }), | ||||
|       //       //设置导出文件名称 | ||||
|       //       "许昌安彩日原片生产汇总.xlsx" | ||||
|       //     ); | ||||
|       //   } catch (e) { | ||||
|       //     if (typeof console !== "undefined") console.log(e, wbout); | ||||
|       //   } | ||||
|       //   return wbout; | ||||
|       //   //do something...... | ||||
|       // }) | ||||
|  | ||||
|     }, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| /* .blueTip { */ | ||||
| 	/* padding-bottom: 10px; */ | ||||
| /* } */ | ||||
| /* .blueTi */ | ||||
| .blueTip::before{ | ||||
|   display: inline-block; | ||||
|   content: ''; | ||||
|   width: 4px; | ||||
|   height: 18px; | ||||
|   background: #0B58FF; | ||||
|   border-radius: 1px; | ||||
|   margin-right: 8PX; | ||||
|   margin-top: 8px; | ||||
| } | ||||
| .app-container { | ||||
|   margin: 0 16px 0; | ||||
|   background-color: #fff; | ||||
|   border-radius: 4px; | ||||
|   padding: 16px 16px 0; | ||||
|   height: calc(100vh - 134px); | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
| @@ -1,233 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2022-01-21 14:43:06 | ||||
|  * @LastEditors: zhp | ||||
|  * @LastEditTime: 2024-04-16 14:16:17 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <!-- <div> --> | ||||
|     <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> --> | ||||
|     <div :id="id" class="costChart" :style="{  height: height, width: width }" /> | ||||
|   <!-- </div> --> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import * as echarts from 'echarts' | ||||
| import 'echarts/theme/macarons' // echarts theme | ||||
| // import resize from './mixins/resize' | ||||
|  | ||||
| export default { | ||||
|   name: 'OverviewBar', | ||||
|   // mixins: [resize], | ||||
|   props: { | ||||
|     id: { | ||||
|       type: String, | ||||
|       default: 'OverviewLine' | ||||
|     }, | ||||
|     // className: { | ||||
|     //   type: String, | ||||
|     //   default: 'epChart' | ||||
|     // }, | ||||
|     width: { | ||||
|       type: String, | ||||
|       default: '100%' | ||||
|     }, | ||||
|     beilv: { | ||||
|       type: Number, | ||||
|       default: 1 | ||||
|     }, | ||||
|     height: { | ||||
|       type: String, | ||||
|       default: '35vh' | ||||
|     }, | ||||
|     legendPosition: { | ||||
|       type: String, | ||||
|       default: 'center' | ||||
|     }, | ||||
|     showLegend: { | ||||
|       type: Boolean, | ||||
|       default: false | ||||
|     }, | ||||
|     legendData: { | ||||
|       type: Array, | ||||
|       default: () => [] | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       chartData: [ | ||||
|         { | ||||
|           name: '产品1', | ||||
|           num: 1112, | ||||
|           yield: 0.97, | ||||
|         }, | ||||
|         { | ||||
|           name: '产品2', | ||||
|           num: 1112, | ||||
|           yield: 0.97, | ||||
|         }, | ||||
|         { | ||||
|           name: '产品3', | ||||
|           num: 1112, | ||||
|           yield: 0.97, | ||||
|         }, | ||||
|         { | ||||
|           name: '产品4', | ||||
|           num: 1112, | ||||
|           yield: 0.97, | ||||
|         }, | ||||
|         { | ||||
|           name: '产品5', | ||||
|           num: 1112, | ||||
|           yield: 0.97, | ||||
|         } | ||||
|       ], | ||||
|       chart: null, | ||||
|       colors: ['rgba(113, 99, 254, 1)', 'rgba(39, 139, 255, 1)', 'rgba(100, 189, 255, 1)', 'rgba(143, 240, 170, 1)', 'rgba(246, 189, 22, 0.85)'], | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.initChart() | ||||
|   }, | ||||
|   beforeDestroy() { | ||||
|     if (!this.chart) { | ||||
|       return | ||||
|     } | ||||
|     this.chart.dispose() | ||||
|     this.chart = null | ||||
|   }, | ||||
|   methods: { | ||||
|     getEqualNewlineString(params, length) { | ||||
|       let text = '' | ||||
|       let count = Math.ceil(params.length / length) // 向上取整数 | ||||
|       // 一行展示length个 | ||||
|       if (count > 1) { | ||||
|         for (let z = 1; z <= count; z++) { | ||||
|           text += params.substr((z - 1) * length, length) | ||||
|           if (z < count) { | ||||
|             text += '\n' | ||||
|           } | ||||
|         } | ||||
|       } else { | ||||
|         text += params.substr(0, length) | ||||
|       } | ||||
|       return text | ||||
|     }, | ||||
|     initChart() { | ||||
|       console.log(1111) | ||||
|       let num = 0 | ||||
|       this.chartData && this.chartData.length > 0 && this.chartData.map(i => { | ||||
|         num += i.num | ||||
|       }) | ||||
|       if ( | ||||
|         this.chart !== null && | ||||
|         this.chart !== '' && | ||||
|         this.chart !== undefined | ||||
|       ) { | ||||
|         this.chart.dispose() | ||||
|       } | ||||
|       this.chart = echarts.init(document.getElementById(this.id)) | ||||
|       this.chart.setOption({ | ||||
|         color: this.colors, | ||||
|         title: { | ||||
|           text: num, | ||||
|           subtext: '总数/片', | ||||
|           top: '32%', | ||||
|           left: '49%', | ||||
|           textAlign: 'center', | ||||
|           textStyle: { | ||||
|             fontSize: 32, | ||||
|             color: 'rgba(140, 140, 140, 1)', | ||||
|           }, | ||||
|           subtextStyle: { | ||||
|             fontSize: 20, | ||||
|             color: '#fff00', | ||||
|           }, | ||||
|         }, | ||||
|         legend: { | ||||
|           bottom: '2%', | ||||
|           left: 'center', | ||||
|           itemWidth: 12, | ||||
|           itemHeight: 12, | ||||
|           icon: 'roundRect', | ||||
|           textStyle: { | ||||
|             color: 'rgba(140, 140, 140, 1)' | ||||
|           }, | ||||
|           data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({ | ||||
|             name: item.name, | ||||
|             itemStyle: { | ||||
|               color: this.colors[index % 4] | ||||
|             } | ||||
|           })) | ||||
|         }, | ||||
|         series: [{ | ||||
|           name: 'ISRA缺陷检测', | ||||
|           type: 'pie', | ||||
|           // position:outerHeight, | ||||
|           center: ['50%', '40%'], | ||||
|           radius: ['45%', '70%'], | ||||
|           avoidLabelOverlap: true, | ||||
|           label: { | ||||
|             show: true, | ||||
|             normal: { | ||||
|               alignTo: 'labelLine', | ||||
|               margin: 10, | ||||
|               edgeDistance: 10, | ||||
|               lineHeight: 16, | ||||
|               // 各分区的提示内容 | ||||
|               // params: 即下面传入的data数组,通过自定义函数,展示你想要的内容和格式 | ||||
|               formatter: function (params) { | ||||
|                 console.log(params); | ||||
|                 return; | ||||
|               }, | ||||
|               formatter: (params) => { | ||||
|                 //调用自定义显示格式 | ||||
|                 return this.getEqualNewlineString(params.value + " | " + params.percent.toFixed(0) + "%" + "\n" + params.name, 10); | ||||
|               }, | ||||
|               textStyle: {            // 提示文字的样式 | ||||
|                 // color: 'rgba(0, 0, 0, 0.65)', | ||||
|                 fontSize: 18 | ||||
|               } | ||||
|             } | ||||
|           }, | ||||
|           labelLine: { | ||||
|             show: true, | ||||
|             length: 25, | ||||
|             length2: 100, | ||||
|           }, | ||||
|           data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({ | ||||
|             name: item.name, | ||||
|             value: item.num, | ||||
|             label: { | ||||
|               color: this.colors[index % 4] | ||||
|             }, | ||||
|             itemStyle: { | ||||
|               // color: { | ||||
|               //   type: 'linear', | ||||
|               //   x: 0, | ||||
|               //   y: 0, | ||||
|               //   x2: 0, | ||||
|               //   y2: 1, | ||||
|               //   global: false, | ||||
|               //   colorStops: [ | ||||
|               //     { offset: 0, color: this.colors[index % 4] }, | ||||
|               //     { offset: 1, color: this.colors[index % 4] + '33' } | ||||
|               //   ] | ||||
|               // } | ||||
|             } | ||||
|           })) | ||||
|         }], | ||||
|         tooltip: { | ||||
|           trigger: 'item', | ||||
|           className: "isra-chart-tooltip" | ||||
|         }, | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
|  | ||||
| </style> | ||||
| @@ -12,7 +12,7 @@ | ||||
|     <h2>{{ info.companyName }}</h2> | ||||
|     <ul> | ||||
|       <li v-for="item in info.items" :key="item.label"> | ||||
|         {{ item.label }} {{ item.value | numberFilter }} | ||||
|         {{ item.label }} {{ item.value | currency }} | ||||
|       </li> | ||||
|     </ul> | ||||
|   </div> | ||||
| @@ -35,12 +35,8 @@ export default { | ||||
|     }, | ||||
|   }, | ||||
|   filters: { | ||||
|     numberFilter(value) { | ||||
|       if (value != null && !isNaN(parseInt(value))) { | ||||
|         return parseInt(value).toLocaleString(); | ||||
|       } else { | ||||
|         return '-'; | ||||
|       } | ||||
|     currency(value) { | ||||
|       return value.toLocaleString(); | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|   | ||||
| @@ -1,564 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-15 10:49:13 | ||||
|  * @LastEditTime: 2024-04-17 16:14:31 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)"> | ||||
|     <div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;"> | ||||
|       <div style="background: #fff; height: 70px; width:100%"> | ||||
|         <ButtonNav :menus="['水', '电', '气']" :button-mode="true" @change="currentMenu = $event"> | ||||
|         </ButtonNav> | ||||
|       </div> | ||||
|       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> | ||||
|         <el-form-item label="时间维度" prop="reportTime"> | ||||
|           <el-select clearable v-model="timeSelect" placeholder="请选择"> | ||||
|             <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="timeSelect === 'day'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至" | ||||
|             start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDayTime" end-placeholder="结束日期"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="timeSelect === 'week'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime[0]" type="week" format="yyyy 第 WW 周" placeholder="选择周" | ||||
|             style="width: 180px" @change="onValueChange"> | ||||
|           </el-date-picker> | ||||
|           至 | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime[1]" type="week" format="yyyy 第 WW 周" placeholder="选择周" | ||||
|             style="width: 180px" @change="onValueChange"> | ||||
|           </el-date-picker> | ||||
|           <span v-if="listQuery.reportTime[0] && listQuery.reportTime[1]" style="margin-left: 10px"> | ||||
|             {{ date1 }} 至 {{ date2 }},共 {{ weekNum }} 周 | ||||
|           </span> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="timeSelect === 'month'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime" type="monthrange" range-separator="至" | ||||
|             start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="timeSelect === 'year'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime[0]" value-format="yyyy" type="year" | ||||
|             placeholder="开始时间"> | ||||
|           </el-date-picker> | ||||
|           ~ | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime[1]" value-format="yyyy" type="year" placeholder="结束时间" | ||||
|             @change="getYear"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="工厂名称" prop="factoryId"> | ||||
|           <el-select clearable v-model="listQuery.factoryId" placeholder="请选择工厂名称"> | ||||
|             <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <!-- <el-form-item label="玻璃类型" prop="type"> | ||||
|           <el-select v-model="listQuery.type" placeholder="请选择玻璃类型"> | ||||
|             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> --> | ||||
|         <el-form-item> | ||||
|           <el-button type="primary" size="small" @click="getDataList">查询</el-button> | ||||
|           <el-button type="primary" size="small" plain @click="handleExport">导出</el-button> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|       <!-- <el-row :gutter="24"> --> | ||||
|       <!-- <el-col :span="12" v-for="item in  dataList" :key="item.id"> --> | ||||
|       <line-chart class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart> | ||||
|       <!-- </el-col> --> | ||||
|       <!-- <el-col :span="12"> | ||||
|             <line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart> | ||||
|           </el-col> --> | ||||
|       </el-row> | ||||
|     </div> | ||||
|     <div class="app-container" style="margin-top: 18px;flex-grow: 1; height: auto; padding: 16px;"> | ||||
|       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|       <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" | ||||
|         :table-data="tableData"> | ||||
|       </base-table> | ||||
|     </div> | ||||
|     <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all" | ||||
|       :type="listQuery.reportType" @refreshDataList="getDataList" /> --> | ||||
|     <!-- <pagination | ||||
| 			:limit.sync="listQuery.pageSize" | ||||
| 			:page.sync="listQuery.pageNo" | ||||
| 			:total="listQuery.total" | ||||
| 			@pagination="getDataList" /> --> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // import { parseTime } from '../../core/mixins/code-filter'; | ||||
| // import { getGlassPage, exportGlasscExcel } from '@/api/report/glass'; | ||||
| // import inputTable from './inputTable.vue'; | ||||
| import lineChart from './lineChart'; | ||||
| import moment from 'moment' | ||||
| import ButtonNav from '@/components/ButtonNav' | ||||
| // import FileSaver from 'file-saver' | ||||
| // import * as XLSX from 'xlsx' | ||||
| export default { | ||||
|   components: { lineChart, ButtonNav }, | ||||
| 	data() { | ||||
|     return { | ||||
|       listQuery: { | ||||
|         pageSize: 10, | ||||
|         pageNo: 1, | ||||
|         factoryId: null, | ||||
|         total: 0, | ||||
|         type: null, | ||||
|         // reportType: 2, | ||||
|         reportTime: [] | ||||
|       }, | ||||
|       date1: undefined, | ||||
|       date2: undefined, | ||||
|       // weekNum: undefined, | ||||
|       dataList: [ | ||||
|         { | ||||
|           id:'first', | ||||
|         }, | ||||
|          { | ||||
|           id: 'second', | ||||
|         }, | ||||
|          { | ||||
|           id: 'third', | ||||
|         }, | ||||
|          { | ||||
|           id: 'fourth', | ||||
|         }, | ||||
|          { | ||||
|           id: 'fifth', | ||||
|         }, | ||||
|          { | ||||
|           id: 'sixth', | ||||
|         }, | ||||
|       ], | ||||
| 			urlOptions: { | ||||
| 				// getDataListURL: getGlassPage, | ||||
| 				// exportURL: exportGlasscExcel | ||||
|       }, | ||||
|       mainFormConfig: [ | ||||
|       	{ | ||||
|           type: 'select', | ||||
|           label: '工单', | ||||
|           placeholder: '请选择工单', | ||||
|           param: 'workOrderId', | ||||
|           selectOptions: [], | ||||
|         }, | ||||
|         // { | ||||
|         // 	type: 'select', | ||||
|         // 	label: '产线', | ||||
|         // 	placeholder: '请选择产线', | ||||
|         // 	param: 'lineId', | ||||
|         // 	selectOptions: [], | ||||
|         // }, | ||||
|         // 选项切换 | ||||
|         // { | ||||
|         // 	type: 'select', | ||||
|         // 	label: '时间类型', | ||||
|         // 	param: 'dateFilterType', | ||||
|         // 	defaultSelect: 0, | ||||
|         // 	selectOptions: [ | ||||
|         // 		{ id: 0, name: '按时间段' }, | ||||
|         // 		{ id: 1, name: '按日期' }, | ||||
|         // 	], | ||||
|         // 	index: 2, | ||||
|         // 	extraOptions: [ | ||||
|         { | ||||
|           // parent: 'dateFilterType', | ||||
|           // 时间段选择 | ||||
|           type: 'datePicker', | ||||
|           label: '时间段', | ||||
|           // dateType: 'datetimerange', | ||||
|           dateType: 'datetimerange', | ||||
|           format: 'yyyy-MM-dd HH:mm:ss', | ||||
|           valueFormat: 'yyyy-MM-ddTHH:mm:ss', | ||||
|           rangeSeparator: '-', | ||||
|           rangeSeparator: '-', | ||||
|           startPlaceholder: '开始时间', | ||||
|           endPlaceholder: '结束时间', | ||||
|           param: 'recordTime', | ||||
|         }, | ||||
|         // 		{ | ||||
|         // 			parent: 'dateFilterType', | ||||
|         // 			// 日期选择 | ||||
|         // 			type: 'datePicker', | ||||
|         // 			// label: '日期', | ||||
|         // 			dateType: 'date', | ||||
|         // 			placeholder: '选择日期', | ||||
|         // 			format: 'yyyy-MM-dd', | ||||
|         // 			valueFormat: 'yyyy-MM-dd', | ||||
|         // 			param: 'timeday', | ||||
|         // 		}, | ||||
|         // 	], | ||||
|         // }, | ||||
|         { | ||||
|           type:'button', | ||||
|           btnName: '查询', | ||||
|           name: 'search', | ||||
|           color: 'primary', | ||||
|         }, | ||||
|          { | ||||
|           type:'separate' | ||||
|         }, | ||||
|         // { | ||||
|         //   type: this.$auth.hasPermi( | ||||
|         //     'analysis:equipment:export' | ||||
|         //   ) | ||||
|         //     ? 'separate' | ||||
|         //     : '', | ||||
|         // }, | ||||
|         { | ||||
|           type:'button', | ||||
|           btnName: '导出', | ||||
|           name: 'export', | ||||
|           color: 'warning', | ||||
|         }, | ||||
|       ], | ||||
|       formConfig: [ | ||||
|         { | ||||
|           type: 'title', | ||||
|           label: '成本管理', | ||||
|         }, | ||||
|       ], | ||||
|       timeList: [ | ||||
|         { | ||||
|           value: 'day', | ||||
|           label: '日' | ||||
|         }, | ||||
|         { | ||||
|           value: 'week', | ||||
|           label: '周' | ||||
|         }, | ||||
|         { | ||||
|           value: 'month', | ||||
|           label:'月' | ||||
|         }, | ||||
|         { | ||||
|           value: 'year', | ||||
|           label: '年' | ||||
|         } | ||||
|       ], | ||||
|       factoryList: [ | ||||
|         { | ||||
|           name: '测试', | ||||
|           id:1 | ||||
|         } | ||||
|       ], | ||||
|       tableProps: [ | ||||
|         // { | ||||
|         // 	prop: 'createTime', | ||||
|         // 	label: '添加时间', | ||||
|         // 	fixed: true, | ||||
|         // 	width: 180, | ||||
|         // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | ||||
|         // }, | ||||
|         { | ||||
|           prop: 'userName', | ||||
|           label: '日期', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'nickName', | ||||
|           label: '工厂名称', | ||||
|         } | ||||
|       ], | ||||
|       timeSelect:'day', | ||||
|       startTimeStamp:null, //开始时间 | ||||
|       endTimeStamp:null, //结束时间 | ||||
|       // date:'凯盛玻璃控股成员企业2024生产数据', | ||||
| 			// reportTime: '', | ||||
| 			startTimeStamp: '', | ||||
| 			endTimeStamp: '', | ||||
|       tableData: [ | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas:'111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|           // subcomponent: row | ||||
|         } | ||||
|       ], | ||||
| 			// proLineList: [], | ||||
| 			// all: {} | ||||
| 		}; | ||||
|   }, | ||||
|   computed: { | ||||
|     weekNum() { | ||||
|       return Math.round((this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 60 * 60 * 1000 * 7)) + 1 | ||||
|     }, | ||||
|   }, | ||||
| 	mounted() { | ||||
|     this.getDict() | ||||
|     // this.getCurrentYearFirst() | ||||
|     // this.getDataList() | ||||
| 	}, | ||||
|   methods: { | ||||
|     buttonClick() { | ||||
|  | ||||
|     }, | ||||
|     getYear(e) { | ||||
|       if (this.listQuery.reportTime[0] && e - this.listQuery.reportTime[0] > 10) { | ||||
|         this.$message({ | ||||
|           message: '年份起止时间不能超过十年', | ||||
|           type: 'warning' | ||||
|         }); | ||||
|         // console.log(); | ||||
|       } | ||||
|       // console.log(e); | ||||
|     }, | ||||
|     onValueChange(picker, k) { // 选中近k周后触发的操作 | ||||
|       if (this.listQuery.reportTime[0] && this.listQuery.reportTime[1]) { | ||||
|         console.log(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000) | ||||
|         this.date1 = moment(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') | ||||
|         // this.onValueChange()   // 这里为我们希望value改变时触发的方法 | ||||
|         this.date2 = moment(this.listQuery.reportTime[1].getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') | ||||
|         const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000); if (numDays > 168) { | ||||
|           console.log(numDays) | ||||
|           this.$message({ | ||||
|             message: '周范围不能超过24周', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           // this.onValueChange() | ||||
|         } | ||||
|     } | ||||
|     }, | ||||
|     changeDayTime() { | ||||
|       if (this.listQuery.reportTime) { | ||||
|         // this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         // this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         console.log(this.listQuery.reportTime[1]) | ||||
|         const numDays = (new Date(this.listQuery.reportTime[1]).getTime() - new Date(this.listQuery.reportTime[0]).getTime()) / (24 * 3600 * 1000); if (numDays > 30) { | ||||
|           this.$message({ | ||||
|             message: '时间范围不能超过30天', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|         } | ||||
|       } else { | ||||
|       } | ||||
|     }, | ||||
|     changeTime(value) { | ||||
|       if (this.listQuery.reportTime) { | ||||
|         const timeStamp = this.listQuery.reportTime[1].getMonth(); //标准时间转为时间戳,毫秒级别 | ||||
|         const fullyear = this.listQuery.reportTime[1].getFullYear() | ||||
|         let days = 0 | ||||
|         switch (timeStamp) { | ||||
|           case 0: | ||||
|           case 2: | ||||
|           case 4: | ||||
|           case 6: | ||||
|           case 7: | ||||
|           case 9: | ||||
|           case 11: | ||||
|             days = 31 | ||||
|             break | ||||
|           case 3: | ||||
|           case 4: | ||||
|           case 8: | ||||
|           case 10: | ||||
|             days = 30 | ||||
|             break | ||||
|           case 1: | ||||
|             if ((fullyear % 400 === 0) || (fullyear % 4 === 0 && fullyear % 100 !== 0)) { | ||||
|               days = 29 | ||||
|             } else { | ||||
|               days = 28 | ||||
|             } | ||||
|             break | ||||
|         } | ||||
|         let startTime = moment(new Date(this.listQuery.reportTime[0]).setDate(1, 0, 0, 0)).format('YYYY-MM-DD HH:mm:ss') | ||||
|         // this.startTimeStamp = this.timeFun(new Date(fullyear, timeStamp, 1, 7, 0, 1).getTime()); //开始时间 | ||||
|         let endTime = this.timeFun(new Date(fullyear, timeStamp, days).getTime()) + ' 23:59:59'; //结束时间 | ||||
|         // console.log(endTimeStamp); | ||||
|         // let endTime = moment(this.listQuery.reportTime[1]).month(monthNum - 1).date(1).endOf("month").format("YYYY-MM-DD"); | ||||
|         // console.log(endTime); | ||||
|         // console.log(moment(new Date(this.listQuery.reportTime[1]).setDate(31, 23, 59, 59)).format('YYYY-MM-DD HH:mm:ss')) | ||||
|         // console.log(moment(new Date(this.listQuery.reportTime[1]).getTime()).format('YYYY-MM-DD HH:mm:ss')) | ||||
|  | ||||
|         // this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         // this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         const numDays = (new Date(endTime).getTime() - new Date(startTime).getTime()) / (24 * 3600 * 1000); if (numDays > 730) { | ||||
|           this.$message({ | ||||
|             message: '时间范围不能超过24个月', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|         } else { | ||||
|           this.listQuery.reportTime[0] = startTime | ||||
|           this.listQuery.reportTime[1] = endTime | ||||
|         } | ||||
|       } else { | ||||
|         console.log(this.listQuery.reportTime[0]) | ||||
|       } | ||||
|     }, | ||||
|     // handleTime() { | ||||
|     //   this.$forceUpdate() | ||||
|     //   // this.$nextTick(() => [ | ||||
|  | ||||
|     //   // ]) | ||||
|     // }, | ||||
|     // getCurrentYearFirst() { | ||||
|     //   let date = new Date(); | ||||
|     //   date.setDate(1); | ||||
|     //   date.setMonth(0); | ||||
|     //   this.reportTime = date; | ||||
|     //   this.startTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()); //开始时间 | ||||
|     //   this.endTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()); //结束时间 | ||||
|     //   this.listQuery.reportTime[0] = parseTime(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|     //   this.listQuery.reportTime[1] = parseTime(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 100 | ||||
|     // }, | ||||
|     // changeTime(val) { | ||||
|     //   if (val) { | ||||
|     //     // let timeStamp = val.getTime(); //标准时间转为时间戳,毫秒级别 | ||||
|     //     // this.endTimeStamp = this.timeFun(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()); //开始时间 | ||||
|     //     // this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()); //结束时间 | ||||
|     //     // this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|     //     // this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|     //   } else { | ||||
|     //     this.listQuery.reportTime = [] | ||||
|     //   } | ||||
|     // }, | ||||
|     async getDict() { | ||||
|       this.$refs.lineChart.initChart() | ||||
| 			// 产线列表 | ||||
| 			// const res = await getCorePLList(); | ||||
| 			// this.proLineList = res.data; | ||||
| 		}, | ||||
|     // 获取数据列表 | ||||
|     multipliedByHundred(str) { | ||||
|       console.log(str); | ||||
|       // console.log(str) | ||||
|       if ( str != 0) { | ||||
|         let floatVal = parseFloat(str); | ||||
|         if (isNaN(floatVal)) { | ||||
|           return 0; | ||||
|         } | ||||
|         floatVal = Math.round(str * 10000) / 100; | ||||
|         let strVal = floatVal.toString(); | ||||
|         let searchVal = strVal.indexOf('.'); | ||||
|         if (searchVal < 0) { | ||||
|           searchVal = strVal.length; | ||||
|           strVal += '.'; | ||||
|         } | ||||
|         while (strVal.length <= searchVal + 2) { | ||||
|           strVal += '0'; | ||||
|         } | ||||
|         return parseFloat(strVal); | ||||
|       } | ||||
|  | ||||
|     }, | ||||
|     async getDataList() { | ||||
|     }, | ||||
|     add0(m) { | ||||
|       return m < 10 ? '0' + m : m | ||||
|     }, | ||||
|     format(shijianchuo) { | ||||
|       //shijianchuo是整数,否则要parseInt转换 | ||||
|       var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss') | ||||
|       // console.log(time) | ||||
|       // var y = time.getFullYear(); | ||||
|       // var m = time.getMonth() + 1; | ||||
|       // var d = time.getDate(); | ||||
|       // var h = time.getHours(); | ||||
|       // var mm = time.getMinutes(); | ||||
|       // var s = time.getSeconds(); | ||||
|       return time | ||||
|     }, | ||||
| 		//时间戳转为yy-mm-dd hh:mm:ss | ||||
| 		timeFun(unixtimestamp) { | ||||
| 				var unixtimestamp = new Date(unixtimestamp); | ||||
| 				var year = 1900 + unixtimestamp.getYear(); | ||||
| 				var month = "0" + (unixtimestamp.getMonth() + 1); | ||||
| 				var date = "0" + unixtimestamp.getDate(); | ||||
| 				return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length) | ||||
| 		}, | ||||
| 		buttonClick(val) { | ||||
| 			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; | ||||
| 			switch (val.btnName) { | ||||
| 				case 'search': | ||||
| 					this.listQuery.pageNo = 1; | ||||
| 					this.listQuery.pageSize = 10; | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'export': | ||||
| 					this.handleExport(); | ||||
| 					break; | ||||
| 				default: | ||||
| 					console.log(val); | ||||
| 			} | ||||
| 		}, | ||||
| 		/** 导出按钮操作 */ | ||||
|     handleExport() { | ||||
|       // 处理查询参数 | ||||
|       // var xlsxParam = { raw: true }; | ||||
|       // /* 从表生成工作簿对象 */ | ||||
|       // import('xlsx').then(excel => { | ||||
|       //   var wb = excel.utils.table_to_book( | ||||
|       //     document.querySelector("#exportTable"), | ||||
|       //     xlsxParam | ||||
|       //   ); | ||||
|       //   /* 获取二进制字符串作为输出 */ | ||||
|       //   var wbout = excel.write(wb, { | ||||
|       //     bookType: "xlsx", | ||||
|       //     bookSST: true, | ||||
|       //     type: "array", | ||||
|       //   }); | ||||
|       //   try { | ||||
|       //     FileSaver.saveAs( | ||||
|       //       //Blob 对象表示一个不可变、原始数据的类文件对象。 | ||||
|       //       //Blob 表示的不一定是JavaScript原生格式的数据。 | ||||
|       //       //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 | ||||
|       //       //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。 | ||||
|       //       new Blob([wbout], { type: "application/octet-stream" }), | ||||
|       //       //设置导出文件名称 | ||||
|       //       "许昌安彩日原片生产汇总.xlsx" | ||||
|       //     ); | ||||
|       //   } catch (e) { | ||||
|       //     if (typeof console !== "undefined") console.log(e, wbout); | ||||
|       //   } | ||||
|       //   return wbout; | ||||
|       //   //do something...... | ||||
|       // }) | ||||
|  | ||||
|     }, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| /* .blueTip { */ | ||||
| 	/* padding-bottom: 10px; */ | ||||
| /* } */ | ||||
| /* .blueTi */ | ||||
| .blueTip::before{ | ||||
|   display: inline-block; | ||||
|   content: ''; | ||||
|   width: 4px; | ||||
|   height: 18px; | ||||
|   background: #0B58FF; | ||||
|   border-radius: 1px; | ||||
|   margin-right: 8PX; | ||||
|   margin-top: 8px; | ||||
| } | ||||
| .app-container { | ||||
|   margin: 0 16px 0; | ||||
|   background-color: #fff; | ||||
|   border-radius: 4px; | ||||
|   padding: 16px 16px 0; | ||||
|   height: calc(100vh - 134px); | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
| @@ -1,170 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2022-01-21 14:43:06 | ||||
|  * @LastEditors: zhp | ||||
|  * @LastEditTime: 2024-04-17 10:03:39 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <!-- <div> --> | ||||
|   <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> --> | ||||
|   <div :id="id" :class="className" :style="{ height: height, width: width }" /> | ||||
|   <!-- </div> --> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import * as echarts from 'echarts' | ||||
| import 'echarts/theme/macarons' // echarts theme | ||||
| import resize from '@/mixins/resize' | ||||
| export default { | ||||
|   name: 'OverviewBar', | ||||
|   mixins: [resize], | ||||
|   props: { | ||||
|     id: { | ||||
|       type: String, | ||||
|       default: 'reportChart' | ||||
|     }, | ||||
|     className: { | ||||
|       type: String, | ||||
|       default: 'reportChart' | ||||
|     }, | ||||
|     width: { | ||||
|       type: String, | ||||
|       default: '100%' | ||||
|     }, | ||||
|     beilv: { | ||||
|       type: Number, | ||||
|       default: 1 | ||||
|     }, | ||||
|     height: { | ||||
|       type: String, | ||||
|       default: '30vh' | ||||
|     }, | ||||
|     legendPosition: { | ||||
|       type: String, | ||||
|       default: 'center' | ||||
|     }, | ||||
|     showLegend: { | ||||
|       type: Boolean, | ||||
|       default: false | ||||
|     }, | ||||
|     legendData: { | ||||
|       type: Array, | ||||
|       default: () => [] | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       chart: null | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.$nextTick(() => { | ||||
|       this.initChart() | ||||
|     }) | ||||
|   }, | ||||
|   beforeDestroy() { | ||||
|     if (!this.chart) { | ||||
|       return | ||||
|     } | ||||
|     this.chart.dispose() | ||||
|     this.chart = null | ||||
|   }, | ||||
|   methods: { | ||||
|     initChart() { | ||||
|       console.log(1111) | ||||
|       this.chart = echarts.init(document.getElementById(this.id)) | ||||
|       console.log(this.$parent); | ||||
|       this.chart.setOption({ | ||||
|         title: { | ||||
|           text: '', | ||||
|           // subtext: 'Fake Data' | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: 'axis' | ||||
|         }, | ||||
|         grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true }, | ||||
|         legend: { | ||||
|           data: ['工厂1', '工厂2'], | ||||
|           right: '90px', | ||||
|           top: '0%', | ||||
|           icon: 'rect', | ||||
|           itemWidth: 10, | ||||
|           itemHeight: 10, | ||||
|           itemGap: 40, | ||||
|         }, | ||||
|         // toolbox: { | ||||
|         //   show: true, | ||||
|         //   feature: { | ||||
|         //     dataView: { show: true, readOnly: false }, | ||||
|         //     magicType: { show: true, type: ['line', 'bar'] }, | ||||
|         //     restore: { show: true }, | ||||
|         //     saveAsImage: { show: true } | ||||
|         //   } | ||||
|         // }, | ||||
|         calculable: true, | ||||
|         xAxis: [ | ||||
|           { | ||||
|             type: 'category', | ||||
|             // prettier-ignore | ||||
|             data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | ||||
|           } | ||||
|         ], | ||||
|         yAxis: [ | ||||
|           { | ||||
|             type: 'value' | ||||
|           } | ||||
|         ], | ||||
|         grid: { | ||||
|           top: '20%', | ||||
|           left: "1%", | ||||
|           right: "3%", | ||||
|           bottom: "1%", | ||||
|           containLabel: true | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             name: '工厂1', | ||||
|             type: 'bar', | ||||
|             itemStyle: { | ||||
|               normal: { | ||||
|                 color: 'rgba(99, 189, 255, 1)', //改变折线点的颜色 | ||||
|                 lineStyle: { | ||||
|                   color: 'rgba(99, 189, 255, 1)' //改变折线颜色 | ||||
|                 } | ||||
|               } | ||||
|             }, | ||||
|             data: [ | ||||
|               2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 | ||||
|             ], | ||||
|           }, | ||||
|           { | ||||
|             name: '工厂2', | ||||
|             type: 'bar', | ||||
|             itemStyle: { | ||||
|               normal: { | ||||
|                 color: 'rgba(142, 240, 171, 1)', //改变折线点的颜色 | ||||
|                 lineStyle: { | ||||
|                   color: 'rgba(142, 240, 171, 1)' //改变折线颜色 | ||||
|                 } | ||||
|               } | ||||
|             }, | ||||
|             data: [ | ||||
|               2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 | ||||
|             ], | ||||
|           }, | ||||
|         ] | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| /* .reportChart { | ||||
|   position: absolute; | ||||
|   height: 100%; | ||||
|   width: 100%; | ||||
|   top: 10px; | ||||
| } */ | ||||
| </style> | ||||
| @@ -1,383 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-15 10:49:13 | ||||
|  * @LastEditTime: 2024-04-17 16:14:01 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)"> | ||||
|     <div ref="parentChartDiv" class="app-container" style="padding: 16px 24px 0;height;auto;flex-grow: 1;"> | ||||
|       <!-- <el-alert title="自定义 close-text" type="warning" close-text="知道了"> | ||||
|       </el-alert> --> | ||||
|       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> | ||||
|         <el-form-item label="时间维度" prop="reportTime"> | ||||
|           <el-select clearable v-model="timeSelect" placeholder="请选择"> | ||||
|             <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="timeSelect === 'month'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime" type="monthrange" range-separator="至" | ||||
|             start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="timeSelect === 'year'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime[0]" value-format="yyyy" type="year" | ||||
|             placeholder="开始时间"> | ||||
|           </el-date-picker> | ||||
|           ~ | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime[1]" value-format="yyyy" type="year" placeholder="结束时间" | ||||
|             @change="getYear"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="工厂名称" prop="factoryId"> | ||||
|           <el-select clearable v-model="listQuery.factoryId" placeholder="请选择工厂名称"> | ||||
|             <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <!-- <el-form-item label="玻璃类型" prop="type"> | ||||
|           <el-select v-model="listQuery.type" placeholder="请选择玻璃类型"> | ||||
|             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> --> | ||||
|         <el-form-item> | ||||
|           <el-button type="primary" size="small" @click="getDataList">查询</el-button> | ||||
|           <el-button type="primary" size="small" plain @click="handleExport">导出</el-button> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|       <!-- <el-row style="height: 400px;"> --> | ||||
|       <!-- <div style="height: auto;"> --> | ||||
|       <line-chart class="epChart" ref="lineChart" style="width: 100%"></line-chart> | ||||
|       <!-- </div> --> | ||||
|       <!-- </el-row> --> | ||||
|     </div> | ||||
|     <div class="app-container" style="margin-top: 18px;flex-grow: 1; padding: 16px;"> | ||||
|       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|       <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" | ||||
|         :table-data="tableData"> | ||||
|       </base-table> | ||||
|     </div> | ||||
|     <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all" | ||||
|       :type="listQuery.reportType" @refreshDataList="getDataList" /> --> | ||||
|     <!-- <pagination | ||||
| 			:limit.sync="listQuery.pageSize" | ||||
| 			:page.sync="listQuery.pageNo" | ||||
| 			:total="listQuery.total" | ||||
| 			@pagination="getDataList" /> --> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // import { parseTime } from '../../core/mixins/code-filter'; | ||||
| // import { getGlassPage, exportGlasscExcel } from '@/api/report/glass'; | ||||
| // import inputTable from './inputTable.vue'; | ||||
| import lineChart from './lineChart'; | ||||
| import moment from 'moment' | ||||
| // import FileSaver from 'file-saver' | ||||
| // import * as XLSX from 'xlsx' | ||||
| export default { | ||||
|   components: { lineChart }, | ||||
| 	data() { | ||||
|     return { | ||||
|       listQuery: { | ||||
|         pageSize: 10, | ||||
|         pageNo: 1, | ||||
|         factoryId: null, | ||||
|         total: 0, | ||||
|         type: null, | ||||
|         // reportType: 2, | ||||
|         reportTime: [] | ||||
|       }, | ||||
| 			urlOptions: { | ||||
| 				// getDataListURL: getGlassPage, | ||||
| 				// exportURL: exportGlasscExcel | ||||
|       }, | ||||
|       formConfig: [ | ||||
|         { | ||||
|           type: 'title', | ||||
|           label: '环保管理', | ||||
|         }, | ||||
|       ], | ||||
|       timeList: [ | ||||
|         { | ||||
|           value: 'month', | ||||
|           label:'月' | ||||
|         }, | ||||
|         { | ||||
|           value: 'year', | ||||
|           label: '年' | ||||
|         } | ||||
|       ], | ||||
|       factoryList: [ | ||||
|         { | ||||
|           name: '测试', | ||||
|           id:1 | ||||
|         } | ||||
|       ], | ||||
|       typeList: [ | ||||
|         { | ||||
|           name: '芯片', | ||||
|           id:0, | ||||
|         }, | ||||
|         { | ||||
|           name: '标准组件', | ||||
|           id: 1, | ||||
|         }, | ||||
|         { | ||||
|           name: 'BIPV产品', | ||||
|           id: 2, | ||||
|         }, | ||||
|       ], | ||||
|       tableProps: [ | ||||
|         // { | ||||
|         // 	prop: 'createTime', | ||||
|         // 	label: '添加时间', | ||||
|         // 	fixed: true, | ||||
|         // 	width: 180, | ||||
|         // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | ||||
|         // }, | ||||
|         { | ||||
|           prop: 'userName', | ||||
|           label: '日期', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'nickName', | ||||
|           label: '工厂名称', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'datas', | ||||
|           label: '废水(t)', | ||||
|           // subcomponent: row | ||||
|         }, | ||||
|         { | ||||
|           prop: 'unit', | ||||
|           label: '废气(m³)', | ||||
|           // subcomponent: row | ||||
|         }, | ||||
|         { | ||||
|           prop: 'remark', | ||||
|           label: 'VOC(g/L)', | ||||
|           // subcomponent: row | ||||
|         }, | ||||
|         { | ||||
|           prop: 'kg', | ||||
|           label: '固体废弃物-可回收(kg)', | ||||
|           // subcomponent: row | ||||
|         } | ||||
|       ], | ||||
|       timeSelect:'month', | ||||
|       startTimeStamp:null, //开始时间 | ||||
|       endTimeStamp:null, //结束时间 | ||||
|       date:'凯盛玻璃控股成员企业2024生产数据', | ||||
| 			// reportTime: '', | ||||
| 			startTimeStamp: '', | ||||
| 			endTimeStamp: '', | ||||
|       tableData: [ | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas:'111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|           // subcomponent: row | ||||
|         } | ||||
|       ], | ||||
| 			// proLineList: [], | ||||
| 			// all: {} | ||||
| 		}; | ||||
| 	}, | ||||
| 	mounted() { | ||||
|     this.getDict() | ||||
|     // this.getCurrentYearFirst() | ||||
|     // this.getDataList() | ||||
| 	}, | ||||
|   methods: { | ||||
|     buttonClick() { | ||||
|  | ||||
|     }, | ||||
|     getYear(e) { | ||||
|       if (this.listQuery.reportTime[0] && e - this.listQuery.reportTime[0] > 10) { | ||||
|         this.$message({ | ||||
|           message: '年份起止时间不能超过十年', | ||||
|           type: 'warning' | ||||
|         }); | ||||
|         // console.log(); | ||||
|       } | ||||
|       // console.log(e); | ||||
|     }, | ||||
|     changeTime() { | ||||
|       if (this.listQuery.reportTime) { | ||||
|         this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         const numDays = (new Date(this.listQuery.reportTime[1]).getTime() - new Date(this.listQuery.reportTime[0]).getTime()) / (24 * 3600 * 1000); if (numDays > 730) { | ||||
|           this.$message({ | ||||
|             message: '时间范围不能超过24个月', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|           this.createStartDate = ''; | ||||
|           this.createEndDate = ''; | ||||
|         } | ||||
|       } else { | ||||
|         this.createStartDate = ''; | ||||
|         this.createEndDate = ''; | ||||
|       } | ||||
|     }, | ||||
|     async getDict() { | ||||
|       this.$refs.lineChart.initChart() | ||||
| 			// 产线列表 | ||||
| 			// const res = await getCorePLList(); | ||||
| 			// this.proLineList = res.data; | ||||
| 		}, | ||||
|     // 获取数据列表 | ||||
|     multipliedByHundred(str) { | ||||
|       console.log(str); | ||||
|       // console.log(str) | ||||
|       if ( str != 0) { | ||||
|         let floatVal = parseFloat(str); | ||||
|         if (isNaN(floatVal)) { | ||||
|           return 0; | ||||
|         } | ||||
|         floatVal = Math.round(str * 10000) / 100; | ||||
|         let strVal = floatVal.toString(); | ||||
|         let searchVal = strVal.indexOf('.'); | ||||
|         if (searchVal < 0) { | ||||
|           searchVal = strVal.length; | ||||
|           strVal += '.'; | ||||
|         } | ||||
|         while (strVal.length <= searchVal + 2) { | ||||
|           strVal += '0'; | ||||
|         } | ||||
|         return parseFloat(strVal); | ||||
|       } | ||||
|  | ||||
|     }, | ||||
|     async getDataList() { | ||||
|     }, | ||||
|     add0(m) { | ||||
|       return m < 10 ? '0' + m : m | ||||
|     }, | ||||
|     format(shijianchuo) { | ||||
|       //shijianchuo是整数,否则要parseInt转换 | ||||
|       var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss') | ||||
|       // console.log(time) | ||||
|       // var y = time.getFullYear(); | ||||
|       // var m = time.getMonth() + 1; | ||||
|       // var d = time.getDate(); | ||||
|       // var h = time.getHours(); | ||||
|       // var mm = time.getMinutes(); | ||||
|       // var s = time.getSeconds(); | ||||
|       return time | ||||
|     }, | ||||
| 		// changeTime(val) { | ||||
|     //   if (val) { | ||||
|     //     // console.log(val) | ||||
|     //     // console.log(val.setHours(7, 0, 0)) | ||||
|     //     // console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) | ||||
|     //     // let time = this.format(val.setHours(7, 0, 0)) | ||||
|     //     this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|     //     this.startTimeStamp  = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|     //     // console.log(this.listQuery.reportTime); | ||||
|     //     this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|     //     this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|     //     console.log(this.listQuery.reportTime); | ||||
| 		// 	} else { | ||||
| 		// 			this.listQuery.reportTime = [] | ||||
| 		// 	} | ||||
| 		// }, | ||||
| 		//时间戳转为yy-mm-dd hh:mm:ss | ||||
| 		timeFun(unixtimestamp) { | ||||
| 				var unixtimestamp = new Date(unixtimestamp); | ||||
| 				var year = 1900 + unixtimestamp.getYear(); | ||||
| 				var month = "0" + (unixtimestamp.getMonth() + 1); | ||||
| 				var date = "0" + unixtimestamp.getDate(); | ||||
| 				return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length) | ||||
| 		}, | ||||
| 		buttonClick(val) { | ||||
| 			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; | ||||
| 			switch (val.btnName) { | ||||
| 				case 'search': | ||||
| 					this.listQuery.pageNo = 1; | ||||
| 					this.listQuery.pageSize = 10; | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'export': | ||||
| 					this.handleExport(); | ||||
| 					break; | ||||
| 				default: | ||||
| 					console.log(val); | ||||
| 			} | ||||
| 		}, | ||||
| 		/** 导出按钮操作 */ | ||||
|     handleExport() { | ||||
|       // 处理查询参数 | ||||
|       // var xlsxParam = { raw: true }; | ||||
|       // /* 从表生成工作簿对象 */ | ||||
|       // import('xlsx').then(excel => { | ||||
|       //   var wb = excel.utils.table_to_book( | ||||
|       //     document.querySelector("#exportTable"), | ||||
|       //     xlsxParam | ||||
|       //   ); | ||||
|       //   /* 获取二进制字符串作为输出 */ | ||||
|       //   var wbout = excel.write(wb, { | ||||
|       //     bookType: "xlsx", | ||||
|       //     bookSST: true, | ||||
|       //     type: "array", | ||||
|       //   }); | ||||
|       //   try { | ||||
|       //     FileSaver.saveAs( | ||||
|       //       //Blob 对象表示一个不可变、原始数据的类文件对象。 | ||||
|       //       //Blob 表示的不一定是JavaScript原生格式的数据。 | ||||
|       //       //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 | ||||
|       //       //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。 | ||||
|       //       new Blob([wbout], { type: "application/octet-stream" }), | ||||
|       //       //设置导出文件名称 | ||||
|       //       "许昌安彩日原片生产汇总.xlsx" | ||||
|       //     ); | ||||
|       //   } catch (e) { | ||||
|       //     if (typeof console !== "undefined") console.log(e, wbout); | ||||
|       //   } | ||||
|       //   return wbout; | ||||
|       //   //do something...... | ||||
|       // }) | ||||
|  | ||||
|     }, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| /* .blueTip { */ | ||||
| 	/* padding-bottom: 10px; */ | ||||
| /* } */ | ||||
| /* .blueTi */ | ||||
| .blueTip::before{ | ||||
|   display: inline-block; | ||||
|   content: ''; | ||||
|   width: 4px; | ||||
|   height: 18px; | ||||
|   background: #0B58FF; | ||||
|   border-radius: 1px; | ||||
|   margin-right: 8PX; | ||||
|   margin-top: 8px; | ||||
| } | ||||
| .app-container { | ||||
|   margin: 0 16px 0; | ||||
|   background-color: #fff; | ||||
|   border-radius: 4px; | ||||
|   padding: 16px 16px 0; | ||||
|   height: auto; | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
| @@ -1,211 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2022-01-21 14:43:06 | ||||
|  * @LastEditors: zhp | ||||
|  * @LastEditTime: 2024-04-16 15:48:46 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <!-- <div> --> | ||||
|     <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> --> | ||||
|     <div :id="id" class="epChart" :style="{  height: height, width: width }" /> | ||||
|   <!-- </div> --> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import * as echarts from 'echarts' | ||||
| import 'echarts/theme/macarons' // echarts theme | ||||
| import resize from '@/mixins/resize' | ||||
|  | ||||
| export default { | ||||
|   name: 'OverviewBar', | ||||
|   mixins: [resize], | ||||
|   props: { | ||||
|     id: { | ||||
|       type: String, | ||||
|       default: 'OverviewLine' | ||||
|     }, | ||||
|     // className: { | ||||
|     //   type: String, | ||||
|     //   default: 'epChart' | ||||
|     // }, | ||||
|     width: { | ||||
|       type: String, | ||||
|       default: '100%' | ||||
|     }, | ||||
|     beilv: { | ||||
|       type: Number, | ||||
|       default: 1 | ||||
|     }, | ||||
|     height: { | ||||
|       type: String, | ||||
|       default: '550px' | ||||
|     }, | ||||
|     legendPosition: { | ||||
|       type: String, | ||||
|       default: 'center' | ||||
|     }, | ||||
|     showLegend: { | ||||
|       type: Boolean, | ||||
|       default: false | ||||
|     }, | ||||
|     legendData: { | ||||
|       type: Array, | ||||
|       default: () => [] | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       chart: null | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|     // this.$nextTick(() => { | ||||
|     //   this.initChart() | ||||
|     // }) | ||||
|   }, | ||||
|   beforeDestroy() { | ||||
|     if (!this.chart) { | ||||
|       return | ||||
|     } | ||||
|     this.chart.dispose() | ||||
|     this.chart = null | ||||
|   }, | ||||
|   methods: { | ||||
|     initChart() { | ||||
|       console.log(1111) | ||||
|       this.chart = echarts.init(document.getElementById(this.id)) | ||||
|       console.log(document.querySelector(".app-container").style); | ||||
|       this.chart.setOption({ | ||||
|         tooltip: { | ||||
|           trigger: 'axis', | ||||
|           axisPointer: { | ||||
|             type: 'cross', | ||||
|             crossStyle: { | ||||
|               color: '#999' | ||||
|             } | ||||
|           } | ||||
|         }, | ||||
|         // toolbox: { | ||||
|         //   feature: { | ||||
|         //     dataView: { show: true, readOnly: false }, | ||||
|         //     magicType: { show: true, type: ['line', 'bar'] }, | ||||
|         //     restore: { show: true }, | ||||
|         //     saveAsImage: { show: true } | ||||
|         //   } | ||||
|         // }, | ||||
|         grid: { top: 60, right: 90, bottom: 10, left: 10, containLabel: true }, | ||||
|         legend: { | ||||
|           data: ['废水', '废气', 'VOC'], | ||||
|           right: '90px', | ||||
|           top: '0%', | ||||
|           icon: 'roundRect', | ||||
|           itemGap: 40, | ||||
|           itemWidth: 20, | ||||
|           itemHeight: 2, | ||||
|         }, | ||||
|         xAxis: [ | ||||
|           { | ||||
|             type: 'category', | ||||
|             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], | ||||
|             axisPointer: { | ||||
|               type: 'shadow' | ||||
|             } | ||||
|           } | ||||
|         ], | ||||
|         yAxis: [ | ||||
|           { | ||||
|             type: 'value', | ||||
|             name: '废水/t', | ||||
|             min: 0, | ||||
|             max: 250, | ||||
|             interval: 50, | ||||
|             axisLabel: { | ||||
|               formatter: '{value}' | ||||
|             } | ||||
|           }, | ||||
|           { | ||||
|             type: 'value', | ||||
|             name: '废气/m³', | ||||
|             min: 0, | ||||
|             max: 25, | ||||
|             interval: 5, | ||||
|             axisLabel: { | ||||
|               formatter: '{value}' | ||||
|             } | ||||
|           } | ||||
|         ], | ||||
|         series: [ | ||||
|           { | ||||
|             name: '废水', | ||||
|             type: 'line', | ||||
|             tooltip: { | ||||
|               valueFormatter: function (value) { | ||||
|                 return value + ' t'; | ||||
|               } | ||||
|             }, | ||||
|             itemStyle: { | ||||
|               normal: { | ||||
|                 color: 'rgba(40, 138, 255, 1)', //改变折线点的颜色 | ||||
|                 lineStyle: { | ||||
|                   color: 'rgba(40, 138, 255, 1)' //改变折线颜色 | ||||
|                 } | ||||
|               } | ||||
|             }, | ||||
|             data: [ | ||||
|               2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 | ||||
|             ] | ||||
|           }, | ||||
|           { | ||||
|             name: '废气', | ||||
|             type: 'line', | ||||
|             yAxisIndex: 1, | ||||
|             tooltip: { | ||||
|               valueFormatter: function (value) { | ||||
|                 return value + ' m³'; | ||||
|               } | ||||
|             }, | ||||
|             itemStyle: { | ||||
|               normal: { | ||||
|                 color: 'rgba(99, 189, 255, 1)', //改变折线点的颜色 | ||||
|                 lineStyle: { | ||||
|                   color: 'rgba(99, 189, 255, 1)' //改变折线颜色 | ||||
|                 } | ||||
|               } | ||||
|             }, | ||||
|             data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] | ||||
|           }, | ||||
|           { | ||||
|             name: 'VOC', | ||||
|             type: 'line', | ||||
|             yAxisIndex: 1, | ||||
|             tooltip: { | ||||
|               valueFormatter: function (value) { | ||||
|                 return value + ' m³'; | ||||
|               } | ||||
|             }, | ||||
|             itemStyle: { | ||||
|               normal: { | ||||
|                 color: 'rgba(255, 206, 106, 1)', //改变折线点的颜色 | ||||
|                 lineStyle: { | ||||
|                   color: 'rgba(255, 206, 106, 1)' //改变折线颜色 | ||||
|                 } | ||||
|               } | ||||
|             }, | ||||
|             data: [33.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] | ||||
|           } | ||||
|         ] | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| /* .epChart { | ||||
|   position: absolute; | ||||
|   height: 100%; | ||||
|   width: 100%; | ||||
|   top: 10px; | ||||
| } */ | ||||
| </style> | ||||
| @@ -1,65 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2023-08-01 15:27:31 | ||||
|  * @LastEditors: zwq | ||||
|  * @LastEditTime: 2023-08-01 16:25:54 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
| 	<div :class="[className, { 'p-0': noPadding }]"> | ||||
| 		<slot /> | ||||
| 	</div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
| 	props: { | ||||
| 		size: { | ||||
| 			// 取值范围:  xl lg md sm | ||||
| 			type: String, | ||||
| 			default: 'de', | ||||
| 			validator: function (val) { | ||||
| 				return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1; | ||||
| 			}, | ||||
| 		}, | ||||
| 		noPadding: { | ||||
| 			type: Boolean, | ||||
| 			default: false, | ||||
| 		}, | ||||
| 	}, | ||||
| 	computed: { | ||||
| 		className: function () { | ||||
| 			return `${this.size}-title`; | ||||
| 		}, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| $pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px); | ||||
| $mgr: 8px; | ||||
| @each $size, $height in $pxls { | ||||
| 	.#{$size}-title { | ||||
| 		font-size: 18px; | ||||
| 		line-height: $height; | ||||
| 		color: #000; | ||||
| 		font-weight: 500; | ||||
| 		font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif; | ||||
|  | ||||
| 		&::before { | ||||
| 			content: ''; | ||||
| 			display: inline-block; | ||||
| 			vertical-align: top; | ||||
| 			width: 4px; | ||||
| 			height: $height + 2px; | ||||
| 			border-radius: 1px; | ||||
| 			margin-right: $mgr; | ||||
| 			background-color: #0b58ff; | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|  | ||||
| .p-0 { | ||||
| 	padding: 0; | ||||
| } | ||||
| </style> | ||||
| @@ -1,365 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2023-11-06 15:15:30 | ||||
|  * @LastEditTime: 2024-04-17 15:37:39 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <el-drawer class="drawer" :visible.sync="visible" size="50%"> | ||||
|     <small-title slot="title" :no-padding="true"> | ||||
|       {{ '碲化镉工厂生产数据详情' }} | ||||
|     </small-title> | ||||
|     <div class="detailBox"> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="8"> | ||||
|           <p class="title">工厂名称</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="8"> | ||||
|           <p class="title">时间维度</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="8"> | ||||
|           <p class="title">时间</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-divider></el-divider> | ||||
|       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false"> | ||||
|         {{ '芯片' }} | ||||
|       </small-title> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片产量</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片良率</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片良率</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片总功率</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">FTO投入量</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">CSS稼动率</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片段OEE</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片平均功率</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片人均产量</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片产能利用率</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false"> | ||||
|         {{ '标准组件' }} | ||||
|       </small-title> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">封装BOM</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">封装线OEE</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件良率</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件产量</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件总功率</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">封装产能利用率</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件人均产量</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件人均产量</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false"> | ||||
|         {{ 'BIPV产品' }} | ||||
|       </small-title> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">产品产量</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">人均产量</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片使用量</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片使用量</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">内部材料成本</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">内部材料成本</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">内部材料成本</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|     </div> | ||||
|   </el-drawer> | ||||
|  | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // import basicAdd from './basic-add'; | ||||
| // import { | ||||
| //   createQualityScrapLog, updateQualityScrapLog, getQualityScrapLog, getWorkOrderList, | ||||
| //   getTeamList, getDetList, getLineList | ||||
| // } from "@/api/base/qualityScrapLog"; | ||||
| // import { getList, } from "@/api/base/qualityScrapType"; | ||||
| import SmallTitle from './SmallTitle'; | ||||
| export default { | ||||
|   components: { | ||||
|     SmallTitle, | ||||
|   }, | ||||
|   // mixins: [basicAdd], | ||||
|   data() { | ||||
|     return { | ||||
|       urlOptions: { | ||||
|         isGetCode: false, | ||||
|         // codeURL: getCode, | ||||
|         // createURL: createQualityScrapLog, | ||||
|         // updateURL: updateQualityScrapLog, | ||||
|         // infoURL: getQualityScrapLog, | ||||
|       }, | ||||
|       lineList: [], | ||||
|       typeList: [], | ||||
|       workOrderList: [], | ||||
|       detList: [], | ||||
|       teamList: [], | ||||
|       sourceList: [ | ||||
|         { | ||||
|           id: 1, | ||||
|           name: '手动', | ||||
|         }, | ||||
|         { | ||||
|           id: 2, | ||||
|           name: '自动', | ||||
|         } | ||||
|       ], | ||||
|       sectionList: [], | ||||
|       visible: false, | ||||
|       dataForm: { | ||||
|         id: undefined, | ||||
|         logTime: undefined, | ||||
|         source: 1, | ||||
|         detId: undefined, | ||||
|         workOrderId: null, | ||||
|         teamId: undefined, | ||||
|         num: undefined, | ||||
|         lineId: undefined, | ||||
|         description: undefined, | ||||
|         // description: undefined, | ||||
|         remark: undefined, | ||||
|       }, | ||||
|       // materialList: [], | ||||
|       dataRule: { | ||||
|         // materialId: [{ required: true, message: "", trigger: "blur" }], | ||||
|         workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }], | ||||
|         num: [{ required: true, message: "数量不能为空", trigger: "blur" }], | ||||
|         detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }], | ||||
|  | ||||
|         logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }], | ||||
|       } | ||||
|     }; | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.getDict() | ||||
|     console.log('我看看', this.dataForm) | ||||
|     // this.getCurrentTime() | ||||
|   }, | ||||
|   methods: { | ||||
|     init() { | ||||
|       this.visible = true | ||||
|     }, | ||||
|     // getCurrentTime() { | ||||
|     //   // new Date().Format("yyyy-MM-dd HH:mm:ss") | ||||
|     //   this.dataForm.logTime = new Date() | ||||
|     //   // this.dataForm.logTime = year + "-" + month + "-" + day; | ||||
|     //   console.log(this.dataForm.logTime); | ||||
|     // }, | ||||
|     async getDict() { | ||||
|     //   // 物料列表 | ||||
|     //   const res = await getList() | ||||
|     //   this.typeList = res.data | ||||
|     //   getWorkOrderList().then((res) => { | ||||
|     //     console.log(res); | ||||
|     //     // console.log(response); | ||||
|     //     this.workOrderList = res.data.map((item) => { | ||||
|     //       return { | ||||
|     //         name: item.name, | ||||
|     //         id: item.id | ||||
|     //       } | ||||
|     //     }) | ||||
|     //     // console.log(this.formConfig[0].selectOptions); | ||||
|     //     // this.listQuery.total = response.data.total; | ||||
|     //   }) | ||||
|     //   getLineList().then((res) => { | ||||
|     //     console.log(res); | ||||
|     //     // console.log(response); | ||||
|     //     this.lineList = res.data.map((item) => { | ||||
|     //       return { | ||||
|     //         name: item.name, | ||||
|     //         id: item.id | ||||
|     //       } | ||||
|     //     }) | ||||
|     //     // console.log(this.formConfig[0].selectOptions); | ||||
|     //     // this.listQuery.total = response.data.total; | ||||
|     //   }) | ||||
|     //   getDetList().then((res) => { | ||||
|     //     console.log(res); | ||||
|     //     // console.log(response); | ||||
|     //     this.detList = res.data.map((item) => { | ||||
|     //       return { | ||||
|     //         name: item.content, | ||||
|     //         id: item.id | ||||
|     //       } | ||||
|     //     }) | ||||
|     //     // console.log(this.formConfig[0].selectOptions); | ||||
|     //     // this.listQuery.total = response.data.total; | ||||
|     //   }) | ||||
|     //   getTeamList().then((res) => { | ||||
|     //     console.log(res); | ||||
|     //     // console.log(response); | ||||
|     //     this.teamList = res.data.map((item) => { | ||||
|     //       return { | ||||
|     //         name: item.name, | ||||
|     //         id: item.id | ||||
|     //       } | ||||
|     //     }) | ||||
|     //     // console.log(this.formConfig[0].selectOptions); | ||||
|     //     // this.listQuery.total = response.data.total; | ||||
|     //   }) | ||||
|     // }, | ||||
|     // async getWorksectionById(lineId) { | ||||
|     //   if (lineId) { | ||||
|     //     const { code, data } = await this.$axios({ | ||||
|     //       url: '/base/core-workshop-section/listByParentId', | ||||
|     //       method: 'get', | ||||
|     //       params: { | ||||
|     //         id: lineId, | ||||
|     //       }, | ||||
|     //     }); | ||||
|     //     if (code == 0) { | ||||
|     //       console.log(data) | ||||
|     //       this.sectionList = data.map((item) => { | ||||
|     //         return { | ||||
|     //           name: item.name, | ||||
|     //           id: item.id, | ||||
|     //         }; | ||||
|     //       }); | ||||
|     //     } | ||||
|     //   } else { | ||||
|     //     this.$axios({ | ||||
|     //       url: '/base/core-workshop-section/listAll', | ||||
|     //       method: 'get', | ||||
|     //       // params: { | ||||
|     //       //   id: lineId, | ||||
|     //       // }, | ||||
|     //     }).then((res) => { | ||||
|     //       // console.log(data) | ||||
|     //       this.sectionList = res.data.map((item) => { | ||||
|     //         return { | ||||
|     //           name: item.name, | ||||
|     //           id: item.id, | ||||
|     //         }; | ||||
|     //       }); | ||||
|     //     }) | ||||
|     //   } | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
| <style scoped> | ||||
|   .drawer >>> .el-drawer { | ||||
|   border-radius: 8px 0 0 8px; | ||||
| } | ||||
|  | ||||
| .drawer >>> .el-form-item__label { | ||||
|   padding: 0; | ||||
| } | ||||
|  | ||||
| .drawer >>> .el-drawer__header { | ||||
|   margin: 0; | ||||
|   padding: 32px 32px 24px; | ||||
|   border-bottom: 1px solid #dcdfe6; | ||||
|   margin-bottom: 30px; | ||||
| } | ||||
| .detailBox p { | ||||
|   margin: 0; | ||||
|   padding: 0 32px; | ||||
| } | ||||
| .detailBox .title { | ||||
|   /* width: 56px; */ | ||||
|   /* height: 14px; */ | ||||
|   font-family: Source Han Sans CN, Source Han Sans CN; | ||||
|   font-weight: 400; | ||||
|   font-size: 14px; | ||||
|   color: rgba(0, 0, 0, 0.85); | ||||
|   line-height: 16px; | ||||
|   text-align: left; | ||||
|   font-style: normal; | ||||
|   text-transform: none; | ||||
| } | ||||
| .detailBox .text { | ||||
|   font-size: 14px; | ||||
|   font-weight: 400; | ||||
|   color: rgba(102,102,102,0.75); | ||||
|   padding-bottom: 20px; | ||||
| } | ||||
|  | ||||
| </style> | ||||
| @@ -1,625 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-15 10:49:13 | ||||
|  * @LastEditTime: 2024-04-17 16:13:47 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)"> | ||||
|     <div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;"> | ||||
|       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> | ||||
|         <el-form-item label="时间维度" prop="reportTime"> | ||||
|           <el-select clearable v-model="timeSelect" placeholder="请选择"> | ||||
|             <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="timeSelect === 'day'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至" | ||||
|             start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDayTime" end-placeholder="结束日期"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="timeSelect === 'week'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime[0]" type="week" format="yyyy 第 WW 周" placeholder="选择周" | ||||
|             style="width: 180px" @change="onValueChange"> | ||||
|           </el-date-picker> | ||||
|           至 | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime[1]" type="week" format="yyyy 第 WW 周" placeholder="选择周" | ||||
|             style="width: 180px" @change="onValueChange"> | ||||
|           </el-date-picker> | ||||
|           <span v-if="listQuery.reportTime[0] && listQuery.reportTime[1]" style="margin-left: 10px"> | ||||
|             {{ date1 }} 至 {{ date2 }},共 {{ weekNum }} 周 | ||||
|           </span> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="timeSelect === 'month'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime" type="monthrange" range-separator="至" | ||||
|             start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="timeSelect === 'year'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime[0]" value-format="yyyy" type="year" | ||||
|             placeholder="开始时间"> | ||||
|           </el-date-picker> | ||||
|           ~ | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime[1]" value-format="yyyy" type="year" placeholder="结束时间" | ||||
|             @change="getYear"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="工厂名称" prop="factoryId"> | ||||
|           <el-select clearable v-model="listQuery.factoryId" placeholder="请选择工厂名称"> | ||||
|             <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <!-- <el-form-item label="玻璃类型" prop="type"> | ||||
|           <el-select v-model="listQuery.type" placeholder="请选择玻璃类型"> | ||||
|             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> --> | ||||
|         <el-form-item label="玻璃类型" prop="type"> | ||||
|           <el-select clearable v-model="listQuery.type" placeholder="请选择玻璃类型"> | ||||
|             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item> | ||||
|           <el-button type="primary" size="small" @click="getDataList">查询</el-button> | ||||
|           <el-button type="primary" size="small" plain @click="handleExport">导出</el-button> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|       <!-- <el-row :gutter="24"> --> | ||||
|       <!-- <el-col :span="12" v-for="item in  dataList" :key="item.id"> --> | ||||
|       <line-chart class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart> | ||||
|       <!-- </el-col> --> | ||||
|       <!-- <el-col :span="12"> | ||||
|             <line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart> | ||||
|           </el-col> --> | ||||
|       </el-row> | ||||
|     </div> | ||||
|     <div class="app-container" style="margin-top: 18px;flex-grow: 1; height: auto; padding: 16px;"> | ||||
|       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|       <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" | ||||
|         :table-data="tableData"> | ||||
|         <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right" | ||||
|           :method-list="tableBtn" @clickBtn="handleClick" /> | ||||
|       </base-table> | ||||
|     </div> | ||||
|     <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @refreshDataList="successSubmit" /> | ||||
|     <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all" | ||||
|       :type="listQuery.reportType" @refreshDataList="getDataList" /> --> | ||||
|     <!-- <pagination | ||||
| 			:limit.sync="listQuery.pageSize" | ||||
| 			:page.sync="listQuery.pageNo" | ||||
| 			:total="listQuery.total" | ||||
| 			@pagination="getDataList" /> --> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // import { parseTime } from '../../core/mixins/code-filter'; | ||||
| // import { getGlassPage, exportGlasscExcel } from '@/api/report/glass'; | ||||
| // import inputTable from './inputTable.vue'; | ||||
| import lineChart from './lineChart'; | ||||
| import moment from 'moment' | ||||
| import ButtonNav from '@/components/ButtonNav' | ||||
| import basicPage from '@/mixins/basic-page' | ||||
| import AddOrUpdate from './add-or-updata'; | ||||
|  | ||||
| // import FileSaver from 'file-saver' | ||||
| // import * as XLSX from 'xlsx' | ||||
| export default { | ||||
|   components: { lineChart, ButtonNav, AddOrUpdate }, | ||||
|   mixins: [basicPage], | ||||
| 	data() { | ||||
|     return { | ||||
|       listQuery: { | ||||
|         pageSize: 10, | ||||
|         pageNo: 1, | ||||
|         factoryId: null, | ||||
|         total: 0, | ||||
|         type: null, | ||||
|         // reportType: 2, | ||||
|         reportTime: [] | ||||
|       }, | ||||
|       detailOrUpdateVisible:false, | ||||
|       date1: undefined, | ||||
|       date2: undefined, | ||||
|       tableBtn: [ | ||||
|           { | ||||
|             type: 'detail', | ||||
|             btnName: '详情', | ||||
|         }, | ||||
|         // { | ||||
|         //     type: 'delete', | ||||
|         //     btnName: '删除', | ||||
|         //   }, | ||||
|       ].filter((v) => v), | ||||
|       typeList: [ | ||||
|         { | ||||
|           name: '芯片', | ||||
|           id: 0, | ||||
|         }, | ||||
|         { | ||||
|           name: '标准组件', | ||||
|           id: 1, | ||||
|         }, | ||||
|         { | ||||
|           name: 'BIPV产品', | ||||
|           id: 2, | ||||
|         }, | ||||
|       ], | ||||
|       // weekNum: undefined, | ||||
|       dataList: [ | ||||
|         { | ||||
|           id:'first', | ||||
|         }, | ||||
|          { | ||||
|           id: 'second', | ||||
|         }, | ||||
|          { | ||||
|           id: 'third', | ||||
|         }, | ||||
|          { | ||||
|           id: 'fourth', | ||||
|         }, | ||||
|          { | ||||
|           id: 'fifth', | ||||
|         }, | ||||
|          { | ||||
|           id: 'sixth', | ||||
|         }, | ||||
|       ], | ||||
| 			urlOptions: { | ||||
| 				// getDataListURL: getGlassPage, | ||||
| 				// exportURL: exportGlasscExcel | ||||
|       }, | ||||
|       mainFormConfig: [ | ||||
|       	{ | ||||
|           type: 'select', | ||||
|           label: '工单', | ||||
|           placeholder: '请选择工单', | ||||
|           param: 'workOrderId', | ||||
|           selectOptions: [], | ||||
|         }, | ||||
|         // { | ||||
|         // 	type: 'select', | ||||
|         // 	label: '产线', | ||||
|         // 	placeholder: '请选择产线', | ||||
|         // 	param: 'lineId', | ||||
|         // 	selectOptions: [], | ||||
|         // }, | ||||
|         // 选项切换 | ||||
|         // { | ||||
|         // 	type: 'select', | ||||
|         // 	label: '时间类型', | ||||
|         // 	param: 'dateFilterType', | ||||
|         // 	defaultSelect: 0, | ||||
|         // 	selectOptions: [ | ||||
|         // 		{ id: 0, name: '按时间段' }, | ||||
|         // 		{ id: 1, name: '按日期' }, | ||||
|         // 	], | ||||
|         // 	index: 2, | ||||
|         // 	extraOptions: [ | ||||
|         { | ||||
|           // parent: 'dateFilterType', | ||||
|           // 时间段选择 | ||||
|           type: 'datePicker', | ||||
|           label: '时间段', | ||||
|           // dateType: 'datetimerange', | ||||
|           dateType: 'datetimerange', | ||||
|           format: 'yyyy-MM-dd HH:mm:ss', | ||||
|           valueFormat: 'yyyy-MM-ddTHH:mm:ss', | ||||
|           rangeSeparator: '-', | ||||
|           rangeSeparator: '-', | ||||
|           startPlaceholder: '开始时间', | ||||
|           endPlaceholder: '结束时间', | ||||
|           param: 'recordTime', | ||||
|         }, | ||||
|         // 		{ | ||||
|         // 			parent: 'dateFilterType', | ||||
|         // 			// 日期选择 | ||||
|         // 			type: 'datePicker', | ||||
|         // 			// label: '日期', | ||||
|         // 			dateType: 'date', | ||||
|         // 			placeholder: '选择日期', | ||||
|         // 			format: 'yyyy-MM-dd', | ||||
|         // 			valueFormat: 'yyyy-MM-dd', | ||||
|         // 			param: 'timeday', | ||||
|         // 		}, | ||||
|         // 	], | ||||
|         // }, | ||||
|         { | ||||
|           type:'button', | ||||
|           btnName: '查询', | ||||
|           name: 'search', | ||||
|           color: 'primary', | ||||
|         }, | ||||
|          { | ||||
|           type:'separate' | ||||
|         }, | ||||
|         // { | ||||
|         //   type: this.$auth.hasPermi( | ||||
|         //     'analysis:equipment:export' | ||||
|         //   ) | ||||
|         //     ? 'separate' | ||||
|         //     : '', | ||||
|         // }, | ||||
|         { | ||||
|           type:'button', | ||||
|           btnName: '导出', | ||||
|           name: 'export', | ||||
|           color: 'warning', | ||||
|         }, | ||||
|       ], | ||||
|       formConfig: [ | ||||
|         { | ||||
|           type: 'title', | ||||
|           label: '成本管理', | ||||
|         }, | ||||
|       ], | ||||
|       timeList: [ | ||||
|         { | ||||
|           value: 'day', | ||||
|           label: '日' | ||||
|         }, | ||||
|         { | ||||
|           value: 'week', | ||||
|           label: '周' | ||||
|         }, | ||||
|         { | ||||
|           value: 'month', | ||||
|           label:'月' | ||||
|         }, | ||||
|         { | ||||
|           value: 'year', | ||||
|           label: '年' | ||||
|         } | ||||
|       ], | ||||
|       factoryList: [ | ||||
|         { | ||||
|           name: '测试', | ||||
|           id:1 | ||||
|         } | ||||
|       ], | ||||
|       tableProps: [ | ||||
|         // { | ||||
|         // 	prop: 'createTime', | ||||
|         // 	label: '添加时间', | ||||
|         // 	fixed: true, | ||||
|         // 	width: 180, | ||||
|         // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | ||||
|         // }, | ||||
|         { | ||||
|           prop: 'userName', | ||||
|           label: '日期', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'nickName', | ||||
|           label: '工厂名称', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'type', | ||||
|           label: '玻璃类型', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'inNum', | ||||
|           label: '投入数量', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'putNum', | ||||
|           label: '产出数量', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'goodNum', | ||||
|           label: '良品数量', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'goodYelid', | ||||
|           label: '良品率%', | ||||
|         }, | ||||
|       ], | ||||
|       timeSelect:'day', | ||||
|       startTimeStamp:null, //开始时间 | ||||
|       endTimeStamp:null, //结束时间 | ||||
|       // date:'凯盛玻璃控股成员企业2024生产数据', | ||||
| 			// reportTime: '', | ||||
| 			startTimeStamp: '', | ||||
| 			endTimeStamp: '', | ||||
|       tableData: [ | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas:'111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|           // subcomponent: row | ||||
|         } | ||||
|       ], | ||||
| 			// proLineList: [], | ||||
| 			// all: {} | ||||
| 		}; | ||||
|   }, | ||||
|   computed: { | ||||
|     weekNum() { | ||||
|       return Math.round((this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 60 * 60 * 1000 * 7)) + 1 | ||||
|     }, | ||||
|   }, | ||||
| 	mounted() { | ||||
|     this.getDict() | ||||
|     // this.getCurrentYearFirst() | ||||
|     // this.getDataList() | ||||
| 	}, | ||||
|   methods: { | ||||
|     otherMethods(val) { | ||||
|       this.detailOrUpdateVisible = true; | ||||
|       this.addOrEditTitle = "详情"; | ||||
|       this.$nextTick(() => { | ||||
|         this.$refs.detailOrUpdate.init(val.data.id); | ||||
|       }); | ||||
|     }, | ||||
|     buttonClick() { | ||||
|  | ||||
|     }, | ||||
|     getYear(e) { | ||||
|       if (this.listQuery.reportTime[0] && e - this.listQuery.reportTime[0] > 10) { | ||||
|         this.$message({ | ||||
|           message: '年份起止时间不能超过十年', | ||||
|           type: 'warning' | ||||
|         }); | ||||
|         // console.log(); | ||||
|       } | ||||
|       // console.log(e); | ||||
|     }, | ||||
|     onValueChange(picker, k) { // 选中近k周后触发的操作 | ||||
|       if (this.listQuery.reportTime[0] && this.listQuery.reportTime[1]) { | ||||
|         console.log(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000) | ||||
|         this.date1 = moment(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') | ||||
|         // this.onValueChange()   // 这里为我们希望value改变时触发的方法 | ||||
|         this.date2 = moment(this.listQuery.reportTime[1].getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') | ||||
|         const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000); if (numDays > 168) { | ||||
|           console.log(numDays) | ||||
|           this.$message({ | ||||
|             message: '周范围不能超过24周', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           // this.onValueChange() | ||||
|         } | ||||
|     } | ||||
|     }, | ||||
|     changeDayTime() { | ||||
|       if (this.listQuery.reportTime) { | ||||
|         // this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         // this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         console.log(this.listQuery.reportTime[1]) | ||||
|         const numDays = (new Date(this.listQuery.reportTime[1]).getTime() - new Date(this.listQuery.reportTime[0]).getTime()) / (24 * 3600 * 1000); if (numDays > 30) { | ||||
|           this.$message({ | ||||
|             message: '时间范围不能超过30天', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|         } | ||||
|       } else { | ||||
|       } | ||||
|     }, | ||||
|     changeTime(value) { | ||||
|       if (this.listQuery.reportTime) { | ||||
|         const timeStamp = this.listQuery.reportTime[1].getMonth(); //标准时间转为时间戳,毫秒级别 | ||||
|         const fullyear = this.listQuery.reportTime[1].getFullYear() | ||||
|         let days = 0 | ||||
|         switch (timeStamp) { | ||||
|           case 0: | ||||
|           case 2: | ||||
|           case 4: | ||||
|           case 6: | ||||
|           case 7: | ||||
|           case 9: | ||||
|           case 11: | ||||
|             days = 31 | ||||
|             break | ||||
|           case 3: | ||||
|           case 4: | ||||
|           case 8: | ||||
|           case 10: | ||||
|             days = 30 | ||||
|             break | ||||
|           case 1: | ||||
|             if ((fullyear % 400 === 0) || (fullyear % 4 === 0 && fullyear % 100 !== 0)) { | ||||
|               days = 29 | ||||
|             } else { | ||||
|               days = 28 | ||||
|             } | ||||
|             break | ||||
|         } | ||||
|         let startTime = moment(new Date(this.listQuery.reportTime[0]).setDate(1, 0, 0, 0)).format('YYYY-MM-DD HH:mm:ss') | ||||
|         // this.startTimeStamp = this.timeFun(new Date(fullyear, timeStamp, 1, 7, 0, 1).getTime()); //开始时间 | ||||
|         let endTime = this.timeFun(new Date(fullyear, timeStamp, days).getTime()) + ' 23:59:59'; //结束时间 | ||||
|         // console.log(endTimeStamp); | ||||
|         // let endTime = moment(this.listQuery.reportTime[1]).month(monthNum - 1).date(1).endOf("month").format("YYYY-MM-DD"); | ||||
|         // console.log(endTime); | ||||
|         // console.log(moment(new Date(this.listQuery.reportTime[1]).setDate(31, 23, 59, 59)).format('YYYY-MM-DD HH:mm:ss')) | ||||
|         // console.log(moment(new Date(this.listQuery.reportTime[1]).getTime()).format('YYYY-MM-DD HH:mm:ss')) | ||||
|  | ||||
|         // this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         // this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         const numDays = (new Date(endTime).getTime() - new Date(startTime).getTime()) / (24 * 3600 * 1000); if (numDays > 730) { | ||||
|           this.$message({ | ||||
|             message: '时间范围不能超过24个月', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|         } else { | ||||
|           this.listQuery.reportTime[0] = startTime | ||||
|           this.listQuery.reportTime[1] = endTime | ||||
|         } | ||||
|       } else { | ||||
|         console.log(this.listQuery.reportTime[0]) | ||||
|       } | ||||
|     }, | ||||
|     // handleTime() { | ||||
|     //   this.$forceUpdate() | ||||
|     //   // this.$nextTick(() => [ | ||||
|  | ||||
|     //   // ]) | ||||
|     // }, | ||||
|     // getCurrentYearFirst() { | ||||
|     //   let date = new Date(); | ||||
|     //   date.setDate(1); | ||||
|     //   date.setMonth(0); | ||||
|     //   this.reportTime = date; | ||||
|     //   this.startTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()); //开始时间 | ||||
|     //   this.endTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()); //结束时间 | ||||
|     //   this.listQuery.reportTime[0] = parseTime(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|     //   this.listQuery.reportTime[1] = parseTime(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 100 | ||||
|     // }, | ||||
|     // changeTime(val) { | ||||
|     //   if (val) { | ||||
|     //     // let timeStamp = val.getTime(); //标准时间转为时间戳,毫秒级别 | ||||
|     //     // this.endTimeStamp = this.timeFun(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()); //开始时间 | ||||
|     //     // this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()); //结束时间 | ||||
|     //     // this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|     //     // this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|     //   } else { | ||||
|     //     this.listQuery.reportTime = [] | ||||
|     //   } | ||||
|     // }, | ||||
|     async getDict() { | ||||
|       this.$refs.lineChart.initChart() | ||||
| 			// 产线列表 | ||||
| 			// const res = await getCorePLList(); | ||||
| 			// this.proLineList = res.data; | ||||
| 		}, | ||||
|     // 获取数据列表 | ||||
|     multipliedByHundred(str) { | ||||
|       console.log(str); | ||||
|       // console.log(str) | ||||
|       if ( str != 0) { | ||||
|         let floatVal = parseFloat(str); | ||||
|         if (isNaN(floatVal)) { | ||||
|           return 0; | ||||
|         } | ||||
|         floatVal = Math.round(str * 10000) / 100; | ||||
|         let strVal = floatVal.toString(); | ||||
|         let searchVal = strVal.indexOf('.'); | ||||
|         if (searchVal < 0) { | ||||
|           searchVal = strVal.length; | ||||
|           strVal += '.'; | ||||
|         } | ||||
|         while (strVal.length <= searchVal + 2) { | ||||
|           strVal += '0'; | ||||
|         } | ||||
|         return parseFloat(strVal); | ||||
|       } | ||||
|  | ||||
|     }, | ||||
|     async getDataList() { | ||||
|     }, | ||||
|     add0(m) { | ||||
|       return m < 10 ? '0' + m : m | ||||
|     }, | ||||
|     format(shijianchuo) { | ||||
|       //shijianchuo是整数,否则要parseInt转换 | ||||
|       var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss') | ||||
|       // console.log(time) | ||||
|       // var y = time.getFullYear(); | ||||
|       // var m = time.getMonth() + 1; | ||||
|       // var d = time.getDate(); | ||||
|       // var h = time.getHours(); | ||||
|       // var mm = time.getMinutes(); | ||||
|       // var s = time.getSeconds(); | ||||
|       return time | ||||
|     }, | ||||
| 		//时间戳转为yy-mm-dd hh:mm:ss | ||||
| 		timeFun(unixtimestamp) { | ||||
| 				var unixtimestamp = new Date(unixtimestamp); | ||||
| 				var year = 1900 + unixtimestamp.getYear(); | ||||
| 				var month = "0" + (unixtimestamp.getMonth() + 1); | ||||
| 				var date = "0" + unixtimestamp.getDate(); | ||||
| 				return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length) | ||||
| 		}, | ||||
| 		buttonClick(val) { | ||||
| 			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; | ||||
| 			switch (val.btnName) { | ||||
| 				case 'search': | ||||
| 					this.listQuery.pageNo = 1; | ||||
| 					this.listQuery.pageSize = 10; | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'export': | ||||
| 					this.handleExport(); | ||||
| 					break; | ||||
| 				default: | ||||
| 					console.log(val); | ||||
| 			} | ||||
| 		}, | ||||
| 		/** 导出按钮操作 */ | ||||
|     handleExport() { | ||||
|       // 处理查询参数 | ||||
|       // var xlsxParam = { raw: true }; | ||||
|       // /* 从表生成工作簿对象 */ | ||||
|       // import('xlsx').then(excel => { | ||||
|       //   var wb = excel.utils.table_to_book( | ||||
|       //     document.querySelector("#exportTable"), | ||||
|       //     xlsxParam | ||||
|       //   ); | ||||
|       //   /* 获取二进制字符串作为输出 */ | ||||
|       //   var wbout = excel.write(wb, { | ||||
|       //     bookType: "xlsx", | ||||
|       //     bookSST: true, | ||||
|       //     type: "array", | ||||
|       //   }); | ||||
|       //   try { | ||||
|       //     FileSaver.saveAs( | ||||
|       //       //Blob 对象表示一个不可变、原始数据的类文件对象。 | ||||
|       //       //Blob 表示的不一定是JavaScript原生格式的数据。 | ||||
|       //       //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 | ||||
|       //       //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。 | ||||
|       //       new Blob([wbout], { type: "application/octet-stream" }), | ||||
|       //       //设置导出文件名称 | ||||
|       //       "许昌安彩日原片生产汇总.xlsx" | ||||
|       //     ); | ||||
|       //   } catch (e) { | ||||
|       //     if (typeof console !== "undefined") console.log(e, wbout); | ||||
|       //   } | ||||
|       //   return wbout; | ||||
|       //   //do something...... | ||||
|       // }) | ||||
|  | ||||
|     }, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| /* .blueTip { */ | ||||
| 	/* padding-bottom: 10px; */ | ||||
| /* } */ | ||||
| /* .blueTi */ | ||||
| .blueTip::before{ | ||||
|   display: inline-block; | ||||
|   content: ''; | ||||
|   width: 4px; | ||||
|   height: 18px; | ||||
|   background: #0B58FF; | ||||
|   border-radius: 1px; | ||||
|   margin-right: 8PX; | ||||
|   margin-top: 8px; | ||||
| } | ||||
| .app-container { | ||||
|   margin: 0 16px 0; | ||||
|   background-color: #fff; | ||||
|   border-radius: 4px; | ||||
|   padding: 16px 16px 0; | ||||
|   height: calc(100vh - 134px); | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
| @@ -1,170 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2022-01-21 14:43:06 | ||||
|  * @LastEditors: zhp | ||||
|  * @LastEditTime: 2024-04-17 10:03:39 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <!-- <div> --> | ||||
|   <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> --> | ||||
|   <div :id="id" :class="className" :style="{ height: height, width: width }" /> | ||||
|   <!-- </div> --> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import * as echarts from 'echarts' | ||||
| import 'echarts/theme/macarons' // echarts theme | ||||
| import resize from '@/mixins/resize' | ||||
| export default { | ||||
|   name: 'OverviewBar', | ||||
|   mixins: [resize], | ||||
|   props: { | ||||
|     id: { | ||||
|       type: String, | ||||
|       default: 'reportChart' | ||||
|     }, | ||||
|     className: { | ||||
|       type: String, | ||||
|       default: 'reportChart' | ||||
|     }, | ||||
|     width: { | ||||
|       type: String, | ||||
|       default: '100%' | ||||
|     }, | ||||
|     beilv: { | ||||
|       type: Number, | ||||
|       default: 1 | ||||
|     }, | ||||
|     height: { | ||||
|       type: String, | ||||
|       default: '30vh' | ||||
|     }, | ||||
|     legendPosition: { | ||||
|       type: String, | ||||
|       default: 'center' | ||||
|     }, | ||||
|     showLegend: { | ||||
|       type: Boolean, | ||||
|       default: false | ||||
|     }, | ||||
|     legendData: { | ||||
|       type: Array, | ||||
|       default: () => [] | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       chart: null | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.$nextTick(() => { | ||||
|       this.initChart() | ||||
|     }) | ||||
|   }, | ||||
|   beforeDestroy() { | ||||
|     if (!this.chart) { | ||||
|       return | ||||
|     } | ||||
|     this.chart.dispose() | ||||
|     this.chart = null | ||||
|   }, | ||||
|   methods: { | ||||
|     initChart() { | ||||
|       console.log(1111) | ||||
|       this.chart = echarts.init(document.getElementById(this.id)) | ||||
|       console.log(this.$parent); | ||||
|       this.chart.setOption({ | ||||
|         title: { | ||||
|           text: '', | ||||
|           // subtext: 'Fake Data' | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: 'axis' | ||||
|         }, | ||||
|         grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true }, | ||||
|         legend: { | ||||
|           data: ['工厂1', '工厂2'], | ||||
|           right: '90px', | ||||
|           top: '0%', | ||||
|           icon: 'rect', | ||||
|           itemWidth: 10, | ||||
|           itemHeight: 10, | ||||
|           itemGap: 40, | ||||
|         }, | ||||
|         // toolbox: { | ||||
|         //   show: true, | ||||
|         //   feature: { | ||||
|         //     dataView: { show: true, readOnly: false }, | ||||
|         //     magicType: { show: true, type: ['line', 'bar'] }, | ||||
|         //     restore: { show: true }, | ||||
|         //     saveAsImage: { show: true } | ||||
|         //   } | ||||
|         // }, | ||||
|         calculable: true, | ||||
|         xAxis: [ | ||||
|           { | ||||
|             type: 'category', | ||||
|             // prettier-ignore | ||||
|             data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | ||||
|           } | ||||
|         ], | ||||
|         yAxis: [ | ||||
|           { | ||||
|             type: 'value' | ||||
|           } | ||||
|         ], | ||||
|         grid: { | ||||
|           top: '20%', | ||||
|           left: "1%", | ||||
|           right: "3%", | ||||
|           bottom: "1%", | ||||
|           containLabel: true | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             name: '工厂1', | ||||
|             type: 'bar', | ||||
|             itemStyle: { | ||||
|               normal: { | ||||
|                 color: 'rgba(99, 189, 255, 1)', //改变折线点的颜色 | ||||
|                 lineStyle: { | ||||
|                   color: 'rgba(99, 189, 255, 1)' //改变折线颜色 | ||||
|                 } | ||||
|               } | ||||
|             }, | ||||
|             data: [ | ||||
|               2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 | ||||
|             ], | ||||
|           }, | ||||
|           { | ||||
|             name: '工厂2', | ||||
|             type: 'bar', | ||||
|             itemStyle: { | ||||
|               normal: { | ||||
|                 color: 'rgba(142, 240, 171, 1)', //改变折线点的颜色 | ||||
|                 lineStyle: { | ||||
|                   color: 'rgba(142, 240, 171, 1)' //改变折线颜色 | ||||
|                 } | ||||
|               } | ||||
|             }, | ||||
|             data: [ | ||||
|               2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 | ||||
|             ], | ||||
|           }, | ||||
|         ] | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| /* .reportChart { | ||||
|   position: absolute; | ||||
|   height: 100%; | ||||
|   width: 100%; | ||||
|   top: 10px; | ||||
| } */ | ||||
| </style> | ||||
| @@ -1,66 +0,0 @@ | ||||
|  | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2023-08-01 15:27:31 | ||||
|  * @LastEditors: zwq | ||||
|  * @LastEditTime: 2023-08-01 16:25:54 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
| 	<div :class="[className, { 'p-0': noPadding }]"> | ||||
| 		<slot /> | ||||
| 	</div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
| 	props: { | ||||
| 		size: { | ||||
| 			// 取值范围:  xl lg md sm | ||||
| 			type: String, | ||||
| 			default: 'de', | ||||
| 			validator: function (val) { | ||||
| 				return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1; | ||||
| 			}, | ||||
| 		}, | ||||
| 		noPadding: { | ||||
| 			type: Boolean, | ||||
| 			default: false, | ||||
| 		}, | ||||
| 	}, | ||||
| 	computed: { | ||||
| 		className: function () { | ||||
| 			return `${this.size}-title`; | ||||
| 		}, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| $pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px); | ||||
| $mgr: 8px; | ||||
| @each $size, $height in $pxls { | ||||
| 	.#{$size}-title { | ||||
| 		font-size: 18px; | ||||
| 		line-height: $height; | ||||
| 		color: #000; | ||||
| 		font-weight: 500; | ||||
| 		font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif; | ||||
|  | ||||
| 		&::before { | ||||
| 			content: ''; | ||||
| 			display: inline-block; | ||||
| 			vertical-align: top; | ||||
| 			width: 4px; | ||||
| 			height: $height + 2px; | ||||
| 			border-radius: 1px; | ||||
| 			margin-right: $mgr; | ||||
| 			background-color: #0b58ff; | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|  | ||||
| .p-0 { | ||||
| 	padding: 0; | ||||
| } | ||||
| </style> | ||||
| @@ -1,365 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2023-11-06 15:15:30 | ||||
|  * @LastEditTime: 2024-04-17 15:37:39 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <el-drawer class="drawer" :visible.sync="visible" size="50%"> | ||||
|     <small-title slot="title" :no-padding="true"> | ||||
|       {{ '碲化镉工厂生产数据详情' }} | ||||
|     </small-title> | ||||
|     <div class="detailBox"> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="8"> | ||||
|           <p class="title">工厂名称</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="8"> | ||||
|           <p class="title">时间维度</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="8"> | ||||
|           <p class="title">时间</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-divider></el-divider> | ||||
|       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false"> | ||||
|         {{ '芯片' }} | ||||
|       </small-title> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片产量</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片良率</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片良率</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片总功率</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">FTO投入量</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">CSS稼动率</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片段OEE</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片平均功率</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片人均产量</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片产能利用率</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false"> | ||||
|         {{ '标准组件' }} | ||||
|       </small-title> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">封装BOM</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">封装线OEE</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件良率</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件产量</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件总功率</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">封装产能利用率</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件人均产量</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件人均产量</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false"> | ||||
|         {{ 'BIPV产品' }} | ||||
|       </small-title> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">产品产量</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">人均产量</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片使用量</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片使用量</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">内部材料成本</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">内部材料成本</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">内部材料成本</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|     </div> | ||||
|   </el-drawer> | ||||
|  | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // import basicAdd from './basic-add'; | ||||
| // import { | ||||
| //   createQualityScrapLog, updateQualityScrapLog, getQualityScrapLog, getWorkOrderList, | ||||
| //   getTeamList, getDetList, getLineList | ||||
| // } from "@/api/base/qualityScrapLog"; | ||||
| // import { getList, } from "@/api/base/qualityScrapType"; | ||||
| import SmallTitle from './SmallTitle'; | ||||
| export default { | ||||
|   components: { | ||||
|     SmallTitle, | ||||
|   }, | ||||
|   // mixins: [basicAdd], | ||||
|   data() { | ||||
|     return { | ||||
|       urlOptions: { | ||||
|         isGetCode: false, | ||||
|         // codeURL: getCode, | ||||
|         // createURL: createQualityScrapLog, | ||||
|         // updateURL: updateQualityScrapLog, | ||||
|         // infoURL: getQualityScrapLog, | ||||
|       }, | ||||
|       lineList: [], | ||||
|       typeList: [], | ||||
|       workOrderList: [], | ||||
|       detList: [], | ||||
|       teamList: [], | ||||
|       sourceList: [ | ||||
|         { | ||||
|           id: 1, | ||||
|           name: '手动', | ||||
|         }, | ||||
|         { | ||||
|           id: 2, | ||||
|           name: '自动', | ||||
|         } | ||||
|       ], | ||||
|       sectionList: [], | ||||
|       visible: false, | ||||
|       dataForm: { | ||||
|         id: undefined, | ||||
|         logTime: undefined, | ||||
|         source: 1, | ||||
|         detId: undefined, | ||||
|         workOrderId: null, | ||||
|         teamId: undefined, | ||||
|         num: undefined, | ||||
|         lineId: undefined, | ||||
|         description: undefined, | ||||
|         // description: undefined, | ||||
|         remark: undefined, | ||||
|       }, | ||||
|       // materialList: [], | ||||
|       dataRule: { | ||||
|         // materialId: [{ required: true, message: "", trigger: "blur" }], | ||||
|         workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }], | ||||
|         num: [{ required: true, message: "数量不能为空", trigger: "blur" }], | ||||
|         detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }], | ||||
|  | ||||
|         logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }], | ||||
|       } | ||||
|     }; | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.getDict() | ||||
|     console.log('我看看', this.dataForm) | ||||
|     // this.getCurrentTime() | ||||
|   }, | ||||
|   methods: { | ||||
|     init() { | ||||
|       this.visible = true | ||||
|     }, | ||||
|     // getCurrentTime() { | ||||
|     //   // new Date().Format("yyyy-MM-dd HH:mm:ss") | ||||
|     //   this.dataForm.logTime = new Date() | ||||
|     //   // this.dataForm.logTime = year + "-" + month + "-" + day; | ||||
|     //   console.log(this.dataForm.logTime); | ||||
|     // }, | ||||
|     async getDict() { | ||||
|     //   // 物料列表 | ||||
|     //   const res = await getList() | ||||
|     //   this.typeList = res.data | ||||
|     //   getWorkOrderList().then((res) => { | ||||
|     //     console.log(res); | ||||
|     //     // console.log(response); | ||||
|     //     this.workOrderList = res.data.map((item) => { | ||||
|     //       return { | ||||
|     //         name: item.name, | ||||
|     //         id: item.id | ||||
|     //       } | ||||
|     //     }) | ||||
|     //     // console.log(this.formConfig[0].selectOptions); | ||||
|     //     // this.listQuery.total = response.data.total; | ||||
|     //   }) | ||||
|     //   getLineList().then((res) => { | ||||
|     //     console.log(res); | ||||
|     //     // console.log(response); | ||||
|     //     this.lineList = res.data.map((item) => { | ||||
|     //       return { | ||||
|     //         name: item.name, | ||||
|     //         id: item.id | ||||
|     //       } | ||||
|     //     }) | ||||
|     //     // console.log(this.formConfig[0].selectOptions); | ||||
|     //     // this.listQuery.total = response.data.total; | ||||
|     //   }) | ||||
|     //   getDetList().then((res) => { | ||||
|     //     console.log(res); | ||||
|     //     // console.log(response); | ||||
|     //     this.detList = res.data.map((item) => { | ||||
|     //       return { | ||||
|     //         name: item.content, | ||||
|     //         id: item.id | ||||
|     //       } | ||||
|     //     }) | ||||
|     //     // console.log(this.formConfig[0].selectOptions); | ||||
|     //     // this.listQuery.total = response.data.total; | ||||
|     //   }) | ||||
|     //   getTeamList().then((res) => { | ||||
|     //     console.log(res); | ||||
|     //     // console.log(response); | ||||
|     //     this.teamList = res.data.map((item) => { | ||||
|     //       return { | ||||
|     //         name: item.name, | ||||
|     //         id: item.id | ||||
|     //       } | ||||
|     //     }) | ||||
|     //     // console.log(this.formConfig[0].selectOptions); | ||||
|     //     // this.listQuery.total = response.data.total; | ||||
|     //   }) | ||||
|     // }, | ||||
|     // async getWorksectionById(lineId) { | ||||
|     //   if (lineId) { | ||||
|     //     const { code, data } = await this.$axios({ | ||||
|     //       url: '/base/core-workshop-section/listByParentId', | ||||
|     //       method: 'get', | ||||
|     //       params: { | ||||
|     //         id: lineId, | ||||
|     //       }, | ||||
|     //     }); | ||||
|     //     if (code == 0) { | ||||
|     //       console.log(data) | ||||
|     //       this.sectionList = data.map((item) => { | ||||
|     //         return { | ||||
|     //           name: item.name, | ||||
|     //           id: item.id, | ||||
|     //         }; | ||||
|     //       }); | ||||
|     //     } | ||||
|     //   } else { | ||||
|     //     this.$axios({ | ||||
|     //       url: '/base/core-workshop-section/listAll', | ||||
|     //       method: 'get', | ||||
|     //       // params: { | ||||
|     //       //   id: lineId, | ||||
|     //       // }, | ||||
|     //     }).then((res) => { | ||||
|     //       // console.log(data) | ||||
|     //       this.sectionList = res.data.map((item) => { | ||||
|     //         return { | ||||
|     //           name: item.name, | ||||
|     //           id: item.id, | ||||
|     //         }; | ||||
|     //       }); | ||||
|     //     }) | ||||
|     //   } | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
| <style scoped> | ||||
|   .drawer >>> .el-drawer { | ||||
|   border-radius: 8px 0 0 8px; | ||||
| } | ||||
|  | ||||
| .drawer >>> .el-form-item__label { | ||||
|   padding: 0; | ||||
| } | ||||
|  | ||||
| .drawer >>> .el-drawer__header { | ||||
|   margin: 0; | ||||
|   padding: 32px 32px 24px; | ||||
|   border-bottom: 1px solid #dcdfe6; | ||||
|   margin-bottom: 30px; | ||||
| } | ||||
| .detailBox p { | ||||
|   margin: 0; | ||||
|   padding: 0 32px; | ||||
| } | ||||
| .detailBox .title { | ||||
|   /* width: 56px; */ | ||||
|   /* height: 14px; */ | ||||
|   font-family: Source Han Sans CN, Source Han Sans CN; | ||||
|   font-weight: 400; | ||||
|   font-size: 14px; | ||||
|   color: rgba(0, 0, 0, 0.85); | ||||
|   line-height: 16px; | ||||
|   text-align: left; | ||||
|   font-style: normal; | ||||
|   text-transform: none; | ||||
| } | ||||
| .detailBox .text { | ||||
|   font-size: 14px; | ||||
|   font-weight: 400; | ||||
|   color: rgba(102,102,102,0.75); | ||||
|   padding-bottom: 20px; | ||||
| } | ||||
|  | ||||
| </style> | ||||
| @@ -1,631 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-15 10:49:13 | ||||
|  * @LastEditTime: 2024-04-17 16:12:20 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)"> | ||||
|     <div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;"> | ||||
|       <ButtonNav :menus="['碲化镉工厂', '铜铟镓硒工厂']" :button-mode="true" @change="currentMenu = $event"> | ||||
|       </ButtonNav> | ||||
|       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> | ||||
|         <el-form-item label="时间维度" prop="reportTime"> | ||||
|           <el-select clearable v-model="timeSelect" placeholder="请选择"> | ||||
|             <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <!-- <el-form-item v-show="timeSelect === 'day'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker v-model="listQuery.reportTime" type="datetimerange" range-separator="至" | ||||
|             start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDayTime" end-placeholder="结束日期"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> --> | ||||
|         <!-- <el-form-item v-show="timeSelect === 'week'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker v-model="listQuery.reportTime[0]" type="week" format="yyyy 第 WW 周" placeholder="选择周" | ||||
|             style="width: 180px" @change="onValueChange"> | ||||
|           </el-date-picker> | ||||
|           至 | ||||
|           <el-date-picker v-model="listQuery.reportTime[1]" type="week" format="yyyy 第 WW 周" placeholder="选择周" | ||||
|             style="width: 180px" @change="onValueChange"> | ||||
|           </el-date-picker> | ||||
|           <span v-if="listQuery.reportTime[0] && listQuery.reportTime[1]" style="margin-left: 10px"> | ||||
|             {{ date1 }} 至 {{ date2 }},共 {{ weekNum }} 周 | ||||
|           </span> | ||||
|         </el-form-item> --> | ||||
|         <el-form-item v-show="timeSelect === 'month'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker v-model="listQuery.reportTime" type="monthrange" range-separator="至" start-placeholder="开始月份" | ||||
|             end-placeholder="结束月份" @change="changeTime"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="timeSelect === 'year'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime[0]" value-format="yyyy" type="year" | ||||
|             placeholder="开始时间"> | ||||
|           </el-date-picker> | ||||
|           ~ | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime[1]" value-format="yyyy" type="year" placeholder="结束时间" | ||||
|             @change="getYear"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="工厂名称" prop="factoryId"> | ||||
|           <el-select v-model="listQuery.factoryId" placeholder="请选择工厂名称" multiple="true" clearable> | ||||
|             <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <!-- <el-form-item label="玻璃类型" prop="type"> | ||||
|           <el-select v-model="listQuery.type" placeholder="请选择玻璃类型"> | ||||
|             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> --> | ||||
|         <!-- <el-form-item label="玻璃类型" prop="type"> | ||||
|           <el-select v-model="listQuery.type" placeholder="请选择玻璃类型"> | ||||
|             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> --> | ||||
|         <el-form-item> | ||||
|           <el-button type="primary" size="small" @click="getDataList">查询</el-button> | ||||
|           <el-button type="primary" size="small" plain @click="handleExport">导出</el-button> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|       <!-- <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> --> | ||||
|       <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" | ||||
|         :table-data="tableData"> | ||||
|         <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right" | ||||
|           :method-list="tableBtn" @clickBtn="handleClick" /> | ||||
|       </base-table> | ||||
|       <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @refreshDataList="successSubmit" /> | ||||
|  | ||||
|       <!-- <el-row :gutter="24"> --> | ||||
|       <!-- <el-col :span="12" v-for="item in  dataList" :key="item.id"> --> | ||||
|       <!-- <line-chart class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart> --> | ||||
|       <!-- </el-col> --> | ||||
|       <!-- <el-col :span="12"> | ||||
|             <line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart> | ||||
|           </el-col> --> | ||||
|       </el-row> | ||||
|     </div> | ||||
|  | ||||
|     <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all" | ||||
|       :type="listQuery.reportType" @refreshDataList="getDataList" /> --> | ||||
|     <!-- <pagination | ||||
| 			:limit.sync="listQuery.pageSize" | ||||
| 			:page.sync="listQuery.pageNo" | ||||
| 			:total="listQuery.total" | ||||
| 			@pagination="getDataList" /> --> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // import { parseTime } from '../../core/mixins/code-filter'; | ||||
| // import { getGlassPage, exportGlasscExcel } from '@/api/report/glass'; | ||||
| // import inputTable from './inputTable.vue'; | ||||
| import lineChart from './lineChart'; | ||||
| import moment from 'moment' | ||||
| import ButtonNav from '@/components/ButtonNav' | ||||
| import basicPage from '@/mixins/basic-page' | ||||
| import AddOrUpdate from './add-or-updata'; | ||||
|  | ||||
| // import FileSaver from 'file-saver' | ||||
| // import * as XLSX from 'xlsx' | ||||
| export default { | ||||
|   components: { lineChart, ButtonNav, AddOrUpdate }, | ||||
|   mixins: [basicPage], | ||||
| 	data() { | ||||
|     return { | ||||
|       listQuery: { | ||||
|         pageSize: 10, | ||||
|         pageNo: 1, | ||||
|         factoryId: null, | ||||
|         total: 0, | ||||
|         type: null, | ||||
|         // reportType: 2, | ||||
|         reportTime: [] | ||||
|       }, | ||||
|       detailOrUpdateVisible:false, | ||||
|       date1: undefined, | ||||
|       date2: undefined, | ||||
|       tableBtn: [ | ||||
|           { | ||||
|             type: 'detail', | ||||
|             btnName: '详情', | ||||
|         }, | ||||
|         // { | ||||
|         //     type: 'delete', | ||||
|         //     btnName: '删除', | ||||
|         //   }, | ||||
|       ].filter((v) => v), | ||||
|       typeList: [ | ||||
|         { | ||||
|           name: '芯片', | ||||
|           id: 0, | ||||
|         }, | ||||
|         { | ||||
|           name: '标准组件', | ||||
|           id: 1, | ||||
|         }, | ||||
|         { | ||||
|           name: 'BIPV产品', | ||||
|           id: 2, | ||||
|         }, | ||||
|       ], | ||||
|       // weekNum: undefined, | ||||
|       dataList: [ | ||||
|         { | ||||
|           id:'first', | ||||
|         }, | ||||
|          { | ||||
|           id: 'second', | ||||
|         }, | ||||
|          { | ||||
|           id: 'third', | ||||
|         }, | ||||
|          { | ||||
|           id: 'fourth', | ||||
|         }, | ||||
|          { | ||||
|           id: 'fifth', | ||||
|         }, | ||||
|          { | ||||
|           id: 'sixth', | ||||
|         }, | ||||
|       ], | ||||
| 			urlOptions: { | ||||
| 				// getDataListURL: getGlassPage, | ||||
| 				// exportURL: exportGlasscExcel | ||||
|       }, | ||||
|       mainFormConfig: [ | ||||
|       	{ | ||||
|           type: 'select', | ||||
|           label: '工单', | ||||
|           placeholder: '请选择工单', | ||||
|           param: 'workOrderId', | ||||
|           selectOptions: [], | ||||
|         }, | ||||
|         // { | ||||
|         // 	type: 'select', | ||||
|         // 	label: '产线', | ||||
|         // 	placeholder: '请选择产线', | ||||
|         // 	param: 'lineId', | ||||
|         // 	selectOptions: [], | ||||
|         // }, | ||||
|         // 选项切换 | ||||
|         // { | ||||
|         // 	type: 'select', | ||||
|         // 	label: '时间类型', | ||||
|         // 	param: 'dateFilterType', | ||||
|         // 	defaultSelect: 0, | ||||
|         // 	selectOptions: [ | ||||
|         // 		{ id: 0, name: '按时间段' }, | ||||
|         // 		{ id: 1, name: '按日期' }, | ||||
|         // 	], | ||||
|         // 	index: 2, | ||||
|         // 	extraOptions: [ | ||||
|         { | ||||
|           // parent: 'dateFilterType', | ||||
|           // 时间段选择 | ||||
|           type: 'datePicker', | ||||
|           label: '时间段', | ||||
|           // dateType: 'datetimerange', | ||||
|           dateType: 'datetimerange', | ||||
|           format: 'yyyy-MM-dd HH:mm:ss', | ||||
|           valueFormat: 'yyyy-MM-ddTHH:mm:ss', | ||||
|           rangeSeparator: '-', | ||||
|           rangeSeparator: '-', | ||||
|           startPlaceholder: '开始时间', | ||||
|           endPlaceholder: '结束时间', | ||||
|           param: 'recordTime', | ||||
|         }, | ||||
|         // 		{ | ||||
|         // 			parent: 'dateFilterType', | ||||
|         // 			// 日期选择 | ||||
|         // 			type: 'datePicker', | ||||
|         // 			// label: '日期', | ||||
|         // 			dateType: 'date', | ||||
|         // 			placeholder: '选择日期', | ||||
|         // 			format: 'yyyy-MM-dd', | ||||
|         // 			valueFormat: 'yyyy-MM-dd', | ||||
|         // 			param: 'timeday', | ||||
|         // 		}, | ||||
|         // 	], | ||||
|         // }, | ||||
|         { | ||||
|           type:'button', | ||||
|           btnName: '查询', | ||||
|           name: 'search', | ||||
|           color: 'primary', | ||||
|         }, | ||||
|          { | ||||
|           type:'separate' | ||||
|         }, | ||||
|         // { | ||||
|         //   type: this.$auth.hasPermi( | ||||
|         //     'analysis:equipment:export' | ||||
|         //   ) | ||||
|         //     ? 'separate' | ||||
|         //     : '', | ||||
|         // }, | ||||
|         { | ||||
|           type:'button', | ||||
|           btnName: '导出', | ||||
|           name: 'export', | ||||
|           color: 'warning', | ||||
|         }, | ||||
|       ], | ||||
|       formConfig: [ | ||||
|         { | ||||
|           type: 'title', | ||||
|           label: '成本管理', | ||||
|         }, | ||||
|       ], | ||||
|       timeList: [ | ||||
|         // { | ||||
|         //   value: 'day', | ||||
|         //   label: '日' | ||||
|         // }, | ||||
|         // { | ||||
|         //   value: 'week', | ||||
|         //   label: '周' | ||||
|         // }, | ||||
|         { | ||||
|           value: 'month', | ||||
|           label:'月' | ||||
|         }, | ||||
|         { | ||||
|           value: 'year', | ||||
|           label: '年' | ||||
|         } | ||||
|       ], | ||||
|       factoryList: [ | ||||
|         { | ||||
|           name: '测试', | ||||
|           id:1 | ||||
|         }, | ||||
|         { | ||||
|           name: '测试2', | ||||
|           id: 2 | ||||
|         } | ||||
|       ], | ||||
|       tableProps: [ | ||||
|         // { | ||||
|         // 	prop: 'createTime', | ||||
|         // 	label: '添加时间', | ||||
|         // 	fixed: true, | ||||
|         // 	width: 180, | ||||
|         // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | ||||
|         // }, | ||||
|         { | ||||
|           prop: 'userName', | ||||
|           label: '日期', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'nickName', | ||||
|           label: '工厂名称', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'type', | ||||
|           label: '玻璃类型', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'inNum', | ||||
|           label: '投入数量', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'putNum', | ||||
|           label: '产出数量', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'goodNum', | ||||
|           label: '良品数量', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'goodYelid', | ||||
|           label: '良品率%', | ||||
|         }, | ||||
|       ], | ||||
|       timeSelect:'month', | ||||
|       startTimeStamp:null, //开始时间 | ||||
|       endTimeStamp:null, //结束时间 | ||||
|       // date:'凯盛玻璃控股成员企业2024生产数据', | ||||
| 			// reportTime: '', | ||||
| 			startTimeStamp: '', | ||||
| 			endTimeStamp: '', | ||||
|       tableData: [ | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas:'111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|           // subcomponent: row | ||||
|         } | ||||
|       ], | ||||
| 			// proLineList: [], | ||||
| 			// all: {} | ||||
| 		}; | ||||
|   }, | ||||
|   computed: { | ||||
|     weekNum() { | ||||
|       return Math.round((this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 60 * 60 * 1000 * 7)) + 1 | ||||
|     }, | ||||
|   }, | ||||
| 	mounted() { | ||||
|     this.getDict() | ||||
|     // this.getCurrentYearFirst() | ||||
|     // this.getDataList() | ||||
| 	}, | ||||
|   methods: { | ||||
|     otherMethods(val) { | ||||
|       this.detailOrUpdateVisible = true; | ||||
|       this.addOrEditTitle = "详情"; | ||||
|       this.$nextTick(() => { | ||||
|         this.$refs.detailOrUpdate.init(val.data.id); | ||||
|       }); | ||||
|     }, | ||||
|     buttonClick() { | ||||
|  | ||||
|     }, | ||||
|     getYear(e) { | ||||
|       if (this.listQuery.reportTime[0] && e - this.listQuery.reportTime[0] > 10) { | ||||
|         this.$message({ | ||||
|           message: '年份起止时间不能超过十年', | ||||
|           type: 'warning' | ||||
|         }); | ||||
|         // console.log(); | ||||
|       } | ||||
|       // console.log(e); | ||||
|     }, | ||||
|     onValueChange(picker, k) { // 选中近k周后触发的操作 | ||||
|       if (this.listQuery.reportTime[0] && this.listQuery.reportTime[1]) { | ||||
|         console.log(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000) | ||||
|         this.date1 = moment(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') | ||||
|         // this.onValueChange()   // 这里为我们希望value改变时触发的方法 | ||||
|         this.date2 = moment(this.listQuery.reportTime[1].getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') | ||||
|         const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000); if (numDays > 168) { | ||||
|           console.log(numDays) | ||||
|           this.$message({ | ||||
|             message: '周范围不能超过24周', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           // this.onValueChange() | ||||
|         } | ||||
|     } | ||||
|     }, | ||||
|     changeDayTime() { | ||||
|       if (this.listQuery.reportTime) { | ||||
|         // this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         // this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         console.log(this.listQuery.reportTime[1]) | ||||
|         const numDays = (new Date(this.listQuery.reportTime[1]).getTime() - new Date(this.listQuery.reportTime[0]).getTime()) / (24 * 3600 * 1000); if (numDays > 30) { | ||||
|           this.$message({ | ||||
|             message: '时间范围不能超过30天', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|         } | ||||
|       } else { | ||||
|       } | ||||
|     }, | ||||
|     changeTime(value) { | ||||
|       if (this.listQuery.reportTime) { | ||||
|         const timeStamp = this.listQuery.reportTime[1].getMonth(); //标准时间转为时间戳,毫秒级别 | ||||
|         const fullyear = this.listQuery.reportTime[1].getFullYear() | ||||
|         let days = 0 | ||||
|         switch (timeStamp) { | ||||
|           case 0: | ||||
|           case 2: | ||||
|           case 4: | ||||
|           case 6: | ||||
|           case 7: | ||||
|           case 9: | ||||
|           case 11: | ||||
|             days = 31 | ||||
|             break | ||||
|           case 3: | ||||
|           case 4: | ||||
|           case 8: | ||||
|           case 10: | ||||
|             days = 30 | ||||
|             break | ||||
|           case 1: | ||||
|             if ((fullyear % 400 === 0) || (fullyear % 4 === 0 && fullyear % 100 !== 0)) { | ||||
|               days = 29 | ||||
|             } else { | ||||
|               days = 28 | ||||
|             } | ||||
|             break | ||||
|         } | ||||
|         let startTime = moment(new Date(this.listQuery.reportTime[0]).setDate(1, 0, 0, 0)).format('YYYY-MM-DD HH:mm:ss') | ||||
|         // this.startTimeStamp = this.timeFun(new Date(fullyear, timeStamp, 1, 7, 0, 1).getTime()); //开始时间 | ||||
|         let endTime = this.timeFun(new Date(fullyear, timeStamp, days).getTime()) + ' 23:59:59'; //结束时间 | ||||
|         // console.log(endTimeStamp); | ||||
|         // let endTime = moment(this.listQuery.reportTime[1]).month(monthNum - 1).date(1).endOf("month").format("YYYY-MM-DD"); | ||||
|         // console.log(endTime); | ||||
|         // console.log(moment(new Date(this.listQuery.reportTime[1]).setDate(31, 23, 59, 59)).format('YYYY-MM-DD HH:mm:ss')) | ||||
|         // console.log(moment(new Date(this.listQuery.reportTime[1]).getTime()).format('YYYY-MM-DD HH:mm:ss')) | ||||
|  | ||||
|         // this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         // this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         const numDays = (new Date(endTime).getTime() - new Date(startTime).getTime()) / (24 * 3600 * 1000); if (numDays > 730) { | ||||
|           this.$message({ | ||||
|             message: '时间范围不能超过24个月', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|         } else { | ||||
|           this.listQuery.reportTime[0] = startTime | ||||
|           this.listQuery.reportTime[1] = endTime | ||||
|         } | ||||
|       } else { | ||||
|         console.log(this.listQuery.reportTime[0]) | ||||
|       } | ||||
|     }, | ||||
|     // handleTime() { | ||||
|     //   this.$forceUpdate() | ||||
|     //   // this.$nextTick(() => [ | ||||
|  | ||||
|     //   // ]) | ||||
|     // }, | ||||
|     // getCurrentYearFirst() { | ||||
|     //   let date = new Date(); | ||||
|     //   date.setDate(1); | ||||
|     //   date.setMonth(0); | ||||
|     //   this.reportTime = date; | ||||
|     //   this.startTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()); //开始时间 | ||||
|     //   this.endTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()); //结束时间 | ||||
|     //   this.listQuery.reportTime[0] = parseTime(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|     //   this.listQuery.reportTime[1] = parseTime(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 100 | ||||
|     // }, | ||||
|     // changeTime(val) { | ||||
|     //   if (val) { | ||||
|     //     // let timeStamp = val.getTime(); //标准时间转为时间戳,毫秒级别 | ||||
|     //     // this.endTimeStamp = this.timeFun(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()); //开始时间 | ||||
|     //     // this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()); //结束时间 | ||||
|     //     // this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|     //     // this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|     //   } else { | ||||
|     //     this.listQuery.reportTime = [] | ||||
|     //   } | ||||
|     // }, | ||||
|     async getDict() { | ||||
|       this.$refs.lineChart.initChart() | ||||
| 			// 产线列表 | ||||
| 			// const res = await getCorePLList(); | ||||
| 			// this.proLineList = res.data; | ||||
| 		}, | ||||
|     // 获取数据列表 | ||||
|     multipliedByHundred(str) { | ||||
|       console.log(str); | ||||
|       // console.log(str) | ||||
|       if ( str != 0) { | ||||
|         let floatVal = parseFloat(str); | ||||
|         if (isNaN(floatVal)) { | ||||
|           return 0; | ||||
|         } | ||||
|         floatVal = Math.round(str * 10000) / 100; | ||||
|         let strVal = floatVal.toString(); | ||||
|         let searchVal = strVal.indexOf('.'); | ||||
|         if (searchVal < 0) { | ||||
|           searchVal = strVal.length; | ||||
|           strVal += '.'; | ||||
|         } | ||||
|         while (strVal.length <= searchVal + 2) { | ||||
|           strVal += '0'; | ||||
|         } | ||||
|         return parseFloat(strVal); | ||||
|       } | ||||
|  | ||||
|     }, | ||||
|     async getDataList() { | ||||
|     }, | ||||
|     add0(m) { | ||||
|       return m < 10 ? '0' + m : m | ||||
|     }, | ||||
|     format(shijianchuo) { | ||||
|       //shijianchuo是整数,否则要parseInt转换 | ||||
|       var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss') | ||||
|       // console.log(time) | ||||
|       // var y = time.getFullYear(); | ||||
|       // var m = time.getMonth() + 1; | ||||
|       // var d = time.getDate(); | ||||
|       // var h = time.getHours(); | ||||
|       // var mm = time.getMinutes(); | ||||
|       // var s = time.getSeconds(); | ||||
|       return time | ||||
|     }, | ||||
| 		//时间戳转为yy-mm-dd hh:mm:ss | ||||
| 		timeFun(unixtimestamp) { | ||||
| 				var unixtimestamp = new Date(unixtimestamp); | ||||
| 				var year = 1900 + unixtimestamp.getYear(); | ||||
| 				var month = "0" + (unixtimestamp.getMonth() + 1); | ||||
| 				var date = "0" + unixtimestamp.getDate(); | ||||
| 				return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length) | ||||
| 		}, | ||||
| 		buttonClick(val) { | ||||
| 			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; | ||||
| 			switch (val.btnName) { | ||||
| 				case 'search': | ||||
| 					this.listQuery.pageNo = 1; | ||||
| 					this.listQuery.pageSize = 10; | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'export': | ||||
| 					this.handleExport(); | ||||
| 					break; | ||||
| 				default: | ||||
| 					console.log(val); | ||||
| 			} | ||||
| 		}, | ||||
| 		/** 导出按钮操作 */ | ||||
|     handleExport() { | ||||
|       // 处理查询参数 | ||||
|       // var xlsxParam = { raw: true }; | ||||
|       // /* 从表生成工作簿对象 */ | ||||
|       // import('xlsx').then(excel => { | ||||
|       //   var wb = excel.utils.table_to_book( | ||||
|       //     document.querySelector("#exportTable"), | ||||
|       //     xlsxParam | ||||
|       //   ); | ||||
|       //   /* 获取二进制字符串作为输出 */ | ||||
|       //   var wbout = excel.write(wb, { | ||||
|       //     bookType: "xlsx", | ||||
|       //     bookSST: true, | ||||
|       //     type: "array", | ||||
|       //   }); | ||||
|       //   try { | ||||
|       //     FileSaver.saveAs( | ||||
|       //       //Blob 对象表示一个不可变、原始数据的类文件对象。 | ||||
|       //       //Blob 表示的不一定是JavaScript原生格式的数据。 | ||||
|       //       //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 | ||||
|       //       //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。 | ||||
|       //       new Blob([wbout], { type: "application/octet-stream" }), | ||||
|       //       //设置导出文件名称 | ||||
|       //       "许昌安彩日原片生产汇总.xlsx" | ||||
|       //     ); | ||||
|       //   } catch (e) { | ||||
|       //     if (typeof console !== "undefined") console.log(e, wbout); | ||||
|       //   } | ||||
|       //   return wbout; | ||||
|       //   //do something...... | ||||
|       // }) | ||||
|  | ||||
|     }, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| /* .blueTip { */ | ||||
| 	/* padding-bottom: 10px; */ | ||||
| /* } */ | ||||
| /* .blueTi */ | ||||
| .blueTip::before{ | ||||
|   display: inline-block; | ||||
|   content: ''; | ||||
|   width: 4px; | ||||
|   height: 18px; | ||||
|   background: #0B58FF; | ||||
|   border-radius: 1px; | ||||
|   margin-right: 8PX; | ||||
|   margin-top: 8px; | ||||
| } | ||||
| .app-container { | ||||
|   margin: 0 16px 0; | ||||
|   background-color: #fff; | ||||
|   border-radius: 4px; | ||||
|   padding: 16px 16px 0; | ||||
|   height: calc(100vh - 134px); | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
| @@ -1,170 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2022-01-21 14:43:06 | ||||
|  * @LastEditors: zhp | ||||
|  * @LastEditTime: 2024-04-17 10:03:39 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <!-- <div> --> | ||||
|   <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> --> | ||||
|   <div :id="id" :class="className" :style="{ height: height, width: width }" /> | ||||
|   <!-- </div> --> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import * as echarts from 'echarts' | ||||
| import 'echarts/theme/macarons' // echarts theme | ||||
| import resize from '@/mixins/resize' | ||||
| export default { | ||||
|   name: 'OverviewBar', | ||||
|   mixins: [resize], | ||||
|   props: { | ||||
|     id: { | ||||
|       type: String, | ||||
|       default: 'reportChart' | ||||
|     }, | ||||
|     className: { | ||||
|       type: String, | ||||
|       default: 'reportChart' | ||||
|     }, | ||||
|     width: { | ||||
|       type: String, | ||||
|       default: '100%' | ||||
|     }, | ||||
|     beilv: { | ||||
|       type: Number, | ||||
|       default: 1 | ||||
|     }, | ||||
|     height: { | ||||
|       type: String, | ||||
|       default: '30vh' | ||||
|     }, | ||||
|     legendPosition: { | ||||
|       type: String, | ||||
|       default: 'center' | ||||
|     }, | ||||
|     showLegend: { | ||||
|       type: Boolean, | ||||
|       default: false | ||||
|     }, | ||||
|     legendData: { | ||||
|       type: Array, | ||||
|       default: () => [] | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       chart: null | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.$nextTick(() => { | ||||
|       this.initChart() | ||||
|     }) | ||||
|   }, | ||||
|   beforeDestroy() { | ||||
|     if (!this.chart) { | ||||
|       return | ||||
|     } | ||||
|     this.chart.dispose() | ||||
|     this.chart = null | ||||
|   }, | ||||
|   methods: { | ||||
|     initChart() { | ||||
|       console.log(1111) | ||||
|       this.chart = echarts.init(document.getElementById(this.id)) | ||||
|       console.log(this.$parent); | ||||
|       this.chart.setOption({ | ||||
|         title: { | ||||
|           text: '', | ||||
|           // subtext: 'Fake Data' | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: 'axis' | ||||
|         }, | ||||
|         grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true }, | ||||
|         legend: { | ||||
|           data: ['工厂1', '工厂2'], | ||||
|           right: '90px', | ||||
|           top: '0%', | ||||
|           icon: 'rect', | ||||
|           itemWidth: 10, | ||||
|           itemHeight: 10, | ||||
|           itemGap: 40, | ||||
|         }, | ||||
|         // toolbox: { | ||||
|         //   show: true, | ||||
|         //   feature: { | ||||
|         //     dataView: { show: true, readOnly: false }, | ||||
|         //     magicType: { show: true, type: ['line', 'bar'] }, | ||||
|         //     restore: { show: true }, | ||||
|         //     saveAsImage: { show: true } | ||||
|         //   } | ||||
|         // }, | ||||
|         calculable: true, | ||||
|         xAxis: [ | ||||
|           { | ||||
|             type: 'category', | ||||
|             // prettier-ignore | ||||
|             data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | ||||
|           } | ||||
|         ], | ||||
|         yAxis: [ | ||||
|           { | ||||
|             type: 'value' | ||||
|           } | ||||
|         ], | ||||
|         grid: { | ||||
|           top: '20%', | ||||
|           left: "1%", | ||||
|           right: "3%", | ||||
|           bottom: "1%", | ||||
|           containLabel: true | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             name: '工厂1', | ||||
|             type: 'bar', | ||||
|             itemStyle: { | ||||
|               normal: { | ||||
|                 color: 'rgba(99, 189, 255, 1)', //改变折线点的颜色 | ||||
|                 lineStyle: { | ||||
|                   color: 'rgba(99, 189, 255, 1)' //改变折线颜色 | ||||
|                 } | ||||
|               } | ||||
|             }, | ||||
|             data: [ | ||||
|               2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 | ||||
|             ], | ||||
|           }, | ||||
|           { | ||||
|             name: '工厂2', | ||||
|             type: 'bar', | ||||
|             itemStyle: { | ||||
|               normal: { | ||||
|                 color: 'rgba(142, 240, 171, 1)', //改变折线点的颜色 | ||||
|                 lineStyle: { | ||||
|                   color: 'rgba(142, 240, 171, 1)' //改变折线颜色 | ||||
|                 } | ||||
|               } | ||||
|             }, | ||||
|             data: [ | ||||
|               2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 | ||||
|             ], | ||||
|           }, | ||||
|         ] | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| /* .reportChart { | ||||
|   position: absolute; | ||||
|   height: 100%; | ||||
|   width: 100%; | ||||
|   top: 10px; | ||||
| } */ | ||||
| </style> | ||||
| @@ -1,372 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-01-24 15:15:24 | ||||
|  * @LastEditTime: 2024-04-17 16:15:23 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)"> | ||||
|     <div class="app-container" style="padding: 16px 24px 0; max-height: 45vh; flex-grow: 1;"> | ||||
|       <!-- <div style="position: relative;z-index: 999;"> --> | ||||
|       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> | ||||
|         <el-form-item label="时间维度" prop="reportTime"> | ||||
|           <el-select clearable v-model="timeSelect" placeholder="请选择"> | ||||
|             <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="timeSelect === 'month'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime" type="monthrange" range-separator="至" | ||||
|             start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="timeSelect === 'year'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker clearable v-model="listQuery.reportTime[0]" value-format="yyyy" type="year" | ||||
|             placeholder="开始时间"> | ||||
|           </el-date-picker> | ||||
|           ~ | ||||
|           <el-date-picker v-model="listQuery.reportTime[1]" value-format="yyyy" type="year" placeholder="结束时间" | ||||
|             @change="getYear"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="工厂名称" prop="factoryId"> | ||||
|           <el-select clearable v-model="listQuery.factoryId" placeholder="请选择工厂名称"> | ||||
|             <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="玻璃类型" prop="type"> | ||||
|           <el-select clearable v-model="listQuery.type" placeholder="请选择玻璃类型"> | ||||
|             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item> | ||||
|           <el-button type="primary" size="small" @click="getDataList">查询</el-button> | ||||
|           <el-button type="primary" size="small" plain @click="handleExport">导出</el-button> | ||||
|         </el-form-item> | ||||
|       </el-form> | ||||
|       <!-- </div> --> | ||||
|       <!-- <el-row style="height: 500px;"> --> | ||||
|       <!-- <div> --> | ||||
|       <line-chart class="yearChart" ref="lineChart" style="height: 35vh;width: 100%"></line-chart> | ||||
|       <!-- </div> --> | ||||
|       <!-- </el-row> --> | ||||
|     </div> | ||||
|     <!-- <el-row style="height: 400px;"> --> | ||||
|     <!-- </el-row> --> | ||||
|     <div class="app-container" style="margin-top: 18px; height: unset; flex-grow: 1; padding: 16px;"> | ||||
|       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|       <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" | ||||
|         :table-data="tableData"> | ||||
|       </base-table> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // import { parseTime } from '../../core/mixins/code-filter'; | ||||
| // import { getGlassPage, exportGlasscExcel } from '@/api/report/glass'; | ||||
| // import inputTable from './inputTable.vue'; | ||||
| import { report } from 'process'; | ||||
| import lineChart from './lineChart'; | ||||
| import moment from 'moment' | ||||
| // import FileSaver from 'file-saver' | ||||
| // import * as XLSX from 'xlsx' | ||||
| export default { | ||||
|   components: { lineChart }, | ||||
| 	data() { | ||||
|     return { | ||||
|       listQuery: { | ||||
|         pageSize: 10, | ||||
|         pageNo: 1, | ||||
|         factoryId: null, | ||||
|         total: 0, | ||||
|         type: null, | ||||
|         // reportType: 2, | ||||
|         reportTime: [] | ||||
|       }, | ||||
|       // startDatePicker: this.beginDate(), | ||||
|       // endDatePicker: this.processDate(), | ||||
|       yeartsStart: '', | ||||
|       yeartsEnd: '', | ||||
| 			urlOptions: { | ||||
| 				// getDataListURL: getGlassPage, | ||||
| 				// exportURL: exportGlasscExcel | ||||
|       }, | ||||
|       timeList: [ | ||||
|         { | ||||
|           value: 'month', | ||||
|           label:'月' | ||||
|         }, | ||||
|         { | ||||
|           value: 'year', | ||||
|           label: '年' | ||||
|         } | ||||
|       ], | ||||
|       factoryList: [ | ||||
|         { | ||||
|           name: '测试', | ||||
|           id:1 | ||||
|         } | ||||
|       ], | ||||
|       typeList: [ | ||||
|         { | ||||
|           name: '芯片', | ||||
|           id:0, | ||||
|         }, | ||||
|         { | ||||
|           name: '标准组件', | ||||
|           id: 1, | ||||
|         }, | ||||
|         { | ||||
|           name: 'BIPV产品', | ||||
|           id: 2, | ||||
|         }, | ||||
|       ], | ||||
|       formConfig: [ | ||||
|         { | ||||
|           type: 'title', | ||||
|           label: '报表管理', | ||||
|         }, | ||||
|       ], | ||||
|       tableProps: [ | ||||
|         // { | ||||
|         // 	prop: 'createTime', | ||||
|         // 	label: '添加时间', | ||||
|         // 	fixed: true, | ||||
|         // 	width: 180, | ||||
|         // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | ||||
|         // }, | ||||
|         { | ||||
|           prop: 'userName', | ||||
|           label: '科目', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'nickName', | ||||
|           label: '类别', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'datas', | ||||
|           label: '数值', | ||||
|           // subcomponent: row | ||||
|         }, | ||||
|         { | ||||
|           prop: 'unit', | ||||
|           label: '单位', | ||||
|           // subcomponent: row | ||||
|         }, | ||||
|         { | ||||
|           prop: 'remark', | ||||
|           label: '备注', | ||||
|           // subcomponent: row | ||||
|         } | ||||
|       ], | ||||
|       timeSelect:'month', | ||||
|       startTimeStamp:null, //开始时间 | ||||
|       endTimeStamp:null, //结束时间 | ||||
|       date:'凯盛玻璃控股成员企业2024生产数据', | ||||
| 			// reportTime: '', | ||||
| 			startTimeStamp: '', | ||||
| 			endTimeStamp: '', | ||||
|       tableData: [ | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas:'111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|           // subcomponent: row | ||||
|         } | ||||
|       ], | ||||
| 			// proLineList: [], | ||||
| 			// all: {} | ||||
| 		}; | ||||
| 	}, | ||||
| 	mounted() { | ||||
|     this.getDict() | ||||
|     // this.getCurrentYearFirst() | ||||
|     // this.getDataList() | ||||
| 	}, | ||||
|   methods: { | ||||
|     getYear(e) { | ||||
|       if (this.listQuery.reportTime[0] && e - this.listQuery.reportTime[0] > 10) { | ||||
|         this.$message({ | ||||
|           message: '年份起止时间不能超过十年', | ||||
|           type: 'warning' | ||||
|         }); | ||||
|         // console.log(); | ||||
|       } | ||||
|       // console.log(e); | ||||
|     }, | ||||
|     changeTime() { | ||||
|       if (this.listQuery.reportTime) { | ||||
|         this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss'); | ||||
|         const numDays = (new Date(this.listQuery.reportTime[1]).getTime() - new Date(this.listQuery.reportTime[0]).getTime()) / (24 * 3600 * 1000); if (numDays > 730) { | ||||
|           this.$message({ | ||||
|             message: '时间范围不能超过24个月', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|           this.createStartDate = ''; | ||||
|           this.createEndDate = ''; | ||||
|         } | ||||
|       } else { | ||||
|         this.createStartDate = ''; | ||||
|         this.createEndDate = ''; | ||||
|       } | ||||
|     }, | ||||
|     async getDict() { | ||||
|       this.$refs.lineChart.initChart() | ||||
| 			// 产线列表 | ||||
| 			// const res = await getCorePLList(); | ||||
| 			// this.proLineList = res.data; | ||||
| 		}, | ||||
|     // 获取数据列表 | ||||
|     multipliedByHundred(str) { | ||||
|       console.log(str); | ||||
|       // console.log(str) | ||||
|       if ( str != 0) { | ||||
|         let floatVal = parseFloat(str); | ||||
|         if (isNaN(floatVal)) { | ||||
|           return 0; | ||||
|         } | ||||
|         floatVal = Math.round(str * 10000) / 100; | ||||
|         let strVal = floatVal.toString(); | ||||
|         let searchVal = strVal.indexOf('.'); | ||||
|         if (searchVal < 0) { | ||||
|           searchVal = strVal.length; | ||||
|           strVal += '.'; | ||||
|         } | ||||
|         while (strVal.length <= searchVal + 2) { | ||||
|           strVal += '0'; | ||||
|         } | ||||
|         return parseFloat(strVal); | ||||
|       } | ||||
|  | ||||
|     }, | ||||
|     async getDataList() { | ||||
|     }, | ||||
|     add0(m) { | ||||
|       return m < 10 ? '0' + m : m | ||||
|     }, | ||||
|     format(shijianchuo) { | ||||
|       //shijianchuo是整数,否则要parseInt转换 | ||||
|       var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss') | ||||
|       // console.log(time) | ||||
|       // var y = time.getFullYear(); | ||||
|       // var m = time.getMonth() + 1; | ||||
|       // var d = time.getDate(); | ||||
|       // var h = time.getHours(); | ||||
|       // var mm = time.getMinutes(); | ||||
|       // var s = time.getSeconds(); | ||||
|       return time | ||||
|     }, | ||||
| 		// changeTime(val) { | ||||
|     //   if (val) { | ||||
|     //     // console.log(val) | ||||
|     //     // console.log(val.setHours(7, 0, 0)) | ||||
|     //     // console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) | ||||
|     //     // let time = this.format(val.setHours(7, 0, 0)) | ||||
|     //     this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|     //     this.startTimeStamp  = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|     //     // console.log(this.listQuery.reportTime); | ||||
|     //     this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|     //     this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|     //     console.log(this.listQuery.reportTime); | ||||
| 		// 	} else { | ||||
| 		// 			this.listQuery.reportTime = [] | ||||
| 		// 	} | ||||
| 		// }, | ||||
|  | ||||
| 		//时间戳转为yy-mm-dd hh:mm:ss | ||||
| 		timeFun(unixtimestamp) { | ||||
| 				var unixtimestamp = new Date(unixtimestamp); | ||||
| 				var year = 1900 + unixtimestamp.getYear(); | ||||
| 				var month = "0" + (unixtimestamp.getMonth() + 1); | ||||
| 				var date = "0" + unixtimestamp.getDate(); | ||||
| 				return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length) | ||||
| 		}, | ||||
| 		buttonClick(val) { | ||||
| 			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; | ||||
| 			switch (val.btnName) { | ||||
| 				case 'search': | ||||
| 					this.listQuery.pageNo = 1; | ||||
| 					this.listQuery.pageSize = 10; | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'export': | ||||
| 					this.handleExport(); | ||||
| 					break; | ||||
| 				default: | ||||
| 					console.log(val); | ||||
| 			} | ||||
| 		}, | ||||
| 		/** 导出按钮操作 */ | ||||
|     handleExport() { | ||||
|       // 处理查询参数 | ||||
|       // var xlsxParam = { raw: true }; | ||||
|       // /* 从表生成工作簿对象 */ | ||||
|       // import('xlsx').then(excel => { | ||||
|       //   var wb = excel.utils.table_to_book( | ||||
|       //     document.querySelector("#exportTable"), | ||||
|       //     xlsxParam | ||||
|       //   ); | ||||
|       //   /* 获取二进制字符串作为输出 */ | ||||
|       //   var wbout = excel.write(wb, { | ||||
|       //     bookType: "xlsx", | ||||
|       //     bookSST: true, | ||||
|       //     type: "array", | ||||
|       //   }); | ||||
|       //   try { | ||||
|       //     FileSaver.saveAs( | ||||
|       //       //Blob 对象表示一个不可变、原始数据的类文件对象。 | ||||
|       //       //Blob 表示的不一定是JavaScript原生格式的数据。 | ||||
|       //       //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 | ||||
|       //       //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。 | ||||
|       //       new Blob([wbout], { type: "application/octet-stream" }), | ||||
|       //       //设置导出文件名称 | ||||
|       //       "许昌安彩日原片生产汇总.xlsx" | ||||
|       //     ); | ||||
|       //   } catch (e) { | ||||
|       //     if (typeof console !== "undefined") console.log(e, wbout); | ||||
|       //   } | ||||
|       //   return wbout; | ||||
|       //   //do something...... | ||||
|       // }) | ||||
|  | ||||
|     }, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| .blueTip::before{ | ||||
|   display: inline-block; | ||||
|   content: ''; | ||||
|   width: 4px; | ||||
|   height: 18px; | ||||
|   background: #0B58FF; | ||||
|   border-radius: 1px; | ||||
|   margin-right: 8PX; | ||||
|   margin-top: 8px; | ||||
| } | ||||
| .app-container { | ||||
|   margin: 0 16px 0; | ||||
|   background-color: #fff; | ||||
|   border-radius: 4px; | ||||
|   padding: 16px 16px 0; | ||||
|   height: calc(100vh - 134px); | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
| @@ -1,200 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2022-01-21 14:43:06 | ||||
|  * @LastEditors: zhp | ||||
|  * @LastEditTime: 2024-04-16 09:58:08 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <!-- <div> --> | ||||
|     <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> --> | ||||
|     <div :id="id" :class="className" :style="{ height: height, width: width }" /> | ||||
|   <!-- </div> --> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import * as echarts from 'echarts' | ||||
| import 'echarts/theme/macarons' // echarts theme | ||||
| import resize from '@/mixins/resize' | ||||
| export default { | ||||
|   name: 'OverviewBar', | ||||
|   mixins: [resize], | ||||
|   props: { | ||||
|     id: { | ||||
|       type: String, | ||||
|       default: 'reportChart' | ||||
|     }, | ||||
|     className: { | ||||
|       type: String, | ||||
|       default: 'reportChart' | ||||
|     }, | ||||
|     width: { | ||||
|       type: String, | ||||
|       default: '100%' | ||||
|     }, | ||||
|     beilv: { | ||||
|       type: Number, | ||||
|       default: 1 | ||||
|     }, | ||||
|     height: { | ||||
|       type: String, | ||||
|       default: '30vh' | ||||
|     }, | ||||
|     legendPosition: { | ||||
|       type: String, | ||||
|       default: 'center' | ||||
|     }, | ||||
|     showLegend: { | ||||
|       type: Boolean, | ||||
|       default: false | ||||
|     }, | ||||
|     legendData: { | ||||
|       type: Array, | ||||
|       default: () => [] | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       chart: null | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.$nextTick(() => { | ||||
|       this.initChart() | ||||
|     }) | ||||
|   }, | ||||
|   beforeDestroy() { | ||||
|     if (!this.chart) { | ||||
|       return | ||||
|     } | ||||
|     this.chart.dispose() | ||||
|     this.chart = null | ||||
|   }, | ||||
|   methods: { | ||||
|     initChart() { | ||||
|       console.log(1111) | ||||
|       this.chart = echarts.init(document.getElementById(this.id)) | ||||
|       console.log(this.$parent); | ||||
|       this.chart.setOption({ | ||||
|         title: { | ||||
|           text: '', | ||||
|           // subtext: 'Fake Data' | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: 'axis' | ||||
|         }, | ||||
|         grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true }, | ||||
|         legend: { | ||||
|           data: ['FTO投入', '封装材料成本', '人均产量', '产品产量'], | ||||
|           right: '90px', | ||||
|           top: '0%', | ||||
|           icon: 'rect', | ||||
|           itemWidth: 10, | ||||
|           itemHeight: 10, | ||||
|           itemGap: 40, | ||||
|         }, | ||||
|         // toolbox: { | ||||
|         //   show: true, | ||||
|         //   feature: { | ||||
|         //     dataView: { show: true, readOnly: false }, | ||||
|         //     magicType: { show: true, type: ['line', 'bar'] }, | ||||
|         //     restore: { show: true }, | ||||
|         //     saveAsImage: { show: true } | ||||
|         //   } | ||||
|         // }, | ||||
|         calculable: true, | ||||
|         xAxis: [ | ||||
|           { | ||||
|             type: 'category', | ||||
|             // prettier-ignore | ||||
|             data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | ||||
|           } | ||||
|         ], | ||||
|         yAxis: [ | ||||
|           { | ||||
|             type: 'value' | ||||
|           } | ||||
|         ], | ||||
|         grid: { | ||||
|           top: '20%', | ||||
|           left: "1%", | ||||
|           right: "3%", | ||||
|           bottom: "1%", | ||||
|           containLabel: true | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             name: 'FTO投入', | ||||
|             type: 'bar', | ||||
|             itemStyle: { | ||||
|               normal: { | ||||
|                 color: 'rgba(99, 189, 255, 1)', //改变折线点的颜色 | ||||
|                 lineStyle: { | ||||
|                   color: 'rgba(99, 189, 255, 1)' //改变折线颜色 | ||||
|                 } | ||||
|               } | ||||
|             }, | ||||
|             data: [ | ||||
|               2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 | ||||
|             ], | ||||
|           }, | ||||
|           { | ||||
|             name: '封装材料成本', | ||||
|             type: 'bar', | ||||
|             itemStyle: { | ||||
|               normal: { | ||||
|                 color: 'rgba(142, 240, 171, 1)', //改变折线点的颜色 | ||||
|                 lineStyle: { | ||||
|                   color: 'rgba(142, 240, 171, 1)' //改变折线颜色 | ||||
|                 } | ||||
|               } | ||||
|             }, | ||||
|             data: [ | ||||
|               2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 | ||||
|             ], | ||||
|           }, | ||||
|           { | ||||
|             name: '人均产量', | ||||
|             type: 'bar', | ||||
|             itemStyle: { | ||||
|               normal: { | ||||
|                 color: 'rgba(40, 138, 255, 1)', //改变折线点的颜色 | ||||
|                 lineStyle: { | ||||
|                   color: 'rgba(40, 138, 255, 1)' //改变折线颜色 | ||||
|                 } | ||||
|               } | ||||
|             }, | ||||
|             data: [ | ||||
|               2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 | ||||
|             ], | ||||
|           }, | ||||
|           { | ||||
|             name: '产品产量', | ||||
|             type: 'bar', | ||||
|             itemStyle: { | ||||
|               normal: { | ||||
|                 color: 'rgba(113, 100, 255, 1)', //改变折线点的颜色 | ||||
|                 lineStyle: { | ||||
|                   color: 'rgba(113, 100, 255, 1)' //改变折线颜色 | ||||
|                 } | ||||
|               } | ||||
|             }, | ||||
|             data: [ | ||||
|               2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 | ||||
|             ], | ||||
|           } | ||||
|         ] | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| /* .reportChart { | ||||
|   position: absolute; | ||||
|   height: 100%; | ||||
|   width: 100%; | ||||
|   top: 10px; | ||||
| } */ | ||||
| </style> | ||||
| @@ -1,424 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-15 10:49:13 | ||||
|  * @LastEditTime: 2024-04-17 16:15:42 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)"> | ||||
|     <div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;"> | ||||
|       <search-bar :formConfigs="mainFormConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|         <el-row :gutter="24"> | ||||
|           <el-col :span="12" v-for="item in  dataList" :key="item.id"> | ||||
|             <line-chart :id="item.id"  class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart> | ||||
|           </el-col> | ||||
|           <!-- <el-col :span="12"> | ||||
|             <line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart> | ||||
|           </el-col> --> | ||||
|         </el-row> | ||||
|     </div> | ||||
|     <div class="app-container" style="margin-top: 18px;flex-grow: 1; height: auto; padding: 16px;"> | ||||
|       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|       <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" | ||||
|         :table-data="tableData"> | ||||
|       </base-table> | ||||
|     </div> | ||||
|     <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all" | ||||
|       :type="listQuery.reportType" @refreshDataList="getDataList" /> --> | ||||
|     <!-- <pagination | ||||
| 			:limit.sync="listQuery.pageSize" | ||||
| 			:page.sync="listQuery.pageNo" | ||||
| 			:total="listQuery.total" | ||||
| 			@pagination="getDataList" /> --> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // import { parseTime } from '../../core/mixins/code-filter'; | ||||
| // import { getGlassPage, exportGlasscExcel } from '@/api/report/glass'; | ||||
| // import inputTable from './inputTable.vue'; | ||||
| import lineChart from './lineChart'; | ||||
| import moment from 'moment' | ||||
| // import FileSaver from 'file-saver' | ||||
| // import * as XLSX from 'xlsx' | ||||
| export default { | ||||
|   components: { lineChart }, | ||||
| 	data() { | ||||
|     return { | ||||
|       listQuery: { | ||||
|         pageSize: 10, | ||||
|         pageNo: 1, | ||||
|         factoryId: null, | ||||
|         total: 0, | ||||
|         type: null, | ||||
|         // reportType: 2, | ||||
|         reportTime: [] | ||||
|       }, | ||||
|       dataList: [ | ||||
|         { | ||||
|           id:'first', | ||||
|         }, | ||||
|          { | ||||
|           id: 'second', | ||||
|         }, | ||||
|          { | ||||
|           id: 'third', | ||||
|         }, | ||||
|          { | ||||
|           id: 'fourth', | ||||
|         }, | ||||
|          { | ||||
|           id: 'fifth', | ||||
|         }, | ||||
|          { | ||||
|           id: 'sixth', | ||||
|         }, | ||||
|       ], | ||||
| 			urlOptions: { | ||||
| 				// getDataListURL: getGlassPage, | ||||
| 				// exportURL: exportGlasscExcel | ||||
|       }, | ||||
|       mainFormConfig: [ | ||||
|       	{ | ||||
|           type: 'select', | ||||
|           label: '工厂名称', | ||||
|           placeholder: '请选择工厂名称', | ||||
|           param: 'factoryId', | ||||
|           selectOptions: [], | ||||
|           clearable:true, | ||||
|         }, | ||||
|         // { | ||||
|         // 	type: 'select', | ||||
|         // 	label: '产线', | ||||
|         // 	placeholder: '请选择产线', | ||||
|         // 	param: 'lineId', | ||||
|         // 	selectOptions: [], | ||||
|         // }, | ||||
|         // 选项切换 | ||||
|         // { | ||||
|         // 	type: 'select', | ||||
|         // 	label: '时间类型', | ||||
|         // 	param: 'dateFilterType', | ||||
|         // 	defaultSelect: 0, | ||||
|         // 	selectOptions: [ | ||||
|         // 		{ id: 0, name: '按时间段' }, | ||||
|         // 		{ id: 1, name: '按日期' }, | ||||
|         // 	], | ||||
|         // 	index: 2, | ||||
|         // 	extraOptions: [ | ||||
|         // { | ||||
|         //   // parent: 'dateFilterType', | ||||
|         //   // 时间段选择 | ||||
|         //   type: 'datePicker', | ||||
|         //   label: '时间段', | ||||
|         //   // dateType: 'datetimerange', | ||||
|         //   dateType: 'datetimerange', | ||||
|         //   format: 'yyyy-MM-dd HH:mm:ss', | ||||
|         //   valueFormat: 'yyyy-MM-ddTHH:mm:ss', | ||||
|         //   rangeSeparator: '-', | ||||
|         //   rangeSeparator: '-', | ||||
|         //   startPlaceholder: '开始时间', | ||||
|         //   endPlaceholder: '结束时间', | ||||
|         //   param: 'recordTime', | ||||
|         // }, | ||||
|         // 		{ | ||||
|         // 			parent: 'dateFilterType', | ||||
|         // 			// 日期选择 | ||||
|         // 			type: 'datePicker', | ||||
|         // 			// label: '日期', | ||||
|         // 			dateType: 'date', | ||||
|         // 			placeholder: '选择日期', | ||||
|         // 			format: 'yyyy-MM-dd', | ||||
|         // 			valueFormat: 'yyyy-MM-dd', | ||||
|         // 			param: 'timeday', | ||||
|         // 		}, | ||||
|         // 	], | ||||
|         // }, | ||||
|         { | ||||
|           type:'button', | ||||
|           btnName: '查询', | ||||
|           name: 'search', | ||||
|           color: 'primary', | ||||
|         }, | ||||
|          { | ||||
|           type:'separate' | ||||
|         }, | ||||
|         // { | ||||
|         //   type: this.$auth.hasPermi( | ||||
|         //     'analysis:equipment:export' | ||||
|         //   ) | ||||
|         //     ? 'separate' | ||||
|         //     : '', | ||||
|         // }, | ||||
|         { | ||||
|           type:'button', | ||||
|           btnName: '导出', | ||||
|           name: 'export', | ||||
|           color: 'warning', | ||||
|         }, | ||||
|       ], | ||||
|       formConfig: [ | ||||
|         { | ||||
|           type: 'title', | ||||
|           label: '仓库管理', | ||||
|         }, | ||||
|       ], | ||||
|       timeList: [ | ||||
|         { | ||||
|           value: 'month', | ||||
|           label:'月' | ||||
|         }, | ||||
|         { | ||||
|           value: 'year', | ||||
|           label: '年' | ||||
|         } | ||||
|       ], | ||||
|       factoryList: [ | ||||
|         { | ||||
|           name: '测试', | ||||
|           id:1 | ||||
|         } | ||||
|       ], | ||||
|       tableProps: [ | ||||
|         // { | ||||
|         // 	prop: 'createTime', | ||||
|         // 	label: '添加时间', | ||||
|         // 	fixed: true, | ||||
|         // 	width: 180, | ||||
|         // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | ||||
|         // }, | ||||
|         { | ||||
|           prop: 'userName', | ||||
|           label: '工厂名称', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'nickName', | ||||
|           label: '玻璃类型', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'product', | ||||
|           label: '产品规格', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'num', | ||||
|           label: '库存数量', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'yeild', | ||||
|           label: '规格占比', | ||||
|         }, | ||||
|       ], | ||||
|       timeSelect:'month', | ||||
|       startTimeStamp:null, //开始时间 | ||||
|       endTimeStamp:null, //结束时间 | ||||
|       // date:'凯盛玻璃控股成员企业2024生产数据', | ||||
| 			// reportTime: '', | ||||
| 			startTimeStamp: '', | ||||
| 			endTimeStamp: '', | ||||
|       tableData: [ | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas:'111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|         }, | ||||
|         { | ||||
|           userName: 'userName', | ||||
|           nickName: '用户名', | ||||
|           datas: '111111' | ||||
|           // subcomponent: row | ||||
|         } | ||||
|       ], | ||||
| 			// proLineList: [], | ||||
| 			// all: {} | ||||
| 		}; | ||||
| 	}, | ||||
| 	mounted() { | ||||
|     this.getDict() | ||||
|     // this.getCurrentYearFirst() | ||||
|     // this.getDataList() | ||||
| 	}, | ||||
|   methods: { | ||||
|     buttonClick() { | ||||
|  | ||||
|     }, | ||||
|     // handleTime() { | ||||
|     //   this.$forceUpdate() | ||||
|     //   // this.$nextTick(() => [ | ||||
|  | ||||
|     //   // ]) | ||||
|     // }, | ||||
|     // getCurrentYearFirst() { | ||||
|     //   let date = new Date(); | ||||
|     //   date.setDate(1); | ||||
|     //   date.setMonth(0); | ||||
|     //   this.reportTime = date; | ||||
|     //   this.startTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()); //开始时间 | ||||
|     //   this.endTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()); //结束时间 | ||||
|     //   this.listQuery.reportTime[0] = parseTime(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|     //   this.listQuery.reportTime[1] = parseTime(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 100 | ||||
|     // }, | ||||
|     changeTime(val) { | ||||
|       if (val) { | ||||
|         // let timeStamp = val.getTime(); //标准时间转为时间戳,毫秒级别 | ||||
|         // this.endTimeStamp = this.timeFun(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()); //开始时间 | ||||
|         // this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()); //结束时间 | ||||
|         // this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|         // this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|       } else { | ||||
|         this.listQuery.reportTime = [] | ||||
|       } | ||||
|     }, | ||||
|     async getDict() { | ||||
|       this.$refs.lineChart.initChart() | ||||
| 			// 产线列表 | ||||
| 			// const res = await getCorePLList(); | ||||
| 			// this.proLineList = res.data; | ||||
| 		}, | ||||
|     // 获取数据列表 | ||||
|     multipliedByHundred(str) { | ||||
|       console.log(str); | ||||
|       // console.log(str) | ||||
|       if ( str != 0) { | ||||
|         let floatVal = parseFloat(str); | ||||
|         if (isNaN(floatVal)) { | ||||
|           return 0; | ||||
|         } | ||||
|         floatVal = Math.round(str * 10000) / 100; | ||||
|         let strVal = floatVal.toString(); | ||||
|         let searchVal = strVal.indexOf('.'); | ||||
|         if (searchVal < 0) { | ||||
|           searchVal = strVal.length; | ||||
|           strVal += '.'; | ||||
|         } | ||||
|         while (strVal.length <= searchVal + 2) { | ||||
|           strVal += '0'; | ||||
|         } | ||||
|         return parseFloat(strVal); | ||||
|       } | ||||
|  | ||||
|     }, | ||||
|     async getDataList() { | ||||
|     }, | ||||
|     add0(m) { | ||||
|       return m < 10 ? '0' + m : m | ||||
|     }, | ||||
|     format(shijianchuo) { | ||||
|       //shijianchuo是整数,否则要parseInt转换 | ||||
|       var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss') | ||||
|       // console.log(time) | ||||
|       // var y = time.getFullYear(); | ||||
|       // var m = time.getMonth() + 1; | ||||
|       // var d = time.getDate(); | ||||
|       // var h = time.getHours(); | ||||
|       // var mm = time.getMinutes(); | ||||
|       // var s = time.getSeconds(); | ||||
|       return time | ||||
|     }, | ||||
| 		changeTime(val) { | ||||
|       if (val) { | ||||
|         // console.log(val) | ||||
|         // console.log(val.setHours(7, 0, 0)) | ||||
|         // console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) | ||||
|         // let time = this.format(val.setHours(7, 0, 0)) | ||||
|         this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|         this.startTimeStamp  = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|         // console.log(this.listQuery.reportTime); | ||||
|         this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 | ||||
|         this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 | ||||
|         console.log(this.listQuery.reportTime); | ||||
| 			} else { | ||||
| 					this.listQuery.reportTime = [] | ||||
| 			} | ||||
| 		}, | ||||
|  | ||||
| 		//时间戳转为yy-mm-dd hh:mm:ss | ||||
| 		timeFun(unixtimestamp) { | ||||
| 				var unixtimestamp = new Date(unixtimestamp); | ||||
| 				var year = 1900 + unixtimestamp.getYear(); | ||||
| 				var month = "0" + (unixtimestamp.getMonth() + 1); | ||||
| 				var date = "0" + unixtimestamp.getDate(); | ||||
| 				return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length) | ||||
| 		}, | ||||
| 		buttonClick(val) { | ||||
| 			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; | ||||
| 			switch (val.btnName) { | ||||
| 				case 'search': | ||||
| 					this.listQuery.pageNo = 1; | ||||
| 					this.listQuery.pageSize = 10; | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'export': | ||||
| 					this.handleExport(); | ||||
| 					break; | ||||
| 				default: | ||||
| 					console.log(val); | ||||
| 			} | ||||
| 		}, | ||||
| 		/** 导出按钮操作 */ | ||||
|     handleExport() { | ||||
|       // 处理查询参数 | ||||
|       // var xlsxParam = { raw: true }; | ||||
|       // /* 从表生成工作簿对象 */ | ||||
|       // import('xlsx').then(excel => { | ||||
|       //   var wb = excel.utils.table_to_book( | ||||
|       //     document.querySelector("#exportTable"), | ||||
|       //     xlsxParam | ||||
|       //   ); | ||||
|       //   /* 获取二进制字符串作为输出 */ | ||||
|       //   var wbout = excel.write(wb, { | ||||
|       //     bookType: "xlsx", | ||||
|       //     bookSST: true, | ||||
|       //     type: "array", | ||||
|       //   }); | ||||
|       //   try { | ||||
|       //     FileSaver.saveAs( | ||||
|       //       //Blob 对象表示一个不可变、原始数据的类文件对象。 | ||||
|       //       //Blob 表示的不一定是JavaScript原生格式的数据。 | ||||
|       //       //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 | ||||
|       //       //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。 | ||||
|       //       new Blob([wbout], { type: "application/octet-stream" }), | ||||
|       //       //设置导出文件名称 | ||||
|       //       "许昌安彩日原片生产汇总.xlsx" | ||||
|       //     ); | ||||
|       //   } catch (e) { | ||||
|       //     if (typeof console !== "undefined") console.log(e, wbout); | ||||
|       //   } | ||||
|       //   return wbout; | ||||
|       //   //do something...... | ||||
|       // }) | ||||
|  | ||||
|     }, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| /* .blueTip { */ | ||||
| 	/* padding-bottom: 10px; */ | ||||
| /* } */ | ||||
| /* .blueTi */ | ||||
| .blueTip::before{ | ||||
|   display: inline-block; | ||||
|   content: ''; | ||||
|   width: 4px; | ||||
|   height: 18px; | ||||
|   background: #0B58FF; | ||||
|   border-radius: 1px; | ||||
|   margin-right: 8PX; | ||||
|   margin-top: 8px; | ||||
| } | ||||
| .app-container { | ||||
|   margin: 0 16px 0; | ||||
|   background-color: #fff; | ||||
|   border-radius: 4px; | ||||
|   padding: 16px 16px 0; | ||||
|   height: calc(100vh - 134px); | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
| @@ -1,233 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2022-01-21 14:43:06 | ||||
|  * @LastEditors: zhp | ||||
|  * @LastEditTime: 2024-04-16 14:16:17 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <!-- <div> --> | ||||
|     <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> --> | ||||
|     <div :id="id" class="costChart" :style="{  height: height, width: width }" /> | ||||
|   <!-- </div> --> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import * as echarts from 'echarts' | ||||
| import 'echarts/theme/macarons' // echarts theme | ||||
| // import resize from './mixins/resize' | ||||
|  | ||||
| export default { | ||||
|   name: 'OverviewBar', | ||||
|   // mixins: [resize], | ||||
|   props: { | ||||
|     id: { | ||||
|       type: String, | ||||
|       default: 'OverviewLine' | ||||
|     }, | ||||
|     // className: { | ||||
|     //   type: String, | ||||
|     //   default: 'epChart' | ||||
|     // }, | ||||
|     width: { | ||||
|       type: String, | ||||
|       default: '100%' | ||||
|     }, | ||||
|     beilv: { | ||||
|       type: Number, | ||||
|       default: 1 | ||||
|     }, | ||||
|     height: { | ||||
|       type: String, | ||||
|       default: '35vh' | ||||
|     }, | ||||
|     legendPosition: { | ||||
|       type: String, | ||||
|       default: 'center' | ||||
|     }, | ||||
|     showLegend: { | ||||
|       type: Boolean, | ||||
|       default: false | ||||
|     }, | ||||
|     legendData: { | ||||
|       type: Array, | ||||
|       default: () => [] | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       chartData: [ | ||||
|         { | ||||
|           name: '产品1', | ||||
|           num: 1112, | ||||
|           yield: 0.97, | ||||
|         }, | ||||
|         { | ||||
|           name: '产品2', | ||||
|           num: 1112, | ||||
|           yield: 0.97, | ||||
|         }, | ||||
|         { | ||||
|           name: '产品3', | ||||
|           num: 1112, | ||||
|           yield: 0.97, | ||||
|         }, | ||||
|         { | ||||
|           name: '产品4', | ||||
|           num: 1112, | ||||
|           yield: 0.97, | ||||
|         }, | ||||
|         { | ||||
|           name: '产品5', | ||||
|           num: 1112, | ||||
|           yield: 0.97, | ||||
|         } | ||||
|       ], | ||||
|       chart: null, | ||||
|       colors: ['rgba(113, 99, 254, 1)', 'rgba(39, 139, 255, 1)', 'rgba(100, 189, 255, 1)', 'rgba(143, 240, 170, 1)', 'rgba(246, 189, 22, 0.85)'], | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.initChart() | ||||
|   }, | ||||
|   beforeDestroy() { | ||||
|     if (!this.chart) { | ||||
|       return | ||||
|     } | ||||
|     this.chart.dispose() | ||||
|     this.chart = null | ||||
|   }, | ||||
|   methods: { | ||||
|     getEqualNewlineString(params, length) { | ||||
|       let text = '' | ||||
|       let count = Math.ceil(params.length / length) // 向上取整数 | ||||
|       // 一行展示length个 | ||||
|       if (count > 1) { | ||||
|         for (let z = 1; z <= count; z++) { | ||||
|           text += params.substr((z - 1) * length, length) | ||||
|           if (z < count) { | ||||
|             text += '\n' | ||||
|           } | ||||
|         } | ||||
|       } else { | ||||
|         text += params.substr(0, length) | ||||
|       } | ||||
|       return text | ||||
|     }, | ||||
|     initChart() { | ||||
|       console.log(1111) | ||||
|       let num = 0 | ||||
|       this.chartData && this.chartData.length > 0 && this.chartData.map(i => { | ||||
|         num += i.num | ||||
|       }) | ||||
|       if ( | ||||
|         this.chart !== null && | ||||
|         this.chart !== '' && | ||||
|         this.chart !== undefined | ||||
|       ) { | ||||
|         this.chart.dispose() | ||||
|       } | ||||
|       this.chart = echarts.init(document.getElementById(this.id)) | ||||
|       this.chart.setOption({ | ||||
|         color: this.colors, | ||||
|         title: { | ||||
|           text: num, | ||||
|           subtext: '总数/片', | ||||
|           top: '32%', | ||||
|           left: '49%', | ||||
|           textAlign: 'center', | ||||
|           textStyle: { | ||||
|             fontSize: 32, | ||||
|             color: 'rgba(140, 140, 140, 1)', | ||||
|           }, | ||||
|           subtextStyle: { | ||||
|             fontSize: 20, | ||||
|             color: '#fff00', | ||||
|           }, | ||||
|         }, | ||||
|         legend: { | ||||
|           bottom: '2%', | ||||
|           left: 'center', | ||||
|           itemWidth: 12, | ||||
|           itemHeight: 12, | ||||
|           icon: 'roundRect', | ||||
|           textStyle: { | ||||
|             color: 'rgba(140, 140, 140, 1)' | ||||
|           }, | ||||
|           data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({ | ||||
|             name: item.name, | ||||
|             itemStyle: { | ||||
|               color: this.colors[index % 4] | ||||
|             } | ||||
|           })) | ||||
|         }, | ||||
|         series: [{ | ||||
|           name: 'ISRA缺陷检测', | ||||
|           type: 'pie', | ||||
|           // position:outerHeight, | ||||
|           center: ['50%', '40%'], | ||||
|           radius: ['45%', '70%'], | ||||
|           avoidLabelOverlap: true, | ||||
|           label: { | ||||
|             show: true, | ||||
|             normal: { | ||||
|               alignTo: 'labelLine', | ||||
|               margin: 10, | ||||
|               edgeDistance: 10, | ||||
|               lineHeight: 16, | ||||
|               // 各分区的提示内容 | ||||
|               // params: 即下面传入的data数组,通过自定义函数,展示你想要的内容和格式 | ||||
|               formatter: function (params) { | ||||
|                 console.log(params); | ||||
|                 return; | ||||
|               }, | ||||
|               formatter: (params) => { | ||||
|                 //调用自定义显示格式 | ||||
|                 return this.getEqualNewlineString(params.value + " | " + params.percent.toFixed(0) + "%" + "\n" + params.name, 10); | ||||
|               }, | ||||
|               textStyle: {            // 提示文字的样式 | ||||
|                 // color: 'rgba(0, 0, 0, 0.65)', | ||||
|                 fontSize: 18 | ||||
|               } | ||||
|             } | ||||
|           }, | ||||
|           labelLine: { | ||||
|             show: true, | ||||
|             length: 25, | ||||
|             length2: 100, | ||||
|           }, | ||||
|           data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({ | ||||
|             name: item.name, | ||||
|             value: item.num, | ||||
|             label: { | ||||
|               color: this.colors[index % 4] | ||||
|             }, | ||||
|             itemStyle: { | ||||
|               // color: { | ||||
|               //   type: 'linear', | ||||
|               //   x: 0, | ||||
|               //   y: 0, | ||||
|               //   x2: 0, | ||||
|               //   y2: 1, | ||||
|               //   global: false, | ||||
|               //   colorStops: [ | ||||
|               //     { offset: 0, color: this.colors[index % 4] }, | ||||
|               //     { offset: 1, color: this.colors[index % 4] + '33' } | ||||
|               //   ] | ||||
|               // } | ||||
|             } | ||||
|           })) | ||||
|         }], | ||||
|         tooltip: { | ||||
|           trigger: 'item', | ||||
|           className: "isra-chart-tooltip" | ||||
|         }, | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
|  | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user