INTCO-MES
This commit is contained in:
ICEC
@ -1,109 +1,113 @@
|
||||
{
|
||||
"name": "ruoyi",
|
||||
"version": "2.3.0",
|
||||
"description": "若依管理系统",
|
||||
"author": "若依",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "vue-cli-service serve --open",
|
||||
"build:prod": "vue-cli-service build",
|
||||
"build:stage": "vue-cli-service build --mode staging",
|
||||
"preview": "node build/index.js --preview",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||
"test:ci": "npm run lint && npm run test:unit",
|
||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
|
||||
"new": "plop"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"src/**/*.{js,vue}": [
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"keywords": [
|
||||
"vue",
|
||||
"admin",
|
||||
"dashboard",
|
||||
"element-ui",
|
||||
"boilerplate",
|
||||
"admin-template",
|
||||
"management-system"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.18.1",
|
||||
"clipboard": "2.0.4",
|
||||
"echarts": "4.2.1",
|
||||
"element-ui": "2.13.0",
|
||||
"file-saver": "2.0.1",
|
||||
"js-beautify": "^1.10.2",
|
||||
"fuse.js": "3.4.4",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsencrypt": "3.0.0-rc.1",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"screenfull": "4.2.0",
|
||||
"sortablejs": "1.8.4",
|
||||
"vue": "2.6.10",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-quill-editor": "3.0.6",
|
||||
"vue-cropper": "0.4.9",
|
||||
"vue-router": "3.0.2",
|
||||
"vue-splitpane": "1.0.4",
|
||||
"vuedraggable": "2.20.0",
|
||||
"vuex": "3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.0.0",
|
||||
"@babel/register": "7.0.0",
|
||||
"@babel/parser": "^7.7.4",
|
||||
"@vue/cli-plugin-babel": "3.5.3",
|
||||
"@vue/cli-plugin-eslint": "^3.9.1",
|
||||
"@vue/cli-plugin-unit-jest": "3.5.3",
|
||||
"@vue/cli-service": "3.5.3",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"autoprefixer": "^9.5.1",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"babel-eslint": "10.0.1",
|
||||
"babel-jest": "23.6.0",
|
||||
"chalk": "2.4.2",
|
||||
"chokidar": "2.1.5",
|
||||
"connect": "3.6.6",
|
||||
"eslint": "5.15.3",
|
||||
"eslint-plugin-vue": "5.2.2",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"http-proxy-middleware": "^0.19.1",
|
||||
"husky": "1.3.1",
|
||||
"lint-staged": "8.1.5",
|
||||
"mockjs": "1.0.1-beta3",
|
||||
"node-sass": "^4.9.0",
|
||||
"plop": "2.3.0",
|
||||
"runjs": "^4.3.2",
|
||||
"sass-loader": "^7.1.0",
|
||||
"script-ext-html-webpack-plugin": "2.1.3",
|
||||
"script-loader": "0.7.2",
|
||||
"serve-static": "^1.13.2",
|
||||
"svg-sprite-loader": "4.1.3",
|
||||
"svgo": "1.2.0",
|
||||
"vue-template-compiler": "2.6.10"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
{
|
||||
"name": "ruoyi",
|
||||
"version": "2.3.0",
|
||||
"description": "若依管理系统",
|
||||
"author": "若依",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "vue-cli-service serve --open",
|
||||
"build:prod": "vue-cli-service build",
|
||||
"build:stage": "vue-cli-service build --mode staging",
|
||||
"preview": "node build/index.js --preview",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||
"test:ci": "npm run lint && npm run test:unit",
|
||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
|
||||
"new": "plop"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"src/**/*.{js,vue}": [
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"keywords": [
|
||||
"vue",
|
||||
"admin",
|
||||
"dashboard",
|
||||
"element-ui",
|
||||
"boilerplate",
|
||||
"admin-template",
|
||||
"management-system"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.18.1",
|
||||
"bootstrap": "^4.5.0",
|
||||
"bootstrap-table": "^1.16.0",
|
||||
"clipboard": "2.0.4",
|
||||
"echarts": "4.2.1",
|
||||
"element-ui": "2.13.0",
|
||||
"file-saver": "2.0.1",
|
||||
"js-beautify": "^1.10.2",
|
||||
"fuse.js": "3.4.4",
|
||||
"jquery": "^3.5.1",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsencrypt": "3.0.0-rc.1",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"popper.js": "^1.16.1",
|
||||
"screenfull": "4.2.0",
|
||||
"sortablejs": "1.8.4",
|
||||
"vue": "2.6.10",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-quill-editor": "3.0.6",
|
||||
"vue-cropper": "0.4.9",
|
||||
"vue-router": "3.0.2",
|
||||
"vue-splitpane": "1.0.4",
|
||||
"vuedraggable": "2.20.0",
|
||||
"vuex": "3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.0.0",
|
||||
"@babel/register": "7.0.0",
|
||||
"@babel/parser": "^7.7.4",
|
||||
"@vue/cli-plugin-babel": "3.5.3",
|
||||
"@vue/cli-plugin-eslint": "^3.9.1",
|
||||
"@vue/cli-plugin-unit-jest": "3.5.3",
|
||||
"@vue/cli-service": "3.5.3",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"autoprefixer": "^9.5.1",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"babel-eslint": "10.0.1",
|
||||
"babel-jest": "23.6.0",
|
||||
"chalk": "2.4.2",
|
||||
"chokidar": "2.1.5",
|
||||
"connect": "3.6.6",
|
||||
"eslint": "5.15.3",
|
||||
"eslint-plugin-vue": "5.2.2",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"http-proxy-middleware": "^0.19.1",
|
||||
"husky": "1.3.1",
|
||||
"lint-staged": "8.1.5",
|
||||
"mockjs": "1.0.1-beta3",
|
||||
"node-sass": "^4.9.0",
|
||||
"plop": "2.3.0",
|
||||
"runjs": "^4.3.2",
|
||||
"sass-loader": "^7.1.0",
|
||||
"script-ext-html-webpack-plugin": "2.1.3",
|
||||
"script-loader": "0.7.2",
|
||||
"serve-static": "^1.13.2",
|
||||
"svg-sprite-loader": "4.1.3",
|
||||
"svgo": "1.2.0",
|
||||
"vue-template-compiler": "2.6.10"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
|
||||
22
ruoyi-ui/src/api/dashboard/changemouldtime.js
Normal file
22
ruoyi-ui/src/api/dashboard/changemouldtime.js
Normal file
@ -0,0 +1,22 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询服务器详细
|
||||
export function getChangeMouldTimeList() {
|
||||
return request({
|
||||
url: '/fx_changemouldtime/list',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
export function getDateRangeChangeMouldTime(fDateStart,fDateEnd) {
|
||||
|
||||
|
||||
return request({
|
||||
url: '/fx_changemouldtime/rangetimeavg/'+fDateStart+'/'+fDateEnd,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
21
ruoyi-ui/src/api/dashboard/density.js
Normal file
21
ruoyi-ui/src/api/dashboard/density.js
Normal file
@ -0,0 +1,21 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询服务器详细
|
||||
export function getDensity30Day() {
|
||||
return request({
|
||||
url: '/fx_density/30day',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export function getDensity72h() {
|
||||
return request({
|
||||
url: '/fx_density/72h',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export function getDensityGroup() {
|
||||
return request({
|
||||
url: '/fx_density/group',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
87
ruoyi-ui/src/api/dashboard/fx_technologist.js
Normal file
87
ruoyi-ui/src/api/dashboard/fx_technologist.js
Normal file
@ -0,0 +1,87 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询服务器详细
|
||||
export function getConfirmation() {
|
||||
return request({
|
||||
url: '/fx_technologist/getConfirmation',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getBestODM() {
|
||||
return request({
|
||||
url: '/fx_technologist/getBestODM',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getBestOEM() {
|
||||
return request({
|
||||
url: '/fx_technologist/getBestOEM',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getFinishedSampleAvgDay() {
|
||||
return request({
|
||||
url: '/fx_technologist/getFinishedSampleAvgDay',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getUnFinishedSampleAvgDay() {
|
||||
return request({
|
||||
url: '/fx_technologist/getUnFinishedSampleAvgDay',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function DayFinishedSampleOrder() {
|
||||
return request({
|
||||
url: '/fx_technologist/DayFinishedSampleOrder',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function DayNewMould() {
|
||||
return request({
|
||||
url: '/fx_technologist/DayNewMould',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function DayFinishedSample() {
|
||||
return request({
|
||||
url: '/fx_technologist/DayFinishedSample',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function DayFinishedBOM() {
|
||||
return request({
|
||||
url: '/fx_technologist/DayFinishedBOM',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function ALL() {
|
||||
return request({
|
||||
url: '/fx_technologist/All',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function AllDataDataRange(fDateStart,fDateEnd) {
|
||||
return request({
|
||||
url: '/fx_technologist/AllDataDataRange/'+fDateStart+'/'+fDateEnd,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
31
ruoyi-ui/src/api/dashboard/fxdashboard.js
Normal file
31
ruoyi-ui/src/api/dashboard/fxdashboard.js
Normal file
@ -0,0 +1,31 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询服务器详细
|
||||
export function getDashboardGroup() {
|
||||
return request({
|
||||
url: '/fx_dashboard/group',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export function getLastDay() {
|
||||
return request({
|
||||
url: '/fx_dashboard/lastday',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export function get30Day() {
|
||||
return request({
|
||||
url: '/fx_dashboard/30day',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getDateRange(fDateStart,fDateEnd) {
|
||||
|
||||
|
||||
return request({
|
||||
url: '/fx_dashboard/daterange/'+fDateStart+'/'+fDateEnd,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
125
ruoyi-ui/src/views/fx_changemouldtime/changemouldtime_list.vue
Normal file
125
ruoyi-ui/src/views/fx_changemouldtime/changemouldtime_list.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>换膜明细 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="StartTime"
|
||||
sortable
|
||||
label="换模开始时间">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Mould"
|
||||
sortable
|
||||
label="模具">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ChangeMouldTime"
|
||||
sortable
|
||||
label="换模时间">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Line"
|
||||
sortable
|
||||
label="线号">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getChangeMouldTimeList} from '@/api/dashboard/changemouldtime'
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
getChangeMouldTimeList().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
// lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
// lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
|
||||
|
||||
this.tableData.push({
|
||||
Line: response.data[i].Line,
|
||||
ChangeMouldTime: (response.data[i].ChangeMouldTime)*1,
|
||||
Mould: response.data[i].Mould,
|
||||
StartTime: response.data[i].StartTime,
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
718
ruoyi-ui/src/views/fx_dashboard/dashboard_30day.vue
Normal file
718
ruoyi-ui/src/views/fx_dashboard/dashboard_30day.vue
Normal file
@ -0,0 +1,718 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_zhengpin_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">正品率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_change_moulding_time" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均换模时间</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_density" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均密度</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_energy_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">产能达标率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>产线明细 </h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="line"
|
||||
label="线号"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Moulds"
|
||||
label="换膜次数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sumbox"
|
||||
label="完成箱数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_currentcapacity"
|
||||
label="平均实际产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_normalcapacity"
|
||||
label="平均标准产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="capacityrate"
|
||||
label="产能达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="yieldrate"
|
||||
label="正品达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_density"
|
||||
label="平均密度">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {get30Day} from '@/api/dashboard/fxdashboard'
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
get30Day().then(response => {
|
||||
|
||||
var j;
|
||||
var avg_zhengpin_avg = 0;
|
||||
var avg_density = 0;
|
||||
var avg_energy_avg = 0;
|
||||
var avg_chang_moulding_time = 0;
|
||||
var sum_quantity = 0;
|
||||
var sum_currentfinishedquantity = 0;
|
||||
j = 0;
|
||||
|
||||
var data_ajax = response.data;
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
|
||||
|
||||
this.tableData.push({
|
||||
line: response.data[i].line,
|
||||
Moulds: ((response.data[i].Moulds.split('/')).length - 1),
|
||||
sumbox: response.data[i].sumbox,
|
||||
avg_currentcapacity: (response.data[i].avg_currentcapacity * 1 * response.data[i].sum_box_meter / response.data[i].sum_device_meter).toFixed(2),
|
||||
avg_normalcapacity: (response.data[i].avg_normalcapacity * 1).toFixed(2),
|
||||
capacityrate: (response.data[i].avg_currentcapacity / response.data[i].avg_normalcapacity * response.data[i].sum_box_meter / response.data[i].sum_device_meter * 100).toFixed(2) + "%",
|
||||
yieldrate: (response.data[i].sum_box_meter / response.data[i].sum_device_meter * 100).toFixed(2) + "%",
|
||||
avg_density: (response.data[i].avg_density * 1).toFixed(4),
|
||||
lastchangemouldtime: (response.data[i].lastchangemouldtime),
|
||||
|
||||
})
|
||||
|
||||
if (data_ajax[i].lastchangemouldtime !== 0) {
|
||||
avg_chang_moulding_time = avg_chang_moulding_time + (data_ajax[i].lastchangemouldtime) * 1;
|
||||
j = j + 1;
|
||||
}
|
||||
avg_density = parseFloat(avg_density) + parseFloat(data_ajax[i].avg_density);
|
||||
avg_energy_avg = avg_energy_avg + (data_ajax[i].avg_currentcapacity / data_ajax[i].avg_normalcapacity);
|
||||
avg_zhengpin_avg = avg_zhengpin_avg + (data_ajax[i].sum_box_meter / data_ajax[i].sum_device_meter);
|
||||
sum_quantity = 2000;
|
||||
sum_currentfinishedquantity = sum_currentfinishedquantity + (data_ajax[i].sumbox) * 1;
|
||||
|
||||
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById("chart_energy_avg"));
|
||||
const chart_zhengpin_avg = echarts.init(document.getElementById("chart_zhengpin_avg"));
|
||||
const chart_density = echarts.init(document.getElementById("chart_density"));
|
||||
const chart_change_moulding_time = echarts.init(document.getElementById("chart_change_moulding_time"));
|
||||
|
||||
// 设置仪表盘数据
|
||||
option_zhengpin_avg.series[0].data[0].value = (avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_zhengpin_avg.setOption(option_zhengpin_avg, true);
|
||||
|
||||
option_density.series[0].data[0].value = (avg_density / data_ajax.length).toFixed(3);
|
||||
chart_density.setOption(option_density, true);
|
||||
|
||||
//option_change_moulding_time.series[0].data[0].value = (avg_chang_moulding_time / data_ajax.length).toFixed(0);
|
||||
option_change_moulding_time.series[0].data[0].value = 0 ;
|
||||
chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
|
||||
option_energy_avg.series[0].data[0].value = (avg_energy_avg / data_ajax.length * avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_energy_avg.setOption(option_energy_avg, true);
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var colorTemplate_energy_avg = [//50-85 85-100 100-120
|
||||
[0.5, "rgba(255,0,0,0.8)"],
|
||||
[5 / 7, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_zhengpin_avg = [//50-75 75-85 85-100
|
||||
[6 / 10, "rgba(255,0,0,0.8)"],
|
||||
[7 / 10, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_density = [//0.4-0.42 红 0.4-0.38 0.38-0.36
|
||||
[1 / 3, "rgba(0,200,250,0.8)"],
|
||||
[2 / 3, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
var colorTemplate_change_moulding_time = [ //30-70 蓝 70-90 绿 90-120 红
|
||||
[4 / 9, "rgba(0,200,250,0.8)"],
|
||||
[6 / 9, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
|
||||
|
||||
var data_energy_avg = [{
|
||||
// name: "产能达标率",
|
||||
value: 50,
|
||||
}];
|
||||
|
||||
var data_zhengpin_avg = [{
|
||||
// name: "正品率",
|
||||
value: 0,
|
||||
}];
|
||||
var data_density = [{
|
||||
// name: "密度",
|
||||
value: 0,
|
||||
}];
|
||||
var data_change_moulding_time = [{
|
||||
// name: "换模时间",
|
||||
value: 0,
|
||||
}];
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option_energy_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 7, // 仪表盘刻度的分割段数,默认 10。
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_energy_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_energy_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_zhengpin_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 5, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_zhengpin_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_zhengpin_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_density = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{c}",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 0.36, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 0.42, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 6, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_density, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_density
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_change_moulding_time = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 30, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 9, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_change_moulding_time, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_change_moulding_time
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
823
ruoyi-ui/src/views/fx_dashboard/dashboard_daterange.vue
Normal file
823
ruoyi-ui/src/views/fx_dashboard/dashboard_daterange.vue
Normal file
@ -0,0 +1,823 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<div class="ibox-title">
|
||||
<el-row :gutter="32">
|
||||
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
|
||||
<b>选择时间范围</b>
|
||||
|
||||
<el-date-picker
|
||||
v-model="daterange_time1"
|
||||
align="right"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
<el-select style="width: 90px" v-model="daterange_group_value1" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<b>--</b>
|
||||
<el-date-picker
|
||||
v-model="daterange_time2"
|
||||
align="right"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
<el-select style="width: 90px" v-model="daterange_group_value2" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button @click="getData" type="primary">查询</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_zhengpin_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">正品率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_change_moulding_time" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均换模时间</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_density" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均密度</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_energy_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">产能达标率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<b>产线明细</b>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="line"
|
||||
label="线号"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Moulds"
|
||||
label="模具">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sumbox"
|
||||
label="完成箱数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_currentcapacity"
|
||||
label="平均实际产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_normalcapacity"
|
||||
label="平均标准产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="capacityrate"
|
||||
label="产能达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="yieldrate"
|
||||
label="正品达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_density"
|
||||
label="平均密度">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getDateRange} from '@/api/dashboard/fxdashboard'
|
||||
import {getDateRangeChangeMouldTime} from '@/api/dashboard/changemouldtime'
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
options: [{
|
||||
value: '08:00:01',
|
||||
label: '白班'
|
||||
}, {
|
||||
value: '20:00:00',
|
||||
label: '夜班'
|
||||
}],
|
||||
daterange_group_value1: [],
|
||||
daterange_group_value2: [],
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
daterange_time1: '',
|
||||
daterange_time2: '',
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
this.daterange_group_value1 = "08:00:01"
|
||||
this.daterange_group_value2 = "08:00:01"
|
||||
this.daterange_time1= '2020-05-01'
|
||||
this.daterange_time2= '2020-05-01'
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
const fDateStart = this.daterange_time1 + ' ' + this.daterange_group_value1
|
||||
const fDateEnd = this.daterange_time2 + ' ' + this.daterange_group_value2
|
||||
this.lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
this.tableData=[];
|
||||
|
||||
getDateRange(fDateStart,fDateEnd).then(response => {
|
||||
|
||||
var j;
|
||||
var avg_zhengpin_avg = 0;
|
||||
var avg_density = 0;
|
||||
var avg_energy_avg = 0;
|
||||
var avg_chang_moulding_time = 0;
|
||||
var sum_quantity = 0;
|
||||
var sum_currentfinishedquantity = 0;
|
||||
j = 0;
|
||||
|
||||
var data_ajax = response.data;
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
|
||||
|
||||
this.tableData.push({
|
||||
line: response.data[i].line,
|
||||
Moulds: response.data[i].Moulds,
|
||||
sumbox: response.data[i].sumbox,
|
||||
avg_currentcapacity: (response.data[i].avg_currentcapacity * 1 * response.data[i].sum_box_meter / response.data[i].sum_device_meter).toFixed(2),
|
||||
avg_normalcapacity: (response.data[i].avg_normalcapacity * 1).toFixed(2),
|
||||
capacityrate: (response.data[i].avg_currentcapacity / response.data[i].avg_normalcapacity * response.data[i].sum_box_meter / response.data[i].sum_device_meter * 100).toFixed(2) + "%",
|
||||
yieldrate: (response.data[i].sum_box_meter / response.data[i].sum_device_meter * 100).toFixed(2) + "%",
|
||||
avg_density: (response.data[i].avg_density * 1).toFixed(4),
|
||||
lastchangemouldtime: (response.data[i].lastchangemouldtime),
|
||||
|
||||
})
|
||||
|
||||
if (data_ajax[i].lastchangemouldtime !== 0) {
|
||||
avg_chang_moulding_time = avg_chang_moulding_time + (data_ajax[i].lastchangemouldtime) * 1;
|
||||
j = j + 1;
|
||||
}
|
||||
avg_density = parseFloat(avg_density) + parseFloat(data_ajax[i].avg_density);
|
||||
avg_energy_avg = avg_energy_avg + (data_ajax[i].avg_currentcapacity / data_ajax[i].avg_normalcapacity);
|
||||
avg_zhengpin_avg = avg_zhengpin_avg + (data_ajax[i].sum_box_meter / data_ajax[i].sum_device_meter);
|
||||
sum_quantity = 2000;
|
||||
sum_currentfinishedquantity = sum_currentfinishedquantity + (data_ajax[i].sumbox) * 1;
|
||||
|
||||
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById("chart_energy_avg"));
|
||||
const chart_zhengpin_avg = echarts.init(document.getElementById("chart_zhengpin_avg"));
|
||||
const chart_density = echarts.init(document.getElementById("chart_density"));
|
||||
const chart_change_moulding_time = echarts.init(document.getElementById("chart_change_moulding_time"));
|
||||
|
||||
// 设置仪表盘数据
|
||||
option_zhengpin_avg.series[0].data[0].value = (avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_zhengpin_avg.setOption(option_zhengpin_avg, true);
|
||||
|
||||
option_density.series[0].data[0].value = (avg_density / data_ajax.length).toFixed(3);
|
||||
chart_density.setOption(option_density, true);
|
||||
|
||||
//option_change_moulding_time.series[0].data[0].value = (avg_chang_moulding_time / data_ajax.length).toFixed(0);
|
||||
// option_change_moulding_time.series[0].data[0].value = 0;
|
||||
// chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
|
||||
option_energy_avg.series[0].data[0].value = (avg_energy_avg / data_ajax.length * avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_energy_avg.setOption(option_energy_avg, true);
|
||||
|
||||
})
|
||||
|
||||
|
||||
getDateRangeChangeMouldTime(fDateStart,fDateEnd).then(response => {
|
||||
const chart_change_moulding_time = echarts.init(document.getElementById("chart_change_moulding_time"));
|
||||
|
||||
option_change_moulding_time.series[0].data[0].value = (response.data[0].avgchangemouldtime * 1);
|
||||
|
||||
chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var colorTemplate_energy_avg = [//50-85 85-100 100-120
|
||||
[0.5, "rgba(255,0,0,0.8)"],
|
||||
[5 / 7, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_zhengpin_avg = [//50-75 75-85 85-100
|
||||
[6 / 10, "rgba(255,0,0,0.8)"],
|
||||
[7 / 10, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_density = [//0.4-0.42 红 0.4-0.38 0.38-0.36
|
||||
[1 / 3, "rgba(0,200,250,0.8)"],
|
||||
[2 / 3, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
var colorTemplate_change_moulding_time = [ //30-70 蓝 70-90 绿 90-120 红
|
||||
[4 / 9, "rgba(0,200,250,0.8)"],
|
||||
[6 / 9, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
|
||||
|
||||
var data_energy_avg = [{
|
||||
// name: "产能达标率",
|
||||
value: 50,
|
||||
}];
|
||||
|
||||
var data_zhengpin_avg = [{
|
||||
// name: "正品率",
|
||||
value: 0,
|
||||
}];
|
||||
var data_density = [{
|
||||
// name: "密度",
|
||||
value: 0,
|
||||
}];
|
||||
var data_change_moulding_time = [{
|
||||
// name: "换模时间",
|
||||
value: 0,
|
||||
}];
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option_energy_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 7, // 仪表盘刻度的分割段数,默认 10。
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_energy_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_energy_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_zhengpin_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 5, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_zhengpin_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_zhengpin_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_density = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{c}",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 0.36, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 0.42, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 6, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_density, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_density
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_change_moulding_time = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 30, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 9, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_change_moulding_time, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_change_moulding_time
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
781
ruoyi-ui/src/views/fx_dashboard/dashboard_group.vue
Normal file
781
ruoyi-ui/src/views/fx_dashboard/dashboard_group.vue
Normal file
@ -0,0 +1,781 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<el-row :gutter="32">
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="12" style="height: 170px">
|
||||
|
||||
|
||||
<table class="ibox" style="font-size:24px;width: 100%;margin-top: 50px" >
|
||||
<tbody>
|
||||
<tr>
|
||||
<!-- <td>
|
||||
<strong>日期</strong> <i id="groupdate"></i>
|
||||
</td> -->
|
||||
<td id="groupdate">
|
||||
</td>
|
||||
<td>
|
||||
<strong>班次</strong> 白班
|
||||
</td>
|
||||
<tr>
|
||||
</tr>
|
||||
<td>
|
||||
<strong>班组</strong> 陈亮
|
||||
</td>
|
||||
<td>
|
||||
<strong>开线数量</strong> <i id="line_open_numbers">31/32</i>
|
||||
</td>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--右上角 生产进度 -->
|
||||
|
||||
</el-col>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="12">
|
||||
<div class="ibox">
|
||||
<div class="m-b-xs">
|
||||
<h5 style="font-size:20px;">生产进度</h5>
|
||||
<h2 id=shengchanjindu>65%</h2>
|
||||
<div id=finishedbox class="m-t-sm small">当班已完成: 1200/2500 (箱)</div>
|
||||
<el-progress id="shengchanjinduavg" :percentage="56" :format="format"></el-progress>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_zhengpin_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">正品率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_change_moulding_time" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均换模时间</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_density" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均密度</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_energy_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">产能达标率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>产线明细 </h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="line"
|
||||
label="线号"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Moulds"
|
||||
label="量产模具">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="FinishedQuantity"
|
||||
label="完成箱数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="GroupProcessTime"
|
||||
label="量产用时">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="NormalCapacity"
|
||||
label="标准产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="currentspeed"
|
||||
label="牵引产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="CapacityStandardObtainedRate"
|
||||
label="产能达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="CurrentYield"
|
||||
label="正品率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="AvgDensity"
|
||||
label="平均密度">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="MouldAndChangeMouldTime"
|
||||
label="换模型号-用时">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Person"
|
||||
label="人员">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getDashboardGroup} from '@/api/dashboard/fxdashboard'
|
||||
|
||||
let lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
|
||||
getDashboardGroup().then(response => {
|
||||
|
||||
var j;
|
||||
var avg_zhengpin_avg = 0;
|
||||
var avg_density = 0;
|
||||
var avg_energy_avg = 0;
|
||||
var avg_chang_moulding_time = 0;
|
||||
var sum_quantity = 0;
|
||||
var sum_currentfinishedquantity = 0;
|
||||
j = 0;
|
||||
|
||||
var data_ajax = response.data;
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
|
||||
|
||||
this.tableData.push({
|
||||
line: response.data[i].line,
|
||||
Moulds: response.data[i].Moulds,
|
||||
FinishedQuantity: response.data[i].FinishedQuantity,
|
||||
GroupProcessTime: (response.data[i].GroupTime * 1) - (response.data[i].GroupChangeMouldTime * 1),
|
||||
NormalCapacity: response.data[i].NormalCapacity,
|
||||
currentspeed: (response.data[i].currentspeed * 1).toFixed(0),
|
||||
CapacityStandardObtainedRate: (response.data[i].CapacityStandardObtainedRate * 100).toFixed(2) + '%',
|
||||
CurrentYield: (response.data[i].CurrentYield * 100).toFixed(2) + '%',
|
||||
AvgDensity: (response.data[i].AvgDensity * 1).toFixed(4),
|
||||
MouldAndChangeMouldTime: response.data[i].MouldAndChangeMouldTime,
|
||||
Person: response.data[i].Person,
|
||||
})
|
||||
|
||||
if (data_ajax[i].GroupChangeMouldTime !== 0) {
|
||||
avg_chang_moulding_time = avg_chang_moulding_time + (data_ajax[i].GroupChangeMouldTime) * 1;
|
||||
j = j + 1;
|
||||
}
|
||||
|
||||
avg_density = parseFloat(avg_density) + parseFloat(data_ajax[i].AvgDensity);
|
||||
|
||||
avg_energy_avg = avg_energy_avg + (data_ajax[i].CapacityStandardObtainedRate) * 1;
|
||||
|
||||
avg_zhengpin_avg = avg_zhengpin_avg + (data_ajax[i].CurrentYield) * 1;
|
||||
|
||||
sum_quantity = 2000;
|
||||
|
||||
sum_currentfinishedquantity = sum_currentfinishedquantity + (data_ajax[i].FinishedQuantity) * 1;
|
||||
|
||||
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById("chart_energy_avg"));
|
||||
const chart_zhengpin_avg = echarts.init(document.getElementById("chart_zhengpin_avg"));
|
||||
const chart_density = echarts.init(document.getElementById("chart_density"));
|
||||
const chart_change_moulding_time = echarts.init(document.getElementById("chart_change_moulding_time"));
|
||||
|
||||
|
||||
option_zhengpin_avg.series[0].data[0].value = (avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_zhengpin_avg.setOption(option_zhengpin_avg, true);
|
||||
|
||||
option_density.series[0].data[0].value = (avg_density / data_ajax.length).toFixed(3);
|
||||
chart_density.setOption(option_density, true);
|
||||
|
||||
option_change_moulding_time.series[0].data[0].value = (avg_chang_moulding_time / j).toFixed(0);
|
||||
chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
|
||||
option_energy_avg.series[0].data[0].value = (avg_energy_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_energy_avg.setOption(option_energy_avg, true);
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var colorTemplate_energy_avg = [//50-85 85-100 100-120
|
||||
[0.5, "rgba(255,0,0,0.8)"],
|
||||
[5 / 7, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_zhengpin_avg = [//50-75 75-85 85-100
|
||||
[6 / 10, "rgba(255,0,0,0.8)"],
|
||||
[7 / 10, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_density = [//0.4-0.42 红 0.4-0.38 0.38-0.36
|
||||
[1 / 3, "rgba(0,200,250,0.8)"],
|
||||
[2 / 3, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
var colorTemplate_change_moulding_time = [ //30-70 蓝 70-90 绿 90-120 红
|
||||
[4 / 9, "rgba(0,200,250,0.8)"],
|
||||
[6 / 9, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
|
||||
|
||||
var data_energy_avg = [{
|
||||
// name: "产能达标率",
|
||||
value: 50,
|
||||
}];
|
||||
|
||||
var data_zhengpin_avg = [{
|
||||
// name: "正品率",
|
||||
value: 0,
|
||||
}];
|
||||
var data_density = [{
|
||||
// name: "密度",
|
||||
value: 0,
|
||||
}];
|
||||
var data_change_moulding_time = [{
|
||||
// name: "换模时间",
|
||||
value: 0,
|
||||
}];
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option_energy_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 7, // 仪表盘刻度的分割段数,默认 10。
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_energy_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_energy_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_zhengpin_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 5, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_zhengpin_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_zhengpin_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_density = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{c}",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 0.36, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 0.42, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 6, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_density, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_density
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_change_moulding_time = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 30, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 9, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_change_moulding_time, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_change_moulding_time
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
721
ruoyi-ui/src/views/fx_dashboard/dashboard_lastday.vue
Normal file
721
ruoyi-ui/src/views/fx_dashboard/dashboard_lastday.vue
Normal file
@ -0,0 +1,721 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_zhengpin_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">正品率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_change_moulding_time" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均换模时间</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_density" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均密度</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_energy_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">产能达标率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>产线明细 </h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="line"
|
||||
label="线号"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Moulds"
|
||||
label="模具">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sumbox"
|
||||
label="完成箱数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_currentcapacity"
|
||||
label="平均实际产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_normalcapacity"
|
||||
label="平均标准产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="capacityrate"
|
||||
label="产能达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="yieldrate"
|
||||
label="正品达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_density"
|
||||
label="平均密度">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="lastchangemouldtime"
|
||||
label="上次换模时间">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getLastDay} from '@/api/dashboard/fxdashboard'
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
getLastDay().then(response => {
|
||||
|
||||
var j;
|
||||
var avg_zhengpin_avg = 0;
|
||||
var avg_density = 0;
|
||||
var avg_energy_avg = 0;
|
||||
var avg_chang_moulding_time = 0;
|
||||
var sum_quantity = 0;
|
||||
var sum_currentfinishedquantity = 0;
|
||||
j = 0;
|
||||
|
||||
var data_ajax = response.data;
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
|
||||
|
||||
this.tableData.push({
|
||||
line: response.data[i].line,
|
||||
Moulds: response.data[i].Moulds,
|
||||
sumbox: response.data[i].sumbox,
|
||||
avg_currentcapacity: (response.data[i].avg_currentcapacity * 1 * response.data[i].sum_box_meter / response.data[i].sum_device_meter).toFixed(2),
|
||||
avg_normalcapacity: (response.data[i].avg_normalcapacity * 1).toFixed(2),
|
||||
capacityrate: (response.data[i].avg_currentcapacity / response.data[i].avg_normalcapacity * response.data[i].sum_box_meter / response.data[i].sum_device_meter * 100).toFixed(2) + "%",
|
||||
yieldrate: (response.data[i].sum_box_meter / response.data[i].sum_device_meter * 100).toFixed(2) + "%",
|
||||
avg_density: (response.data[i].avg_density * 1).toFixed(4),
|
||||
lastchangemouldtime: (response.data[i].lastchangemouldtime),
|
||||
|
||||
})
|
||||
|
||||
if (data_ajax[i].lastchangemouldtime !== 0) {
|
||||
avg_chang_moulding_time = avg_chang_moulding_time + (data_ajax[i].lastchangemouldtime) * 1;
|
||||
j = j + 1;
|
||||
}
|
||||
avg_density = parseFloat(avg_density) + parseFloat(data_ajax[i].avg_density);
|
||||
avg_energy_avg = avg_energy_avg + (data_ajax[i].avg_currentcapacity / data_ajax[i].avg_normalcapacity);
|
||||
avg_zhengpin_avg = avg_zhengpin_avg + (data_ajax[i].sum_box_meter / data_ajax[i].sum_device_meter);
|
||||
sum_quantity = 2000;
|
||||
sum_currentfinishedquantity = sum_currentfinishedquantity + (data_ajax[i].sumbox) * 1;
|
||||
|
||||
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById("chart_energy_avg"));
|
||||
const chart_zhengpin_avg = echarts.init(document.getElementById("chart_zhengpin_avg"));
|
||||
const chart_density = echarts.init(document.getElementById("chart_density"));
|
||||
const chart_change_moulding_time = echarts.init(document.getElementById("chart_change_moulding_time"));
|
||||
|
||||
// 设置仪表盘数据
|
||||
option_zhengpin_avg.series[0].data[0].value = (avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_zhengpin_avg.setOption(option_zhengpin_avg, true);
|
||||
|
||||
option_density.series[0].data[0].value = (avg_density / data_ajax.length).toFixed(3);
|
||||
chart_density.setOption(option_density, true);
|
||||
|
||||
//option_change_moulding_time.series[0].data[0].value = (avg_chang_moulding_time / data_ajax.length).toFixed(0);
|
||||
option_change_moulding_time.series[0].data[0].value = 0 ;
|
||||
chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
|
||||
option_energy_avg.series[0].data[0].value = (avg_energy_avg / data_ajax.length * avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_energy_avg.setOption(option_energy_avg, true);
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var colorTemplate_energy_avg = [//50-85 85-100 100-120
|
||||
[0.5, "rgba(255,0,0,0.8)"],
|
||||
[5 / 7, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_zhengpin_avg = [//50-75 75-85 85-100
|
||||
[6 / 10, "rgba(255,0,0,0.8)"],
|
||||
[7 / 10, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_density = [//0.4-0.42 红 0.4-0.38 0.38-0.36
|
||||
[1 / 3, "rgba(0,200,250,0.8)"],
|
||||
[2 / 3, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
var colorTemplate_change_moulding_time = [ //30-70 蓝 70-90 绿 90-120 红
|
||||
[4 / 9, "rgba(0,200,250,0.8)"],
|
||||
[6 / 9, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
|
||||
|
||||
var data_energy_avg = [{
|
||||
// name: "产能达标率",
|
||||
value: 50,
|
||||
}];
|
||||
|
||||
var data_zhengpin_avg = [{
|
||||
// name: "正品率",
|
||||
value: 0,
|
||||
}];
|
||||
var data_density = [{
|
||||
// name: "密度",
|
||||
value: 0,
|
||||
}];
|
||||
var data_change_moulding_time = [{
|
||||
// name: "换模时间",
|
||||
value: 0,
|
||||
}];
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option_energy_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 7, // 仪表盘刻度的分割段数,默认 10。
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_energy_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_energy_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_zhengpin_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 5, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_zhengpin_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_zhengpin_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_density = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{c}",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 0.36, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 0.42, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 6, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_density, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_density
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_change_moulding_time = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 30, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 9, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_change_moulding_time, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_change_moulding_time
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
193
ruoyi-ui/src/views/fx_density/fx_density_30d.vue
Normal file
193
ruoyi-ui/src/views/fx_density/fx_density_30d.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div >
|
||||
<el-container >
|
||||
<div id="chart_density_avg" style="width: 90%;height: 600px;top:20px"></div>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import { getDensity30Day } from '@/api/dashboard/density'
|
||||
|
||||
let lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
getDensity30Day().then(response => {
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById('chart_density_avg'))
|
||||
|
||||
option_energy_avg.xAxis[0].data = lineChartData.xAxisData
|
||||
option_energy_avg.series[0].data = lineChartData.actualData
|
||||
option_energy_avg.title.text = '30天平均密度'
|
||||
option_energy_avg.yAxis[0].min = (Math.min.apply(null, lineChartData.actualData).toFixed(2)*1-0.01)
|
||||
option_energy_avg.yAxis[0].max = (Math.max.apply(null, lineChartData.actualData).toFixed(2)*1+0.01)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
chart_energy_avg.setOption(option_energy_avg, true)
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const option_energy_avg = {
|
||||
title: {
|
||||
text: '',
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 18
|
||||
},
|
||||
itemGap: 5,
|
||||
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['1#', '2#', '3#', '30#'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
min: 0.36,
|
||||
max: 0.42,
|
||||
|
||||
// splitNumber: 12,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#DDD'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#999'
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '密度',
|
||||
type: 'line',
|
||||
data: [80, 72],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 8,
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#A9F387' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#48D8BF' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff',
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: '#A9F387'
|
||||
}
|
||||
},
|
||||
smooth: false,
|
||||
markLine: {
|
||||
label: {
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
precision: 4,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: 'red'
|
||||
},
|
||||
data: [{
|
||||
name: '目标',
|
||||
yAxis: '0.38'
|
||||
}, {
|
||||
type: 'average',
|
||||
name: '平均'
|
||||
}]
|
||||
}
|
||||
}]
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
195
ruoyi-ui/src/views/fx_density/fx_density_72h.vue
Normal file
195
ruoyi-ui/src/views/fx_density/fx_density_72h.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div >
|
||||
<el-container >
|
||||
<div id="chart_density_avg" style="width: 90%;height: 600px;top:20px"></div>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import { getDensity72h } from '@/api/dashboard/density'
|
||||
|
||||
let lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density72h',
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
getDensity72h().then(response => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById('chart_density_avg'))
|
||||
|
||||
option_energy_avg.xAxis[0].data = lineChartData.xAxisData
|
||||
option_energy_avg.series[0].data = lineChartData.actualData
|
||||
option_energy_avg.title.text = '72小时平均密度'
|
||||
option_energy_avg.yAxis[0].min = (Math.min.apply(null, lineChartData.actualData).toFixed(2)*1-0.01)
|
||||
option_energy_avg.yAxis[0].max = (Math.max.apply(null, lineChartData.actualData).toFixed(2)*1+0.01)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
chart_energy_avg.setOption(option_energy_avg, true)
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const option_energy_avg = {
|
||||
title: {
|
||||
text: '',
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 18
|
||||
},
|
||||
itemGap: 5,
|
||||
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['1#', '2#', '3#', '30#'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
min: 0.36,
|
||||
max: 0.42,
|
||||
|
||||
// splitNumber: 12,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#DDD'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#999'
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '密度',
|
||||
type: 'line',
|
||||
data: [80, 72],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 8,
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#A9F387' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#48D8BF' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff',
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: '#A9F387'
|
||||
}
|
||||
},
|
||||
smooth: false,
|
||||
markLine: {
|
||||
label: {
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
precision: 4,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: 'red'
|
||||
},
|
||||
data: [{
|
||||
name: '目标',
|
||||
yAxis: '0.38'
|
||||
}, {
|
||||
type: 'average',
|
||||
name: '平均'
|
||||
}]
|
||||
}
|
||||
}]
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
188
ruoyi-ui/src/views/fx_density/fx_density_group.vue
Normal file
188
ruoyi-ui/src/views/fx_density/fx_density_group.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div >
|
||||
<el-container >
|
||||
<div id="chart_density_avg" style="width: 90%;height: 600px;top:20px"></div>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import { getDensityGroup } from '@/api/dashboard/density'
|
||||
|
||||
let lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
getDensityGroup().then(response => {
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById('chart_density_avg'))
|
||||
|
||||
option_energy_avg.xAxis[0].data = lineChartData.xAxisData
|
||||
option_energy_avg.series[0].data = lineChartData.actualData
|
||||
option_energy_avg.title.text = '当班平均密度'
|
||||
option_energy_avg.yAxis[0].min = (Math.min.apply(null, lineChartData.actualData).toFixed(2)*1-0.01)
|
||||
option_energy_avg.yAxis[0].max = (Math.max.apply(null, lineChartData.actualData).toFixed(2)*1+0.01)
|
||||
|
||||
chart_energy_avg.setOption(option_energy_avg, true)
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const option_energy_avg = {
|
||||
title: {
|
||||
text: '',
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 18
|
||||
},
|
||||
itemGap: 5,
|
||||
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['1#', '2#', '3#', '30#'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
min: 0.36,
|
||||
max: 0.42,
|
||||
|
||||
// splitNumber: 12,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#DDD'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#999'
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '密度',
|
||||
type: 'line',
|
||||
data: [80, 72],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 8,
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#A9F387' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#48D8BF' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff',
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: '#A9F387'
|
||||
}
|
||||
},
|
||||
smooth: false,
|
||||
markLine: {
|
||||
label: {
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
precision: 4,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: 'red'
|
||||
},
|
||||
data: [{
|
||||
name: '目标',
|
||||
yAxis: '0.38'
|
||||
}, {
|
||||
type: 'average',
|
||||
name: '平均'
|
||||
}]
|
||||
}
|
||||
}]
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
326
ruoyi-ui/src/views/fx_technologist/fx_sample_all.vue
Normal file
326
ruoyi-ui/src/views/fx_technologist/fx_sample_all.vue
Normal file
@ -0,0 +1,326 @@
|
||||
<template>
|
||||
|
||||
|
||||
<div class="dashboard-editor-container">
|
||||
<div class="ibox-title">
|
||||
<el-row :gutter="32">
|
||||
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
|
||||
<b>选择时间范围</b>
|
||||
|
||||
<el-date-picker
|
||||
v-model="daterange_time1"
|
||||
align="right"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
<el-select style="width: 90px" v-model="daterange_group_value1" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<b>--</b>
|
||||
<el-date-picker
|
||||
v-model="daterange_time2"
|
||||
align="right"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
<el-select style="width: 90px" v-model="daterange_group_value2" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button @click="getDataRange" type="primary">查询</el-button>
|
||||
<el-button @click="getData" type="success">所有数据</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
|
||||
<div class="ibox table-responsive">
|
||||
<div class="ibox-title">
|
||||
<h3>汇总表 </h3>
|
||||
</div>
|
||||
<div id="tableL01" class="table table-striped table-bordered table-hover float-left">
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import $ from 'jquery'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
import 'bootstrap/dist/js/bootstrap.min'
|
||||
import 'bootstrap-table/dist/bootstrap-table.min.css'
|
||||
import 'bootstrap-table/dist/bootstrap-table.min'
|
||||
import 'popper.js/dist/popper.min'
|
||||
import 'bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.min.css'
|
||||
import 'bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.min.js'
|
||||
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {ALL, AllDataDataRange} from '@/api/dashboard/fx_technologist'
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'fx_sample_all',
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
options: [{
|
||||
value: '08:00:01',
|
||||
label: '白班'
|
||||
}, {
|
||||
value: '20:00:00',
|
||||
label: '夜班'
|
||||
}],
|
||||
daterange_group_value1: [],
|
||||
daterange_group_value2: [],
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
daterange_time1: '',
|
||||
daterange_time2: '',
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
this.daterange_group_value1 = "08:00:01"
|
||||
this.daterange_group_value2 = "08:00:01"
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
getData() {
|
||||
|
||||
ALL().then(response => {
|
||||
|
||||
|
||||
var tableColumns = [
|
||||
{field: 'Technologist', title: '工艺员', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: '全称', title: '客户', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{
|
||||
field: 'MouldingStyleCode',
|
||||
title: '框型',
|
||||
sortable: true,
|
||||
filterControl: 'input',
|
||||
filterStrictSearch: false
|
||||
},
|
||||
{field: 'SalesMan', title: '销售员', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: 'TagName', title: '类型', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: 'ProductionLine', title: '产品线', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: 'NewMould', title: '是否新模', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: '地区', title: '区域', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: '经理审核时间', title: '下单日期', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '分解天数', title: '分解(天)', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{
|
||||
field: 'FactMakingDate',
|
||||
title: '完成时间',
|
||||
sortable: true,
|
||||
filterControl: 'input',
|
||||
filterStrictSearch: false
|
||||
},
|
||||
{field: '交期天数', title: '交期(天)', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '客户是否下单', title: '是否确认', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: '折算人民币价税合计', title: '销售金额', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '客户数量', title: '客户数量', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{
|
||||
field: 'FinishedDensity',
|
||||
title: '打样密度',
|
||||
sortable: true,
|
||||
filterControl: 'input',
|
||||
filterStrictSearch: false
|
||||
},
|
||||
{field: 'FinishedSpeed', title: '打样产能', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: 'FinishedBy', title: '打样人员', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
];
|
||||
|
||||
$('#tableL01').bootstrapTable('destroy');
|
||||
|
||||
$('#tableL01').bootstrapTable({//表格初始化
|
||||
columns: tableColumns, //表头
|
||||
data: JSON.parse(response.msg), //通过ajax返回的数据
|
||||
width: 30,
|
||||
// height:900,
|
||||
method: 'get',
|
||||
// pageSize: 50,
|
||||
pageNumber: 1,
|
||||
pageList: [],
|
||||
cache: false,
|
||||
searchText: '',
|
||||
filterControl: true,
|
||||
disableUnusedSelectOptions: true, striped: true,
|
||||
pagination: true,
|
||||
sidePagination: 'client',
|
||||
searchAlign: 'left',
|
||||
pageSize: 20,
|
||||
iconSize: 'lg',
|
||||
// search: true,
|
||||
|
||||
showRefresh: false,
|
||||
showExport: false,
|
||||
showFooter: true,
|
||||
// exportTypes: ['csv', 'txt', 'xml'],
|
||||
clickToSelect: true,
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
,
|
||||
|
||||
getDataRange() {
|
||||
const fDateStart = this.daterange_time1 + ' ' + this.daterange_group_value1
|
||||
const fDateEnd = this.daterange_time2 + ' ' + this.daterange_group_value2
|
||||
AllDataDataRange(fDateStart, fDateEnd).then(response => {
|
||||
|
||||
|
||||
var tableColumns = [
|
||||
{field: 'Technologist', title: '工艺员', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: '全称', title: '客户', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{
|
||||
field: 'MouldingStyleCode',
|
||||
title: '框型',
|
||||
sortable: true,
|
||||
filterControl: 'input',
|
||||
filterStrictSearch: false
|
||||
},
|
||||
{field: 'SalesMan', title: '销售员', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: 'TagName', title: '类型', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: 'ProductionLine', title: '产品线', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: 'SalesPerson', title: '是否新模', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '地区', title: '区域', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: '经理审核时间', title: '下单日期', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '分解天数', title: '分解天数', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{
|
||||
field: 'ExpectMakingDate',
|
||||
title: '完成时间',
|
||||
sortable: true,
|
||||
filterControl: 'input',
|
||||
filterStrictSearch: false
|
||||
},
|
||||
{field: '交期天数', title: '交期天数', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '客户是否下单', title: '打样客户是否确认', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '折算人民币价税合计', title: '销售金额', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '客户数量', title: '客户数量', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{
|
||||
field: 'FinishedDensity',
|
||||
title: '打样密度',
|
||||
sortable: true,
|
||||
filterControl: 'input',
|
||||
filterStrictSearch: false
|
||||
},
|
||||
{field: 'FinishedSpeed', title: '打样产能', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: 'FinishedBy', title: '打样人员', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
];
|
||||
|
||||
$('#tableL01').bootstrapTable('destroy');
|
||||
|
||||
$('#tableL01').bootstrapTable({//表格初始化
|
||||
columns: tableColumns, //表头
|
||||
data: JSON.parse(response.msg), //通过ajax返回的数据
|
||||
width: 30,
|
||||
// height:900,
|
||||
method: 'get',
|
||||
// pageSize: 50,
|
||||
pageNumber: 1,
|
||||
pageList: [],
|
||||
cache: false,
|
||||
searchText: '',
|
||||
filterControl: true,
|
||||
disableUnusedSelectOptions: true, striped: true,
|
||||
pagination: true,
|
||||
sidePagination: 'client',
|
||||
searchAlign: 'left',
|
||||
pageSize: 20,
|
||||
iconSize: 'lg',
|
||||
// search: true,
|
||||
|
||||
showRefresh: false,
|
||||
showExport: false,
|
||||
showFooter: true,
|
||||
// exportTypes: ['csv', 'txt', 'xml'],
|
||||
clickToSelect: true,
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
161
ruoyi-ui/src/views/fx_technologist/fx_sample_best_selling.vue
Normal file
161
ruoyi-ui/src/views/fx_technologist/fx_sample_best_selling.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>ODM爆款 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataODM"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="MouldingStyleCode"
|
||||
sortable
|
||||
label="型号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="CNY"
|
||||
sortable
|
||||
label="金额">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="1" :lg="1">
|
||||
<h1></h1>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>OEM爆款 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataOEM"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="MouldingStyleCode"
|
||||
sortable
|
||||
label="型号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="CNY"
|
||||
sortable
|
||||
label="金额">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getBestOEM} from '@/api/dashboard/fx_technologist'
|
||||
import {getBestODM} from '@/api/dashboard/fx_technologist'
|
||||
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'fx_sample_confirmation',
|
||||
data() {
|
||||
return {
|
||||
tableDataODM: [],
|
||||
tableDataOEM: []
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
getBestOEM().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataOEM.push({
|
||||
MouldingStyleCode: response.data[i].MouldingStyleCode,
|
||||
CNY: ((response.data[i].CNY)*1).toFixed(2)
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
getBestODM().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataODM.push({
|
||||
MouldingStyleCode: response.data[i].MouldingStyleCode,
|
||||
CNY: ((response.data[i].CNY)*1).toFixed(2)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
124
ruoyi-ui/src/views/fx_technologist/fx_sample_confirmation.vue
Normal file
124
ruoyi-ui/src/views/fx_technologist/fx_sample_confirmation.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>打样确认率 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="NWX"
|
||||
sortable
|
||||
label="内外销">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ConfirmationNum"
|
||||
sortable
|
||||
label="确认数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="SampleNum"
|
||||
sortable
|
||||
label="打样数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Avg"
|
||||
sortable
|
||||
label="确认率">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getConfirmation} from '@/api/dashboard/fx_technologist'
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'fx_sample_confirmation',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
getConfirmation().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableData.push({
|
||||
NWX: response.data[i].NWX,
|
||||
ConfirmationNum: (response.data[i].ConfirmationNum),
|
||||
SampleNum: (response.data[i].SampleNum),
|
||||
Avg: ((response.data[i].ConfirmationNum) / (response.data[i].SampleNum) * 100).toFixed(0) + '%'
|
||||
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
296
ruoyi-ui/src/views/fx_technologist/fx_sample_day_report.vue
Normal file
296
ruoyi-ui/src/views/fx_technologist/fx_sample_day_report.vue
Normal file
@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>新订单 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataDayFinishedSampleOrder"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="MouldingStyleCode"
|
||||
sortable
|
||||
label="型号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Technologist"
|
||||
sortable
|
||||
filter-method="filterHandler"
|
||||
filters="[{text: '唐力', value: '唐力'}, {text: '唐加名', value: '唐加名'}]"
|
||||
label="工艺员">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="SalesMan"
|
||||
sortable
|
||||
label="销售">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="CNY"
|
||||
sortable
|
||||
label="该款12个月销售金额">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="1" :lg="1">
|
||||
<h1></h1>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>开模单 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataDayNewMould"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="UserName"
|
||||
sortable
|
||||
label="工艺员">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="new_or_fix"
|
||||
sortable
|
||||
label="分类">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="MouldCode"
|
||||
sortable
|
||||
label="模具">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>打样完成 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataDayFinishedSample"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="MouldingStyleCode"
|
||||
sortable
|
||||
label="型号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Technologist"
|
||||
sortable
|
||||
label="工艺员">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="FinishedDensity"
|
||||
sortable
|
||||
label="密度">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="FinishedSpeed"
|
||||
sortable
|
||||
label="产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="FinishedBy"
|
||||
sortable
|
||||
label="打样员">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="UseDay"
|
||||
sortable
|
||||
label="交期">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="1" :lg="1">
|
||||
<h1></h1>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>BOM完成 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataDayFinishedBOM"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="MouldingStyleCode"
|
||||
sortable
|
||||
label="型号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Maker"
|
||||
sortable
|
||||
label="制作人">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {DayFinishedSampleOrder} from '@/api/dashboard/fx_technologist'
|
||||
import {DayNewMould} from '@/api/dashboard/fx_technologist'
|
||||
import {DayFinishedSample} from '@/api/dashboard/fx_technologist'
|
||||
import {DayFinishedBOM} from '@/api/dashboard/fx_technologist'
|
||||
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'fx_sample_confirmation',
|
||||
data() {
|
||||
return {
|
||||
tableDataDayFinishedSampleOrder: [],
|
||||
tableDataDayNewMould: [],
|
||||
tableDataDayFinishedSample: [],
|
||||
tableDataDayFinishedBOM: [],
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
DayFinishedSampleOrder().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataDayFinishedSampleOrder.push({
|
||||
MouldingStyleCode: response.data[i].MouldingStyleCode,
|
||||
CNY: ((response.data[i].CNY)*1).toFixed(2),
|
||||
SalesMan: response.data[i].SalesMan,
|
||||
Technologist: response.data[i].Technologist,
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
DayNewMould().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataDayNewMould.push({
|
||||
UserName: response.data[i].UserName,
|
||||
new_or_fix: response.data[i].new_or_fix,
|
||||
MouldCode: response.data[i].MouldCode,
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
DayFinishedSample().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataDayFinishedSample.push({
|
||||
MouldingStyleCode: response.data[i].MouldingStyleCode,
|
||||
Technologist: response.data[i].Technologist,
|
||||
FinishedDensity: response.data[i].FinishedDensity,
|
||||
FinishedSpeed: response.data[i].FinishedSpeed,
|
||||
FinishedBy: response.data[i].FinishedBy,
|
||||
UseDay: response.data[i].UseDay,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
DayFinishedBOM().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataDayFinishedBOM.push({
|
||||
MouldingStyleCode: response.data[i].MouldingStyleCode,
|
||||
Maker: response.data[i].Maker,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
185
ruoyi-ui/src/views/fx_technologist/fx_sample_sample_use_day.vue
Normal file
185
ruoyi-ui/src/views/fx_technologist/fx_sample_sample_use_day.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>已完成打样 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataFinished"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="Technologist"
|
||||
sortable
|
||||
label="工艺员">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="num"
|
||||
sortable
|
||||
label="数量">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_f"
|
||||
sortable
|
||||
label="平均分解(天)">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_j"
|
||||
sortable
|
||||
label="平均交期(天)">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="1" :lg="1">
|
||||
<h1></h1>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>未完成打样 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataUnFinished"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="Technologist"
|
||||
sortable
|
||||
label="工艺员">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="num"
|
||||
sortable
|
||||
label="数量">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_use_date"
|
||||
sortable
|
||||
label="平均已过天数(天)">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="day15num"
|
||||
sortable
|
||||
label="超15天数量">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getUnFinishedSampleAvgDay} from '@/api/dashboard/fx_technologist'
|
||||
import {getFinishedSampleAvgDay} from '@/api/dashboard/fx_technologist'
|
||||
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'fx_sample_confirmation',
|
||||
data() {
|
||||
return {
|
||||
tableDataFinished: [],
|
||||
tableDataUnFinished: []
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
getFinishedSampleAvgDay().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataFinished.push({
|
||||
Technologist: response.data[i].Technologist,
|
||||
avg_f: ((response.data[i].avg_f)*1).toFixed(2),
|
||||
num: response.data[i].num,
|
||||
avg_j: ((response.data[i].avg_j)*1).toFixed(2)
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
getUnFinishedSampleAvgDay().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataUnFinished.push({
|
||||
Technologist: response.data[i].Technologist,
|
||||
num: response.data[i].num,
|
||||
day15num: response.data[i].day15num,
|
||||
avg_use_date: ((response.data[i].avg_use_date)*1)
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,98 +1,782 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData" />
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PanelGroup from './dashboard/PanelGroup'
|
||||
import LineChart from './dashboard/LineChart'
|
||||
import RaddarChart from './dashboard/RaddarChart'
|
||||
import PieChart from './dashboard/PieChart'
|
||||
import BarChart from './dashboard/BarChart'
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<el-row :gutter="32">
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="12" style="height: 170px">
|
||||
|
||||
|
||||
<table class="ibox" style="font-size:24px;width: 100%;margin-top: 50px" >
|
||||
<tbody>
|
||||
<tr>
|
||||
<!-- <td>
|
||||
<strong>日期</strong> <i id="groupdate"></i>
|
||||
</td> -->
|
||||
<td id="groupdate">
|
||||
</td>
|
||||
<td>
|
||||
<strong>班次</strong> 白班
|
||||
</td>
|
||||
<tr>
|
||||
</tr>
|
||||
<td>
|
||||
<strong>班组</strong> 陈亮
|
||||
</td>
|
||||
<td>
|
||||
<strong>开线数量</strong> <i id="line_open_numbers">31/32</i>
|
||||
</td>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--右上角 生产进度 -->
|
||||
|
||||
</el-col>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="12">
|
||||
<div class="ibox">
|
||||
<div class="m-b-xs">
|
||||
<h5 style="font-size:20px;">生产进度</h5>
|
||||
<h2 id=shengchanjindu>65%</h2>
|
||||
<div id=finishedbox class="m-t-sm small">当班已完成: 1200/2500 (箱)</div>
|
||||
<el-progress id="shengchanjinduavg" :percentage="56" :format="format"></el-progress>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_zhengpin_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">正品率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_change_moulding_time" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均换模时间</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_density" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均密度</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_energy_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">产能达标率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>产线明细 </h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="line"
|
||||
label="线号"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Moulds"
|
||||
label="量产模具">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="FinishedQuantity"
|
||||
label="完成箱数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="GroupProcessTime"
|
||||
label="量产用时">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="NormalCapacity"
|
||||
label="标准产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="currentspeed"
|
||||
label="牵引产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="CapacityStandardObtainedRate"
|
||||
label="产能达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="CurrentYield"
|
||||
label="正品率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="AvgDensity"
|
||||
label="平均密度">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="MouldAndChangeMouldTime"
|
||||
label="换模型号-用时">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Person"
|
||||
label="人员">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from "./dashboard/mixins/resize";
|
||||
import {getDashboardGroup} from '@/api/dashboard/fxdashboard'
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
getDashboardGroup().then(response => {
|
||||
|
||||
var j;
|
||||
var avg_zhengpin_avg = 0;
|
||||
var avg_density = 0;
|
||||
var avg_energy_avg = 0;
|
||||
var avg_chang_moulding_time = 0;
|
||||
var sum_quantity = 0;
|
||||
var sum_currentfinishedquantity = 0;
|
||||
j = 0;
|
||||
|
||||
var data_ajax = response.data;
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
|
||||
|
||||
this.tableData.push({
|
||||
line: response.data[i].line,
|
||||
Moulds: response.data[i].Moulds,
|
||||
FinishedQuantity: response.data[i].FinishedQuantity,
|
||||
GroupProcessTime: (response.data[i].GroupTime * 1) - (response.data[i].GroupChangeMouldTime * 1),
|
||||
NormalCapacity: response.data[i].NormalCapacity,
|
||||
currentspeed: (response.data[i].currentspeed * 1).toFixed(0),
|
||||
CapacityStandardObtainedRate: (response.data[i].CapacityStandardObtainedRate * 100).toFixed(2) + '%',
|
||||
CurrentYield: (response.data[i].CurrentYield * 100).toFixed(2) + '%',
|
||||
AvgDensity: (response.data[i].AvgDensity * 1).toFixed(4),
|
||||
MouldAndChangeMouldTime: response.data[i].MouldAndChangeMouldTime,
|
||||
Person: response.data[i].Person,
|
||||
})
|
||||
console.log(data_ajax)
|
||||
|
||||
if (data_ajax[i].GroupChangeMouldTime !== 0) {
|
||||
avg_chang_moulding_time = avg_chang_moulding_time + (data_ajax[i].GroupChangeMouldTime) * 1;
|
||||
j = j + 1;
|
||||
}
|
||||
|
||||
avg_density = parseFloat(avg_density) + parseFloat(data_ajax[i].AvgDensity);
|
||||
|
||||
avg_energy_avg = avg_energy_avg + (data_ajax[i].CapacityStandardObtainedRate) * 1;
|
||||
|
||||
avg_zhengpin_avg = avg_zhengpin_avg + (data_ajax[i].CurrentYield) * 1;
|
||||
|
||||
sum_quantity = 2000;
|
||||
|
||||
sum_currentfinishedquantity = sum_currentfinishedquantity + (data_ajax[i].FinishedQuantity) * 1;
|
||||
|
||||
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById("chart_energy_avg"));
|
||||
const chart_zhengpin_avg = echarts.init(document.getElementById("chart_zhengpin_avg"));
|
||||
const chart_density = echarts.init(document.getElementById("chart_density"));
|
||||
const chart_change_moulding_time = echarts.init(document.getElementById("chart_change_moulding_time"));
|
||||
|
||||
|
||||
option_zhengpin_avg.series[0].data[0].value = (avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_zhengpin_avg.setOption(option_zhengpin_avg, true);
|
||||
|
||||
option_density.series[0].data[0].value = (avg_density / data_ajax.length).toFixed(3);
|
||||
chart_density.setOption(option_density, true);
|
||||
|
||||
option_change_moulding_time.series[0].data[0].value = (avg_chang_moulding_time / j).toFixed(0);
|
||||
chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
|
||||
option_energy_avg.series[0].data[0].value = (avg_energy_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_energy_avg.setOption(option_energy_avg, true);
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var colorTemplate_energy_avg = [//50-85 85-100 100-120
|
||||
[0.5, "rgba(255,0,0,0.8)"],
|
||||
[5 / 7, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_zhengpin_avg = [//50-75 75-85 85-100
|
||||
[6 / 10, "rgba(255,0,0,0.8)"],
|
||||
[7 / 10, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_density = [//0.4-0.42 红 0.4-0.38 0.38-0.36
|
||||
[1 / 3, "rgba(0,200,250,0.8)"],
|
||||
[2 / 3, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
var colorTemplate_change_moulding_time = [ //30-70 蓝 70-90 绿 90-120 红
|
||||
[4 / 9, "rgba(0,200,250,0.8)"],
|
||||
[6 / 9, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
|
||||
|
||||
var data_energy_avg = [{
|
||||
// name: "产能达标率",
|
||||
value: 50,
|
||||
}];
|
||||
|
||||
var data_zhengpin_avg = [{
|
||||
// name: "正品率",
|
||||
value: 0,
|
||||
}];
|
||||
var data_density = [{
|
||||
// name: "密度",
|
||||
value: 0,
|
||||
}];
|
||||
var data_change_moulding_time = [{
|
||||
// name: "换模时间",
|
||||
value: 0,
|
||||
}];
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option_energy_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 7, // 仪表盘刻度的分割段数,默认 10。
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_energy_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_energy_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_zhengpin_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 5, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_zhengpin_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_zhengpin_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_density = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{c}",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 0.36, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 0.42, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 6, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_density, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_density
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_change_moulding_time = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 30, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 9, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_change_moulding_time, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_change_moulding_time
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
98
ruoyi-ui/src/views/index_bak.vue
Normal file
98
ruoyi-ui/src/views/index_bak.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData" />
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PanelGroup from './dashboard/PanelGroup'
|
||||
import LineChart from './dashboard/LineChart'
|
||||
import RaddarChart from './dashboard/RaddarChart'
|
||||
import PieChart from './dashboard/PieChart'
|
||||
import BarChart from './dashboard/BarChart'
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,203 +1,203 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<h3 class="title">若依后台管理系统</h3>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
auto-complete="off"
|
||||
placeholder="密码"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input
|
||||
v-model="loginForm.code"
|
||||
auto-complete="off"
|
||||
placeholder="验证码"
|
||||
style="width: 63%"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
||||
<el-form-item style="width:100%;">
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="medium"
|
||||
type="primary"
|
||||
style="width:100%;"
|
||||
@click.native.prevent="handleLogin"
|
||||
>
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>Copyright © 2018-2019 ruoyi.vip All Rights Reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodeImg } from "@/api/login";
|
||||
import Cookies from "js-cookie";
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
return {
|
||||
codeUrl: "",
|
||||
cookiePassword: "",
|
||||
loginForm: {
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
rememberMe: false,
|
||||
code: "",
|
||||
uuid: ""
|
||||
},
|
||||
loginRules: {
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "用户名不能为空" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "密码不能为空" }
|
||||
],
|
||||
code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
|
||||
},
|
||||
loading: false,
|
||||
redirect: undefined
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function(route) {
|
||||
this.redirect = route.query && route.query.redirect;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCode();
|
||||
this.getCookie();
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
getCodeImg().then(res => {
|
||||
this.codeUrl = "data:image/gif;base64," + res.img;
|
||||
this.loginForm.uuid = res.uuid;
|
||||
});
|
||||
},
|
||||
getCookie() {
|
||||
const username = Cookies.get("username");
|
||||
const password = Cookies.get("password");
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||
};
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
||||
} else {
|
||||
Cookies.remove("username");
|
||||
Cookies.remove("password");
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
this.$store
|
||||
.dispatch("Login", this.loginForm)
|
||||
.then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" });
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
this.getCode();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-image: url("../assets/image/login-background.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
width: 400px;
|
||||
padding: 25px 25px 5px 25px;
|
||||
.el-input {
|
||||
height: 38px;
|
||||
input {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<h3 class="title">英科智能车间系统</h3>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
auto-complete="off"
|
||||
placeholder="密码"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input
|
||||
v-model="loginForm.code"
|
||||
auto-complete="off"
|
||||
placeholder="验证码"
|
||||
style="width: 63%"
|
||||
@keyup.enter.native="handleLogin"
|
||||
>
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
||||
<el-form-item style="width:100%;">
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="medium"
|
||||
type="primary"
|
||||
style="width:100%;"
|
||||
@click.native.prevent="handleLogin"
|
||||
>
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>Copyright © 2020 Intco All Rights Reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodeImg } from "@/api/login";
|
||||
import Cookies from "js-cookie";
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
return {
|
||||
codeUrl: "",
|
||||
cookiePassword: "",
|
||||
loginForm: {
|
||||
username: "",
|
||||
password: "",
|
||||
rememberMe: false,
|
||||
code: "",
|
||||
uuid: ""
|
||||
},
|
||||
loginRules: {
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "用户名不能为空" }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "密码不能为空" }
|
||||
],
|
||||
code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
|
||||
},
|
||||
loading: false,
|
||||
redirect: undefined
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function(route) {
|
||||
this.redirect = route.query && route.query.redirect;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCode();
|
||||
this.getCookie();
|
||||
},
|
||||
methods: {
|
||||
getCode() {
|
||||
getCodeImg().then(res => {
|
||||
this.codeUrl = "data:image/gif;base64," + res.img;
|
||||
this.loginForm.uuid = res.uuid;
|
||||
});
|
||||
},
|
||||
getCookie() {
|
||||
const username = Cookies.get("username");
|
||||
const password = Cookies.get("password");
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||
};
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
||||
} else {
|
||||
Cookies.remove("username");
|
||||
Cookies.remove("password");
|
||||
Cookies.remove('rememberMe');
|
||||
}
|
||||
this.$store
|
||||
.dispatch("Login", this.loginForm)
|
||||
.then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" });
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
this.getCode();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-image: url("../assets/image/login-background.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
width: 400px;
|
||||
padding: 25px 25px 5px 25px;
|
||||
.el-input {
|
||||
height: 38px;
|
||||
input {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -133,7 +133,7 @@
|
||||
|
||||
<!-- 添加或修改定时任务对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="任务名称" prop="jobName">
|
||||
@ -397,7 +397,7 @@ export default {
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return runJob(row.jobId, row.jobGroup);
|
||||
}).then(() => {
|
||||
}).then(function() {
|
||||
this.msgSuccess("执行成功");
|
||||
}).catch(function() {});
|
||||
},
|
||||
@ -438,6 +438,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -446,6 +448,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -87,7 +87,7 @@
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['monitor:job:export']"
|
||||
v-hasPermi="['monitor:jobLog:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -196,7 +196,9 @@ export default {
|
||||
jobName: undefined,
|
||||
jobGroup: undefined,
|
||||
status: undefined
|
||||
}
|
||||
},
|
||||
// 表单参数
|
||||
form: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
<el-table-column label="访问编号" align="center" prop="infoId" />
|
||||
<el-table-column label="用户名称" align="center" prop="userName" />
|
||||
<el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录地点" align="center" prop="loginLocation" />
|
||||
<el-table-column label="浏览器" align="center" prop="browser" />
|
||||
<el-table-column label="操作系统" align="center" prop="os" />
|
||||
<el-table-column label="登录状态" align="center" prop="status" :formatter="statusFormat" />
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
<el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="部门名称" align="center" prop="deptName" />
|
||||
<el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录地点" align="center" prop="loginLocation" />
|
||||
<el-table-column label="浏览器" align="center" prop="browser" />
|
||||
<el-table-column label="操作系统" align="center" prop="os" />
|
||||
<el-table-column label="登录时间" align="center" prop="loginTime" width="180">
|
||||
|
||||
@ -110,7 +110,7 @@
|
||||
<el-table-column label="请求方式" align="center" prop="requestMethod" />
|
||||
<el-table-column label="操作人员" align="center" prop="operName" />
|
||||
<el-table-column label="主机" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作地点" align="center" prop="operLocation" />
|
||||
<el-table-column label="操作状态" align="center" prop="status" :formatter="statusFormat" />
|
||||
<el-table-column label="操作日期" align="center" prop="operTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
|
||||
@ -1,210 +1,213 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row>
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header"><span>CPU</span></div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="is-leaf"><div class="cell">属性</div></th>
|
||||
<th class="is-leaf"><div class="cell">值</div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="cell">核心数</div></td>
|
||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">用户使用率</div></td>
|
||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">系统使用率</div></td>
|
||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">当前空闲率</div></td>
|
||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header"><span>内存</span></div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="is-leaf"><div class="cell">属性</div></th>
|
||||
<th class="is-leaf"><div class="cell">内存</div></th>
|
||||
<th class="is-leaf"><div class="cell">JVM</div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="cell">总内存</div></td>
|
||||
<td><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">已用内存</div></td>
|
||||
<td><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">剩余内存</div></td>
|
||||
<td><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">使用率</div></td>
|
||||
<td><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
|
||||
<td><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header">
|
||||
<span>服务器信息</span>
|
||||
</div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="cell">服务器名称</div></td>
|
||||
<td><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
|
||||
<td><div class="cell">操作系统</div></td>
|
||||
<td><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">服务器IP</div></td>
|
||||
<td><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
|
||||
<td><div class="cell">系统架构</div></td>
|
||||
<td><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header">
|
||||
<span>Java虚拟机信息</span>
|
||||
</div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="cell">Java名称</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
|
||||
<td><div class="cell">Java版本</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">启动时间</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
|
||||
<td><div class="cell">运行时长</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1"><div class="cell">安装路径</div></td>
|
||||
<td colspan="3"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1"><div class="cell">项目路径</div></td>
|
||||
<td colspan="3"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header">
|
||||
<span>磁盘状态</span>
|
||||
</div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="is-leaf"><div class="cell">盘符路径</div></th>
|
||||
<th class="is-leaf"><div class="cell">文件系统</div></th>
|
||||
<th class="is-leaf"><div class="cell">盘符类型</div></th>
|
||||
<th class="is-leaf"><div class="cell">总大小</div></th>
|
||||
<th class="is-leaf"><div class="cell">可用大小</div></th>
|
||||
<th class="is-leaf"><div class="cell">已用大小</div></th>
|
||||
<th class="is-leaf"><div class="cell">已用百分比</div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="server.sysFiles">
|
||||
<tr v-for="sysFile in server.sysFiles">
|
||||
<td><div class="cell">{{ sysFile.dirName }}</div></td>
|
||||
<td><div class="cell">{{ sysFile.sysTypeName }}</div></td>
|
||||
<td><div class="cell">{{ sysFile.typeName }}</div></td>
|
||||
<td><div class="cell">{{ sysFile.total }}</div></td>
|
||||
<td><div class="cell">{{ sysFile.free }}</div></td>
|
||||
<td><div class="cell">{{ sysFile.used }}</div></td>
|
||||
<td><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getServer } from "@/api/monitor/server";
|
||||
|
||||
export default {
|
||||
name: "Server",
|
||||
data() {
|
||||
return {
|
||||
// 加载层信息
|
||||
loading: [],
|
||||
// 服务器信息
|
||||
server: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.openLoading();
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务器信息 */
|
||||
getList() {
|
||||
getServer().then(response => {
|
||||
this.server = response.data;
|
||||
this.loading.close();
|
||||
});
|
||||
},
|
||||
// 打开加载层
|
||||
openLoading() {
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
text: "拼命读取中",
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.7)"
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row>
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header"><span>CPU</span></div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="is-leaf"><div class="cell">属性</div></th>
|
||||
<th class="is-leaf"><div class="cell">值</div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="cell">核心数</div></td>
|
||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">用户使用率</div></td>
|
||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">系统使用率</div></td>
|
||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">当前空闲率</div></td>
|
||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header"><span>内存</span></div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="is-leaf"><div class="cell">属性</div></th>
|
||||
<th class="is-leaf"><div class="cell">内存</div></th>
|
||||
<th class="is-leaf"><div class="cell">JVM</div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="cell">总内存</div></td>
|
||||
<td><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">已用内存</div></td>
|
||||
<td><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">剩余内存</div></td>
|
||||
<td><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">使用率</div></td>
|
||||
<td><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
|
||||
<td><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header">
|
||||
<span>服务器信息</span>
|
||||
</div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="cell">服务器名称</div></td>
|
||||
<td><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
|
||||
<td><div class="cell">操作系统</div></td>
|
||||
<td><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">服务器IP</div></td>
|
||||
<td><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
|
||||
<td><div class="cell">系统架构</div></td>
|
||||
<td><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header">
|
||||
<span>Java虚拟机信息</span>
|
||||
</div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="cell">Java名称</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
|
||||
<td><div class="cell">Java版本</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">启动时间</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
|
||||
<td><div class="cell">运行时长</div></td>
|
||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1"><div class="cell">安装路径</div></td>
|
||||
<td colspan="3"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1"><div class="cell">项目路径</div></td>
|
||||
<td colspan="3"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header">
|
||||
<span>磁盘状态</span>
|
||||
</div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="is-leaf"><div class="cell">盘符路径</div></th>
|
||||
<th class="is-leaf"><div class="cell">文件系统</div></th>
|
||||
<th class="is-leaf"><div class="cell">盘符类型</div></th>
|
||||
<th class="is-leaf"><div class="cell">总大小</div></th>
|
||||
<th class="is-leaf"><div class="cell">可用大小</div></th>
|
||||
<th class="is-leaf"><div class="cell">已用大小</div></th>
|
||||
<th class="is-leaf"><div class="cell">已用百分比</div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="server.sysFiles">
|
||||
<tr v-for="sysFile in server.sysFiles">
|
||||
<td><div class="cell">{{ sysFile.dirName }}</div></td>
|
||||
<td><div class="cell">{{ sysFile.sysTypeName }}</div></td>
|
||||
<td><div class="cell">{{ sysFile.typeName }}</div></td>
|
||||
<td><div class="cell">{{ sysFile.total }}</div></td>
|
||||
<td><div class="cell">{{ sysFile.free }}</div></td>
|
||||
<td><div class="cell">{{ sysFile.used }}</div></td>
|
||||
<td><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getServer } from "@/api/monitor/server";
|
||||
|
||||
export default {
|
||||
name: "Server",
|
||||
data() {
|
||||
return {
|
||||
// 加载层信息
|
||||
loading: [],
|
||||
// 服务器信息
|
||||
server: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.openLoading();
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务器信息 */
|
||||
getList() {
|
||||
getServer().then(response => {
|
||||
this.server = response.data;
|
||||
console.log(response);
|
||||
console.log(response.data);
|
||||
|
||||
this.loading.close();
|
||||
});
|
||||
},
|
||||
// 打开加载层
|
||||
openLoading() {
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
text: "拼命读取中",
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.7)"
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -88,15 +88,6 @@
|
||||
v-hasPermi="['system:config:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-refresh"
|
||||
size="mini"
|
||||
@click="handleClearCache"
|
||||
v-hasPermi="['system:config:remove']"
|
||||
>清理缓存</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
|
||||
@ -174,7 +165,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listConfig, getConfig, delConfig, addConfig, updateConfig, exportConfig, clearCache } from "@/api/system/config";
|
||||
import { listConfig, getConfig, delConfig, addConfig, updateConfig, exportConfig } from "@/api/system/config";
|
||||
|
||||
export default {
|
||||
name: "Config",
|
||||
@ -305,6 +296,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -313,6 +306,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -345,14 +340,6 @@ export default {
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
}).catch(function() {});
|
||||
},
|
||||
/** 清理缓存按钮操作 */
|
||||
handleClearCache() {
|
||||
clearCache().then(response => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess("清理成功");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -138,7 +138,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
|
||||
import { listDept, getDept, delDept, addDept, updateDept } from "@/api/system/dept";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
@ -220,6 +220,12 @@ export default {
|
||||
children: node.children
|
||||
};
|
||||
},
|
||||
/** 查询部门下拉树结构 */
|
||||
getTreeselect() {
|
||||
listDept().then(response => {
|
||||
this.deptOptions = this.handleTree(response.data, "deptId");
|
||||
});
|
||||
},
|
||||
// 字典状态字典翻译
|
||||
statusFormat(row, column) {
|
||||
return this.selectDictLabel(this.statusOptions, row.status);
|
||||
@ -250,26 +256,22 @@ export default {
|
||||
/** 新增按钮操作 */
|
||||
handleAdd(row) {
|
||||
this.reset();
|
||||
this.getTreeselect();
|
||||
if (row != undefined) {
|
||||
this.form.parentId = row.deptId;
|
||||
}
|
||||
this.open = true;
|
||||
this.title = "添加部门";
|
||||
listDept().then(response => {
|
||||
this.deptOptions = this.handleTree(response.data, "deptId");
|
||||
});
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
this.getTreeselect();
|
||||
getDept(row.deptId).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改部门";
|
||||
});
|
||||
listDeptExcludeChild(row.deptId).then(response => {
|
||||
this.deptOptions = this.handleTree(response.data, "deptId");
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
@ -281,6 +283,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -289,6 +293,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -305,6 +305,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -313,6 +315,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -94,15 +94,6 @@
|
||||
v-hasPermi="['system:dict:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-refresh"
|
||||
size="mini"
|
||||
@click="handleClearCache"
|
||||
v-hasPermi="['system:dict:remove']"
|
||||
>清理缓存</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
|
||||
@ -182,7 +173,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listType, getType, delType, addType, updateType, exportType, clearCache } from "@/api/system/dict/type";
|
||||
import { listType, getType, delType, addType, updateType, exportType } from "@/api/system/dict/type";
|
||||
|
||||
export default {
|
||||
name: "Dict",
|
||||
@ -309,6 +300,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -317,6 +310,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -349,14 +344,6 @@ export default {
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
}).catch(function() {});
|
||||
},
|
||||
/** 清理缓存按钮操作 */
|
||||
handleClearCache() {
|
||||
clearCache().then(response => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess("清理成功");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -340,6 +340,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -348,6 +350,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -308,6 +308,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -316,6 +318,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -277,6 +277,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -285,6 +287,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -482,6 +482,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -491,6 +493,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -506,6 +510,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.openDataScope = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -59,6 +59,8 @@ export default {
|
||||
response => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess("修改成功");
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg" />
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened">
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
||||
<el-row>
|
||||
<el-col :xs="24" :md="12" :style="{height: '350px'}">
|
||||
<vue-cropper
|
||||
@ -13,7 +13,6 @@
|
||||
:autoCropHeight="options.autoCropHeight"
|
||||
:fixedBox="options.fixedBox"
|
||||
@realTime="realTime"
|
||||
v-if="visible"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="12" :style="{height: '350px'}">
|
||||
@ -68,8 +67,6 @@ export default {
|
||||
return {
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否显示cropper
|
||||
visible: false,
|
||||
// 弹出层标题
|
||||
title: "修改头像",
|
||||
options: {
|
||||
@ -87,10 +84,6 @@ export default {
|
||||
editCropper() {
|
||||
this.open = true;
|
||||
},
|
||||
// 打开弹出层结束时的回调
|
||||
modalOpened() {
|
||||
this.visible = true;
|
||||
},
|
||||
// 覆盖默认的上传行为
|
||||
requestUpload() {
|
||||
},
|
||||
@ -128,10 +121,11 @@ export default {
|
||||
if (response.code === 200) {
|
||||
this.open = false;
|
||||
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
|
||||
store.commit('SET_AVATAR', this.options.img);
|
||||
this.msgSuccess("修改成功");
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
this.visible = false;
|
||||
this.$refs.cropper.clearCrop();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
@ -64,6 +64,8 @@ export default {
|
||||
updateUserProfile(this.user).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess("修改成功");
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
86
ruoyi-ui/src/views/test001/density30day.vue
Normal file
86
ruoyi-ui/src/views/test001/density30day.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>test001</h1>
|
||||
|
||||
<div id="chart_change_moulding_time" style="width: 80%;height: 600px;left: 10%;"></div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from "../dashboard/mixins/resize";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务器信息 */
|
||||
getList() {
|
||||
getServer().then(response => {
|
||||
console.log(response);
|
||||
console.log(response.data);
|
||||
console.log(response.data[0]);
|
||||
console.log(JSON.parse(response.data[0]));
|
||||
});
|
||||
},
|
||||
|
||||
drawchart() {
|
||||
const chart_change_moulding_time = echarts.init(document.getElementById("chart_change_moulding_time"));
|
||||
const option_change_moulding_time = {
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '业务指标',
|
||||
type: 'gauge',
|
||||
detail: {formatter: '{value}%'},
|
||||
data: [{value: 50, name: '完成率'}]
|
||||
}
|
||||
]
|
||||
};
|
||||
chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
|
||||
setInterval(function () {
|
||||
option_change_moulding_time.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
|
||||
chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
},2000);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.drawchart();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export function getServer() {
|
||||
return request({
|
||||
url: '/monitor/server',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
49
ruoyi-ui/src/views/test001/index.vue
Normal file
49
ruoyi-ui/src/views/test001/index.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>test001</h1>
|
||||
<div id="chart_change_moulding_time" style="width: 80%;height: 204px;left: 10%;"></div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from "../dashboard/mixins/resize";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务器信息 */
|
||||
getList() {
|
||||
getServer().then(response => {
|
||||
console.log(response);
|
||||
console.log(response.data);
|
||||
console.log(response.data[0]);
|
||||
console.log(JSON.parse(response.data[0]));
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export function getServer() {
|
||||
return request({
|
||||
url: '/monitor/server',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -147,8 +147,8 @@ export default {
|
||||
info: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const tableId = this.$route.params && this.$route.params.tableId;
|
||||
beforeCreate() {
|
||||
const { tableId } = this.$route.query;
|
||||
if (tableId) {
|
||||
// 获取表详细信息
|
||||
getGenTable(tableId).then(res => {
|
||||
|
||||
@ -270,7 +270,7 @@ export default {
|
||||
/** 修改按钮操作 */
|
||||
handleEditTable(row) {
|
||||
const tableId = row.tableId || this.ids[0];
|
||||
this.$router.push("/gen/edit/" + tableId);
|
||||
this.$router.push({ path: "/gen/edit", query: { tableId: tableId } });
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
|
||||
Reference in New Issue
Block a user