| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | .DS_Store |
|---|
| | | node_modules |
|---|
| | | /dist |
|---|
| | | |
|---|
| | | |
|---|
| | | # local env files |
|---|
| | | .env.local |
|---|
| | | .env.*.local |
|---|
| | | |
|---|
| | | # Log files |
|---|
| | | npm-debug.log* |
|---|
| | | yarn-debug.log* |
|---|
| | | yarn-error.log* |
|---|
| | | pnpm-debug.log* |
|---|
| | | |
|---|
| | | # Editor directories and files |
|---|
| | | .idea |
|---|
| | | .vscode |
|---|
| | | *.suo |
|---|
| | | *.ntvs* |
|---|
| | | *.njsproj |
|---|
| | | *.sln |
|---|
| | | *.sw? |
|---|
| | | |
|---|
| | | |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | # edo_screen |
|---|
| | | |
|---|
| | | ## Project setup |
|---|
| | | ``` |
|---|
| | | npm install |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Compiles and hot-reloads for development |
|---|
| | | ``` |
|---|
| | | npm run serve |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Compiles and minifies for production |
|---|
| | | ``` |
|---|
| | | npm run build |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Lints and fixes files |
|---|
| | | ``` |
|---|
| | | npm run lint |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Customize configuration |
|---|
| | | See [Configuration Reference](https://cli.vuejs.org/config/). |
|---|
| | | |
|---|
| | | |
|---|
| | | å端å¼åå辨çï¼1920x1080 |
|---|
| | | ç°åºå辨çä¸æ¯1920x1080ï¼x轴被æ伸äº2åï¼ç±äºä¸å¨ç°åºï¼æ æ³æ¥æ¾å
·ä½åç´ å¼ï¼æ以åªè½æç
§1920x1080çå辨çè¿è¡è®¾è®¡ã |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ] |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "compilerOptions": { |
|---|
| | | "target": "es5", |
|---|
| | | "module": "esnext", |
|---|
| | | "baseUrl": "./", |
|---|
| | | "moduleResolution": "node", |
|---|
| | | "paths": { |
|---|
| | | "@/*": [ |
|---|
| | | "src/*" |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | "lib": [ |
|---|
| | | "esnext", |
|---|
| | | "dom", |
|---|
| | | "dom.iterable", |
|---|
| | | "scripthost" |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | { |
|---|
| | | "name": "yiqi", |
|---|
| | | "version": "0.1.0", |
|---|
| | | "private": true, |
|---|
| | | "scripts": { |
|---|
| | | "serve": "vue-cli-service serve", |
|---|
| | | "build": "vue-cli-service build", |
|---|
| | | "lint": "vue-cli-service lint" |
|---|
| | | }, |
|---|
| | | "dependencies": { |
|---|
| | | "@jiaminghi/data-view": "^2.10.0", |
|---|
| | | "animejs": "^3.2.2", |
|---|
| | | "axios": "^1.6.0", |
|---|
| | | "core-js": "^3.8.3", |
|---|
| | | "echarts": "^5.4.3", |
|---|
| | | "lib-flexible": "^0.3.2", |
|---|
| | | "moment": "^2.29.4", |
|---|
| | | "scss": "^0.2.4", |
|---|
| | | "scss-loader": "^0.0.1", |
|---|
| | | "vue": "^2.6.14", |
|---|
| | | "vue-seamless-scroll": "^1.1.23" |
|---|
| | | }, |
|---|
| | | "devDependencies": { |
|---|
| | | "@babel/core": "^7.12.16", |
|---|
| | | "@babel/eslint-parser": "^7.12.16", |
|---|
| | | "@vue/cli-plugin-babel": "~5.0.0", |
|---|
| | | "@vue/cli-plugin-eslint": "~5.0.0", |
|---|
| | | "@vue/cli-service": "~5.0.0", |
|---|
| | | "eslint": "^7.32.0", |
|---|
| | | "eslint-plugin-vue": "^8.0.3", |
|---|
| | | "node-sass": "^9.0.0", |
|---|
| | | "sass": "^1.26.5", |
|---|
| | | "sass-loader": "^13.3.2", |
|---|
| | | "vue-template-compiler": "^2.6.14" |
|---|
| | | }, |
|---|
| | | "eslintConfig": { |
|---|
| | | "root": true, |
|---|
| | | "env": { |
|---|
| | | "node": true |
|---|
| | | }, |
|---|
| | | "extends": [ |
|---|
| | | "plugin:vue/essential", |
|---|
| | | "eslint:recommended" |
|---|
| | | ], |
|---|
| | | "parserOptions": { |
|---|
| | | "parser": "@babel/eslint-parser" |
|---|
| | | }, |
|---|
| | | "rules": {} |
|---|
| | | }, |
|---|
| | | "browserslist": [ |
|---|
| | | "> 1%", |
|---|
| | | "last 2 versions", |
|---|
| | | "not dead" |
|---|
| | | ] |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang=""> |
|---|
| | | |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|---|
| | | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
|---|
| | | <title> |
|---|
| | | <%= htmlWebpackPlugin.options.title %> |
|---|
| | | </title> |
|---|
| | | </head> |
|---|
| | | |
|---|
| | | <body> |
|---|
| | | <noscript> |
|---|
| | | <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. |
|---|
| | | Please enable it to continue.</strong> |
|---|
| | | </noscript> |
|---|
| | | <div id="app"></div> |
|---|
| | | <!-- built files will be auto injected --> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | </html> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div id="app"> |
|---|
| | | <Content /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import Content from './components/Content.vue' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'App', |
|---|
| | | components: { |
|---|
| | | Content |
|---|
| | | }, |
|---|
| | | mounted(){ |
|---|
| | | console.log(window.innerWidth,window.innerHeight); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | html, body { |
|---|
| | | font-size: 79.5833px !important; |
|---|
| | | width: 1910px; |
|---|
| | | height: 1070px; |
|---|
| | | /* width:100%; */ |
|---|
| | | /* height:100%; */ |
|---|
| | | overflow: hidden; |
|---|
| | | background-color: #00083b; |
|---|
| | | /* font-size: 80px !important; */ |
|---|
| | | /* background-image: url('~@/assets/images/bg.png'); */ |
|---|
| | | } |
|---|
| | | *{ |
|---|
| | | margin:0; |
|---|
| | | padding: 0; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import axios from "axios"; |
|---|
| | | |
|---|
| | | //ä¸åç¯å¢ä¸çå°å |
|---|
| | | let baseURL = ""; |
|---|
| | | //nodeä¸çç¯å¢åéprocess.env,ä¹å°±æ¯æ们æ°å¢å¼åãç产çé
ç½®æ件 |
|---|
| | | // if(process.env.NODE_ENV === "development"){ |
|---|
| | | // baseURL = "http://localhost:7788/" //è¿éå¯å¨vue.config.jsåä¸ä¸ªä»£çã代ç代ç è§ä¸ã |
|---|
| | | // }else{ |
|---|
| | | baseURL = "http://localhost:7788/api" |
|---|
| | | // baseURL = "http://192.168.216.203:7788/api" // 线ä¸ç¯å¢å°å |
|---|
| | | // } |
|---|
| | | // baseURL = "http://localhost:7788/api" //æ¬å°æµè¯ç¯å¢ |
|---|
| | | |
|---|
| | | //å建axioså®ä¾ |
|---|
| | | const request = axios.create({ |
|---|
| | | timeout: 5000, |
|---|
| | | baseURL:baseURL |
|---|
| | | }); |
|---|
| | | |
|---|
| | | //ææ请æ±è®¾ç½®äºææ头信æ¯ã请æ±å¤´ä¸è®¾ç½®cookieä¿¡æ¯ï¼ä¸ç´æºå¸¦ï¼å¤æã |
|---|
| | | // axios.defaults.headers.common['Authorization'] = `${cookie}`; |
|---|
| | | //è¿éæ¯è®¾ç½®åéjsonæ ¼å¼åæ° |
|---|
| | | axios.defaults.headers.post['Content-Type'] = 'application/json'; |
|---|
| | | |
|---|
| | | //请æ±æ¦æªå¨ |
|---|
| | | request.interceptors.request.use( |
|---|
| | | //åéä¹åæ³è¦åäºä»ä¹ |
|---|
| | | config => { |
|---|
| | | // tokenæ¯å¦è¿æï¼æ¯å¦éæ°ç»éçç |
|---|
| | | // æ¤å¤å¯ä¿®æ¹ä¸äºåºæ¬æ°æ® |
|---|
| | | // config[baseURL,[data,[headers,[method,[timeout,[url] ç |
|---|
| | | // åºç¡å°å,请æ±åæ°,头é¨, 请æ±æ¹å¼, è¶
æ¶, 请æ±å°å ç |
|---|
| | | |
|---|
| | | // config.headers.Cookie = "110110110110110110"; |
|---|
| | | return config; |
|---|
| | | }, |
|---|
| | | //æ¹æ³è¿åä¸ä¸ªå¸¦ææç»åå ç Promise 对象ã |
|---|
| | | error => Promise.reject(error) |
|---|
| | | ); |
|---|
| | | /**************移é¤æ¦æªå¨****************/ |
|---|
| | | // å¨æç§»é¤ |
|---|
| | | // const me = axios.interceptors.request.use(function () {/*...*/}); |
|---|
| | | // axios.interceptors.request.eject(me); |
|---|
| | | /***************************************/ |
|---|
| | | |
|---|
| | | //ååºæ¦æªå¨ï¼å¯¹è¯·æ±ç»æåè¿è¡ä¸äºæä½ï¼ï¼ä¾å¦:ç»ä¸æ¶éæ¥éï¼ |
|---|
| | | request.interceptors.response.use( |
|---|
| | | //请æ±æå |
|---|
| | | (res)=>{ |
|---|
| | | let code = res.data.code // è·åå端è¿åçç¶æç |
|---|
| | | if(code===200){ // æå |
|---|
| | | return res.data // è¿åéé¢çæ°æ®ï¼å¨ä½¿ç¨è¿ä¸ªaxiosæ¶ï¼è·åå°çä¸è¥¿å°±æ¯è¿éè¿åçä¸è¥¿ |
|---|
| | | }else{ |
|---|
| | | return res |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | //请æ±å¤±è´¥ |
|---|
| | | error => { |
|---|
| | | //å¯æ ¹æ®ä¸åçç¶æå»åºåä¸åçé误ï¼è¾¾å°ä¸åææ |
|---|
| | | if(error.response.status){ |
|---|
| | | error.response.status === 404 ? alert("请æ±ä¸åå¨ï¼ï¼") : alert("å
¶ä»"); |
|---|
| | | } |
|---|
| | | return Promise.reject(error); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | |
|---|
| | | |
|---|
| | | // //å°è£
对åºçgetè¯·æ± |
|---|
| | | // const get = (url, params) => { |
|---|
| | | // return new Promise((resolve, reject) => { |
|---|
| | | // axios.get(url, {params}) |
|---|
| | | // .then(res => resolve(res)) |
|---|
| | | // .catch(err => reject(err)); |
|---|
| | | // }); |
|---|
| | | // } |
|---|
| | | // //å°è£
对åºçpostè¯·æ± |
|---|
| | | // const post = (url, param) => { |
|---|
| | | // return new Promise((resolve, reject) => { |
|---|
| | | // axios.post(url, param) |
|---|
| | | // .then(res => resolve(res)) |
|---|
| | | // .catch(err => reject(err)); |
|---|
| | | // }); |
|---|
| | | // } |
|---|
| | | |
|---|
| | | export default request |
|---|
| | | |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import request from "./api" |
|---|
| | | |
|---|
| | | |
|---|
| | | // è·å设å¤ç¶æ |
|---|
| | | export function GetEquipmentCurrentState() { |
|---|
| | | return request({ |
|---|
| | | url: `/AccessInterface/GetEquipmentCurrentState `, |
|---|
| | | method: 'get' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * è·åè´¨éæ°æ® |
|---|
| | | */ |
|---|
| | | export function getQualityData(params) { |
|---|
| | | return request({ |
|---|
| | | url: '/accessinterface/GetQualityData', |
|---|
| | | method: 'get', |
|---|
| | | params |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // è·åå®æ¶å¨æ¶é´ |
|---|
| | | export function getLargeScreenFrequency() { |
|---|
| | | return request({ |
|---|
| | | url: '/accessinterface/GetLargeScreenFrequency', |
|---|
| | | method: 'get' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // è·åç产å®æè¶å¿æ°æ® |
|---|
| | | export function getProduceCompletionStatus() { |
|---|
| | | return request({ |
|---|
| | | url: '/accessinterface/GetProduceCompletionStatus', |
|---|
| | | method: 'get' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // è·å产éç»è®¡æ°æ® http://localhost:7788/api/accessinterface/GetCurrentProduceInfo |
|---|
| | | export function getCurrentProduceInfo() { |
|---|
| | | return request({ |
|---|
| | | url: '/accessinterface/GetCurrentProduceInfo', |
|---|
| | | method: 'get' |
|---|
| | | }) |
|---|
| | | } |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export let zhu = 'data:image/png;base64,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'; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="container"> |
|---|
| | | <img alt="guang" src="~@/assets/images/guang.png" class="guang" /> |
|---|
| | | |
|---|
| | | <div class="header"> |
|---|
| | | <div class="title"> |
|---|
| | | <img :src="require(`@/assets/images/1.png`)" class="imgTitle" /> |
|---|
| | | 4GCä¸ä»£åå¨æºè¿æ线 |
|---|
| | | </div> |
|---|
| | | <div class="left-text"> |
|---|
| | | <div>{{ nowTime }}</div> |
|---|
| | | <div>å®å
¨ç产:{{ produceStatisData.currentSafeProductionDay }}天</div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="right-text"> |
|---|
| | | <div>å½åç次:{{ produceStatisData.currentTeamName }}</div> |
|---|
| | | <div>çé¿:{{ produceStatisData.currentTeamLeader }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="main"> |
|---|
| | | <div class="main-top"> |
|---|
| | | <div class="main-top_ly"> |
|---|
| | | <!-- 产线å¸å±å¾ --> |
|---|
| | | <img |
|---|
| | | src="~@/assets/images/prodline_all.png" |
|---|
| | | class="prodline" |
|---|
| | | alt="line" |
|---|
| | | /> |
|---|
| | | |
|---|
| | | <!-- <img src="~@/assets/images/9.png" class="line100" alt="line100" /> |
|---|
| | | <p style="color: white;"> {{equipmentStatusData}} </p> --> |
|---|
| | | |
|---|
| | | |
|---|
| | | <!-- é¡¶é¨ --> |
|---|
| | | <div v-for="item in equipmentStatusData"> |
|---|
| | | <!-- <p style="color: white;font-size: 32px"> {{ item.equipmentCurrentState }} </p> --> |
|---|
| | | |
|---|
| | | <img |
|---|
| | | :alt="item.workingProcedure" |
|---|
| | | :src=" |
|---|
| | | require(`@/assets/images/${ |
|---|
| | | imageColor[item.workingProcedure] |
|---|
| | | }/zhuozi.png`) |
|---|
| | | " |
|---|
| | | class="prodline_op325" |
|---|
| | | /> |
|---|
| | | |
|---|
| | | <img |
|---|
| | | :alt="item.workingProcedure" |
|---|
| | | v-if=" |
|---|
| | | item.equipmentCurrentState == 1 && |
|---|
| | | item.workingProcedure == 'OP30' |
|---|
| | | " |
|---|
| | | src="~@/assets/images/6.gif" |
|---|
| | | class="box100" |
|---|
| | | /> |
|---|
| | | <img |
|---|
| | | v-if=" |
|---|
| | | item.equipmentCurrentState == 1 && |
|---|
| | | item.workingProcedure == 'OP20' |
|---|
| | | " |
|---|
| | | src="~@/assets/images/8.gif" |
|---|
| | | class="box200" |
|---|
| | | /> |
|---|
| | | <img |
|---|
| | | v-if=" |
|---|
| | | item.equipmentCurrentState == 1 && |
|---|
| | | item.workingProcedure == 'OP50' |
|---|
| | | " |
|---|
| | | src="~@/assets/images/8.gif" |
|---|
| | | class="box300" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <img |
|---|
| | | v-for="item in equipmentStatusData" |
|---|
| | | :key="item.id" |
|---|
| | | :src=" |
|---|
| | | require(`@/assets/images/${imageColor[item.workingProcedure]}/${ |
|---|
| | | item.workingProcedure |
|---|
| | | }.png`) |
|---|
| | | " |
|---|
| | | :class="`euip ${item.workingProcedure}`" |
|---|
| | | /> |
|---|
| | | |
|---|
| | | <img |
|---|
| | | src="~@/assets/images/OP35.png" |
|---|
| | | class="prodline_op325" |
|---|
| | | /> |
|---|
| | | |
|---|
| | | <img |
|---|
| | | :src="require(`@/assets/images/${imageColor['OP10']}/OP40.png`)" |
|---|
| | | class="euip OP40" |
|---|
| | | /> |
|---|
| | | <img |
|---|
| | | :src="require(`@/assets/images/${imageColor['unit']}/unit.png`)" |
|---|
| | | class="euip unit" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- <button @click="flag=true">dataæ¹å</button> --> |
|---|
| | | <div class="main-bottom"> |
|---|
| | | <div class="echarts-box border_left1"> |
|---|
| | | <div class="echarts-title"> |
|---|
| | | <span class="title1"> 设å¤è¿è¡ç¶æç»è®¡å¾ </span> |
|---|
| | | </div> |
|---|
| | | <EquipmentRunStatus :equipmentStatusData="equipmentStatusData" /> |
|---|
| | | </div> |
|---|
| | | <div class="echarts-box border_left2"> |
|---|
| | | <div class="echarts-title"> |
|---|
| | | <span class="title1"> 产线å¥åº·è½åå¾ </span> |
|---|
| | | </div> |
|---|
| | | <ProdlineHealthy /> |
|---|
| | | </div> |
|---|
| | | <div class="echarts-box border_middle"> |
|---|
| | | <div class="echarts-title"> |
|---|
| | | <span class="title1"> è´¨éæ°æ®è¶å¿å¾ </span> |
|---|
| | | </div> |
|---|
| | | <div class="box11"> |
|---|
| | | {{ qualityData.qualityType }} |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="box12"></div> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | margin: 0 0.13rem; |
|---|
| | | height: 0.13rem; |
|---|
| | | background-color: #e6e705; |
|---|
| | | " |
|---|
| | | ></div> |
|---|
| | | </div> |
|---|
| | | <QualityDataTrendse :qualityData="qualityData.list" /> |
|---|
| | | <div> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | margin: 0 0.13rem; |
|---|
| | | height: 0.13rem; |
|---|
| | | background-color: #e6e705; |
|---|
| | | " |
|---|
| | | ></div> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | margin: 0 0.13rem; |
|---|
| | | height: 0.13rem; |
|---|
| | | background-color: #f14158; |
|---|
| | | " |
|---|
| | | ></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="echarts-box border_right1"> |
|---|
| | | <div class="echarts-title"> |
|---|
| | | <span class="title1"> æ¬ç/æ¬æ产éç»è®¡ </span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- |
|---|
| | | <div class="ring-container quan1"> |
|---|
| | | <div class="outer-ring"></div> |
|---|
| | | <div class="inner-ring"></div> |
|---|
| | | </div> --> |
|---|
| | | |
|---|
| | | <div class="quan1"></div> |
|---|
| | | <div class="quan2"></div> |
|---|
| | | |
|---|
| | | <ProductionStatistics :produceStatisData="produceStatisData" /> |
|---|
| | | <div class="pie-label-left"> |
|---|
| | | <!-- å½åçç»å®é
ç产æ°é --> |
|---|
| | | {{ produceStatisData.currentShiftProduceNum }} |
|---|
| | | <span |
|---|
| | | v-if=" |
|---|
| | | produceStatisData.currentShiftPlanNum || |
|---|
| | | produceStatisData.currentShiftPlanNum == 0 |
|---|
| | | " |
|---|
| | | >/</span |
|---|
| | | > |
|---|
| | | <!-- å½åçç»è®¡åç产æ°é --> |
|---|
| | | {{ produceStatisData.currentShiftPlanNum }} |
|---|
| | | </div> |
|---|
| | | <div class="pie-label-right"> |
|---|
| | | {{ produceStatisData.currentMonthProduceNum }} |
|---|
| | | <span |
|---|
| | | v-if=" |
|---|
| | | produceStatisData.currentMonthPlanNum || |
|---|
| | | produceStatisData.currentMonthPlanNum == 0 |
|---|
| | | " |
|---|
| | | >/</span |
|---|
| | | > |
|---|
| | | {{ produceStatisData.currentMonthPlanNum }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="echarts-box border_right2"> |
|---|
| | | <div class="echarts-title"> |
|---|
| | | <span class="title1"> ç产å®æè¶å¿ </span> |
|---|
| | | </div> |
|---|
| | | <ProductionCompletionTrend |
|---|
| | | :produceCompletionData="produceCompletionData" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // import OperationalAvailability from "./OperationalAvailability.vue"; |
|---|
| | | // import EquipmentStatus from "./EquipmentStatus.vue"; |
|---|
| | | // import ProductionCapacity from "./ProductionCapacity.vue"; |
|---|
| | | import EquipmentRunStatus from "./EquipmentRunStatus.vue"; |
|---|
| | | import ProdlineHealthy from "./ProdlineHealthy.vue"; |
|---|
| | | import ProductionCompletionTrend from "./ProductionCompletionTrend.vue"; |
|---|
| | | import ProductionStatistics from "./ProductionStatistics.vue"; |
|---|
| | | import QualityDataTrendse from "./QualityDataTrends.vue"; |
|---|
| | | import moment from "moment"; |
|---|
| | | import anime from "animejs/lib/anime.es.js"; |
|---|
| | | import { |
|---|
| | | GetEquipmentCurrentState, |
|---|
| | | getQualityData, |
|---|
| | | getLargeScreenFrequency, |
|---|
| | | getProduceCompletionStatus, |
|---|
| | | getCurrentProduceInfo, |
|---|
| | | } from "@/api/common"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: "MainContent", |
|---|
| | | components: { |
|---|
| | | EquipmentRunStatus, |
|---|
| | | ProductionStatistics, |
|---|
| | | ProductionCompletionTrend, |
|---|
| | | QualityDataTrendse, |
|---|
| | | ProdlineHealthy, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | dataTimer: null, |
|---|
| | | dateTimer: null, |
|---|
| | | time: 5000, |
|---|
| | | nowTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"), |
|---|
| | | // flag: false, |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | EquipmentEnums: [ |
|---|
| | | { |
|---|
| | | code: 1, |
|---|
| | | color: "green", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | code: 2, |
|---|
| | | color: "white", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | code: 3, |
|---|
| | | color: "blue", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | code: 4, |
|---|
| | | color: "yellow", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | code: 5, |
|---|
| | | color: "red", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | imageColor: { |
|---|
| | | OP05: "blue", |
|---|
| | | OP10: "blue", |
|---|
| | | OP20: "blue", |
|---|
| | | OP30: "blue", |
|---|
| | | OP35: "blue", |
|---|
| | | OP40: "blue", |
|---|
| | | OP50: "blue", |
|---|
| | | OP60: "blue", |
|---|
| | | OP70: "blue", |
|---|
| | | OP80: "blue", |
|---|
| | | unit: "blue", |
|---|
| | | }, |
|---|
| | | equipmentStatusData: [ |
|---|
| | | { workingProcedure: "OP05" }, |
|---|
| | | { workingProcedure: "OP10" }, |
|---|
| | | { workingProcedure: "OP20" }, |
|---|
| | | { workingProcedure: "OP30" }, |
|---|
| | | { workingProcedure: "OP35" }, |
|---|
| | | { workingProcedure: "OP40" }, |
|---|
| | | { workingProcedure: "OP50" }, |
|---|
| | | { workingProcedure: "OP60" }, |
|---|
| | | { workingProcedure: "OP70" }, |
|---|
| | | { workingProcedure: "OP80" }, |
|---|
| | | { workingProcedure: "unit" }, |
|---|
| | | ], |
|---|
| | | qualityData: [], |
|---|
| | | produceCompletionData: [], |
|---|
| | | produceStatisData: {}, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: {}, |
|---|
| | | created() { |
|---|
| | | this.getLargeScreenFrequency(); |
|---|
| | | this.getEquipmentCurrentState(); |
|---|
| | | this.getQualityData(); |
|---|
| | | this.getProduceCompletionStatus(); |
|---|
| | | this.getCurrentProduceInfo(); |
|---|
| | | this.dataTimer = setInterval(this.timerHandler, this.time); |
|---|
| | | this.dateTimer = setInterval(() => { |
|---|
| | | this.nowTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss"); |
|---|
| | | }, 1000); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å®æ¶å¨å½æ° |
|---|
| | | timerHandler() { |
|---|
| | | this.getEquipmentCurrentState(); |
|---|
| | | this.getQualityData(); |
|---|
| | | this.getProduceCompletionStatus(); |
|---|
| | | this.getCurrentProduceInfo(); |
|---|
| | | }, |
|---|
| | | // è·å设å¤ç¶æ |
|---|
| | | async getEquipmentCurrentState() { |
|---|
| | | try { |
|---|
| | | let { data } = await GetEquipmentCurrentState(); |
|---|
| | | let equipmentData = []; |
|---|
| | | data.forEach((item) => { |
|---|
| | | const res = this.equipmentStatusData.filter( |
|---|
| | | (obj) => obj.workingProcedure == item.workingProcedure |
|---|
| | | ); |
|---|
| | | if (res.length > 0) { |
|---|
| | | // item.equipmentCurrentState =5; æµè¯ |
|---|
| | | equipmentData.push(item); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | this.equipmentStatusData = equipmentData; |
|---|
| | | console.log(88888888); |
|---|
| | | console.log(JSON.stringify(this.equipmentStatusData) ); |
|---|
| | | this.getImageColor(data); |
|---|
| | | |
|---|
| | | } catch (error) { |
|---|
| | | console.log(error); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ ¹æ®è®¾å¤ç¶æ设置设å¤é¢è² |
|---|
| | | getImageColor(data) { |
|---|
| | | data.forEach((item) => { |
|---|
| | | let result = this.EquipmentEnums.filter( |
|---|
| | | (obj) => obj.code == item.equipmentCurrentState |
|---|
| | | ); |
|---|
| | | // console.log(item.equipmentCurrentState); |
|---|
| | | if (result.length > 0) { |
|---|
| | | this.imageColor[item.workingProcedure] = result[0].color; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | console.log(5555555555); |
|---|
| | | console.log(this.imageColor, "getImageColor"); |
|---|
| | | }, |
|---|
| | | // è·åè´¨éæ°æ® |
|---|
| | | async getQualityData() { |
|---|
| | | let { qualityData } = this; |
|---|
| | | try { |
|---|
| | | let { data } = await getQualityData({ |
|---|
| | | qualityType: qualityData.qualityType, |
|---|
| | | }); |
|---|
| | | this.qualityData = data; |
|---|
| | | // console.log(this.qualityData); |
|---|
| | | } catch (error) { |
|---|
| | | console.log(error); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // è·åç产å®æè¶å¿æ°æ® |
|---|
| | | async getProduceCompletionStatus() { |
|---|
| | | try { |
|---|
| | | let { data } = await getProduceCompletionStatus(); |
|---|
| | | this.produceCompletionData = data; |
|---|
| | | } catch (error) { |
|---|
| | | console.log(error); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // è·å产éç»è®¡æ°æ® |
|---|
| | | async getCurrentProduceInfo() { |
|---|
| | | try { |
|---|
| | | let { data } = await getCurrentProduceInfo(); |
|---|
| | | this.produceStatisData = data; |
|---|
| | | // console.log(data); |
|---|
| | | } catch (error) { |
|---|
| | | console.log(error); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // è·åå®æ¶å¨æ¶é´ |
|---|
| | | async getLargeScreenFrequency() { |
|---|
| | | try { |
|---|
| | | let { data } = await getLargeScreenFrequency(); |
|---|
| | | this.time = data; |
|---|
| | | } catch (error) { |
|---|
| | | console.log(error); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // beforeDestroy(){ |
|---|
| | | // clearInterval(this.dataTimer) |
|---|
| | | // clearInterval(this.dateTimer) |
|---|
| | | // } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | $allHeight: 13.5rem; |
|---|
| | | $titleHeight: 2rem; |
|---|
| | | |
|---|
| | | .container { |
|---|
| | | width: 100%; |
|---|
| | | height: auto; |
|---|
| | | position: relative; |
|---|
| | | .guang { |
|---|
| | | position: absolute; |
|---|
| | | width: 100%; |
|---|
| | | top: 30%; |
|---|
| | | left: 0; |
|---|
| | | z-index: 0; |
|---|
| | | height: 69%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .header { |
|---|
| | | position: relative; |
|---|
| | | z-index: 9; |
|---|
| | | width: 100%; |
|---|
| | | height: 2rem; |
|---|
| | | background-image: url("~@/assets/images/title.png"); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | margin-bottom: 0.25rem; |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | font-family: Source Han Sans CN; |
|---|
| | | display: flex; |
|---|
| | | vertical-align: middle; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 40px; |
|---|
| | | font-weight: 700; |
|---|
| | | position: absolute; |
|---|
| | | top: 12px; |
|---|
| | | left: 50%; |
|---|
| | | transform: translate(-50%); |
|---|
| | | letter-spacing: 8px; |
|---|
| | | |
|---|
| | | background: linear-gradient(0deg, #a7ffff, #83d0dc); |
|---|
| | | -webkit-background-clip: text; |
|---|
| | | -webkit-text-fill-color: transparent; |
|---|
| | | |
|---|
| | | .imgTitle { |
|---|
| | | width: 117px; |
|---|
| | | margin-right: 69px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .left-text { |
|---|
| | | font-size: 16px; |
|---|
| | | color: #fff; |
|---|
| | | position: absolute; |
|---|
| | | top: 79px; |
|---|
| | | left: 37px; |
|---|
| | | width: 368px; |
|---|
| | | text-align: right; |
|---|
| | | line-height: 23px; |
|---|
| | | font-weight: 700; |
|---|
| | | transform: scaleY(2); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right-text { |
|---|
| | | font-size: 16px; |
|---|
| | | text-align: right; |
|---|
| | | color: #fff; |
|---|
| | | position: absolute; |
|---|
| | | top: 79px; |
|---|
| | | right: 268px; |
|---|
| | | line-height: 23px; |
|---|
| | | font-weight: 700; |
|---|
| | | transform: scaleY(2); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .main { |
|---|
| | | position: relative; |
|---|
| | | width: 100%; |
|---|
| | | height: auto; |
|---|
| | | // display: flex; |
|---|
| | | // flex-direction: column; |
|---|
| | | // justify-content: space-between; |
|---|
| | | padding: 0 0.28rem 0.19rem; |
|---|
| | | z-index: 99; |
|---|
| | | |
|---|
| | | .main-top { |
|---|
| | | width: 100%; |
|---|
| | | |
|---|
| | | // background-color: #fff; |
|---|
| | | margin-bottom: 0.29rem; |
|---|
| | | background-image: url("~@/assets/images/border_prodline.png"); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .main-top_ly { |
|---|
| | | width: 95%; |
|---|
| | | margin: 0 auto; |
|---|
| | | position: relative; |
|---|
| | | height: 526px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .prodline { |
|---|
| | | width: 95%; |
|---|
| | | display: block; |
|---|
| | | position: absolute; |
|---|
| | | top: 50%; |
|---|
| | | left: 50%; |
|---|
| | | transform: translate(-50%, -50%); |
|---|
| | | height: 225px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .prodline_op35 { |
|---|
| | | position: absolute; |
|---|
| | | top: 246px; |
|---|
| | | left: 106px; |
|---|
| | | width: 40px; |
|---|
| | | z-index: 0; |
|---|
| | | } |
|---|
| | | .prodline_op325 { |
|---|
| | | position: absolute; |
|---|
| | | top: 254px; |
|---|
| | | left: 108px; |
|---|
| | | width: 38px; |
|---|
| | | height: 63px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .euip { |
|---|
| | | width: 95%; |
|---|
| | | position: absolute; |
|---|
| | | top: -1.59rem; |
|---|
| | | left: 1.28rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP05 { |
|---|
| | | top: -122px; |
|---|
| | | left: -223px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP10, |
|---|
| | | .OP40 { |
|---|
| | | top: -133px; |
|---|
| | | left: -145px; |
|---|
| | | height: 904px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP20 { |
|---|
| | | top: -95px; |
|---|
| | | left: -77px; |
|---|
| | | width: 86%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP30 { |
|---|
| | | top: -152px; |
|---|
| | | left: -226px; |
|---|
| | | width: 2061px; |
|---|
| | | height: 923px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP35 { |
|---|
| | | top: -151px; |
|---|
| | | left: -182px; |
|---|
| | | width: 100%; |
|---|
| | | z-index: 999; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP50 { |
|---|
| | | top: -108px; |
|---|
| | | left: 11px; |
|---|
| | | width: 90%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP60 { |
|---|
| | | top: -178px; |
|---|
| | | left: -31px; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP70 { |
|---|
| | | top: -175px; |
|---|
| | | left: 23px; |
|---|
| | | width: 101%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .unit { |
|---|
| | | top: -113px; |
|---|
| | | left: 86px; |
|---|
| | | transform: scale(1.2); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP80 { |
|---|
| | | top: -1.95rem; |
|---|
| | | left: 1.98rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // img:nth-child(2) { |
|---|
| | | // width:100%; |
|---|
| | | // top: -2.05rem; |
|---|
| | | // left: 1.07rem; |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .main-bottom { |
|---|
| | | height: 336px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | .border_left1 { |
|---|
| | | width: 284px; |
|---|
| | | margin-right: 20px; |
|---|
| | | border: 0 !important; |
|---|
| | | background-image: url("~@/assets/images/border_left1.png"); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .border_left2 { |
|---|
| | | width: 244px; |
|---|
| | | margin-right: 20px; |
|---|
| | | border: 0 !important; |
|---|
| | | background-image: url("~@/assets/images/border_left1.png"); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .border_middle { |
|---|
| | | width: 720px; |
|---|
| | | margin-right: 20px; |
|---|
| | | border: 0 !important; |
|---|
| | | // background-image: url("~@/assets/images/border_middle.png"); |
|---|
| | | background-image: url("~@/assets/images/border_left1.png"); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .border_right1 { |
|---|
| | | width: 244px; |
|---|
| | | margin-right: 20px; |
|---|
| | | border: 0 !important; |
|---|
| | | background-image: url("~@/assets/images/border_left1.png"); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .border_right2 { |
|---|
| | | width: 284px; |
|---|
| | | border: 0 !important; |
|---|
| | | background-image: url("~@/assets/images/border_left1.png"); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .echarts-box { |
|---|
| | | height: auto; |
|---|
| | | border: 2px solid #3a45de; |
|---|
| | | |
|---|
| | | .echarts-title { |
|---|
| | | font-size: 20px; |
|---|
| | | height: 69px; |
|---|
| | | padding-top: 20px; |
|---|
| | | margin: 0 0 0 0; |
|---|
| | | font-weight: 700; |
|---|
| | | color: #00f8c6; |
|---|
| | | text-align: center; |
|---|
| | | border-bottom: 2px solid #0739a3; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .echarts-box:nth-child(4) { |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .pie-label-left { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 10px; |
|---|
| | | left: 0; |
|---|
| | | color: white; |
|---|
| | | font-size: 16px; |
|---|
| | | font-weight: 300; |
|---|
| | | width: 54%; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pie-label-right { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 10px; |
|---|
| | | right: 0; |
|---|
| | | color: #fff; |
|---|
| | | color: white; |
|---|
| | | font-size: 16px; |
|---|
| | | width: 54%; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .box-container { |
|---|
| | | width: 100%; |
|---|
| | | // height: 2.6rem; |
|---|
| | | height: 236px; |
|---|
| | | // background-color: rgb(196, 231, 178); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bgi { |
|---|
| | | background-image: url("~@/assets/bg1.png"); |
|---|
| | | background-size: contain; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-position: center center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .box11 { |
|---|
| | | color: #fff; |
|---|
| | | margin: 10px 0; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 15px; |
|---|
| | | } |
|---|
| | | .box12 { |
|---|
| | | margin: 0 0.13rem; |
|---|
| | | height: 0.13rem; |
|---|
| | | background-color: #f14158; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP88, |
|---|
| | | .OP89, |
|---|
| | | .OP90 { |
|---|
| | | position: absolute; |
|---|
| | | width: 20px; |
|---|
| | | } |
|---|
| | | #animatedImage { |
|---|
| | | position: absolute; |
|---|
| | | top: 70.5%; |
|---|
| | | left: 75px; |
|---|
| | | } |
|---|
| | | .hidden { |
|---|
| | | display: none; /* éèå
ç´ */ |
|---|
| | | } |
|---|
| | | |
|---|
| | | // .ring-container { |
|---|
| | | // position: relative; |
|---|
| | | // width: 85px; |
|---|
| | | // height: 85px; |
|---|
| | | // display: flex; |
|---|
| | | // justify-content: center; |
|---|
| | | // align-items: center; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // .outer-ring { |
|---|
| | | // position: absolute; |
|---|
| | | // width: 100%; |
|---|
| | | // height: 100%; |
|---|
| | | // border-radius: 50%; |
|---|
| | | // background: transparent; |
|---|
| | | // border: 1px solid #3498db; /* å¤ç¯é¢è² */ |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // .inner-ring { |
|---|
| | | // position: absolute; |
|---|
| | | // width: 80%; |
|---|
| | | // height: 80%; |
|---|
| | | // border-radius: 50%; |
|---|
| | | // background: transparent; |
|---|
| | | // box-shadow: inset 0 0 30px #084b71; |
|---|
| | | // border: 1px solid #3c5da9; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // .quan1{ |
|---|
| | | // position: absolute; |
|---|
| | | // top: 142px; |
|---|
| | | // left: 19px; |
|---|
| | | // } |
|---|
| | | |
|---|
| | | .quan1 { |
|---|
| | | position: absolute; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | content: ""; |
|---|
| | | width: 125px; |
|---|
| | | height: 118px; |
|---|
| | | z-index: -1; |
|---|
| | | top: 117px; |
|---|
| | | left: 3px; |
|---|
| | | transform: scaleY(2); |
|---|
| | | border-radius: 100%; |
|---|
| | | background-image: url("@/assets/images/quan.png"); /* æ¿æ¢ä¸ºæ¨çèæ¯å¾è·¯å¾ */ |
|---|
| | | background-size: cover; /* æä½¿ç¨ containï¼æ ¹æ®éè¦éæ© */ |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 95%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .quan2 { |
|---|
| | | position: absolute; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | content: ""; |
|---|
| | | width: 125px; |
|---|
| | | height: 118px; |
|---|
| | | z-index: -1; |
|---|
| | | top: 117px; |
|---|
| | | left: 120px; |
|---|
| | | transform: scaleY(2); |
|---|
| | | border-radius: 100%; |
|---|
| | | background-image: url("@/assets/images/quan.png"); /* æ¿æ¢ä¸ºæ¨çèæ¯å¾è·¯å¾ */ |
|---|
| | | background-size: cover; /* æä½¿ç¨ containï¼æ ¹æ®éè¦éæ© */ |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 95%; |
|---|
| | | } |
|---|
| | | .box100 { |
|---|
| | | position: absolute; |
|---|
| | | left: 25%; |
|---|
| | | top: 35%; |
|---|
| | | width: 67px; |
|---|
| | | z-index: 9999; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .box200 { |
|---|
| | | position: absolute; |
|---|
| | | left: 4%; |
|---|
| | | top: 48%; |
|---|
| | | width: 77px; |
|---|
| | | z-index: 9999; |
|---|
| | | } |
|---|
| | | .box300 { |
|---|
| | | position: absolute; |
|---|
| | | left: 44%; |
|---|
| | | top: 49%; |
|---|
| | | width: 75px; |
|---|
| | | z-index: 9999; |
|---|
| | | } |
|---|
| | | .title1 { |
|---|
| | | transform: scaleY(2); |
|---|
| | | font-size: 12px; |
|---|
| | | display: block; |
|---|
| | | margin-top: 7px; |
|---|
| | | } |
|---|
| | | .zuozi { |
|---|
| | | position: absolute; |
|---|
| | | top: 10px; |
|---|
| | | left: 10px; |
|---|
| | | } |
|---|
| | | .line100 { |
|---|
| | | position: absolute; |
|---|
| | | left: 5px; |
|---|
| | | top: 64%; |
|---|
| | | height: 18px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- ä¸åé¨åä¹åä¸æ ¼ --> |
|---|
| | | <div class="container"> |
|---|
| | | <div class="header"> |
|---|
| | | <div class="title">4GCä¸ä»£åå¨æºè¿æ线888</div> |
|---|
| | | <div class="left-text"> |
|---|
| | | <div style="line-height: 30px">{{ nowTime }}</div> |
|---|
| | | <div style="padding-left: 25px"> |
|---|
| | | å®å
¨ç产:{{ produceStatisData.currentSafeProductionDay }}天 |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="right-text"> |
|---|
| | | <div style="line-height: 30px"> |
|---|
| | | å½åç次:{{ produceStatisData.currentTeamName }} |
|---|
| | | </div> |
|---|
| | | <!-- style="padding-left:25px" --> |
|---|
| | | <div>çé¿:{{ produceStatisData.currentTeamLeader }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="main"> |
|---|
| | | <div class="main-top"> |
|---|
| | | <div class="width_left"> |
|---|
| | | <div class="box1"> |
|---|
| | | <div class="echarts-box border_left1"> |
|---|
| | | <div class="echarts-title">ç»è®¡å¾1</div> |
|---|
| | | <EquipmentRunStatus2 :equipmentStatusData="equipmentStatusData" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <br> |
|---|
| | | <br> <br> |
|---|
| | | <div class="box1"> |
|---|
| | | <div class="echarts-box border_left1"> |
|---|
| | | <div class="echarts-title">ç»è®¡å¾2</div> |
|---|
| | | <EquipmentRunStatus3 :equipmentStatusData="equipmentStatusData" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="width_middle"> |
|---|
| | | <img src="~@/assets/images/prodline_all.png" class="prodline" /> |
|---|
| | | |
|---|
| | | <img |
|---|
| | | v-for="item in equipmentStatusData" |
|---|
| | | :key="item.id" |
|---|
| | | :src=" |
|---|
| | | require(`@/assets/images/${imageColor[item.workingProcedure]}/${ |
|---|
| | | item.workingProcedure |
|---|
| | | }.png`) |
|---|
| | | " |
|---|
| | | :class="`euip ${item.workingProcedure}`" |
|---|
| | | /> |
|---|
| | | |
|---|
| | | <img src="~@/assets/images/OP35.png" class="prodline_op35" /> |
|---|
| | | <img |
|---|
| | | :src="require(`@/assets/images/${imageColor['OP10']}/OP40.png`)" |
|---|
| | | class="euip OP40" |
|---|
| | | /> |
|---|
| | | <img |
|---|
| | | :src="require(`@/assets/images/${imageColor['unit']}/unit.png`)" |
|---|
| | | class="euip unit" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="width_right"> |
|---|
| | | <div class="box1"> |
|---|
| | | <div class="echarts-box border_left1"> |
|---|
| | | <div class="echarts-title">ç»è®¡å¾3</div> |
|---|
| | | <EquipmentRunStatus4 :equipmentStatusData="equipmentStatusData" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <br> |
|---|
| | | <br> <br> |
|---|
| | | <div class="box1"> |
|---|
| | | <div class="echarts-box border_left1"> |
|---|
| | | <div class="echarts-title">ç»è®¡å¾4</div> |
|---|
| | | <EquipmentRunStatus5 :equipmentStatusData="equipmentStatusData" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- <button @click="flag=true">dataæ¹å</button> --> |
|---|
| | | <div class="main-bottom"> |
|---|
| | | <div class="echarts-box border_left1"> |
|---|
| | | <div class="echarts-title">设å¤è¿è¡ç¶æç»è®¡å¾</div> |
|---|
| | | <EquipmentRunStatus :equipmentStatusData="equipmentStatusData" /> |
|---|
| | | </div> |
|---|
| | | <div class="echarts-box border_left2"> |
|---|
| | | <div class="echarts-title">产线å¥åº·è½åå¾</div> |
|---|
| | | <ProdlineHealthy /> |
|---|
| | | </div> |
|---|
| | | <div class="echarts-box border_middle"> |
|---|
| | | <div class="echarts-title">è´¨éæ°æ®è¶å¿å¾</div> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | color: #fff; |
|---|
| | | margin: 0 0.13rem; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 0.17rem; |
|---|
| | | " |
|---|
| | | > |
|---|
| | | {{ qualityData.qualityType }} |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | margin: 0 0.13rem; |
|---|
| | | height: 0.13rem; |
|---|
| | | background-color: #f14158; |
|---|
| | | " |
|---|
| | | ></div> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | margin: 0 0.13rem; |
|---|
| | | height: 0.13rem; |
|---|
| | | background-color: #a7cf29; |
|---|
| | | " |
|---|
| | | ></div> |
|---|
| | | </div> |
|---|
| | | <QualityDataTrendse :qualityData="qualityData.list" /> |
|---|
| | | <div> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | margin: 0 0.13rem; |
|---|
| | | height: 0.13rem; |
|---|
| | | background-color: #a7cf29; |
|---|
| | | " |
|---|
| | | ></div> |
|---|
| | | <div |
|---|
| | | style=" |
|---|
| | | margin: 0 0.13rem; |
|---|
| | | height: 0.13rem; |
|---|
| | | background-color: #f14158; |
|---|
| | | " |
|---|
| | | ></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="echarts-box border_right1"> |
|---|
| | | <div class="echarts-title">æ¬ç/æ¬æ产éç»è®¡</div> |
|---|
| | | <ProductionStatistics :produceStatisData="produceStatisData" /> |
|---|
| | | <div class="pie-label-left"> |
|---|
| | | {{ produceStatisData.currentShiftProduceNum }} |
|---|
| | | <span |
|---|
| | | v-if=" |
|---|
| | | produceStatisData.currentShiftPlanNum || |
|---|
| | | produceStatisData.currentShiftPlanNum == 0 |
|---|
| | | " |
|---|
| | | >/</span |
|---|
| | | > |
|---|
| | | {{ produceStatisData.currentShiftPlanNum }} |
|---|
| | | </div> |
|---|
| | | <div class="pie-label-right"> |
|---|
| | | {{ produceStatisData.currentMonthProduceNum }} |
|---|
| | | <span |
|---|
| | | v-if=" |
|---|
| | | produceStatisData.currentMonthPlanNum || |
|---|
| | | produceStatisData.currentMonthPlanNum == 0 |
|---|
| | | " |
|---|
| | | >/</span |
|---|
| | | > |
|---|
| | | {{ produceStatisData.currentMonthPlanNum }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="echarts-box border_right2"> |
|---|
| | | <div class="echarts-title">ç产å®æè¶å¿</div> |
|---|
| | | <ProductionCompletionTrend |
|---|
| | | :produceCompletionData="produceCompletionData" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // import OperationalAvailability from "./OperationalAvailability.vue"; |
|---|
| | | // import EquipmentStatus from "./EquipmentStatus.vue"; |
|---|
| | | // import ProductionCapacity from "./ProductionCapacity.vue"; |
|---|
| | | import EquipmentRunStatus from "./EquipmentRunStatus.vue"; |
|---|
| | | import EquipmentRunStatus2 from "./EquipmentRunStatus2.vue"; |
|---|
| | | import EquipmentRunStatus3 from "./EquipmentRunStatus3.vue"; |
|---|
| | | import EquipmentRunStatus4 from "./EquipmentRunStatus4.vue"; |
|---|
| | | import EquipmentRunStatus5 from "./EquipmentRunStatus5.vue"; |
|---|
| | | |
|---|
| | | import ProdlineHealthy from "./ProdlineHealthy.vue"; |
|---|
| | | import ProductionCompletionTrend from "./ProductionCompletionTrend.vue"; |
|---|
| | | import ProductionStatistics from "./ProductionStatistics.vue"; |
|---|
| | | import QualityDataTrendse from "./QualityDataTrends.vue"; |
|---|
| | | import moment from "moment"; |
|---|
| | | |
|---|
| | | import { |
|---|
| | | GetEquipmentCurrentState, |
|---|
| | | getQualityData, |
|---|
| | | getLargeScreenFrequency, |
|---|
| | | getProduceCompletionStatus, |
|---|
| | | getCurrentProduceInfo, |
|---|
| | | } from "@/api/common"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: "MainContentZg", |
|---|
| | | components: { |
|---|
| | | EquipmentRunStatus, |
|---|
| | | EquipmentRunStatus2, |
|---|
| | | EquipmentRunStatus3, |
|---|
| | | EquipmentRunStatus4, |
|---|
| | | EquipmentRunStatus5, |
|---|
| | | ProductionStatistics, |
|---|
| | | ProductionCompletionTrend, |
|---|
| | | QualityDataTrendse, |
|---|
| | | ProdlineHealthy, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | dataTimer: null, |
|---|
| | | dateTimer: null, |
|---|
| | | time: 5000, |
|---|
| | | nowTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"), |
|---|
| | | // flag: false, |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | EquipmentEnums: [ |
|---|
| | | { |
|---|
| | | code: 1, |
|---|
| | | color: "green", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | code: 2, |
|---|
| | | color: "white", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | code: 3, |
|---|
| | | color: "blue", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | code: 4, |
|---|
| | | color: "yellow", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | code: 5, |
|---|
| | | color: "red", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | imageColor: { |
|---|
| | | OP05: "blue", |
|---|
| | | OP10: "blue", |
|---|
| | | OP20: "blue", |
|---|
| | | OP30: "blue", |
|---|
| | | OP35: "blue", |
|---|
| | | OP40: "blue", |
|---|
| | | OP50: "blue", |
|---|
| | | OP60: "blue", |
|---|
| | | OP70: "blue", |
|---|
| | | OP80: "blue", |
|---|
| | | unit: "blue", |
|---|
| | | }, |
|---|
| | | equipmentStatusData: [ |
|---|
| | | { workingProcedure: "OP05" }, |
|---|
| | | { workingProcedure: "OP10" }, |
|---|
| | | { workingProcedure: "OP20" }, |
|---|
| | | { workingProcedure: "OP30" }, |
|---|
| | | { workingProcedure: "OP35" }, |
|---|
| | | { workingProcedure: "OP40" }, |
|---|
| | | { workingProcedure: "OP50" }, |
|---|
| | | { workingProcedure: "OP60" }, |
|---|
| | | { workingProcedure: "OP70" }, |
|---|
| | | { workingProcedure: "OP80" }, |
|---|
| | | { workingProcedure: "unit" }, |
|---|
| | | ], |
|---|
| | | qualityData: [], |
|---|
| | | produceCompletionData: [], |
|---|
| | | produceStatisData: {}, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: {}, |
|---|
| | | created() { |
|---|
| | | this.getLargeScreenFrequency(); |
|---|
| | | this.getEquipmentCurrentState(); |
|---|
| | | this.getQualityData(); |
|---|
| | | this.getProduceCompletionStatus(); |
|---|
| | | this.getCurrentProduceInfo(); |
|---|
| | | this.dataTimer = setInterval(this.timerHandler, this.time); |
|---|
| | | this.dateTimer = setInterval(() => { |
|---|
| | | this.nowTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss"); |
|---|
| | | }, 1000); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // å®æ¶å¨å½æ° |
|---|
| | | timerHandler() { |
|---|
| | | this.getEquipmentCurrentState(); |
|---|
| | | this.getQualityData(); |
|---|
| | | this.getProduceCompletionStatus(); |
|---|
| | | this.getCurrentProduceInfo(); |
|---|
| | | }, |
|---|
| | | // è·å设å¤ç¶æ |
|---|
| | | async getEquipmentCurrentState() { |
|---|
| | | try { |
|---|
| | | let { data } = await GetEquipmentCurrentState(); |
|---|
| | | let equipmentData = []; |
|---|
| | | data.forEach((item) => { |
|---|
| | | const res = this.equipmentStatusData.filter( |
|---|
| | | (obj) => obj.workingProcedure == item.workingProcedure |
|---|
| | | ); |
|---|
| | | if (res.length > 0) { |
|---|
| | | equipmentData.push(item); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | this.equipmentStatusData = equipmentData; |
|---|
| | | this.getImageColor(data); |
|---|
| | | } catch (error) { |
|---|
| | | console.log(error); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // æ ¹æ®è®¾å¤ç¶æ设置设å¤é¢è² |
|---|
| | | getImageColor(data) { |
|---|
| | | data.forEach((item) => { |
|---|
| | | let result = this.EquipmentEnums.filter( |
|---|
| | | (obj) => obj.code == item.equipmentCurrentState |
|---|
| | | ); |
|---|
| | | // console.log(item.equipmentCurrentState); |
|---|
| | | if (result.length > 0) { |
|---|
| | | this.imageColor[item.workingProcedure] = result[0].color; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | // console.log(this.imageColor, "getImageColor"); |
|---|
| | | }, |
|---|
| | | // è·åè´¨éæ°æ® |
|---|
| | | async getQualityData() { |
|---|
| | | let { qualityData } = this; |
|---|
| | | try { |
|---|
| | | let { data } = await getQualityData({ |
|---|
| | | qualityType: qualityData.qualityType, |
|---|
| | | }); |
|---|
| | | this.qualityData = data; |
|---|
| | | // console.log(this.qualityData); |
|---|
| | | } catch (error) { |
|---|
| | | console.log(error); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // è·åç产å®æè¶å¿æ°æ® |
|---|
| | | async getProduceCompletionStatus() { |
|---|
| | | try { |
|---|
| | | let { data } = await getProduceCompletionStatus(); |
|---|
| | | this.produceCompletionData = data; |
|---|
| | | } catch (error) { |
|---|
| | | console.log(error); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // è·å产éç»è®¡æ°æ® |
|---|
| | | async getCurrentProduceInfo() { |
|---|
| | | try { |
|---|
| | | let { data } = await getCurrentProduceInfo(); |
|---|
| | | this.produceStatisData = data; |
|---|
| | | // console.log(data); |
|---|
| | | } catch (error) { |
|---|
| | | console.log(error); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // è·åå®æ¶å¨æ¶é´ |
|---|
| | | async getLargeScreenFrequency() { |
|---|
| | | try { |
|---|
| | | let { data } = await getLargeScreenFrequency(); |
|---|
| | | this.time = data; |
|---|
| | | } catch (error) { |
|---|
| | | console.log(error); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | // beforeDestroy(){ |
|---|
| | | // clearInterval(this.dataTimer) |
|---|
| | | // clearInterval(this.dateTimer) |
|---|
| | | // } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | $allHeight: 13.5rem; |
|---|
| | | $titleHeight: 2rem; |
|---|
| | | |
|---|
| | | .container { |
|---|
| | | width: 100%; |
|---|
| | | height: auto; |
|---|
| | | |
|---|
| | | .header { |
|---|
| | | width: 100%; |
|---|
| | | height: 2rem; |
|---|
| | | background-image: url("~@/assets/images/title.png"); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | margin-bottom: 0.25rem; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | color: #41c7de; |
|---|
| | | font-size: 0.38rem; |
|---|
| | | font-weight: 700; |
|---|
| | | position: absolute; |
|---|
| | | top: 0.31rem; |
|---|
| | | left: 50%; |
|---|
| | | transform: translate(-50%); |
|---|
| | | letter-spacing: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .left-text { |
|---|
| | | font-size: 0.19rem; |
|---|
| | | color: #fff; |
|---|
| | | position: absolute; |
|---|
| | | top: 1.15rem; |
|---|
| | | left: 5rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .right-text { |
|---|
| | | font-size: 0.19rem; |
|---|
| | | text-align: right; |
|---|
| | | color: #fff; |
|---|
| | | position: absolute; |
|---|
| | | top: 1.15rem; |
|---|
| | | right: 5.3rem; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .main { |
|---|
| | | width: 100%; |
|---|
| | | height: auto; |
|---|
| | | // display: flex; |
|---|
| | | // flex-direction: column; |
|---|
| | | // justify-content: space-between; |
|---|
| | | padding: 0 0.28rem 0.19rem; |
|---|
| | | |
|---|
| | | .main-top { |
|---|
| | | width: 100%; |
|---|
| | | margin: 0 auto; |
|---|
| | | height: 7.42rem; |
|---|
| | | display: flex; |
|---|
| | | margin-bottom: 0.29rem; |
|---|
| | | |
|---|
| | | .width_left { |
|---|
| | | width: 18%; |
|---|
| | | height: 7.42rem; |
|---|
| | | } |
|---|
| | | .width_right { |
|---|
| | | width: 18%; |
|---|
| | | height: 7.42rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .width_middle { |
|---|
| | | width: 60%; |
|---|
| | | margin: 0 auto; |
|---|
| | | height: 7.42rem; |
|---|
| | | // background-color: #fff; |
|---|
| | | background-image: url("~@/assets/images/border_prodline.png"); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | // background-size: 101.1% 101.8%; |
|---|
| | | // background-position: -0.13rem -0.13rem; |
|---|
| | | position: relative; |
|---|
| | | .prodline { |
|---|
| | | width: 95%; |
|---|
| | | display: block; |
|---|
| | | position: absolute; |
|---|
| | | top: 50%; |
|---|
| | | left: 50%; |
|---|
| | | transform: translate(-50%, -50%); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .prodline_op35 { |
|---|
| | | position: absolute; |
|---|
| | | top: 2.82rem; |
|---|
| | | left: 2.6rem; |
|---|
| | | width: 1.8%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .euip { |
|---|
| | | // width: 95%; |
|---|
| | | // position: absolute; |
|---|
| | | // top: -1.59rem; |
|---|
| | | // left: 1.28rem; |
|---|
| | | |
|---|
| | | margin-top: 1.9rem; |
|---|
| | | width: 100%; |
|---|
| | | position: absolute; |
|---|
| | | margin-left: -.2rem; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP05 { |
|---|
| | | top: -1.58rem; |
|---|
| | | left: 0.12rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP10, |
|---|
| | | .OP40 { |
|---|
| | | top: -1.48rem; |
|---|
| | | left: 0.5rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP20 { |
|---|
| | | top: -1.8rem; |
|---|
| | | left: 0.3rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP30 { |
|---|
| | | top: -2.05rem; |
|---|
| | | left: 0.3rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP35 { |
|---|
| | | top: -1.8rem; |
|---|
| | | left: 0.2rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP50 { |
|---|
| | | top: -1.69rem; |
|---|
| | | left: 0.5rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP60 { |
|---|
| | | top: -1.65rem; |
|---|
| | | left: .7rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP70 { |
|---|
| | | top: -1.52rem; |
|---|
| | | left: 0.9rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .OP80, |
|---|
| | | .unit { |
|---|
| | | top: -1.95rem; |
|---|
| | | left: 0.8rem; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // img:nth-child(2) { |
|---|
| | | // width:100%; |
|---|
| | | // top: -2.05rem; |
|---|
| | | // left: 1.07rem; |
|---|
| | | // } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .main-bottom, |
|---|
| | | .main-top { |
|---|
| | | height: auto; |
|---|
| | | display: flex; |
|---|
| | | // background-color: skyblue; |
|---|
| | | |
|---|
| | | .border_left1 { |
|---|
| | | width: 3.84rem; |
|---|
| | | margin-right: 0.14rem; |
|---|
| | | border: 0 !important; |
|---|
| | | background-image: url("~@/assets/images/border_left1.png"); |
|---|
| | | background-size: 107.5% 104%; |
|---|
| | | background-position: -0.14rem -0.13rem; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .border_left2 { |
|---|
| | | width: 3.02rem; |
|---|
| | | margin-right: 0.16rem; |
|---|
| | | border: 0 !important; |
|---|
| | | background-image: url("~@/assets/images/border_left2.png"); |
|---|
| | | background-size: 109.3% 104%; |
|---|
| | | background-position: -0.14rem -0.13rem; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .border_middle { |
|---|
| | | width: 6.09rem; |
|---|
| | | margin-right: 0.16rem; |
|---|
| | | border: 0 !important; |
|---|
| | | background-image: url("~@/assets/images/border_middle.png"); |
|---|
| | | background-size: 102.7% 104%; |
|---|
| | | background-position: -0.14rem -0.13rem; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .border_right1 { |
|---|
| | | width: 3.75rem; |
|---|
| | | margin-right: 0.15rem; |
|---|
| | | border: 0 !important; |
|---|
| | | background-image: url("~@/assets/images/border_right1.png"); |
|---|
| | | background-size: 107.5% 104%; |
|---|
| | | background-position: -0.14rem -0.13rem; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .border_right2 { |
|---|
| | | width: 6.09rem; |
|---|
| | | border: 0 !important; |
|---|
| | | background-image: url("~@/assets/images/border_right2.png"); |
|---|
| | | background-size: 104.4% 104%; |
|---|
| | | background-position: -0.14rem -0.13rem; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .echarts-box { |
|---|
| | | height: auto; |
|---|
| | | border: 2px solid #3a45de; |
|---|
| | | |
|---|
| | | .echarts-title { |
|---|
| | | font-size: 0.18rem; |
|---|
| | | height: 0.75rem; |
|---|
| | | padding: 0.31rem 0 0.26rem; |
|---|
| | | margin: 0 0.23rem; |
|---|
| | | font-weight: 700; |
|---|
| | | color: #00afb9; |
|---|
| | | text-align: center; |
|---|
| | | border-bottom: 2px solid #3c37bf; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .echarts-box:nth-child(4) { |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .pie-label-left { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0.1rem; |
|---|
| | | left: 0.7rem; |
|---|
| | | color: #fff; |
|---|
| | | font-size: 0.2rem; |
|---|
| | | font-weight: 300; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pie-label-right { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0.1rem; |
|---|
| | | right: 0.7rem; |
|---|
| | | color: #fff; |
|---|
| | | font-size: 0.2rem; |
|---|
| | | font-weight: 300; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .box-container { |
|---|
| | | width: 100%; |
|---|
| | | height: 2.6rem; |
|---|
| | | // background-color: rgb(196, 231, 178); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bgi { |
|---|
| | | background-image: url("~@/assets/bg1.png"); |
|---|
| | | background-size: contain; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-position: center center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .box1{ |
|---|
| | | .echarts-box{ |
|---|
| | | width: 100% !important; |
|---|
| | | } |
|---|
| | | .border_left1{ |
|---|
| | | margin-right: 0 !important; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- <img :src="require(`@/assets/images/huan.png`)" class="huan" /> --> |
|---|
| | | <div class="box-container quan" id="echarts1"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let timer = null; |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | equipmentStatusData: { |
|---|
| | | type: Array, |
|---|
| | | default: () => [], |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | currentIndex: -1, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | equipmentStatusData(val) { |
|---|
| | | let data = [ |
|---|
| | | { value: 0, name: "ç产" }, |
|---|
| | | { value: 0, name: "å®æ" }, |
|---|
| | | { value: 0, name: "å¾
æº" }, |
|---|
| | | { value: 0, name: "è¦å" }, |
|---|
| | | { value: 0, name: "æ
é" }, |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | val.forEach((item) => { |
|---|
| | | switch (item.equipmentCurrentState) { |
|---|
| | | case "1": |
|---|
| | | data[0].value++; |
|---|
| | | break; |
|---|
| | | case "2": |
|---|
| | | data[1].value++; |
|---|
| | | break; |
|---|
| | | case "3": |
|---|
| | | data[2].value++; |
|---|
| | | break; |
|---|
| | | case "4": |
|---|
| | | data[3].value++; |
|---|
| | | break; |
|---|
| | | case "5": |
|---|
| | | data[4].value++; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | console.log("++++++", data); |
|---|
| | | // data = [ |
|---|
| | | // { value: 2, name: "ç产" }, |
|---|
| | | // { value: 3, name: "å®æ" }, |
|---|
| | | // { value: 5, name: "å¾
æº" }, |
|---|
| | | // { value: 6, name: "è¦å" }, |
|---|
| | | // { value: 1, name: "æ
é" }, |
|---|
| | | // ]; |
|---|
| | | this.$set(this.option.series[0], "data", data); |
|---|
| | | |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts1")); |
|---|
| | | this.option = { |
|---|
| | | // #00ff99 #fffff0 #0a0d7f #ffcc00 #fe0000 |
|---|
| | | color: ["#00ff99", "#fffff0", "#0a0d7f", "#ffcc00", "#fe0000"], |
|---|
| | | legend: { |
|---|
| | | orient: "vertical", |
|---|
| | | top: "28%", |
|---|
| | | right: "12%", |
|---|
| | | itemGap: 12, //åä¹é´çé´è· |
|---|
| | | itemHeight: 9, // 设置å¾ä¾é¡¹çé«åº¦ |
|---|
| | | itemWidth: 9, // 设置å¾ä¾é¡¹ç宽度 |
|---|
| | | data: ["ç产", "å®æ", "å¾
æº", "è¦å", "æ
é"], |
|---|
| | | textStyle: { |
|---|
| | | color: "#fff", |
|---|
| | | fontSize: 10, |
|---|
| | | }, |
|---|
| | | formatter: (name) => { |
|---|
| | | let res = this.option.series[0].data.filter( |
|---|
| | | (item) => item.name == name |
|---|
| | | ); |
|---|
| | | return res.length > 0 ? `${name}: ${res[0].value}å°` : name; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: "pie", |
|---|
| | | center: ["33%", "50%"], |
|---|
| | | radius: ["30%", "37%"], |
|---|
| | | padAngle: 5, //ç¯ä¸ç¯ä¹é´çé´é |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | formatter: `{d}%`, |
|---|
| | | // color: "#fff", |
|---|
| | | fontSize: 11, |
|---|
| | | position: "outside", |
|---|
| | | color: "inherit", //继æ¿ä¸é¢çé¢è² |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: true, |
|---|
| | | length: 5, |
|---|
| | | length2: 5, |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | borderRadius: 3, |
|---|
| | | borderColor: "transparent", |
|---|
| | | borderWidth: 10, |
|---|
| | | // shadowColor: 'rgba(0, 0, 0, 0.5)', // é´å½±é¢è² |
|---|
| | | // shadowBlur: 10, // é´å½±æ¨¡ç³ç¨åº¦ |
|---|
| | | // shadowOffsetX: 20, // æ°´å¹³é´å½±å移 |
|---|
| | | // shadowOffsetY: 20, // åç´é´å½±å移 |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | label: { |
|---|
| | | show: false, |
|---|
| | | fontSize: "15", |
|---|
| | | color: "#fff", |
|---|
| | | fontWeight: "normal", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that = this; |
|---|
| | | window.addEventListener("resize", () => { |
|---|
| | | that.myChart.resize(); |
|---|
| | | }); |
|---|
| | | // this.defineEvent(); |
|---|
| | | // this.selectPie(); |
|---|
| | | // timer = setInterval(this.selectPie, 1500); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | selectPie() { |
|---|
| | | let dataLen = this.option.series[0].data.length; |
|---|
| | | this.currentIndex = (this.currentIndex + 1) % dataLen; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }, |
|---|
| | | // è½®æç¹äº®é¥¼å¾ |
|---|
| | | hignLightPie() { |
|---|
| | | const dataPie = this.option.series[0].data; |
|---|
| | | // ççæææå½¢åºå |
|---|
| | | for (var index in dataPie) { |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ç¹äº®å½åæå½¢åºå |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: this.currentIndex, |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // é¼ æ 触æ¸è½®ææ¬åäºä»¶ |
|---|
| | | defineEvent() { |
|---|
| | | // é¼ æ 移åºè½®æç»§ç» |
|---|
| | | this.myChart.on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ è¿å
¥è½®ææ¬å |
|---|
| | | this.myChart.on("mouseover", (params) => { |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = params.dataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移å
¥legendè½®ææ¬å |
|---|
| | | this.myChart.getZr().on("mouseover", (event) => { |
|---|
| | | const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegendçindex |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = legendDataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移åºlegendè½®æç»§ç» |
|---|
| | | this.myChart.getZr().on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #echarts1 { |
|---|
| | | width: 3.84rem; |
|---|
| | | transform: scaleY(2); |
|---|
| | | } |
|---|
| | | .box-container { |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .quan::after { |
|---|
| | | background-image: url("~@/assets/images/huan.png"); |
|---|
| | | position: absolute; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | content: ""; |
|---|
| | | width: 56px; |
|---|
| | | height: 29px; |
|---|
| | | z-index: -1; |
|---|
| | | /* opacity: 0.5; */ |
|---|
| | | top: 103px; |
|---|
| | | left: 73px; |
|---|
| | | transform: scaleY(2); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="box-container" id="echarts10"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let timer = null; |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | currentIndex: -1, |
|---|
| | | lineData: [], // æ·»å ç¨äºåå¨æ²çº¿å¾æ°æ®çå±æ§ |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts10")); |
|---|
| | | |
|---|
| | | // çæåæ°æ® |
|---|
| | | this.generateFakeData(); |
|---|
| | | |
|---|
| | | this.option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis' |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: this.lineData.map(item => item.time) // 使ç¨åæ°æ®ä¸çæ¶é´ä½ä¸º x è½´ |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | series: [{ |
|---|
| | | name: 'ç¶ææ°æ®', |
|---|
| | | type: 'line', |
|---|
| | | data: this.lineData.map(item => item.value), // 使ç¨åæ°æ®ä¸çå¼ä½ä¸º y è½´ |
|---|
| | | smooth: true // å¹³æ»æ²çº¿ |
|---|
| | | }] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that = this; |
|---|
| | | window.addEventListener("resize", () => { |
|---|
| | | that.myChart.resize(); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | generateFakeData() { |
|---|
| | | // çæ 10 个åæ°æ®ç¹ |
|---|
| | | const fakeData = []; |
|---|
| | | for (let i = 0; i < 10; i++) { |
|---|
| | | fakeData.push({ |
|---|
| | | time: `æ¶é´${i + 1}`, |
|---|
| | | value: Math.floor(Math.random() * 100) + 1 // éæºçæ 1-100 çå¼ |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | this.lineData = fakeData; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #echarts10 { |
|---|
| | | width: 3.84rem; |
|---|
| | | } |
|---|
| | | .box-container{ |
|---|
| | | margin: 0 auto; |
|---|
| | | display: block; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="box-container" id="echarts30"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let timer = null; |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | currentIndex: -1, |
|---|
| | | lineData: [], // æ·»å ç¨äºåå¨æ²çº¿å¾æ°æ®çå±æ§ |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts30")); |
|---|
| | | |
|---|
| | | // çæåæ°æ® |
|---|
| | | this.generateFakeData(); |
|---|
| | | |
|---|
| | | this.option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis' |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: this.lineData.map(item => item.time) // 使ç¨åæ°æ®ä¸çæ°æ®ä½ä¸º x è½´ |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | series: [{ |
|---|
| | | name: 'ç¶ææ°æ®', |
|---|
| | | type: 'line', |
|---|
| | | data: this.lineData.map(item => item.value), // 使ç¨åæ°æ®ä¸çå¼ä½ä¸º y è½´ |
|---|
| | | smooth: true // å¹³æ»æ²çº¿ |
|---|
| | | }] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that = this; |
|---|
| | | window.addEventListener("resize", () => { |
|---|
| | | that.myChart.resize(); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | generateFakeData() { |
|---|
| | | // çæ 10 个åæ°æ®ç¹ |
|---|
| | | const fakeData = []; |
|---|
| | | for (let i = 0; i < 10; i++) { |
|---|
| | | fakeData.push({ |
|---|
| | | time: `æ°æ®${i + 1}`, |
|---|
| | | value: Math.floor(Math.random() * 100) + 1 // éæºçæ 1-100 çå¼ |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | this.lineData = fakeData; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #echarts30 { |
|---|
| | | width: 3.84rem; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="box-container" id="echarts40"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let timer = null; |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | currentIndex: -1, |
|---|
| | | lineData: [], // æ·»å ç¨äºåå¨é¥¼å¾æ°æ®çå±æ§ |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts40")); |
|---|
| | | |
|---|
| | | // çæåæ°æ® |
|---|
| | | this.generateFakeData(); |
|---|
| | | |
|---|
| | | this.option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item' // ä¿®æ¹ä¸º 'item' 以éåºé¥¼å¾ |
|---|
| | | }, |
|---|
| | | series: [{ |
|---|
| | | name: 'ç¶ææ°æ®', |
|---|
| | | type: 'pie', // ä¿®æ¹ä¸º 'pie' |
|---|
| | | radius: '50%', |
|---|
| | | data: this.lineData.map(item => ({ |
|---|
| | | name: item.time, // 饼å¾ä¸çæ¯ä¸é¡¹å称 |
|---|
| | | value: item.value // 对åºçæ°å¼ |
|---|
| | | })), |
|---|
| | | emphasis: { |
|---|
| | | itemStyle: { |
|---|
| | | shadowBlur: 10, |
|---|
| | | shadowOffsetX: 0, |
|---|
| | | shadowColor: 'rgba(0, 0, 0, 0.5)' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that = this; |
|---|
| | | window.addEventListener("resize", () => { |
|---|
| | | that.myChart.resize(); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | generateFakeData() { |
|---|
| | | // çæ 4 个åæ°æ®ç¹ |
|---|
| | | const fakeData = []; |
|---|
| | | for (let i = 0; i < 4; i++) { |
|---|
| | | fakeData.push({ |
|---|
| | | time: `æ°æ®${i + 1}`, |
|---|
| | | value: Math.floor(Math.random() * 100) + 1 // éæºçæ 1-100 çå¼ |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | this.lineData = fakeData; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #echarts40 { |
|---|
| | | width: 3.84rem; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="box-container" id="echarts50"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let timer = null; |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | currentIndex: -1, |
|---|
| | | lineData: [], // æ·»å ç¨äºåå¨æ²çº¿å¾æ°æ®çå±æ§ |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts50")); |
|---|
| | | |
|---|
| | | // çæåæ°æ® |
|---|
| | | this.generateFakeData(); |
|---|
| | | |
|---|
| | | this.option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis' |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: this.lineData.map(item => item.time) // 使ç¨åæ°æ®ä¸çæ°æ®ä½ä¸º x è½´ |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | series: [{ |
|---|
| | | name: 'ç¶ææ°æ®', |
|---|
| | | type: 'bar', |
|---|
| | | data: this.lineData.map(item => item.value), // 使ç¨åæ°æ®ä¸çå¼ä½ä¸º y è½´ |
|---|
| | | smooth: true // å¹³æ»æ²çº¿ |
|---|
| | | }] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that = this; |
|---|
| | | window.addEventListener("resize", () => { |
|---|
| | | that.myChart.resize(); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | generateFakeData() { |
|---|
| | | // çæ 10 个åæ°æ®ç¹ |
|---|
| | | const fakeData = []; |
|---|
| | | for (let i = 0; i < 10; i++) { |
|---|
| | | fakeData.push({ |
|---|
| | | time: `æ°æ®${i + 1}`, |
|---|
| | | value: Math.floor(Math.random() * 100) + 1 // éæºçæ 1-100 çå¼ |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | this.lineData = fakeData; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #echarts50 { |
|---|
| | | width: 3.84rem; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="box-container" id="echarts2"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let timer = null; |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | currentIndex: -1, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts2")); |
|---|
| | | this.option = { |
|---|
| | | legend: { |
|---|
| | | orient: "vertical", |
|---|
| | | bottom: "20%", |
|---|
| | | right: "6%", |
|---|
| | | |
|---|
| | | itemGap: 8, //åä¹é´çé´è· |
|---|
| | | itemHeight: 9, // 设置å¾ä¾é¡¹çé«åº¦ |
|---|
| | | itemWidth: 9, // 设置å¾ä¾é¡¹ç宽度 |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | name: "ç®æ ", |
|---|
| | | itemStyle: { |
|---|
| | | color: "#f2f45b", |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | color: "#f2f45b", //é»è² |
|---|
| | | fontSize: 10, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å®é
", |
|---|
| | | itemStyle: { |
|---|
| | | color: "#1fe9dc", |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | color: "#1fe9dc", |
|---|
| | | fontSize: 10, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | radar: { |
|---|
| | | center: ["40%", "55%"], // æ´æ¹ä¸ºæ´å°çç¾åæ¯ä»¥å¾ä¸é´ç§»å¨ |
|---|
| | | radius: "40%", |
|---|
| | | indicator: [ |
|---|
| | | { name: "人", max: 100, color: "#fff" }, |
|---|
| | | { name: "ç¯", max: 100, color: "#fff" }, |
|---|
| | | { name: "æ³", max: 100, color: "#fff" }, |
|---|
| | | { name: "æ", max: 100, color: "#fff" }, |
|---|
| | | { name: "æº", max: 100, color: "#fff" }, |
|---|
| | | ], |
|---|
| | | |
|---|
| | | // splitNumber: 0, |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisName: { |
|---|
| | | padding: -10, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | splitArea: { |
|---|
| | | areaStyle: { |
|---|
| | | color: "rgba(131, 163, 178, 0.8)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: "Budget vs spending", |
|---|
| | | type: "radar", |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | name: "å®é
", |
|---|
| | | value: [90, 80, 80, 80, 80], |
|---|
| | | areaStyle: { |
|---|
| | | color: { |
|---|
| | | type: "linear-gradient", |
|---|
| | | x: 0, |
|---|
| | | y: 0, |
|---|
| | | x2: 1, |
|---|
| | | y2: 1, |
|---|
| | | colorStops: [ |
|---|
| | | { offset: 0, color: "#b2f2bb" }, // æ¸åå¼å§é¢è² |
|---|
| | | { offset: 1, color: "#a0e6a0" }, // æ¸åç»æé¢è² |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | opacity: 0.9, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "ç®æ ", |
|---|
| | | value: [90, 80, 80, 80, 80], |
|---|
| | | areaStyle: { |
|---|
| | | color: "#6ee6db", |
|---|
| | | opacity: 0.3, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | symbol: "none", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that = this; |
|---|
| | | window.addEventListener("resize", () => { |
|---|
| | | that.myChart.resize(); |
|---|
| | | }); |
|---|
| | | // this.defineEvent(); |
|---|
| | | // this.selectPie(); |
|---|
| | | // timer = setInterval(this.selectPie, 1500); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | selectPie() { |
|---|
| | | let dataLen = this.option.series[0].data.length; |
|---|
| | | this.currentIndex = (this.currentIndex + 1) % dataLen; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }, |
|---|
| | | // è½®æç¹äº®é¥¼å¾ |
|---|
| | | hignLightPie() { |
|---|
| | | const dataPie = this.option.series[0].data; |
|---|
| | | // ççæææå½¢åºå |
|---|
| | | for (var index in dataPie) { |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ç¹äº®å½åæå½¢åºå |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: this.currentIndex, |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // é¼ æ 触æ¸è½®ææ¬åäºä»¶ |
|---|
| | | defineEvent() { |
|---|
| | | // é¼ æ 移åºè½®æç»§ç» |
|---|
| | | this.myChart.on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ è¿å
¥è½®ææ¬å |
|---|
| | | this.myChart.on("mouseover", (params) => { |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = params.dataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移å
¥legendè½®ææ¬å |
|---|
| | | this.myChart.getZr().on("mouseover", (event) => { |
|---|
| | | const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegendçindex |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = legendDataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移åºlegendè½®æç»§ç» |
|---|
| | | this.myChart.getZr().on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #echarts2 { |
|---|
| | | margin-top: 0.1rem; |
|---|
| | | width: 100%; |
|---|
| | | height: 2.5rem; |
|---|
| | | transform: scaleY(2); |
|---|
| | | |
|---|
| | | /* |
|---|
| | | margin-top: .4rem; |
|---|
| | | width: 2.89rem; |
|---|
| | | height: 2.0rem; |
|---|
| | | transform: scaleY(2); */ |
|---|
| | | /* border: 1px solid red; */ |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | <div |
|---|
| | | class="box-container" |
|---|
| | | id="echarts5" |
|---|
| | | style="width: 100%; height: 230px" |
|---|
| | | ></div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as echarts from "echarts"; |
|---|
| | | import { zhu } from "./img/t.js"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | produceCompletionData: { |
|---|
| | | type: Array, |
|---|
| | | default: () => [], |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | timechartes: null, |
|---|
| | | myChart2: null, |
|---|
| | | textureImg: null, |
|---|
| | | // img, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | produceCompletionData(val) { |
|---|
| | | let xData = [], |
|---|
| | | yData1 = [], |
|---|
| | | yData2 = [], |
|---|
| | | yData3 = []; |
|---|
| | | val.forEach((item) => { |
|---|
| | | console.log("ceshi", item.completionNum); |
|---|
| | | xData.push(item.month); |
|---|
| | | yData1.push({ |
|---|
| | | // value: item.completionNum, |
|---|
| | | value: 100, |
|---|
| | | symbolRepeat: false, |
|---|
| | | }); //å®é
|
|---|
| | | // yData1.push(item.completionNum); //å®é
|
|---|
| | | var num = 0; //å·²å®ææ° / 计åå®ææ° |
|---|
| | | if (item.completionNum > 0) { |
|---|
| | | if (item.planCompletionNum > item.completionNum) { |
|---|
| | | // 5/10 |
|---|
| | | num = item.completionNum / item.planCompletionNum; |
|---|
| | | } else if (item.planCompletionNum <= 0) { |
|---|
| | | // 10/0 |
|---|
| | | num = 100; |
|---|
| | | } else if (item.completionNum >= item.planCompletionNum) { |
|---|
| | | // 10/5 |
|---|
| | | num = 100; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | yData2.push(num.toFixed(2)); //planCompletionRate |
|---|
| | | // yData2.push(item.planCompletionRate); //planCompletionRate |
|---|
| | | // yData3.push(item.planCompletionNum); //计å |
|---|
| | | }); |
|---|
| | | this.$set(this.option.xAxis, "data", xData); |
|---|
| | | this.$set(this.option.series[0], "data", yData1); |
|---|
| | | this.$set(this.option.series[1], "data", yData2); |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts5")); |
|---|
| | | this.option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: "axis", |
|---|
| | | formatter: |
|---|
| | | "{b0}æ<br />" + |
|---|
| | | // '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#13e5f2,#01afba);border-radius:50%"></a> {a0}: {c0}<br />' + |
|---|
| | | // '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#ffc107,#fd7e14);border-radius:50%"></a> {a2}: {c2}<br />' + |
|---|
| | | '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#fff,#eee);border-radius:50%"></a> {a1}: {c1}%<br />', // æ·»å ç产计åæ°æ示 |
|---|
| | | backgroundColor: "rgba(0,0,0,0.7)", |
|---|
| | | textStyle: { |
|---|
| | | color: "#ffffff", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | top: "15%", |
|---|
| | | bottom: "8%", |
|---|
| | | left: "18%", |
|---|
| | | right: "18%", |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | data: [], |
|---|
| | | type: "category", |
|---|
| | | axisLabel: { |
|---|
| | | color: "#326e92", |
|---|
| | | interval: 0, |
|---|
| | | fontSize: 13, |
|---|
| | | // formatter: '{value}æ' |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "#326e92", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: "value", |
|---|
| | | position: "left", |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | color: "#326e92", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | margin: 5, |
|---|
| | | color: "#326e92", |
|---|
| | | formatter: "{value}%", |
|---|
| | | }, |
|---|
| | | alignTicks: false, |
|---|
| | | nameTextStyle: { |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "#326e92", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | show: true, |
|---|
| | | type: "value", |
|---|
| | | position: "right", |
|---|
| | | // name: "æç»æ¶é¿", |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | color: "#326e92", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | color: "#326e92", |
|---|
| | | formatter: "{value}%", |
|---|
| | | }, |
|---|
| | | nameTextStyle: { |
|---|
| | | color: "#326e92", |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | color: "#326e92", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: "ç产å®ææ°", |
|---|
| | | type: "pictorialBar", |
|---|
| | | // type: "bar", |
|---|
| | | symbol: "image://" + zhu, |
|---|
| | | data: [], |
|---|
| | | // yAxisIndex: 0, |
|---|
| | | // color: { |
|---|
| | | // type: "linear", |
|---|
| | | // x: 0, |
|---|
| | | // y: 0, |
|---|
| | | // x2: 0, |
|---|
| | | // y2: 1, |
|---|
| | | // colorStops: [ |
|---|
| | | // { |
|---|
| | | // offset: 0, |
|---|
| | | // color: "#13e5f2", // 0% å¤çé¢è² |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // offset: 1, |
|---|
| | | // color: "#01afba", // 100% å¤çé¢è² |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | // }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "ç产å®æç", |
|---|
| | | type: "line", |
|---|
| | | data: [], |
|---|
| | | z: 5, |
|---|
| | | showSymbol: true, |
|---|
| | | yAxisIndex: 1, |
|---|
| | | smooth: true, // 使æ线å¾å¹³æ» |
|---|
| | | color: "#ff9600", |
|---|
| | | lineStyle: { |
|---|
| | | width: 1, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | // { |
|---|
| | | // name: "ç产计åæ°", // æ·»å ç产计åæ° |
|---|
| | | // type: "line", |
|---|
| | | // data: [], // æ ¹æ®éè¦å¡«å
æ¤æ°ç» |
|---|
| | | // showSymbol: true, |
|---|
| | | // smooth: true, // 使æ线å¾å¹³æ» |
|---|
| | | // yAxisIndex: 0, // ä¸ç¸åºç y è½´å
³è |
|---|
| | | // color: "rgba(255,255,255,0.85)", // èªå®ä¹é¢è² |
|---|
| | | // lineStyle: { |
|---|
| | | // width: 1, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | ], |
|---|
| | | // animation: true, |
|---|
| | | // dataZoom: [ |
|---|
| | | // { |
|---|
| | | // xAxisIndex: 0, //è¿éæ¯ä»Xè½´ç0å»åº¦å¼å§ |
|---|
| | | // show: false, //æ¯å¦æ¾ç¤ºæ»å¨æ¡ï¼ä¸å½±åä½¿ç¨ |
|---|
| | | // type: "inside", // è¿ä¸ª dataZoom ç»ä»¶æ¯ slider å dataZoom ç»ä»¶ |
|---|
| | | // startValue: 0, // ä»å¤´å¼å§ã |
|---|
| | | // endValue: 5, // ä¸æ¬¡æ§å±ç¤ºå 个ã |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | }; |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that = this; |
|---|
| | | window.addEventListener("resize", () => { |
|---|
| | | that.myChart.resize(); |
|---|
| | | }); |
|---|
| | | // this.barChartScrolling(); |
|---|
| | | // this.defineEvent() |
|---|
| | | // window.addEventListener("resize", ()=> { |
|---|
| | | // this.myChart.resize(); |
|---|
| | | // }); |
|---|
| | | // this.init() |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // æ°´å¹³æ»å¨ |
|---|
| | | barChartScrolling() { |
|---|
| | | const x = this.option.xAxis.data; |
|---|
| | | const y1 = this.option.series[0].data; |
|---|
| | | const y2 = this.option.series[1].data; |
|---|
| | | if (x.length > 0 && y1.length > 0 && y2.length > 0) { |
|---|
| | | this.timechartes = setInterval(this.handle, 1500); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | handle() { |
|---|
| | | const option = this.option; |
|---|
| | | const x = this.option.xAxis.data; |
|---|
| | | // æ¯æ¬¡ååæ»å¨ä¸ä¸ªï¼æåä¸ä¸ªä»å¤´å¼å§ã |
|---|
| | | if (option.dataZoom[0].endValue == x.length) { |
|---|
| | | this.$set(option.dataZoom[0], "endValue", 5); |
|---|
| | | this.$set(option.dataZoom[0], "startValue", 0); |
|---|
| | | } else { |
|---|
| | | this.$set( |
|---|
| | | option.dataZoom[0], |
|---|
| | | "endValue", |
|---|
| | | option.dataZoom[0].endValue + 1 |
|---|
| | | ); |
|---|
| | | this.$set( |
|---|
| | | option.dataZoom[0], |
|---|
| | | "startValue", |
|---|
| | | option.dataZoom[0].startValue + 1 |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | this.myChart.setOption(option); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // é¼ æ 触æ¸è½®ææ¬åäºä»¶ |
|---|
| | | defineEvent() { |
|---|
| | | // é¼ æ 移åºè½®æç»§ç» |
|---|
| | | this.myChart.on("mouseout", () => { |
|---|
| | | if (this.timechartes) clearInterval(this.timechartes); |
|---|
| | | this.timechartes = setInterval(this.handle, 1500); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ è¿å
¥è½®ææ¬å |
|---|
| | | this.myChart.on("mouseover", () => { |
|---|
| | | clearInterval(this.timechartes); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | init() { |
|---|
| | | var chartDom = document.getElementById("main"); |
|---|
| | | var myChart = echarts.init(chartDom); |
|---|
| | | var option; |
|---|
| | | var rocket = ""; |
|---|
| | | |
|---|
| | | option = { |
|---|
| | | legend: { |
|---|
| | | data: ["tu1", "barbg1"], |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | data: ["a", "b", "c", "d"], |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: "pictorialBar", |
|---|
| | | name: "tu1", |
|---|
| | | symbol: "image://" + zhu, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 60, |
|---|
| | | symbolRepeat: false, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 60, |
|---|
| | | symbolRepeat: false, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 60, |
|---|
| | | symbolRepeat: false, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 60, |
|---|
| | | symbolRepeat: false, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | myChart.setOption(option); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style></style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- æ¬ç/æ¬æ产éç»è®¡ --> |
|---|
| | | <div class="box-container box4" id="echarts4"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let timer = null; |
|---|
| | | import * as echarts from "echarts"; |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | produceStatisData: { |
|---|
| | | type: Object, |
|---|
| | | default: () => {}, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | currentIndex: -1, |
|---|
| | | data1: [], |
|---|
| | | data2: [{ actualData: 2782, planData: 11128 }], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | // watch: { |
|---|
| | | // produceStatisData(val) { |
|---|
| | | // // æµè¯ç¨ï¼ |
|---|
| | | // val.currentShiftProduceNum = 280; |
|---|
| | | // val.currentShiftPlanNum = 300; |
|---|
| | | // // å½åçç»å®é
ç产æ°é currentShiftProduceNum |
|---|
| | | // // å½åçç»è®¡åç产æ°é currentShiftPlanNum |
|---|
| | | // var num1 = val.currentShiftProduceNum; //å®é
ç产æ°é |
|---|
| | | // var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计åç产æ°é |
|---|
| | | // if (val.currentShiftPlanNum == 0) { |
|---|
| | | // //åæ¯ä¸º0 æ¾ç¤º0% |
|---|
| | | // num1 = 0; |
|---|
| | | // num2 = 10; |
|---|
| | | // } |
|---|
| | | // this.$set(this.option.series[0], "data", [ |
|---|
| | | // // { value: 1 }, //å®é
ç产æ°é 1/ (9+1) = 10% |
|---|
| | | // // { value: 9 }, |
|---|
| | | // { |
|---|
| | | // value: num1, |
|---|
| | | // }, //å®é
ç产æ°é |
|---|
| | | // { |
|---|
| | | // value: num2, |
|---|
| | | // }, |
|---|
| | | // ]); |
|---|
| | | // var num3 = val.currentMonthProduceNum; |
|---|
| | | // var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum; |
|---|
| | | // if (val.currentMonthPlanNum == 0) { |
|---|
| | | // //åæ¯ä¸º0 æ¾ç¤º0% |
|---|
| | | // num3 = 0; |
|---|
| | | // num4 = 10; |
|---|
| | | // } |
|---|
| | | // this.$set(this.option.series[1], "data", [ |
|---|
| | | // { value: num3 }, |
|---|
| | | // { value: num4 }, |
|---|
| | | // ]); |
|---|
| | | |
|---|
| | | // this.myChart.setOption(this.option); |
|---|
| | | // this.hignLightPie(); |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts4")); |
|---|
| | | var value = 60; |
|---|
| | | var value2 = 15; |
|---|
| | | let data1 = [ |
|---|
| | | { |
|---|
| | | value: value, |
|---|
| | | name: "", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "#62fbf8", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100 - value, |
|---|
| | | name: "", |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | let data2 = [ |
|---|
| | | { |
|---|
| | | value: value2, |
|---|
| | | name: "", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "rgb(105,206,195)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100 - value2, |
|---|
| | | name: "", |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | this.option = { |
|---|
| | | color: ["#00f6fe", "rgba(5, 19, 96, 0.5)"], |
|---|
| | | // æå
¥èæ¯å¾ |
|---|
| | | // graphic: [ |
|---|
| | | // { |
|---|
| | | // type: "image", |
|---|
| | | // id: "background1", |
|---|
| | | // left: "13px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // top: "61px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // z: -10, |
|---|
| | | // bounding: "raw", |
|---|
| | | // origin: [0, 0], |
|---|
| | | // style: { |
|---|
| | | // image: require(`@/assets/images/quan.png`), // 第ä¸ä¸ªç¯å½¢å¾çèæ¯å¾çè·¯å¾ |
|---|
| | | // width: 100, |
|---|
| | | // height: 100, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // type: "image", |
|---|
| | | // id: "background2", |
|---|
| | | // left: "131px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // top: "61px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // z: -10, |
|---|
| | | // bounding: "raw", |
|---|
| | | // origin: [0, 0], |
|---|
| | | // style: { |
|---|
| | | // image: require(`@/assets/images/quan.png`), // 第ä¸ä¸ªç¯å½¢å¾çèæ¯å¾çè·¯å¾ |
|---|
| | | // width: 100, |
|---|
| | | // height: 100, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | series: [ |
|---|
| | | // 左侧 |
|---|
| | | { |
|---|
| | | name: "å·¦-æ°æ®", |
|---|
| | | type: "pie", |
|---|
| | | // radius: ['65%', '75%'], |
|---|
| | | radius: ["29%", "36%"], //ç¯åç» |
|---|
| | | center: ["25%", "49%"], |
|---|
| | | silent: true, |
|---|
| | | // clockwise: false, |
|---|
| | | startAngle: 90, |
|---|
| | | z: 1, |
|---|
| | | zlevel: 0, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: data1, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å·¦-ä¸é´æ¸å", |
|---|
| | | type: "pie", |
|---|
| | | startAngle: 90, |
|---|
| | | z: 20, |
|---|
| | | zlevel: 20, |
|---|
| | | radius: "28%", |
|---|
| | | hoverAnimation: false, |
|---|
| | | center: ["25%", "49%"], |
|---|
| | | |
|---|
| | | // zlevel: 2, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | labelLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [ |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "rgba(55,70,130, 1)", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "rgba(55,70,130, 0)", |
|---|
| | | }, |
|---|
| | | ]), |
|---|
| | | shadowBlur: 10, |
|---|
| | | // shadowColor: 'rgba(55,70,130, 1)' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 100, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å·¦-å»åº¦é´é", |
|---|
| | | z: 2, |
|---|
| | | // zlevel: 1, |
|---|
| | | type: "gauge", |
|---|
| | | radius: "57%", |
|---|
| | | center: ["25%", "49%"], |
|---|
| | | startAngle: 20, |
|---|
| | | endAngle: -360, |
|---|
| | | splitNumber: 10, |
|---|
| | | hoverAnimation: true, |
|---|
| | | axisTick: { |
|---|
| | | show: true, |
|---|
| | | splitNumber: 1, |
|---|
| | | length: 14, //å»åº¦é¿åº¦ |
|---|
| | | // Distance: 40, //å»åº¦é´éè·ç¦» |
|---|
| | | lineStyle: { |
|---|
| | | width: 5, |
|---|
| | | color: new echarts.graphic.LinearGradient( |
|---|
| | | 0, |
|---|
| | | 0, |
|---|
| | | 0, |
|---|
| | | 1, |
|---|
| | | [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "rgba(8, 52, 106, 0.039)", // 0% å¤çé¢è² |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "rgba(8, 52, 106, 0.239)", // 100% å¤çé¢è² |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | false |
|---|
| | | ), |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | pointer: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | opacity: 0, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | detail: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | data: [100], |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å³ä¾§ |
|---|
| | | { |
|---|
| | | name: "å³-æ°æ®", |
|---|
| | | type: "pie", |
|---|
| | | // radius: ['65%', '75%'], |
|---|
| | | radius: ["29%", "36%"], //ç¯åç» |
|---|
| | | center: ["74%", "49%"], |
|---|
| | | silent: true, |
|---|
| | | // clockwise: false, |
|---|
| | | startAngle: 90, |
|---|
| | | z: 1, |
|---|
| | | zlevel: 0, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: data2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å³-ä¸é´æ¸å", |
|---|
| | | type: "pie", |
|---|
| | | startAngle: 90, |
|---|
| | | radius: "28%", |
|---|
| | | hoverAnimation: false, |
|---|
| | | center: ["74%", "49%"], |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | labelLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [ |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "rgba(55,70,130, 1)", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "rgba(55,70,130, 0)", |
|---|
| | | }, |
|---|
| | | ]), |
|---|
| | | shadowBlur: 10, |
|---|
| | | // shadowColor: 'rgba(55,70,130, 1)' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 100, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å³-å»åº¦é´é", |
|---|
| | | z: 2, |
|---|
| | | type: "gauge", |
|---|
| | | radius: "45%", |
|---|
| | | center: ["74%", "49%"], |
|---|
| | | startAngle: 90, |
|---|
| | | endAngle: -360, |
|---|
| | | splitNumber: 10, |
|---|
| | | hoverAnimation: true, |
|---|
| | | axisTick: { |
|---|
| | | show: true, |
|---|
| | | splitNumber: 1, |
|---|
| | | length: 20, |
|---|
| | | lineStyle: { |
|---|
| | | width: 10, |
|---|
| | | color: "#1183a7", |
|---|
| | | shadowColor: "rgb(4,31,62, 0.5)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | pointer: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | opacity: 0, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | detail: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | data: [100], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that = this; |
|---|
| | | window.addEventListener("resize", () => { |
|---|
| | | that.myChart.resize(); |
|---|
| | | }); |
|---|
| | | // this.getData(); |
|---|
| | | this.defineEvent(); |
|---|
| | | // this.selectPie(); |
|---|
| | | this.hignLightPie(); |
|---|
| | | // timer = setInterval(this.selectPie, 1500); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // getData() { |
|---|
| | | // this.data1 = [{ actualData: 144, planData: 288 }]; |
|---|
| | | // this.$set(this.option.series[0], "data", [ |
|---|
| | | // { value: this.data1[0].actualData }, |
|---|
| | | // { value: this.data1[0].planData - this.data1[0].actualData }, |
|---|
| | | // ]); |
|---|
| | | // this.$set(this.option.series[1], "data", [ |
|---|
| | | // { value: this.data2[0].actualData }, |
|---|
| | | // { value: this.data2[0].planData - this.data2[0].actualData }, |
|---|
| | | // ]); |
|---|
| | | // console.log(this.option.series[0].data); |
|---|
| | | // this.myChart.setOption(this.option); |
|---|
| | | // }, |
|---|
| | | selectPie() { |
|---|
| | | let dataLen = this.option.series[0].data.length; |
|---|
| | | this.currentIndex = (this.currentIndex + 1) % dataLen; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }, |
|---|
| | | // è½®æç¹äº®é¥¼å¾ |
|---|
| | | hignLightPie() { |
|---|
| | | const dataPie = this.option.series[0].data; |
|---|
| | | // ççæææå½¢åºå |
|---|
| | | for (var index in dataPie) { |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 1, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ç¹äº®å½åæå½¢åºå |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: 0, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 1, |
|---|
| | | dataIndex: 0, |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // é¼ æ 触æ¸è½®ææ¬åäºä»¶ |
|---|
| | | defineEvent() { |
|---|
| | | // é¼ æ 移åºè½®æç»§ç» |
|---|
| | | this.myChart.on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ è¿å
¥è½®ææ¬å |
|---|
| | | this.myChart.on("mouseover", (params) => { |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = params.dataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移å
¥legendè½®ææ¬å |
|---|
| | | this.myChart.getZr().on("mouseover", (event) => { |
|---|
| | | const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegendçindex |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = legendDataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移åºlegendè½®æç»§ç» |
|---|
| | | this.myChart.getZr().on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #echarts4 { |
|---|
| | | transform: scaleY(2); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- æ¬ç/æ¬æ产éç»è®¡ --> |
|---|
| | | <div class="box-container box4" id="echarts4"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let timer = null; |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | produceStatisData: { |
|---|
| | | type: Object, |
|---|
| | | default: () => {}, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | currentIndex: -1, |
|---|
| | | data1: [], |
|---|
| | | data2: [{ actualData: 2782, planData: 11128 }], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | produceStatisData(val) { |
|---|
| | | // æµè¯ç¨ï¼ |
|---|
| | | val.currentShiftProduceNum = 280; |
|---|
| | | val.currentShiftPlanNum = 300; |
|---|
| | | // å½åçç»å®é
ç产æ°é currentShiftProduceNum |
|---|
| | | // å½åçç»è®¡åç产æ°é currentShiftPlanNum |
|---|
| | | var num1 = val.currentShiftProduceNum; //å®é
ç产æ°é |
|---|
| | | var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计åç产æ°é |
|---|
| | | if (val.currentShiftPlanNum == 0) { |
|---|
| | | //åæ¯ä¸º0 æ¾ç¤º0% |
|---|
| | | num1 = 0; |
|---|
| | | num2 = 10; |
|---|
| | | } |
|---|
| | | this.$set(this.option.series[0], "data", [ |
|---|
| | | // { value: 1 }, //å®é
ç产æ°é 1/ (9+1) = 10% |
|---|
| | | // { value: 9 }, |
|---|
| | | { |
|---|
| | | value: num1, |
|---|
| | | }, //å®é
ç产æ°é |
|---|
| | | { |
|---|
| | | value: num2, |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | var num3 = val.currentMonthProduceNum; |
|---|
| | | var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum; |
|---|
| | | if (val.currentMonthPlanNum == 0) { |
|---|
| | | //åæ¯ä¸º0 æ¾ç¤º0% |
|---|
| | | num3 = 0; |
|---|
| | | num4 = 10; |
|---|
| | | } |
|---|
| | | this.$set(this.option.series[1], "data", [ |
|---|
| | | { value: num3 }, |
|---|
| | | { value: num4 }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | this.hignLightPie(); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts4")); |
|---|
| | | this.option = { |
|---|
| | | color: ["#00f6fe", "transparent"], |
|---|
| | | // æå
¥èæ¯å¾ |
|---|
| | | // graphic: [ |
|---|
| | | // { |
|---|
| | | // type: "image", |
|---|
| | | // id: "background1", |
|---|
| | | // left: "13px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // top: "61px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // z: -10, |
|---|
| | | // bounding: "raw", |
|---|
| | | // origin: [0, 0], |
|---|
| | | // style: { |
|---|
| | | // image: require(`@/assets/images/quan.png`), // 第ä¸ä¸ªç¯å½¢å¾çèæ¯å¾çè·¯å¾ |
|---|
| | | // width: 100, |
|---|
| | | // height: 100, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // type: "image", |
|---|
| | | // id: "background2", |
|---|
| | | // left: "131px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // top: "61px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // z: -10, |
|---|
| | | // bounding: "raw", |
|---|
| | | // origin: [0, 0], |
|---|
| | | // style: { |
|---|
| | | // image: require(`@/assets/images/quan.png`), // 第ä¸ä¸ªç¯å½¢å¾çèæ¯å¾çè·¯å¾ |
|---|
| | | // width: 100, |
|---|
| | | // height: 100, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: "Access From", |
|---|
| | | type: "pie", |
|---|
| | | // padAngle: 5, //ç¯ä¸ç¯ä¹é´çé´é |
|---|
| | | radius: ["29%", "36%"], //ç¯åç» |
|---|
| | | center: ["25%", "49%"], |
|---|
| | | // avoidLabelOverlap: false, |
|---|
| | | label: { |
|---|
| | | show: false, |
|---|
| | | position: "center", |
|---|
| | | formatter: function (params) { |
|---|
| | | return params.percent < 1 |
|---|
| | | ? params.percent + "%" |
|---|
| | | : Math.floor(params.percent) + "%"; // åèäºå
¥å°æ´æ° |
|---|
| | | }, |
|---|
| | | color: "#fff", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | //饼å¾ä¸é´çåä½å¤§å° |
|---|
| | | scale: false, |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | fontSize: 22, |
|---|
| | | color: "#19d8d0", |
|---|
| | | fontWeight: "normal", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | borderRadius: 3, |
|---|
| | | borderColor: "transparent", |
|---|
| | | borderWidth: 10, |
|---|
| | | }, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "Access From", |
|---|
| | | type: "pie", |
|---|
| | | // padAngle: 5, //ç¯ä¸ç¯ä¹é´çé´é |
|---|
| | | // radius: ["25%", "40%"], |
|---|
| | | radius: ["29%", "36%"], //ç¯åç» |
|---|
| | | center: ["74%", "49%"], |
|---|
| | | // avoidLabelOverlap: false, |
|---|
| | | label: { |
|---|
| | | show: false, |
|---|
| | | position: "center", |
|---|
| | | formatter: function (params) { |
|---|
| | | return params.percent < 1 |
|---|
| | | ? params.percent + "%" |
|---|
| | | : Math.floor(params.percent) + "%"; // åèäºå
¥å°æ´æ° |
|---|
| | | }, |
|---|
| | | color: "#fff", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | borderRadius: 3, |
|---|
| | | borderColor: "transparent", |
|---|
| | | borderWidth: 10, |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | scale: false, |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | fontSize: 22, |
|---|
| | | color: "#19d8d0", |
|---|
| | | fontWeight: "normal", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that = this; |
|---|
| | | window.addEventListener("resize", () => { |
|---|
| | | that.myChart.resize(); |
|---|
| | | }); |
|---|
| | | // this.getData(); |
|---|
| | | this.defineEvent(); |
|---|
| | | // this.selectPie(); |
|---|
| | | this.hignLightPie(); |
|---|
| | | // timer = setInterval(this.selectPie, 1500); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // getData() { |
|---|
| | | // this.data1 = [{ actualData: 144, planData: 288 }]; |
|---|
| | | // this.$set(this.option.series[0], "data", [ |
|---|
| | | // { value: this.data1[0].actualData }, |
|---|
| | | // { value: this.data1[0].planData - this.data1[0].actualData }, |
|---|
| | | // ]); |
|---|
| | | // this.$set(this.option.series[1], "data", [ |
|---|
| | | // { value: this.data2[0].actualData }, |
|---|
| | | // { value: this.data2[0].planData - this.data2[0].actualData }, |
|---|
| | | // ]); |
|---|
| | | // console.log(this.option.series[0].data); |
|---|
| | | // this.myChart.setOption(this.option); |
|---|
| | | // }, |
|---|
| | | selectPie() { |
|---|
| | | let dataLen = this.option.series[0].data.length; |
|---|
| | | this.currentIndex = (this.currentIndex + 1) % dataLen; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }, |
|---|
| | | // è½®æç¹äº®é¥¼å¾ |
|---|
| | | hignLightPie() { |
|---|
| | | const dataPie = this.option.series[0].data; |
|---|
| | | // ççæææå½¢åºå |
|---|
| | | for (var index in dataPie) { |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 1, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ç¹äº®å½åæå½¢åºå |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: 0, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 1, |
|---|
| | | dataIndex: 0, |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // é¼ æ 触æ¸è½®ææ¬åäºä»¶ |
|---|
| | | defineEvent() { |
|---|
| | | // é¼ æ 移åºè½®æç»§ç» |
|---|
| | | this.myChart.on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ è¿å
¥è½®ææ¬å |
|---|
| | | this.myChart.on("mouseover", (params) => { |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = params.dataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移å
¥legendè½®ææ¬å |
|---|
| | | this.myChart.getZr().on("mouseover", (event) => { |
|---|
| | | const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegendçindex |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = legendDataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移åºlegendè½®æç»§ç» |
|---|
| | | this.myChart.getZr().on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #echarts4 { |
|---|
| | | transform: scaleY(2); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- æ¬ç/æ¬æ产éç»è®¡ --> |
|---|
| | | <div class="box-container box4" id="echarts4"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let timer = null; |
|---|
| | | import * as echarts from "echarts"; |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | produceStatisData: { |
|---|
| | | type: Object, |
|---|
| | | default: () => {}, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | currentIndex: -1, |
|---|
| | | data1: [], |
|---|
| | | data2: [{ actualData: 2782, planData: 11128 }], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | // watch: { |
|---|
| | | // produceStatisData(val) { |
|---|
| | | // // æµè¯ç¨ï¼ |
|---|
| | | // val.currentShiftProduceNum = 280; |
|---|
| | | // val.currentShiftPlanNum = 300; |
|---|
| | | // // å½åçç»å®é
ç产æ°é currentShiftProduceNum |
|---|
| | | // // å½åçç»è®¡åç产æ°é currentShiftPlanNum |
|---|
| | | // var num1 = val.currentShiftProduceNum; //å®é
ç产æ°é |
|---|
| | | // var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计åç产æ°é |
|---|
| | | // if (val.currentShiftPlanNum == 0) { |
|---|
| | | // //åæ¯ä¸º0 æ¾ç¤º0% |
|---|
| | | // num1 = 0; |
|---|
| | | // num2 = 10; |
|---|
| | | // } |
|---|
| | | // this.$set(this.option.series[0], "data", [ |
|---|
| | | // // { value: 1 }, //å®é
ç产æ°é 1/ (9+1) = 10% |
|---|
| | | // // { value: 9 }, |
|---|
| | | // { |
|---|
| | | // value: num1, |
|---|
| | | // }, //å®é
ç产æ°é |
|---|
| | | // { |
|---|
| | | // value: num2, |
|---|
| | | // }, |
|---|
| | | // ]); |
|---|
| | | // var num3 = val.currentMonthProduceNum; |
|---|
| | | // var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum; |
|---|
| | | // if (val.currentMonthPlanNum == 0) { |
|---|
| | | // //åæ¯ä¸º0 æ¾ç¤º0% |
|---|
| | | // num3 = 0; |
|---|
| | | // num4 = 10; |
|---|
| | | // } |
|---|
| | | // this.$set(this.option.series[1], "data", [ |
|---|
| | | // { value: num3 }, |
|---|
| | | // { value: num4 }, |
|---|
| | | // ]); |
|---|
| | | |
|---|
| | | // this.myChart.setOption(this.option); |
|---|
| | | // this.hignLightPie(); |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts4")); |
|---|
| | | var value = 60; |
|---|
| | | var value2 = 15; |
|---|
| | | let data1 = [ |
|---|
| | | { |
|---|
| | | value: value, |
|---|
| | | name: "", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "#62fbf8", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100 - value, |
|---|
| | | name: "", |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | let data2 = [ |
|---|
| | | { |
|---|
| | | value: value2, |
|---|
| | | name: "", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "rgb(105,206,195)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100 - value2, |
|---|
| | | name: "", |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | this.option = { |
|---|
| | | color: ["#00f6fe", "transparent"], |
|---|
| | | series: [ |
|---|
| | | // 左侧 |
|---|
| | | { |
|---|
| | | name: "å·¦-ä¸é´æ¸å", |
|---|
| | | type: "pie", |
|---|
| | | startAngle: 90, |
|---|
| | | radius: "38%", |
|---|
| | | hoverAnimation: false, |
|---|
| | | center: ["25%", "49%"], |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | labelLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | color: { |
|---|
| | | type: "radial", |
|---|
| | | x: 0.5, |
|---|
| | | y: 0.5, |
|---|
| | | r: 0.4, |
|---|
| | | colorStops: [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "rgba(55,70,130, 0)", // 0% å¤çé¢è² |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "rgba(55,70,130, 1)", // 100% å¤çé¢è² |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | // color:'red', |
|---|
| | | shadowBlur: 10, |
|---|
| | | // shadowColor: 'rgba(55,70,130, 1)' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 100, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å·¦-æ°æ®", |
|---|
| | | type: "pie", |
|---|
| | | // radius: ['65%', '75%'], |
|---|
| | | radius: ["29%", "36%"], //ç¯åç» |
|---|
| | | center: ["25%", "49%"], |
|---|
| | | silent: true, |
|---|
| | | // clockwise: false, |
|---|
| | | startAngle: 90, |
|---|
| | | z: 1, |
|---|
| | | zlevel: 1, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: data1, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | name: "å·¦-å»åº¦é´é", |
|---|
| | | z: 2, |
|---|
| | | zlevel: 1, |
|---|
| | | type: "gauge", |
|---|
| | | radius: "55%", |
|---|
| | | center: ["25%", "49%"], |
|---|
| | | startAngle: 90, |
|---|
| | | endAngle: -360, |
|---|
| | | splitNumber: 10, |
|---|
| | | hoverAnimation: true, |
|---|
| | | axisTick: { |
|---|
| | | show: true, |
|---|
| | | splitNumber: 1, |
|---|
| | | length: 15, |
|---|
| | | lineStyle: { |
|---|
| | | width: 5, |
|---|
| | | color: "rgba(55,70,130, 0.1)", |
|---|
| | | // shadowColor: "rgb(4,31,62, 0.5)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | pointer: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | opacity: 0, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | detail: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | data: [10], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that = this; |
|---|
| | | window.addEventListener("resize", () => { |
|---|
| | | that.myChart.resize(); |
|---|
| | | }); |
|---|
| | | // this.getData(); |
|---|
| | | this.defineEvent(); |
|---|
| | | // this.selectPie(); |
|---|
| | | this.hignLightPie(); |
|---|
| | | // timer = setInterval(this.selectPie, 1500); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // getData() { |
|---|
| | | // this.data1 = [{ actualData: 144, planData: 288 }]; |
|---|
| | | // this.$set(this.option.series[0], "data", [ |
|---|
| | | // { value: this.data1[0].actualData }, |
|---|
| | | // { value: this.data1[0].planData - this.data1[0].actualData }, |
|---|
| | | // ]); |
|---|
| | | // this.$set(this.option.series[1], "data", [ |
|---|
| | | // { value: this.data2[0].actualData }, |
|---|
| | | // { value: this.data2[0].planData - this.data2[0].actualData }, |
|---|
| | | // ]); |
|---|
| | | // console.log(this.option.series[0].data); |
|---|
| | | // this.myChart.setOption(this.option); |
|---|
| | | // }, |
|---|
| | | selectPie() { |
|---|
| | | let dataLen = this.option.series[0].data.length; |
|---|
| | | this.currentIndex = (this.currentIndex + 1) % dataLen; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }, |
|---|
| | | // è½®æç¹äº®é¥¼å¾ |
|---|
| | | hignLightPie() { |
|---|
| | | const dataPie = this.option.series[0].data; |
|---|
| | | // ççæææå½¢åºå |
|---|
| | | for (var index in dataPie) { |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 1, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ç¹äº®å½åæå½¢åºå |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: 0, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 1, |
|---|
| | | dataIndex: 0, |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // é¼ æ 触æ¸è½®ææ¬åäºä»¶ |
|---|
| | | defineEvent() { |
|---|
| | | // é¼ æ 移åºè½®æç»§ç» |
|---|
| | | this.myChart.on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ è¿å
¥è½®ææ¬å |
|---|
| | | this.myChart.on("mouseover", (params) => { |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = params.dataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移å
¥legendè½®ææ¬å |
|---|
| | | this.myChart.getZr().on("mouseover", (event) => { |
|---|
| | | const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegendçindex |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = legendDataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移åºlegendè½®æç»§ç» |
|---|
| | | this.myChart.getZr().on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #echarts4 { |
|---|
| | | /* transform: scaleY(2); */ |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- æ¬ç/æ¬æ产éç»è®¡ --> |
|---|
| | | <div class="box-container box4" id="echarts4"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let timer = null; |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | produceStatisData: { |
|---|
| | | type: Object, |
|---|
| | | default: () => {}, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | currentIndex: -1, |
|---|
| | | data1: [], |
|---|
| | | data2: [{ actualData: 2782, planData: 11128 }], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | produceStatisData(val) { |
|---|
| | | // æµè¯ç¨ï¼ |
|---|
| | | // val.currentShiftProduceNum = 280; |
|---|
| | | // val.currentShiftPlanNum = 300; |
|---|
| | | |
|---|
| | | // å½åçç»å®é
ç产æ°é currentShiftProduceNum |
|---|
| | | // å½åçç»è®¡åç产æ°é currentShiftPlanNum |
|---|
| | | var num1 = val.currentShiftProduceNum; //å®é
ç产æ°é |
|---|
| | | var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计åç产æ°é |
|---|
| | | if (val.currentShiftPlanNum == 0) { |
|---|
| | | //åæ¯ä¸º0 æ¾ç¤º0% |
|---|
| | | num1 = 0; |
|---|
| | | num2 = 10; |
|---|
| | | } |
|---|
| | | this.$set(this.option.series[0], "data", [ |
|---|
| | | // { value: 1 }, //å®é
ç产æ°é 1/ (9+1) = 10% |
|---|
| | | // { value: 9 }, |
|---|
| | | { |
|---|
| | | value: num1, |
|---|
| | | }, //å®é
ç产æ°é |
|---|
| | | { |
|---|
| | | value: num2, |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | var num3 = val.currentMonthProduceNum; |
|---|
| | | var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum; |
|---|
| | | if (val.currentMonthPlanNum == 0) { |
|---|
| | | //åæ¯ä¸º0 æ¾ç¤º0% |
|---|
| | | num3 = 0; |
|---|
| | | num4 = 10; |
|---|
| | | } |
|---|
| | | this.$set(this.option.series[1], "data", [ |
|---|
| | | { value: num3 }, |
|---|
| | | { value: num4 }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | this.hignLightPie(); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts4")); |
|---|
| | | this.option = { |
|---|
| | | color: ["#00f6fe", "transparent"], |
|---|
| | | // æå
¥èæ¯å¾ |
|---|
| | | // graphic: [ |
|---|
| | | // { |
|---|
| | | // type: "image", |
|---|
| | | // id: "background1", |
|---|
| | | // left: "13px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // top: "61px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // z: -10, |
|---|
| | | // bounding: "raw", |
|---|
| | | // origin: [0, 0], |
|---|
| | | // style: { |
|---|
| | | // image: require(`@/assets/images/quan.png`), // 第ä¸ä¸ªç¯å½¢å¾çèæ¯å¾çè·¯å¾ |
|---|
| | | // width: 100, |
|---|
| | | // height: 100, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // type: "image", |
|---|
| | | // id: "background2", |
|---|
| | | // left: "131px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // top: "61px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // z: -10, |
|---|
| | | // bounding: "raw", |
|---|
| | | // origin: [0, 0], |
|---|
| | | // style: { |
|---|
| | | // image: require(`@/assets/images/quan.png`), // 第ä¸ä¸ªç¯å½¢å¾çèæ¯å¾çè·¯å¾ |
|---|
| | | // width: 100, |
|---|
| | | // height: 100, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: "Access From", |
|---|
| | | type: "pie", |
|---|
| | | // padAngle: 5, //ç¯ä¸ç¯ä¹é´çé´é |
|---|
| | | radius: ["29%", "36%"], //ç¯åç» |
|---|
| | | center: ["25%", "49%"], |
|---|
| | | // avoidLabelOverlap: false, |
|---|
| | | label: { |
|---|
| | | show: false, |
|---|
| | | position: "center", |
|---|
| | | formatter: function (params) { |
|---|
| | | return params.percent < 1 |
|---|
| | | ? params.percent + "%" |
|---|
| | | : Math.floor(params.percent) + "%"; // åèäºå
¥å°æ´æ° |
|---|
| | | }, |
|---|
| | | color: "#fff", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | //饼å¾ä¸é´çåä½å¤§å° |
|---|
| | | scale: false, |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | fontSize: 22, |
|---|
| | | color: "#19d8d0", |
|---|
| | | fontWeight: "normal", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | borderRadius: 3, |
|---|
| | | borderColor: "transparent", |
|---|
| | | borderWidth: 10, |
|---|
| | | }, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "Access From", |
|---|
| | | type: "pie", |
|---|
| | | // padAngle: 5, //ç¯ä¸ç¯ä¹é´çé´é |
|---|
| | | // radius: ["25%", "40%"], |
|---|
| | | radius: ["29%", "36%"], //ç¯åç» |
|---|
| | | center: ["74%", "49%"], |
|---|
| | | // avoidLabelOverlap: false, |
|---|
| | | label: { |
|---|
| | | show: false, |
|---|
| | | position: "center", |
|---|
| | | formatter: function (params) { |
|---|
| | | return params.percent < 1 |
|---|
| | | ? params.percent + "%" |
|---|
| | | : Math.floor(params.percent) + "%"; // åèäºå
¥å°æ´æ° |
|---|
| | | }, |
|---|
| | | color: "#fff", |
|---|
| | | fontSize: 12, |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | borderRadius: 3, |
|---|
| | | borderColor: "transparent", |
|---|
| | | borderWidth: 10, |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | scale: false, |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | fontSize: 22, |
|---|
| | | color: "#19d8d0", |
|---|
| | | fontWeight: "normal", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that = this; |
|---|
| | | window.addEventListener("resize", () => { |
|---|
| | | that.myChart.resize(); |
|---|
| | | }); |
|---|
| | | // this.getData(); |
|---|
| | | this.defineEvent(); |
|---|
| | | // this.selectPie(); |
|---|
| | | this.hignLightPie(); |
|---|
| | | // timer = setInterval(this.selectPie, 1500); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // getData() { |
|---|
| | | // this.data1 = [{ actualData: 144, planData: 288 }]; |
|---|
| | | // this.$set(this.option.series[0], "data", [ |
|---|
| | | // { value: this.data1[0].actualData }, |
|---|
| | | // { value: this.data1[0].planData - this.data1[0].actualData }, |
|---|
| | | // ]); |
|---|
| | | // this.$set(this.option.series[1], "data", [ |
|---|
| | | // { value: this.data2[0].actualData }, |
|---|
| | | // { value: this.data2[0].planData - this.data2[0].actualData }, |
|---|
| | | // ]); |
|---|
| | | // console.log(this.option.series[0].data); |
|---|
| | | // this.myChart.setOption(this.option); |
|---|
| | | // }, |
|---|
| | | selectPie() { |
|---|
| | | let dataLen = this.option.series[0].data.length; |
|---|
| | | this.currentIndex = (this.currentIndex + 1) % dataLen; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }, |
|---|
| | | // è½®æç¹äº®é¥¼å¾ |
|---|
| | | hignLightPie() { |
|---|
| | | const dataPie = this.option.series[0].data; |
|---|
| | | // ççæææå½¢åºå |
|---|
| | | for (var index in dataPie) { |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 1, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ç¹äº®å½åæå½¢åºå |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: 0, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 1, |
|---|
| | | dataIndex: 0, |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // é¼ æ 触æ¸è½®ææ¬åäºä»¶ |
|---|
| | | defineEvent() { |
|---|
| | | // é¼ æ 移åºè½®æç»§ç» |
|---|
| | | this.myChart.on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ è¿å
¥è½®ææ¬å |
|---|
| | | this.myChart.on("mouseover", (params) => { |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = params.dataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移å
¥legendè½®ææ¬å |
|---|
| | | this.myChart.getZr().on("mouseover", (event) => { |
|---|
| | | const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegendçindex |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = legendDataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移åºlegendè½®æç»§ç» |
|---|
| | | this.myChart.getZr().on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #echarts4 { |
|---|
| | | transform: scaleY(2); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- æ¬ç/æ¬æ产éç»è®¡ --> |
|---|
| | | <div class="box-container box4" id="echarts4"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let timer = null; |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | produceStatisData: { |
|---|
| | | type: Object, |
|---|
| | | default: () => {}, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | currentIndex: -1, |
|---|
| | | data1: [], |
|---|
| | | data2: [{ actualData: 2782, planData: 11128 }], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | produceStatisData(val) { |
|---|
| | | // æµè¯ç¨ï¼ |
|---|
| | | val.currentShiftProduceNum = 280; |
|---|
| | | val.currentShiftPlanNum = 300; |
|---|
| | | // å½åçç»å®é
ç产æ°é currentShiftProduceNum |
|---|
| | | // å½åçç»è®¡åç产æ°é currentShiftPlanNum |
|---|
| | | var num1 = val.currentShiftProduceNum; //å®é
ç产æ°é |
|---|
| | | var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计åç产æ°é |
|---|
| | | if (val.currentShiftPlanNum == 0) { |
|---|
| | | //åæ¯ä¸º0 æ¾ç¤º0% |
|---|
| | | num1 = 0; |
|---|
| | | num2 = 10; |
|---|
| | | } |
|---|
| | | // this.$set(this.option.series[0], "data", [ |
|---|
| | | // // { value: 1 }, //å®é
ç产æ°é 1/ (9+1) = 10% |
|---|
| | | // // { value: 9 }, |
|---|
| | | // { |
|---|
| | | // value: num1, |
|---|
| | | // }, //å®é
ç产æ°é |
|---|
| | | // { |
|---|
| | | // value: num2, |
|---|
| | | // }, |
|---|
| | | // ]); |
|---|
| | | var num3 = val.currentMonthProduceNum; |
|---|
| | | var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum; |
|---|
| | | if (val.currentMonthPlanNum == 0) { |
|---|
| | | //åæ¯ä¸º0 æ¾ç¤º0% |
|---|
| | | num3 = 0; |
|---|
| | | num4 = 10; |
|---|
| | | } |
|---|
| | | // this.$set(this.option.series[1], "data", [ |
|---|
| | | // { value: num3 }, |
|---|
| | | // { value: num4 }, |
|---|
| | | // ]); |
|---|
| | | |
|---|
| | | let value1 = 90.56; |
|---|
| | | let data1 = [ |
|---|
| | | { |
|---|
| | | value: value1, |
|---|
| | | name: "", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: { |
|---|
| | | // å®æçåç¯çé¢è² |
|---|
| | | colorStops: [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "#0975af", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "#00bdfe", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100 - value1, |
|---|
| | | name: "", |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "#163367", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | this.$set(this.option.series[0], "data", data1); |
|---|
| | | |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | this.hignLightPie(); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts4")); |
|---|
| | | this.option = { |
|---|
| | | color: ["#00f6fe", "transparent"], |
|---|
| | | // æå
¥èæ¯å¾ |
|---|
| | | // graphic: [ |
|---|
| | | // { |
|---|
| | | // type: "image", |
|---|
| | | // id: "background1", |
|---|
| | | // left: "13px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // top: "61px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // z: -10, |
|---|
| | | // bounding: "raw", |
|---|
| | | // origin: [0, 0], |
|---|
| | | // style: { |
|---|
| | | // image: require(`@/assets/images/quan.png`), // 第ä¸ä¸ªç¯å½¢å¾çèæ¯å¾çè·¯å¾ |
|---|
| | | // width: 100, |
|---|
| | | // height: 100, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // type: "image", |
|---|
| | | // id: "background2", |
|---|
| | | // left: "131px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // top: "61px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // z: -10, |
|---|
| | | // bounding: "raw", |
|---|
| | | // origin: [0, 0], |
|---|
| | | // style: { |
|---|
| | | // image: require(`@/assets/images/quan.png`), // 第ä¸ä¸ªç¯å½¢å¾çèæ¯å¾çè·¯å¾ |
|---|
| | | // width: 100, |
|---|
| | | // height: 100, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: "Access From", |
|---|
| | | type: "pie", |
|---|
| | | radius: ["58%", "48%"], |
|---|
| | | silent: true, |
|---|
| | | clockwise: true, |
|---|
| | | startAngle: 90, |
|---|
| | | endAngle: -360, |
|---|
| | | z: 0, |
|---|
| | | zlevel: 0, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | animation: false, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | name: "", |
|---|
| | | type: "gauge", |
|---|
| | | radius: "58%", |
|---|
| | | center: ["50%", "50%"], |
|---|
| | | startAngle: 90, |
|---|
| | | endAngle: -360, |
|---|
| | | splitNumber: 12, |
|---|
| | | hoverAnimation: true, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | length: 60, |
|---|
| | | distance: -10, |
|---|
| | | lineStyle: { |
|---|
| | | width: 25, |
|---|
| | | color: "#0a0d35", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | pointer: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | opacity: 0, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | detail: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | animation: false, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 0, |
|---|
| | | name: "", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that = this; |
|---|
| | | window.addEventListener("resize", () => { |
|---|
| | | that.myChart.resize(); |
|---|
| | | }); |
|---|
| | | // this.getData(); |
|---|
| | | this.defineEvent(); |
|---|
| | | // this.selectPie(); |
|---|
| | | this.hignLightPie(); |
|---|
| | | // timer = setInterval(this.selectPie, 1500); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // getData() { |
|---|
| | | // this.data1 = [{ actualData: 144, planData: 288 }]; |
|---|
| | | // this.$set(this.option.series[0], "data", [ |
|---|
| | | // { value: this.data1[0].actualData }, |
|---|
| | | // { value: this.data1[0].planData - this.data1[0].actualData }, |
|---|
| | | // ]); |
|---|
| | | // this.$set(this.option.series[1], "data", [ |
|---|
| | | // { value: this.data2[0].actualData }, |
|---|
| | | // { value: this.data2[0].planData - this.data2[0].actualData }, |
|---|
| | | // ]); |
|---|
| | | // console.log(this.option.series[0].data); |
|---|
| | | // this.myChart.setOption(this.option); |
|---|
| | | // }, |
|---|
| | | selectPie() { |
|---|
| | | let dataLen = this.option.series[0].data.length; |
|---|
| | | this.currentIndex = (this.currentIndex + 1) % dataLen; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }, |
|---|
| | | // è½®æç¹äº®é¥¼å¾ |
|---|
| | | hignLightPie() { |
|---|
| | | const dataPie = this.option.series[0].data; |
|---|
| | | // ççæææå½¢åºå |
|---|
| | | for (var index in dataPie) { |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 1, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ç¹äº®å½åæå½¢åºå |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: 0, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 1, |
|---|
| | | dataIndex: 0, |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // é¼ æ 触æ¸è½®ææ¬åäºä»¶ |
|---|
| | | defineEvent() { |
|---|
| | | // é¼ æ 移åºè½®æç»§ç» |
|---|
| | | this.myChart.on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ è¿å
¥è½®ææ¬å |
|---|
| | | this.myChart.on("mouseover", (params) => { |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = params.dataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移å
¥legendè½®ææ¬å |
|---|
| | | this.myChart.getZr().on("mouseover", (event) => { |
|---|
| | | const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegendçindex |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = legendDataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移åºlegendè½®æç»§ç» |
|---|
| | | this.myChart.getZr().on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #echarts4 { |
|---|
| | | transform: scaleY(2); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <!-- æ¬ç/æ¬æ产éç»è®¡ --> |
|---|
| | | <div class="box-container box4" id="echarts4"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let timer = null; |
|---|
| | | import * as echarts from "echarts"; |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | produceStatisData: { |
|---|
| | | type: Object, |
|---|
| | | default: () => {}, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: {}, |
|---|
| | | myChart: {}, |
|---|
| | | currentIndex: -1, |
|---|
| | | data1: [], |
|---|
| | | data2: [{ actualData: 2782, planData: 11128 }], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | // watch: { |
|---|
| | | // produceStatisData(val) { |
|---|
| | | // // æµè¯ç¨ï¼ |
|---|
| | | // val.currentShiftProduceNum = 280; |
|---|
| | | // val.currentShiftPlanNum = 300; |
|---|
| | | // // å½åçç»å®é
ç产æ°é currentShiftProduceNum |
|---|
| | | // // å½åçç»è®¡åç产æ°é currentShiftPlanNum |
|---|
| | | // var num1 = val.currentShiftProduceNum; //å®é
ç产æ°é |
|---|
| | | // var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计åç产æ°é |
|---|
| | | // if (val.currentShiftPlanNum == 0) { |
|---|
| | | // //åæ¯ä¸º0 æ¾ç¤º0% |
|---|
| | | // num1 = 0; |
|---|
| | | // num2 = 10; |
|---|
| | | // } |
|---|
| | | // this.$set(this.option.series[0], "data", [ |
|---|
| | | // // { value: 1 }, //å®é
ç产æ°é 1/ (9+1) = 10% |
|---|
| | | // // { value: 9 }, |
|---|
| | | // { |
|---|
| | | // value: num1, |
|---|
| | | // }, //å®é
ç产æ°é |
|---|
| | | // { |
|---|
| | | // value: num2, |
|---|
| | | // }, |
|---|
| | | // ]); |
|---|
| | | // var num3 = val.currentMonthProduceNum; |
|---|
| | | // var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum; |
|---|
| | | // if (val.currentMonthPlanNum == 0) { |
|---|
| | | // //åæ¯ä¸º0 æ¾ç¤º0% |
|---|
| | | // num3 = 0; |
|---|
| | | // num4 = 10; |
|---|
| | | // } |
|---|
| | | // this.$set(this.option.series[1], "data", [ |
|---|
| | | // { value: num3 }, |
|---|
| | | // { value: num4 }, |
|---|
| | | // ]); |
|---|
| | | |
|---|
| | | // this.myChart.setOption(this.option); |
|---|
| | | // this.hignLightPie(); |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts4")); |
|---|
| | | var value = 60; |
|---|
| | | var value2 = 15; |
|---|
| | | let data1 = [ |
|---|
| | | { |
|---|
| | | value: value, |
|---|
| | | name: "", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "#62fbf8", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100 - value, |
|---|
| | | name: "", |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | let data2 = [ |
|---|
| | | { |
|---|
| | | value: value2, |
|---|
| | | name: "", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "rgb(105,206,195)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100 - value2, |
|---|
| | | name: "", |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | this.option = { |
|---|
| | | color: ["#00f6fe", "rgba(5, 19, 96, 0.5)"], |
|---|
| | | // æå
¥èæ¯å¾ |
|---|
| | | // graphic: [ |
|---|
| | | // { |
|---|
| | | // type: "image", |
|---|
| | | // id: "background1", |
|---|
| | | // left: "13px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // top: "61px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // z: -10, |
|---|
| | | // bounding: "raw", |
|---|
| | | // origin: [0, 0], |
|---|
| | | // style: { |
|---|
| | | // image: require(`@/assets/images/quan.png`), // 第ä¸ä¸ªç¯å½¢å¾çèæ¯å¾çè·¯å¾ |
|---|
| | | // width: 100, |
|---|
| | | // height: 100, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // { |
|---|
| | | // type: "image", |
|---|
| | | // id: "background2", |
|---|
| | | // left: "131px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // top: "61px", // æ ¹æ®ç¯å½¢å¾çä½ç½®è°æ´ |
|---|
| | | // z: -10, |
|---|
| | | // bounding: "raw", |
|---|
| | | // origin: [0, 0], |
|---|
| | | // style: { |
|---|
| | | // image: require(`@/assets/images/quan.png`), // 第ä¸ä¸ªç¯å½¢å¾çèæ¯å¾çè·¯å¾ |
|---|
| | | // width: 100, |
|---|
| | | // height: 100, |
|---|
| | | // }, |
|---|
| | | // }, |
|---|
| | | // ], |
|---|
| | | series: [ |
|---|
| | | // 左侧 |
|---|
| | | { |
|---|
| | | name: "å·¦-æ°æ®", |
|---|
| | | type: "pie", |
|---|
| | | // radius: ['65%', '75%'], |
|---|
| | | radius: ["29%", "36%"], //ç¯åç» |
|---|
| | | center: ["25%", "49%"], |
|---|
| | | silent: true, |
|---|
| | | // clockwise: false, |
|---|
| | | startAngle: 90, |
|---|
| | | z: 1, |
|---|
| | | zlevel: 0, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: data1, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å·¦-ä¸é´æ¸å", |
|---|
| | | type: "pie", |
|---|
| | | startAngle: 90, |
|---|
| | | z: 20, |
|---|
| | | zlevel: 20, |
|---|
| | | radius: "28%", |
|---|
| | | hoverAnimation: false, |
|---|
| | | center: ["25%", "49%"], |
|---|
| | | |
|---|
| | | // zlevel: 2, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | labelLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [ |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "rgba(55,70,130, 1)", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "rgba(55,70,130, 0)", |
|---|
| | | }, |
|---|
| | | ]), |
|---|
| | | shadowBlur: 10, |
|---|
| | | // shadowColor: 'rgba(55,70,130, 1)' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 100, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å·¦-å»åº¦é´é", |
|---|
| | | z: 2, |
|---|
| | | // zlevel: 1, |
|---|
| | | type: "gauge", |
|---|
| | | radius: "57%", |
|---|
| | | center: ["25%", "49%"], |
|---|
| | | startAngle: 20, |
|---|
| | | endAngle: -360, |
|---|
| | | splitNumber: 10, |
|---|
| | | hoverAnimation: true, |
|---|
| | | axisTick: { |
|---|
| | | show: true, |
|---|
| | | splitNumber: 1, |
|---|
| | | length: 14, //å»åº¦é¿åº¦ |
|---|
| | | // Distance: 40, //å»åº¦é´éè·ç¦» |
|---|
| | | lineStyle: { |
|---|
| | | width: 5, |
|---|
| | | color: new echarts.graphic.LinearGradient( |
|---|
| | | 0, |
|---|
| | | 0, |
|---|
| | | 0, |
|---|
| | | 1, |
|---|
| | | [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "rgba(8, 52, 106, 0.039)", // 0% å¤çé¢è² |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "rgba(8, 52, 106, 0.239)", // 100% å¤çé¢è² |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | false |
|---|
| | | ), |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | pointer: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | opacity: 0, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | detail: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | data: [100], |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // å³ä¾§ |
|---|
| | | { |
|---|
| | | name: "å³-æ°æ®", |
|---|
| | | type: "pie", |
|---|
| | | // radius: ['65%', '75%'], |
|---|
| | | radius: ["29%", "36%"], //ç¯åç» |
|---|
| | | center: ["74%", "49%"], |
|---|
| | | silent: true, |
|---|
| | | // clockwise: false, |
|---|
| | | startAngle: 90, |
|---|
| | | z: 1, |
|---|
| | | zlevel: 0, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: data2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å³-ä¸é´æ¸å", |
|---|
| | | type: "pie", |
|---|
| | | startAngle: 90, |
|---|
| | | radius: "28%", |
|---|
| | | hoverAnimation: false, |
|---|
| | | center: ["74%", "49%"], |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | labelLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [ |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "rgba(55,70,130, 1)", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "rgba(55,70,130, 0)", |
|---|
| | | }, |
|---|
| | | ]), |
|---|
| | | shadowBlur: 10, |
|---|
| | | // shadowColor: 'rgba(55,70,130, 1)' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 100, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å³-å»åº¦é´é", |
|---|
| | | z: 2, |
|---|
| | | type: "gauge", |
|---|
| | | radius: "45%", |
|---|
| | | center: ["74%", "49%"], |
|---|
| | | startAngle: 90, |
|---|
| | | endAngle: -360, |
|---|
| | | splitNumber: 10, |
|---|
| | | hoverAnimation: true, |
|---|
| | | axisTick: { |
|---|
| | | show: true, |
|---|
| | | splitNumber: 1, |
|---|
| | | length: 20, |
|---|
| | | lineStyle: { |
|---|
| | | width: 10, |
|---|
| | | color: "#1183a7", |
|---|
| | | shadowColor: "rgb(4,31,62, 0.5)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | pointer: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | lineStyle: { |
|---|
| | | opacity: 0, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | detail: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | data: [100], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that = this; |
|---|
| | | window.addEventListener("resize", () => { |
|---|
| | | that.myChart.resize(); |
|---|
| | | }); |
|---|
| | | // this.getData(); |
|---|
| | | this.defineEvent(); |
|---|
| | | // this.selectPie(); |
|---|
| | | this.hignLightPie(); |
|---|
| | | // timer = setInterval(this.selectPie, 1500); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | // getData() { |
|---|
| | | // this.data1 = [{ actualData: 144, planData: 288 }]; |
|---|
| | | // this.$set(this.option.series[0], "data", [ |
|---|
| | | // { value: this.data1[0].actualData }, |
|---|
| | | // { value: this.data1[0].planData - this.data1[0].actualData }, |
|---|
| | | // ]); |
|---|
| | | // this.$set(this.option.series[1], "data", [ |
|---|
| | | // { value: this.data2[0].actualData }, |
|---|
| | | // { value: this.data2[0].planData - this.data2[0].actualData }, |
|---|
| | | // ]); |
|---|
| | | // console.log(this.option.series[0].data); |
|---|
| | | // this.myChart.setOption(this.option); |
|---|
| | | // }, |
|---|
| | | selectPie() { |
|---|
| | | let dataLen = this.option.series[0].data.length; |
|---|
| | | this.currentIndex = (this.currentIndex + 1) % dataLen; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }, |
|---|
| | | // è½®æç¹äº®é¥¼å¾ |
|---|
| | | hignLightPie() { |
|---|
| | | const dataPie = this.option.series[0].data; |
|---|
| | | // ççæææå½¢åºå |
|---|
| | | for (var index in dataPie) { |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 1, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ç¹äº®å½åæå½¢åºå |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: 0, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 1, |
|---|
| | | dataIndex: 0, |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // é¼ æ 触æ¸è½®ææ¬åäºä»¶ |
|---|
| | | defineEvent() { |
|---|
| | | // é¼ æ 移åºè½®æç»§ç» |
|---|
| | | this.myChart.on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ è¿å
¥è½®ææ¬å |
|---|
| | | this.myChart.on("mouseover", (params) => { |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = params.dataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移å
¥legendè½®ææ¬å |
|---|
| | | this.myChart.getZr().on("mouseover", (event) => { |
|---|
| | | const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegendçindex |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = legendDataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移åºlegendè½®æç»§ç» |
|---|
| | | this.myChart.getZr().on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #echarts4 { |
|---|
| | | transform: scaleY(2); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="box-container echarts3Box" id="echarts3"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | let timer = null; |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | qualityData: { |
|---|
| | | type: Array, |
|---|
| | | default: () =>[], |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | option: { |
|---|
| | | xAxis: { |
|---|
| | | show: false, |
|---|
| | | boundaryGap: false, |
|---|
| | | type: "category", |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: 33, |
|---|
| | | right: 33, |
|---|
| | | top: 55, |
|---|
| | | bottom:5, |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | show: false, |
|---|
| | | type: "value" |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: [], |
|---|
| | | type: "line", |
|---|
| | | // symbol:'none', |
|---|
| | | // symbolSize: 0, |
|---|
| | | lineStyle: { |
|---|
| | | color: "#7b8fe6", |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | |
|---|
| | | color: "#7b8fe6", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | myChart: {}, |
|---|
| | | currentIndex: -1, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch:{ |
|---|
| | | qualityData(val){ |
|---|
| | | let xData=[],yData=[]; |
|---|
| | | val.forEach(item => { |
|---|
| | | xData.push(item.workPieceID) |
|---|
| | | yData.push(item.qualityDataVaule) |
|---|
| | | }); |
|---|
| | | this.$set(this.option.xAxis,'data',xData) |
|---|
| | | this.$set(this.option.series[0],'data',yData) |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.myChart = this.$echarts.init(document.getElementById("echarts3")); |
|---|
| | | this.myChart.setOption(this.option); |
|---|
| | | const that=this |
|---|
| | | window.addEventListener('resize',()=>{ |
|---|
| | | that.myChart.resize(); |
|---|
| | | }) |
|---|
| | | // this.defineEvent(); |
|---|
| | | // this.selectPie(); |
|---|
| | | // timer = setInterval(this.selectPie, 1500); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | selectPie() { |
|---|
| | | let dataLen = this.option.series[0].data.length; |
|---|
| | | this.currentIndex = (this.currentIndex + 1) % dataLen; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }, |
|---|
| | | // è½®æç¹äº®é¥¼å¾ |
|---|
| | | hignLightPie() { |
|---|
| | | const dataPie = this.option.series[0].data; |
|---|
| | | // ççæææå½¢åºå |
|---|
| | | for (var index in dataPie) { |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "downplay", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: index, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | // ç¹äº®å½åæå½¢åºå |
|---|
| | | this.myChart.dispatchAction({ |
|---|
| | | type: "highlight", |
|---|
| | | seriesIndex: 0, |
|---|
| | | dataIndex: this.currentIndex, |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | // é¼ æ 触æ¸è½®ææ¬åäºä»¶ |
|---|
| | | defineEvent() { |
|---|
| | | // é¼ æ 移åºè½®æç»§ç» |
|---|
| | | this.myChart.on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ è¿å
¥è½®ææ¬å |
|---|
| | | this.myChart.on("mouseover", (params) => { |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = params.dataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移å
¥legendè½®ææ¬å |
|---|
| | | this.myChart.getZr().on("mouseover", (event) => { |
|---|
| | | const legendDataIndex = event.topTarget.parent.__legendDataIndex; // æ¯ä¸ªlegendçindex |
|---|
| | | clearInterval(timer); |
|---|
| | | this.currentIndex = legendDataIndex; |
|---|
| | | this.hignLightPie(); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // é¼ æ 移åºlegendè½®æç»§ç» |
|---|
| | | this.myChart.getZr().on("mouseout", () => { |
|---|
| | | if (timer) clearInterval(timer); |
|---|
| | | timer = setInterval(this.selectPie, 1500); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | .echarts3Box{ |
|---|
| | | height: 150px !important; |
|---|
| | | /* background-color: #040d3d; */ |
|---|
| | | /* width: 96%; */ |
|---|
| | | margin: 0 auto; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | export let zhu = 'data:image/png;base64,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'; |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | import Vue from 'vue' |
|---|
| | | import App from './App.vue' |
|---|
| | | import vueSeamlessScroll from 'vue-seamless-scroll' |
|---|
| | | Vue.use(vueSeamlessScroll) |
|---|
| | | |
|---|
| | | import 'lib-flexible/flexible.js' |
|---|
| | | |
|---|
| | | |
|---|
| | | import * as echarts from 'echarts'; |
|---|
| | | |
|---|
| | | Vue.config.productionTip = false |
|---|
| | | |
|---|
| | | new Vue({ |
|---|
| | | render: h => h(App), |
|---|
| | | beforeCreate(){ |
|---|
| | | Vue.prototype.$echarts=echarts |
|---|
| | | } |
|---|
| | | }).$mount('#app') |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | const { defineConfig } = require('@vue/cli-service') |
|---|
| | | module.exports = defineConfig({ |
|---|
| | | transpileDependencies: true, |
|---|
| | | lintOnSave:false, |
|---|
| | | chainWebpack: config =>{ |
|---|
| | | config.plugin('html').tap(args => { |
|---|
| | | args[0].title = 'è¿æ线大å±'; |
|---|
| | | return args; |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | }) |
|---|
