INTCO-MES
This commit is contained in:
ICEC
@ -1,109 +1,113 @@
|
|||||||
{
|
{
|
||||||
"name": "ruoyi",
|
"name": "ruoyi",
|
||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"description": "若依管理系统",
|
"description": "若依管理系统",
|
||||||
"author": "若依",
|
"author": "若依",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vue-cli-service serve --open",
|
"dev": "vue-cli-service serve --open",
|
||||||
"build:prod": "vue-cli-service build",
|
"build:prod": "vue-cli-service build",
|
||||||
"build:stage": "vue-cli-service build --mode staging",
|
"build:stage": "vue-cli-service build --mode staging",
|
||||||
"preview": "node build/index.js --preview",
|
"preview": "node build/index.js --preview",
|
||||||
"lint": "eslint --ext .js,.vue src",
|
"lint": "eslint --ext .js,.vue src",
|
||||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||||
"test:ci": "npm run lint && npm run test:unit",
|
"test:ci": "npm run lint && npm run test:unit",
|
||||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
|
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
|
||||||
"new": "plop"
|
"new": "plop"
|
||||||
},
|
},
|
||||||
"husky": {
|
"husky": {
|
||||||
"hooks": {
|
"hooks": {
|
||||||
"pre-commit": "lint-staged"
|
"pre-commit": "lint-staged"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"src/**/*.{js,vue}": [
|
"src/**/*.{js,vue}": [
|
||||||
"eslint --fix",
|
"eslint --fix",
|
||||||
"git add"
|
"git add"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"vue",
|
"vue",
|
||||||
"admin",
|
"admin",
|
||||||
"dashboard",
|
"dashboard",
|
||||||
"element-ui",
|
"element-ui",
|
||||||
"boilerplate",
|
"boilerplate",
|
||||||
"admin-template",
|
"admin-template",
|
||||||
"management-system"
|
"management-system"
|
||||||
],
|
],
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
|
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@riophae/vue-treeselect": "0.4.0",
|
"@riophae/vue-treeselect": "0.4.0",
|
||||||
"axios": "0.18.1",
|
"axios": "0.18.1",
|
||||||
"clipboard": "2.0.4",
|
"bootstrap": "^4.5.0",
|
||||||
"echarts": "4.2.1",
|
"bootstrap-table": "^1.16.0",
|
||||||
"element-ui": "2.13.0",
|
"clipboard": "2.0.4",
|
||||||
"file-saver": "2.0.1",
|
"echarts": "4.2.1",
|
||||||
"js-beautify": "^1.10.2",
|
"element-ui": "2.13.0",
|
||||||
"fuse.js": "3.4.4",
|
"file-saver": "2.0.1",
|
||||||
"js-cookie": "2.2.0",
|
"js-beautify": "^1.10.2",
|
||||||
"jsencrypt": "3.0.0-rc.1",
|
"fuse.js": "3.4.4",
|
||||||
"normalize.css": "7.0.0",
|
"jquery": "^3.5.1",
|
||||||
"nprogress": "0.2.0",
|
"js-cookie": "2.2.0",
|
||||||
"path-to-regexp": "2.4.0",
|
"jsencrypt": "3.0.0-rc.1",
|
||||||
"screenfull": "4.2.0",
|
"normalize.css": "7.0.0",
|
||||||
"sortablejs": "1.8.4",
|
"nprogress": "0.2.0",
|
||||||
"vue": "2.6.10",
|
"path-to-regexp": "2.4.0",
|
||||||
"vue-count-to": "1.0.13",
|
"popper.js": "^1.16.1",
|
||||||
"vue-quill-editor": "3.0.6",
|
"screenfull": "4.2.0",
|
||||||
"vue-cropper": "0.4.9",
|
"sortablejs": "1.8.4",
|
||||||
"vue-router": "3.0.2",
|
"vue": "2.6.10",
|
||||||
"vue-splitpane": "1.0.4",
|
"vue-count-to": "1.0.13",
|
||||||
"vuedraggable": "2.20.0",
|
"vue-quill-editor": "3.0.6",
|
||||||
"vuex": "3.1.0"
|
"vue-cropper": "0.4.9",
|
||||||
},
|
"vue-router": "3.0.2",
|
||||||
"devDependencies": {
|
"vue-splitpane": "1.0.4",
|
||||||
"@babel/core": "7.0.0",
|
"vuedraggable": "2.20.0",
|
||||||
"@babel/register": "7.0.0",
|
"vuex": "3.1.0"
|
||||||
"@babel/parser": "^7.7.4",
|
},
|
||||||
"@vue/cli-plugin-babel": "3.5.3",
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-eslint": "^3.9.1",
|
"@babel/core": "7.0.0",
|
||||||
"@vue/cli-plugin-unit-jest": "3.5.3",
|
"@babel/register": "7.0.0",
|
||||||
"@vue/cli-service": "3.5.3",
|
"@babel/parser": "^7.7.4",
|
||||||
"@vue/test-utils": "1.0.0-beta.29",
|
"@vue/cli-plugin-babel": "3.5.3",
|
||||||
"autoprefixer": "^9.5.1",
|
"@vue/cli-plugin-eslint": "^3.9.1",
|
||||||
"babel-core": "7.0.0-bridge.0",
|
"@vue/cli-plugin-unit-jest": "3.5.3",
|
||||||
"babel-eslint": "10.0.1",
|
"@vue/cli-service": "3.5.3",
|
||||||
"babel-jest": "23.6.0",
|
"@vue/test-utils": "1.0.0-beta.29",
|
||||||
"chalk": "2.4.2",
|
"autoprefixer": "^9.5.1",
|
||||||
"chokidar": "2.1.5",
|
"babel-core": "7.0.0-bridge.0",
|
||||||
"connect": "3.6.6",
|
"babel-eslint": "10.0.1",
|
||||||
"eslint": "5.15.3",
|
"babel-jest": "23.6.0",
|
||||||
"eslint-plugin-vue": "5.2.2",
|
"chalk": "2.4.2",
|
||||||
"html-webpack-plugin": "3.2.0",
|
"chokidar": "2.1.5",
|
||||||
"http-proxy-middleware": "^0.19.1",
|
"connect": "3.6.6",
|
||||||
"husky": "1.3.1",
|
"eslint": "5.15.3",
|
||||||
"lint-staged": "8.1.5",
|
"eslint-plugin-vue": "5.2.2",
|
||||||
"mockjs": "1.0.1-beta3",
|
"html-webpack-plugin": "3.2.0",
|
||||||
"node-sass": "^4.9.0",
|
"http-proxy-middleware": "^0.19.1",
|
||||||
"plop": "2.3.0",
|
"husky": "1.3.1",
|
||||||
"runjs": "^4.3.2",
|
"lint-staged": "8.1.5",
|
||||||
"sass-loader": "^7.1.0",
|
"mockjs": "1.0.1-beta3",
|
||||||
"script-ext-html-webpack-plugin": "2.1.3",
|
"node-sass": "^4.9.0",
|
||||||
"script-loader": "0.7.2",
|
"plop": "2.3.0",
|
||||||
"serve-static": "^1.13.2",
|
"runjs": "^4.3.2",
|
||||||
"svg-sprite-loader": "4.1.3",
|
"sass-loader": "^7.1.0",
|
||||||
"svgo": "1.2.0",
|
"script-ext-html-webpack-plugin": "2.1.3",
|
||||||
"vue-template-compiler": "2.6.10"
|
"script-loader": "0.7.2",
|
||||||
},
|
"serve-static": "^1.13.2",
|
||||||
"engines": {
|
"svg-sprite-loader": "4.1.3",
|
||||||
"node": ">=8.9",
|
"svgo": "1.2.0",
|
||||||
"npm": ">= 3.0.0"
|
"vue-template-compiler": "2.6.10"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"engines": {
|
||||||
"> 1%",
|
"node": ">=8.9",
|
||||||
"last 2 versions"
|
"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>
|
<template>
|
||||||
<div class="dashboard-editor-container">
|
<div class="dashboard-editor-container">
|
||||||
|
<el-row :gutter="32">
|
||||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
|
||||||
|
<el-col :xs="24" :sm="12" :lg="12" style="height: 170px">
|
||||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
||||||
<line-chart :chart-data="lineChartData" />
|
|
||||||
</el-row>
|
<table class="ibox" style="font-size:24px;width: 100%;margin-top: 50px" >
|
||||||
|
<tbody>
|
||||||
<el-row :gutter="32">
|
<tr>
|
||||||
<el-col :xs="24" :sm="24" :lg="8">
|
<!-- <td>
|
||||||
<div class="chart-wrapper">
|
<strong>日期</strong> <i id="groupdate"></i>
|
||||||
<raddar-chart />
|
</td> -->
|
||||||
</div>
|
<td id="groupdate">
|
||||||
</el-col>
|
</td>
|
||||||
<el-col :xs="24" :sm="24" :lg="8">
|
<td>
|
||||||
<div class="chart-wrapper">
|
<strong>班次</strong> 白班
|
||||||
<pie-chart />
|
</td>
|
||||||
</div>
|
<tr>
|
||||||
</el-col>
|
</tr>
|
||||||
<el-col :xs="24" :sm="24" :lg="8">
|
<td>
|
||||||
<div class="chart-wrapper">
|
<strong>班组</strong> 陈亮
|
||||||
<bar-chart />
|
</td>
|
||||||
</div>
|
<td>
|
||||||
</el-col>
|
<strong>开线数量</strong> <i id="line_open_numbers">31/32</i>
|
||||||
</el-row>
|
</td>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
<!--右上角 生产进度 -->
|
||||||
</template>
|
|
||||||
|
</el-col>
|
||||||
<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'
|
<el-col :xs="24" :sm="12" :lg="12">
|
||||||
|
<div class="ibox">
|
||||||
const lineChartData = {
|
<div class="m-b-xs">
|
||||||
newVisitis: {
|
<h5 style="font-size:20px;">生产进度</h5>
|
||||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
<h2 id=shengchanjindu>65%</h2>
|
||||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
<div id=finishedbox class="m-t-sm small">当班已完成: 1200/2500 (箱)</div>
|
||||||
},
|
<el-progress id="shengchanjinduavg" :percentage="56" :format="format"></el-progress>
|
||||||
messages: {
|
|
||||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
</div>
|
||||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
</div>
|
||||||
},
|
</el-col>
|
||||||
purchases: {
|
|
||||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
</el-row>
|
||||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
|
||||||
},
|
|
||||||
shoppings: {
|
<el-row :gutter="32">
|
||||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
<el-col :xs="24" :sm="12" :lg="6">
|
||||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
<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>
|
||||||
export default {
|
</el-col>
|
||||||
name: 'Index',
|
<el-col :xs="24" :sm="12" :lg="6">
|
||||||
components: {
|
<div class="ibox">
|
||||||
PanelGroup,
|
<div id="chart_change_moulding_time" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||||
LineChart,
|
<h2 class="text-center" style="margin-top: 0px;">平均换模时间</h2>
|
||||||
RaddarChart,
|
</div>
|
||||||
PieChart,
|
</el-col>
|
||||||
BarChart
|
<el-col :xs="24" :sm="12" :lg="6">
|
||||||
},
|
<div class="ibox">
|
||||||
data() {
|
<div id="chart_density" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||||
return {
|
<h2 class="text-center" style="margin-top: 0px;">平均密度</h2>
|
||||||
lineChartData: lineChartData.newVisitis
|
</div>
|
||||||
}
|
</el-col>
|
||||||
},
|
<el-col :xs="24" :sm="12" :lg="6">
|
||||||
methods: {
|
<div class="ibox">
|
||||||
handleSetLineChartData(type) {
|
<div id="chart_energy_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||||
this.lineChartData = lineChartData[type]
|
<h2 class="text-center" style="margin-top: 0px;">产能达标率</h2>
|
||||||
}
|
</div>
|
||||||
}
|
</el-col>
|
||||||
}
|
</el-row>
|
||||||
</script>
|
|
||||||
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||||
<style lang="scss" scoped>
|
<div class="ibox ">
|
||||||
.dashboard-editor-container {
|
<div class="ibox-title">
|
||||||
padding: 32px;
|
<h5>产线明细 </h5>
|
||||||
background-color: rgb(240, 242, 245);
|
</div>
|
||||||
position: relative;
|
<div class="ibox-content">
|
||||||
|
<el-table
|
||||||
.chart-wrapper {
|
:data="tableData"
|
||||||
background: #fff;
|
stripe
|
||||||
padding: 16px 16px 0;
|
border
|
||||||
margin-bottom: 32px;
|
style="width: 100%">
|
||||||
}
|
<el-table-column
|
||||||
}
|
prop="line"
|
||||||
|
label="线号"
|
||||||
@media (max-width:1024px) {
|
width="100">
|
||||||
.chart-wrapper {
|
</el-table-column>
|
||||||
padding: 8px;
|
<el-table-column
|
||||||
}
|
prop="Moulds"
|
||||||
}
|
label="量产模具">
|
||||||
</style>
|
</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>
|
<template>
|
||||||
<div class="login">
|
<div class="login">
|
||||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||||
<h3 class="title">若依后台管理系统</h3>
|
<h3 class="title">英科智能车间系统</h3>
|
||||||
<el-form-item prop="username">
|
<el-form-item prop="username">
|
||||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
<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" />
|
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="password">
|
<el-form-item prop="password">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="loginForm.password"
|
v-model="loginForm.password"
|
||||||
type="password"
|
type="password"
|
||||||
auto-complete="off"
|
auto-complete="off"
|
||||||
placeholder="密码"
|
placeholder="密码"
|
||||||
@keyup.enter.native="handleLogin"
|
@keyup.enter.native="handleLogin"
|
||||||
>
|
>
|
||||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="code">
|
<el-form-item prop="code">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="loginForm.code"
|
v-model="loginForm.code"
|
||||||
auto-complete="off"
|
auto-complete="off"
|
||||||
placeholder="验证码"
|
placeholder="验证码"
|
||||||
style="width: 63%"
|
style="width: 63%"
|
||||||
@keyup.enter.native="handleLogin"
|
@keyup.enter.native="handleLogin"
|
||||||
>
|
>
|
||||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
||||||
</el-input>
|
</el-input>
|
||||||
<div class="login-code">
|
<div class="login-code">
|
||||||
<img :src="codeUrl" @click="getCode" />
|
<img :src="codeUrl" @click="getCode" />
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
||||||
<el-form-item style="width:100%;">
|
<el-form-item style="width:100%;">
|
||||||
<el-button
|
<el-button
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
size="medium"
|
size="medium"
|
||||||
type="primary"
|
type="primary"
|
||||||
style="width:100%;"
|
style="width:100%;"
|
||||||
@click.native.prevent="handleLogin"
|
@click.native.prevent="handleLogin"
|
||||||
>
|
>
|
||||||
<span v-if="!loading">登 录</span>
|
<span v-if="!loading">登 录</span>
|
||||||
<span v-else>登 录 中...</span>
|
<span v-else>登 录 中...</span>
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<!-- 底部 -->
|
<!-- 底部 -->
|
||||||
<div class="el-login-footer">
|
<div class="el-login-footer">
|
||||||
<span>Copyright © 2018-2019 ruoyi.vip All Rights Reserved.</span>
|
<span>Copyright © 2020 Intco All Rights Reserved.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getCodeImg } from "@/api/login";
|
import { getCodeImg } from "@/api/login";
|
||||||
import Cookies from "js-cookie";
|
import Cookies from "js-cookie";
|
||||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Login",
|
name: "Login",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
codeUrl: "",
|
codeUrl: "",
|
||||||
cookiePassword: "",
|
cookiePassword: "",
|
||||||
loginForm: {
|
loginForm: {
|
||||||
username: "admin",
|
username: "",
|
||||||
password: "admin123",
|
password: "",
|
||||||
rememberMe: false,
|
rememberMe: false,
|
||||||
code: "",
|
code: "",
|
||||||
uuid: ""
|
uuid: ""
|
||||||
},
|
},
|
||||||
loginRules: {
|
loginRules: {
|
||||||
username: [
|
username: [
|
||||||
{ required: true, trigger: "blur", message: "用户名不能为空" }
|
{ required: true, trigger: "blur", message: "用户名不能为空" }
|
||||||
],
|
],
|
||||||
password: [
|
password: [
|
||||||
{ required: true, trigger: "blur", message: "密码不能为空" }
|
{ required: true, trigger: "blur", message: "密码不能为空" }
|
||||||
],
|
],
|
||||||
code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
|
code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
|
||||||
},
|
},
|
||||||
loading: false,
|
loading: false,
|
||||||
redirect: undefined
|
redirect: undefined
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$route: {
|
$route: {
|
||||||
handler: function(route) {
|
handler: function(route) {
|
||||||
this.redirect = route.query && route.query.redirect;
|
this.redirect = route.query && route.query.redirect;
|
||||||
},
|
},
|
||||||
immediate: true
|
immediate: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getCode();
|
this.getCode();
|
||||||
this.getCookie();
|
this.getCookie();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getCode() {
|
getCode() {
|
||||||
getCodeImg().then(res => {
|
getCodeImg().then(res => {
|
||||||
this.codeUrl = "data:image/gif;base64," + res.img;
|
this.codeUrl = "data:image/gif;base64," + res.img;
|
||||||
this.loginForm.uuid = res.uuid;
|
this.loginForm.uuid = res.uuid;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getCookie() {
|
getCookie() {
|
||||||
const username = Cookies.get("username");
|
const username = Cookies.get("username");
|
||||||
const password = Cookies.get("password");
|
const password = Cookies.get("password");
|
||||||
const rememberMe = Cookies.get('rememberMe')
|
const rememberMe = Cookies.get('rememberMe')
|
||||||
this.loginForm = {
|
this.loginForm = {
|
||||||
username: username === undefined ? this.loginForm.username : username,
|
username: username === undefined ? this.loginForm.username : username,
|
||||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
handleLogin() {
|
handleLogin() {
|
||||||
this.$refs.loginForm.validate(valid => {
|
this.$refs.loginForm.validate(valid => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
if (this.loginForm.rememberMe) {
|
if (this.loginForm.rememberMe) {
|
||||||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
||||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
||||||
} else {
|
} else {
|
||||||
Cookies.remove("username");
|
Cookies.remove("username");
|
||||||
Cookies.remove("password");
|
Cookies.remove("password");
|
||||||
Cookies.remove('rememberMe');
|
Cookies.remove('rememberMe');
|
||||||
}
|
}
|
||||||
this.$store
|
this.$store
|
||||||
.dispatch("Login", this.loginForm)
|
.dispatch("Login", this.loginForm)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
this.$router.push({ path: this.redirect || "/" });
|
this.$router.push({ path: this.redirect || "/" });
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
this.getCode();
|
this.getCode();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss">
|
<style rel="stylesheet/scss" lang="scss">
|
||||||
.login {
|
.login {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-image: url("../assets/image/login-background.jpg");
|
background-image: url("../assets/image/login-background.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
margin: 0px auto 30px auto;
|
margin: 0px auto 30px auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #707070;
|
color: #707070;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-form {
|
.login-form {
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
padding: 25px 25px 5px 25px;
|
padding: 25px 25px 5px 25px;
|
||||||
.el-input {
|
.el-input {
|
||||||
height: 38px;
|
height: 38px;
|
||||||
input {
|
input {
|
||||||
height: 38px;
|
height: 38px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.input-icon {
|
.input-icon {
|
||||||
height: 39px;
|
height: 39px;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.login-tip {
|
.login-tip {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #bfbfbf;
|
color: #bfbfbf;
|
||||||
}
|
}
|
||||||
.login-code {
|
.login-code {
|
||||||
width: 33%;
|
width: 33%;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
float: right;
|
float: right;
|
||||||
img {
|
img {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-login-footer {
|
.el-login-footer {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-family: Arial;
|
font-family: Arial;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -133,7 +133,7 @@
|
|||||||
|
|
||||||
<!-- 添加或修改定时任务对话框 -->
|
<!-- 添加或修改定时任务对话框 -->
|
||||||
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
|
<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-row>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="任务名称" prop="jobName">
|
<el-form-item label="任务名称" prop="jobName">
|
||||||
@ -397,7 +397,7 @@ export default {
|
|||||||
type: "warning"
|
type: "warning"
|
||||||
}).then(function() {
|
}).then(function() {
|
||||||
return runJob(row.jobId, row.jobGroup);
|
return runJob(row.jobId, row.jobGroup);
|
||||||
}).then(() => {
|
}).then(function() {
|
||||||
this.msgSuccess("执行成功");
|
this.msgSuccess("执行成功");
|
||||||
}).catch(function() {});
|
}).catch(function() {});
|
||||||
},
|
},
|
||||||
@ -438,6 +438,8 @@ export default {
|
|||||||
this.msgSuccess("修改成功");
|
this.msgSuccess("修改成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@ -446,6 +448,8 @@ export default {
|
|||||||
this.msgSuccess("新增成功");
|
this.msgSuccess("新增成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -87,7 +87,7 @@
|
|||||||
icon="el-icon-download"
|
icon="el-icon-download"
|
||||||
size="mini"
|
size="mini"
|
||||||
@click="handleExport"
|
@click="handleExport"
|
||||||
v-hasPermi="['monitor:job:export']"
|
v-hasPermi="['monitor:jobLog:export']"
|
||||||
>导出</el-button>
|
>导出</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -196,7 +196,9 @@ export default {
|
|||||||
jobName: undefined,
|
jobName: undefined,
|
||||||
jobGroup: undefined,
|
jobGroup: undefined,
|
||||||
status: undefined
|
status: undefined
|
||||||
}
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|||||||
@ -91,7 +91,7 @@
|
|||||||
<el-table-column label="访问编号" align="center" prop="infoId" />
|
<el-table-column label="访问编号" align="center" prop="infoId" />
|
||||||
<el-table-column label="用户名称" align="center" prop="userName" />
|
<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="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="browser" />
|
||||||
<el-table-column label="操作系统" align="center" prop="os" />
|
<el-table-column label="操作系统" align="center" prop="os" />
|
||||||
<el-table-column label="登录状态" align="center" prop="status" :formatter="statusFormat" />
|
<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="userName" :show-overflow-tooltip="true" />
|
||||||
<el-table-column label="部门名称" align="center" prop="deptName" />
|
<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="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="browser" />
|
||||||
<el-table-column label="操作系统" align="center" prop="os" />
|
<el-table-column label="操作系统" align="center" prop="os" />
|
||||||
<el-table-column label="登录时间" align="center" prop="loginTime" width="180">
|
<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="requestMethod" />
|
||||||
<el-table-column label="操作人员" align="center" prop="operName" />
|
<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="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="status" :formatter="statusFormat" />
|
||||||
<el-table-column label="操作日期" align="center" prop="operTime" width="180">
|
<el-table-column label="操作日期" align="center" prop="operTime" width="180">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
|
|||||||
@ -1,210 +1,213 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="12" class="card-box">
|
<el-col :span="12" class="card-box">
|
||||||
<el-card>
|
<el-card>
|
||||||
<div slot="header"><span>CPU</span></div>
|
<div slot="header"><span>CPU</span></div>
|
||||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
<table cellspacing="0" style="width: 100%;">
|
<table cellspacing="0" style="width: 100%;">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<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>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><div class="cell">核心数</div></td>
|
<td><div class="cell">核心数</div></td>
|
||||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
|
<td><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><div class="cell">用户使用率</div></td>
|
<td><div class="cell">用户使用率</div></td>
|
||||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
|
<td><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><div class="cell">系统使用率</div></td>
|
<td><div class="cell">系统使用率</div></td>
|
||||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
|
<td><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><div class="cell">当前空闲率</div></td>
|
<td><div class="cell">当前空闲率</div></td>
|
||||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
|
<td><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="12" class="card-box">
|
<el-col :span="12" class="card-box">
|
||||||
<el-card>
|
<el-card>
|
||||||
<div slot="header"><span>内存</span></div>
|
<div slot="header"><span>内存</span></div>
|
||||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
<table cellspacing="0" style="width: 100%;">
|
<table cellspacing="0" style="width: 100%;">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<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">JVM</div></th>
|
<th class="is-leaf"><div class="cell">JVM</div></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><div class="cell">总内存</div></td>
|
<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.mem">{{ server.mem.total }}G</div></td>
|
||||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
|
<td><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><div class="cell">已用内存</div></td>
|
<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.mem">{{ server.mem.used}}G</div></td>
|
||||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
|
<td><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><div class="cell">剩余内存</div></td>
|
<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.mem">{{ server.mem.free }}G</div></td>
|
||||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
|
<td><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><div class="cell">使用率</div></td>
|
<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.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>
|
<td><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="24" class="card-box">
|
<el-col :span="24" class="card-box">
|
||||||
<el-card>
|
<el-card>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span>服务器信息</span>
|
<span>服务器信息</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
<table cellspacing="0" style="width: 100%;">
|
<table cellspacing="0" style="width: 100%;">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><div class="cell">服务器名称</div></td>
|
<td><div class="cell">服务器名称</div></td>
|
||||||
<td><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</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">操作系统</div></td>
|
||||||
<td><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
|
<td><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><div class="cell">服务器IP</div></td>
|
<td><div class="cell">服务器IP</div></td>
|
||||||
<td><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</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">系统架构</div></td>
|
||||||
<td><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
|
<td><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="24" class="card-box">
|
<el-col :span="24" class="card-box">
|
||||||
<el-card>
|
<el-card>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span>Java虚拟机信息</span>
|
<span>Java虚拟机信息</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
<table cellspacing="0" style="width: 100%;">
|
<table cellspacing="0" style="width: 100%;">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><div class="cell">Java名称</div></td>
|
<td><div class="cell">Java名称</div></td>
|
||||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</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">Java版本</div></td>
|
||||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
|
<td><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><div class="cell">启动时间</div></td>
|
<td><div class="cell">启动时间</div></td>
|
||||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</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">运行时长</div></td>
|
||||||
<td><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
|
<td><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="1"><div class="cell">安装路径</div></td>
|
<td colspan="1"><div class="cell">安装路径</div></td>
|
||||||
<td colspan="3"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
|
<td colspan="3"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="1"><div class="cell">项目路径</div></td>
|
<td colspan="1"><div class="cell">项目路径</div></td>
|
||||||
<td colspan="3"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
|
<td colspan="3"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="24" class="card-box">
|
<el-col :span="24" class="card-box">
|
||||||
<el-card>
|
<el-card>
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<span>磁盘状态</span>
|
<span>磁盘状态</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||||
<table cellspacing="0" style="width: 100%;">
|
<table cellspacing="0" style="width: 100%;">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<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>
|
<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>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody v-if="server.sysFiles">
|
<tbody v-if="server.sysFiles">
|
||||||
<tr v-for="sysFile in server.sysFiles">
|
<tr v-for="sysFile in server.sysFiles">
|
||||||
<td><div class="cell">{{ sysFile.dirName }}</div></td>
|
<td><div class="cell">{{ sysFile.dirName }}</div></td>
|
||||||
<td><div class="cell">{{ sysFile.sysTypeName }}</div></td>
|
<td><div class="cell">{{ sysFile.sysTypeName }}</div></td>
|
||||||
<td><div class="cell">{{ sysFile.typeName }}</div></td>
|
<td><div class="cell">{{ sysFile.typeName }}</div></td>
|
||||||
<td><div class="cell">{{ sysFile.total }}</div></td>
|
<td><div class="cell">{{ sysFile.total }}</div></td>
|
||||||
<td><div class="cell">{{ sysFile.free }}</div></td>
|
<td><div class="cell">{{ sysFile.free }}</div></td>
|
||||||
<td><div class="cell">{{ sysFile.used }}</div></td>
|
<td><div class="cell">{{ sysFile.used }}</div></td>
|
||||||
<td><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
|
<td><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getServer } from "@/api/monitor/server";
|
import { getServer } from "@/api/monitor/server";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Server",
|
name: "Server",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 加载层信息
|
// 加载层信息
|
||||||
loading: [],
|
loading: [],
|
||||||
// 服务器信息
|
// 服务器信息
|
||||||
server: []
|
server: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getList();
|
this.getList();
|
||||||
this.openLoading();
|
this.openLoading();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/** 查询服务器信息 */
|
/** 查询服务器信息 */
|
||||||
getList() {
|
getList() {
|
||||||
getServer().then(response => {
|
getServer().then(response => {
|
||||||
this.server = response.data;
|
this.server = response.data;
|
||||||
this.loading.close();
|
console.log(response);
|
||||||
});
|
console.log(response.data);
|
||||||
},
|
|
||||||
// 打开加载层
|
this.loading.close();
|
||||||
openLoading() {
|
});
|
||||||
this.loading = this.$loading({
|
},
|
||||||
lock: true,
|
// 打开加载层
|
||||||
text: "拼命读取中",
|
openLoading() {
|
||||||
spinner: "el-icon-loading",
|
this.loading = this.$loading({
|
||||||
background: "rgba(0, 0, 0, 0.7)"
|
lock: true,
|
||||||
});
|
text: "拼命读取中",
|
||||||
}
|
spinner: "el-icon-loading",
|
||||||
}
|
background: "rgba(0, 0, 0, 0.7)"
|
||||||
};
|
});
|
||||||
</script>
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|||||||
@ -88,15 +88,6 @@
|
|||||||
v-hasPermi="['system:config:export']"
|
v-hasPermi="['system:config:export']"
|
||||||
>导出</el-button>
|
>导出</el-button>
|
||||||
</el-col>
|
</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-row>
|
||||||
|
|
||||||
<el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
|
<el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
|
||||||
@ -174,7 +165,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
name: "Config",
|
name: "Config",
|
||||||
@ -305,6 +296,8 @@ export default {
|
|||||||
this.msgSuccess("修改成功");
|
this.msgSuccess("修改成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@ -313,6 +306,8 @@ export default {
|
|||||||
this.msgSuccess("新增成功");
|
this.msgSuccess("新增成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -345,14 +340,6 @@ export default {
|
|||||||
}).then(response => {
|
}).then(response => {
|
||||||
this.download(response.msg);
|
this.download(response.msg);
|
||||||
}).catch(function() {});
|
}).catch(function() {});
|
||||||
},
|
|
||||||
/** 清理缓存按钮操作 */
|
|
||||||
handleClearCache() {
|
|
||||||
clearCache().then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.msgSuccess("清理成功");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -138,7 +138,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 Treeselect from "@riophae/vue-treeselect";
|
||||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||||
|
|
||||||
@ -220,6 +220,12 @@ export default {
|
|||||||
children: node.children
|
children: node.children
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
/** 查询部门下拉树结构 */
|
||||||
|
getTreeselect() {
|
||||||
|
listDept().then(response => {
|
||||||
|
this.deptOptions = this.handleTree(response.data, "deptId");
|
||||||
|
});
|
||||||
|
},
|
||||||
// 字典状态字典翻译
|
// 字典状态字典翻译
|
||||||
statusFormat(row, column) {
|
statusFormat(row, column) {
|
||||||
return this.selectDictLabel(this.statusOptions, row.status);
|
return this.selectDictLabel(this.statusOptions, row.status);
|
||||||
@ -250,26 +256,22 @@ export default {
|
|||||||
/** 新增按钮操作 */
|
/** 新增按钮操作 */
|
||||||
handleAdd(row) {
|
handleAdd(row) {
|
||||||
this.reset();
|
this.reset();
|
||||||
|
this.getTreeselect();
|
||||||
if (row != undefined) {
|
if (row != undefined) {
|
||||||
this.form.parentId = row.deptId;
|
this.form.parentId = row.deptId;
|
||||||
}
|
}
|
||||||
this.open = true;
|
this.open = true;
|
||||||
this.title = "添加部门";
|
this.title = "添加部门";
|
||||||
listDept().then(response => {
|
|
||||||
this.deptOptions = this.handleTree(response.data, "deptId");
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
/** 修改按钮操作 */
|
/** 修改按钮操作 */
|
||||||
handleUpdate(row) {
|
handleUpdate(row) {
|
||||||
this.reset();
|
this.reset();
|
||||||
|
this.getTreeselect();
|
||||||
getDept(row.deptId).then(response => {
|
getDept(row.deptId).then(response => {
|
||||||
this.form = response.data;
|
this.form = response.data;
|
||||||
this.open = true;
|
this.open = true;
|
||||||
this.title = "修改部门";
|
this.title = "修改部门";
|
||||||
});
|
});
|
||||||
listDeptExcludeChild(row.deptId).then(response => {
|
|
||||||
this.deptOptions = this.handleTree(response.data, "deptId");
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
/** 提交按钮 */
|
/** 提交按钮 */
|
||||||
submitForm: function() {
|
submitForm: function() {
|
||||||
@ -281,6 +283,8 @@ export default {
|
|||||||
this.msgSuccess("修改成功");
|
this.msgSuccess("修改成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@ -289,6 +293,8 @@ export default {
|
|||||||
this.msgSuccess("新增成功");
|
this.msgSuccess("新增成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -305,6 +305,8 @@ export default {
|
|||||||
this.msgSuccess("修改成功");
|
this.msgSuccess("修改成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@ -313,6 +315,8 @@ export default {
|
|||||||
this.msgSuccess("新增成功");
|
this.msgSuccess("新增成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -94,15 +94,6 @@
|
|||||||
v-hasPermi="['system:dict:export']"
|
v-hasPermi="['system:dict:export']"
|
||||||
>导出</el-button>
|
>导出</el-button>
|
||||||
</el-col>
|
</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-row>
|
||||||
|
|
||||||
<el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
|
<el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
|
||||||
@ -182,7 +173,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
name: "Dict",
|
name: "Dict",
|
||||||
@ -309,6 +300,8 @@ export default {
|
|||||||
this.msgSuccess("修改成功");
|
this.msgSuccess("修改成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@ -317,6 +310,8 @@ export default {
|
|||||||
this.msgSuccess("新增成功");
|
this.msgSuccess("新增成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -349,14 +344,6 @@ export default {
|
|||||||
}).then(response => {
|
}).then(response => {
|
||||||
this.download(response.msg);
|
this.download(response.msg);
|
||||||
}).catch(function() {});
|
}).catch(function() {});
|
||||||
},
|
|
||||||
/** 清理缓存按钮操作 */
|
|
||||||
handleClearCache() {
|
|
||||||
clearCache().then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.msgSuccess("清理成功");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -340,6 +340,8 @@ export default {
|
|||||||
this.msgSuccess("修改成功");
|
this.msgSuccess("修改成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@ -348,6 +350,8 @@ export default {
|
|||||||
this.msgSuccess("新增成功");
|
this.msgSuccess("新增成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -308,6 +308,8 @@ export default {
|
|||||||
this.msgSuccess("修改成功");
|
this.msgSuccess("修改成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@ -316,6 +318,8 @@ export default {
|
|||||||
this.msgSuccess("新增成功");
|
this.msgSuccess("新增成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -277,6 +277,8 @@ export default {
|
|||||||
this.msgSuccess("修改成功");
|
this.msgSuccess("修改成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@ -285,6 +287,8 @@ export default {
|
|||||||
this.msgSuccess("新增成功");
|
this.msgSuccess("新增成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -482,6 +482,8 @@ export default {
|
|||||||
this.msgSuccess("修改成功");
|
this.msgSuccess("修改成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
@ -491,6 +493,8 @@ export default {
|
|||||||
this.msgSuccess("新增成功");
|
this.msgSuccess("新增成功");
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -506,6 +510,8 @@ export default {
|
|||||||
this.msgSuccess("修改成功");
|
this.msgSuccess("修改成功");
|
||||||
this.openDataScope = false;
|
this.openDataScope = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -59,6 +59,8 @@ export default {
|
|||||||
response => {
|
response => {
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
this.msgSuccess("修改成功");
|
this.msgSuccess("修改成功");
|
||||||
|
} else {
|
||||||
|
this.msgError(response.msg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg" />
|
<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-row>
|
||||||
<el-col :xs="24" :md="12" :style="{height: '350px'}">
|
<el-col :xs="24" :md="12" :style="{height: '350px'}">
|
||||||
<vue-cropper
|
<vue-cropper
|
||||||
@ -13,7 +13,6 @@
|
|||||||
:autoCropHeight="options.autoCropHeight"
|
:autoCropHeight="options.autoCropHeight"
|
||||||
:fixedBox="options.fixedBox"
|
:fixedBox="options.fixedBox"
|
||||||
@realTime="realTime"
|
@realTime="realTime"
|
||||||
v-if="visible"
|
|
||||||
/>
|
/>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :md="12" :style="{height: '350px'}">
|
<el-col :xs="24" :md="12" :style="{height: '350px'}">
|
||||||
@ -68,8 +67,6 @@ export default {
|
|||||||
return {
|
return {
|
||||||
// 是否显示弹出层
|
// 是否显示弹出层
|
||||||
open: false,
|
open: false,
|
||||||
// 是否显示cropper
|
|
||||||
visible: false,
|
|
||||||
// 弹出层标题
|
// 弹出层标题
|
||||||
title: "修改头像",
|
title: "修改头像",
|
||||||
options: {
|
options: {
|
||||||
@ -87,10 +84,6 @@ export default {
|
|||||||
editCropper() {
|
editCropper() {
|
||||||
this.open = true;
|
this.open = true;
|
||||||
},
|
},
|
||||||
// 打开弹出层结束时的回调
|
|
||||||
modalOpened() {
|
|
||||||
this.visible = true;
|
|
||||||
},
|
|
||||||
// 覆盖默认的上传行为
|
// 覆盖默认的上传行为
|
||||||
requestUpload() {
|
requestUpload() {
|
||||||
},
|
},
|
||||||
@ -128,10 +121,11 @@ export default {
|
|||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
this.open = false;
|
this.open = false;
|
||||||
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
|
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
|
||||||
store.commit('SET_AVATAR', this.options.img);
|
|
||||||
this.msgSuccess("修改成功");
|
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 => {
|
updateUserProfile(this.user).then(response => {
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
this.msgSuccess("修改成功");
|
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: {}
|
info: {}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
beforeCreate() {
|
||||||
const tableId = this.$route.params && this.$route.params.tableId;
|
const { tableId } = this.$route.query;
|
||||||
if (tableId) {
|
if (tableId) {
|
||||||
// 获取表详细信息
|
// 获取表详细信息
|
||||||
getGenTable(tableId).then(res => {
|
getGenTable(tableId).then(res => {
|
||||||
|
|||||||
@ -270,7 +270,7 @@ export default {
|
|||||||
/** 修改按钮操作 */
|
/** 修改按钮操作 */
|
||||||
handleEditTable(row) {
|
handleEditTable(row) {
|
||||||
const tableId = row.tableId || this.ids[0];
|
const tableId = row.tableId || this.ids[0];
|
||||||
this.$router.push("/gen/edit/" + tableId);
|
this.$router.push({ path: "/gen/edit", query: { tableId: tableId } });
|
||||||
},
|
},
|
||||||
/** 删除按钮操作 */
|
/** 删除按钮操作 */
|
||||||
handleDelete(row) {
|
handleDelete(row) {
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
<packaging>jar</packaging>
|
<packaging>jar</packaging>
|
||||||
|
|
||||||
<name>ruoyi</name>
|
<name>ruoyi</name>
|
||||||
<url>http://www.ruoyi.vip</url>
|
<url>http://www.ruoyi.</url>
|
||||||
<description>若依管理系统</description>
|
<description>若依管理系统</description>
|
||||||
|
|
||||||
<parent>
|
<parent>
|
||||||
@ -63,26 +63,26 @@
|
|||||||
<groupId>org.springframework.boot</groupId>
|
<groupId>org.springframework.boot</groupId>
|
||||||
<artifactId>spring-boot-starter-web</artifactId>
|
<artifactId>spring-boot-starter-web</artifactId>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!-- spring-boot-devtools -->
|
<!-- spring-boot-devtools -->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>org.springframework.boot</groupId>
|
<groupId>org.springframework.boot</groupId>
|
||||||
<artifactId>spring-boot-devtools</artifactId>
|
<artifactId>spring-boot-devtools</artifactId>
|
||||||
<optional>true</optional> <!-- 表示依赖不会传递 -->
|
<optional>true</optional> <!-- 表示依赖不会传递 -->
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!-- spring security 安全认证 -->
|
<!-- spring security 安全认证 -->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>org.springframework.boot</groupId>
|
<groupId>org.springframework.boot</groupId>
|
||||||
<artifactId>spring-boot-starter-security</artifactId>
|
<artifactId>spring-boot-starter-security</artifactId>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!-- redis 缓存操作 -->
|
<!-- redis 缓存操作 -->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>org.springframework.boot</groupId>
|
<groupId>org.springframework.boot</groupId>
|
||||||
<artifactId>spring-boot-starter-data-redis</artifactId>
|
<artifactId>spring-boot-starter-data-redis</artifactId>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!-- pool 对象池 -->
|
<!-- pool 对象池 -->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>org.apache.commons</groupId>
|
<groupId>org.apache.commons</groupId>
|
||||||
@ -96,13 +96,24 @@
|
|||||||
<scope>runtime</scope>
|
<scope>runtime</scope>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
|
<dependency>
|
||||||
|
<groupId>com.microsoft.sqlserver</groupId>
|
||||||
|
<artifactId>mssql-jdbc</artifactId>
|
||||||
|
<scope>runtime</scope>
|
||||||
|
</dependency>
|
||||||
|
<dependency>
|
||||||
|
|
||||||
|
<groupId>net.sourceforge.jtds</groupId>
|
||||||
|
<artifactId>jtds</artifactId>
|
||||||
|
<version>1.3.1</version>
|
||||||
|
</dependency>
|
||||||
<!-- SpringBoot集成mybatis框架 -->
|
<!-- SpringBoot集成mybatis框架 -->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>org.mybatis.spring.boot</groupId>
|
<groupId>org.mybatis.spring.boot</groupId>
|
||||||
<artifactId>mybatis-spring-boot-starter</artifactId>
|
<artifactId>mybatis-spring-boot-starter</artifactId>
|
||||||
<version>${mybatis.spring.boot.starter.version}</version>
|
<version>${mybatis.spring.boot.starter.version}</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!-- pagehelper 分页插件 -->
|
<!-- pagehelper 分页插件 -->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>com.github.pagehelper</groupId>
|
<groupId>com.github.pagehelper</groupId>
|
||||||
@ -129,14 +140,14 @@
|
|||||||
<artifactId>commons-io</artifactId>
|
<artifactId>commons-io</artifactId>
|
||||||
<version>${commons.io.version}</version>
|
<version>${commons.io.version}</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!--文件上传工具类 -->
|
<!--文件上传工具类 -->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>commons-fileupload</groupId>
|
<groupId>commons-fileupload</groupId>
|
||||||
<artifactId>commons-fileupload</artifactId>
|
<artifactId>commons-fileupload</artifactId>
|
||||||
<version>${commons.fileupload.version}</version>
|
<version>${commons.fileupload.version}</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!-- 解析客户端操作系统、浏览器等 -->
|
<!-- 解析客户端操作系统、浏览器等 -->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>eu.bitwalker</groupId>
|
<groupId>eu.bitwalker</groupId>
|
||||||
@ -156,14 +167,14 @@
|
|||||||
<groupId>org.springframework</groupId>
|
<groupId>org.springframework</groupId>
|
||||||
<artifactId>spring-context-support</artifactId>
|
<artifactId>spring-context-support</artifactId>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!--Token生成与解析-->
|
<!--Token生成与解析-->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>io.jsonwebtoken</groupId>
|
<groupId>io.jsonwebtoken</groupId>
|
||||||
<artifactId>jjwt</artifactId>
|
<artifactId>jjwt</artifactId>
|
||||||
<version>${jwt.version}</version>
|
<version>${jwt.version}</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!-- swagger2-->
|
<!-- swagger2-->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>io.springfox</groupId>
|
<groupId>io.springfox</groupId>
|
||||||
@ -180,44 +191,44 @@
|
|||||||
</exclusion>
|
</exclusion>
|
||||||
</exclusions>
|
</exclusions>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!--防止进入swagger页面报类型转换错误，排除2.9.2中的引用，手动增加1.5.21版本-->
|
<!--防止进入swagger页面报类型转换错误，排除2.9.2中的引用，手动增加1.5.21版本-->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>io.swagger</groupId>
|
<groupId>io.swagger</groupId>
|
||||||
<artifactId>swagger-annotations</artifactId>
|
<artifactId>swagger-annotations</artifactId>
|
||||||
<version>1.5.21</version>
|
<version>1.5.21</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>io.swagger</groupId>
|
<groupId>io.swagger</groupId>
|
||||||
<artifactId>swagger-models</artifactId>
|
<artifactId>swagger-models</artifactId>
|
||||||
<version>1.5.21</version>
|
<version>1.5.21</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!-- swagger2-UI-->
|
<!-- swagger2-UI-->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>io.springfox</groupId>
|
<groupId>io.springfox</groupId>
|
||||||
<artifactId>springfox-swagger-ui</artifactId>
|
<artifactId>springfox-swagger-ui</artifactId>
|
||||||
<version>${swagger.version}</version>
|
<version>${swagger.version}</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!-- 获取系统信息 -->
|
<!-- 获取系统信息 -->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>com.github.oshi</groupId>
|
<groupId>com.github.oshi</groupId>
|
||||||
<artifactId>oshi-core</artifactId>
|
<artifactId>oshi-core</artifactId>
|
||||||
<version>${oshi.version}</version>
|
<version>${oshi.version}</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>net.java.dev.jna</groupId>
|
<groupId>net.java.dev.jna</groupId>
|
||||||
<artifactId>jna</artifactId>
|
<artifactId>jna</artifactId>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>net.java.dev.jna</groupId>
|
<groupId>net.java.dev.jna</groupId>
|
||||||
<artifactId>jna-platform</artifactId>
|
<artifactId>jna-platform</artifactId>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!-- excel工具 -->
|
<!-- excel工具 -->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>org.apache.poi</groupId>
|
<groupId>org.apache.poi</groupId>
|
||||||
@ -231,7 +242,7 @@
|
|||||||
<artifactId>velocity</artifactId>
|
<artifactId>velocity</artifactId>
|
||||||
<version>${velocity.version}</version>
|
<version>${velocity.version}</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
<!-- 定时任务 -->
|
<!-- 定时任务 -->
|
||||||
<dependency>
|
<dependency>
|
||||||
<groupId>org.quartz-scheduler</groupId>
|
<groupId>org.quartz-scheduler</groupId>
|
||||||
@ -284,4 +295,4 @@
|
|||||||
</pluginRepository>
|
</pluginRepository>
|
||||||
</pluginRepositories>
|
</pluginRepositories>
|
||||||
|
|
||||||
</project>
|
</project>
|
||||||
|
|||||||
139
ruoyi/src/main/java/com/ruoyi/db/mssql/DB_48102_Test.java
Normal file
139
ruoyi/src/main/java/com/ruoyi/db/mssql/DB_48102_Test.java
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
package com.ruoyi.db.mssql;
|
||||||
|
|
||||||
|
import java.sql.*;
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.HashMap;
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
public class DB_48102_Test {
|
||||||
|
|
||||||
|
private static final String IP = "192.168.48.102";
|
||||||
|
private static final String DBName = "ERPDATA";
|
||||||
|
private static final String USER = "sa";
|
||||||
|
private static final String PWD = "park$1299";
|
||||||
|
|
||||||
|
/** 创建数据库对象 */
|
||||||
|
private static Connection getSQLConnection() {
|
||||||
|
Connection con = null;
|
||||||
|
try {
|
||||||
|
Class.forName("net.sourceforge.jtds.jdbc.Driver");
|
||||||
|
// 加上 useunicode=true;characterEncoding=UTF-8 防止中文乱码
|
||||||
|
con = DriverManager.getConnection(
|
||||||
|
"jdbc:jtds:sqlserver://" + IP + ":1433/" + DBName + ";useunicode=true;characterEncoding=UTF-8",
|
||||||
|
USER, PWD);
|
||||||
|
} catch (ClassNotFoundException | SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
System.out.println("==连接数据库失败===");
|
||||||
|
}
|
||||||
|
// System.out.println("==连接数据库成功===");
|
||||||
|
return con;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static void main(String[] args) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGetChangeMouldTimeList() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\n" +
|
||||||
|
"\tLine,\n" +
|
||||||
|
"\tLEFT ( MouldingStyleCode, charindex( '-', MouldingStyleCode ) - 1 ) as Mould,MouldingStyleCode,\n" +
|
||||||
|
"\tStartTime,\n" +
|
||||||
|
"\tEndTime ,\n" +
|
||||||
|
"\tDATEDIFF( minute,starttime, endtime) as ChangeMouldTime\n" +
|
||||||
|
"FROM\n" +
|
||||||
|
"\t[dbo].[MouldingDisplayBoard] \n" +
|
||||||
|
"WHERE\n" +
|
||||||
|
"\tChangeMould = 1 and \tDATEDIFF( minute,starttime, endtime) > 20\n" +
|
||||||
|
"\torder by starttime desc \n";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("Line",rs.getString("Line"));
|
||||||
|
map.put("Mould",rs.getString("Mould"));
|
||||||
|
map.put("MouldingStyleCode",rs.getString("MouldingStyleCode"));
|
||||||
|
map.put("StartTime",rs.getString("StartTime"));
|
||||||
|
map.put("EndTime",rs.getString("EndTime"));
|
||||||
|
map.put("ChangeMouldTime",rs.getString("ChangeMouldTime"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGet_avg_changemouldtime_date_range(String fstarttime, String fendtime) {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT AVG\r\n" +
|
||||||
|
" (\r\n" +
|
||||||
|
" DATEDIFF( MINUTE, StartTime, EndTime )) AS avgchangemouldtime \r\n" +
|
||||||
|
"FROM\r\n" +
|
||||||
|
" dbo.MouldingDisplayBoard \r\n" +
|
||||||
|
"WHERE\r\n" +
|
||||||
|
"\tChangeMould = 1 and \tDATEDIFF( minute,starttime, endtime) > 20\n" +
|
||||||
|
" AND Deleted = 0 \r\n" +
|
||||||
|
" AND StartTime > '" + fstarttime + "' \r\n" +
|
||||||
|
" AND endtime < '" + fendtime + "'";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("avgchangemouldtime",rs.getString("avgchangemouldtime"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public static String JsonTest() {
|
||||||
|
StringBuilder jsonpath = new StringBuilder();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT * from [chen_12个月_A版本BOM销售额] FOR JSON PATH";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
jsonpath.append(rs.getString(1));
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return jsonpath.toString();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,298 @@
|
|||||||
|
package com.ruoyi.db.mssql;
|
||||||
|
|
||||||
|
import java.sql.*;
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.HashMap;
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
public class DB_Ajax_DashBoard_48102 {
|
||||||
|
|
||||||
|
private static final String IP = "192.168.48.102";
|
||||||
|
private static final String DBName = "ERPDATA";
|
||||||
|
private static final String USER = "sa";
|
||||||
|
private static final String PWD = "park$1299";
|
||||||
|
|
||||||
|
/** 创建数据库对象 */
|
||||||
|
private static Connection getSQLConnection() {
|
||||||
|
Connection con = null;
|
||||||
|
try {
|
||||||
|
Class.forName("net.sourceforge.jtds.jdbc.Driver");
|
||||||
|
// 加上 useunicode=true;characterEncoding=UTF-8 防止中文乱码
|
||||||
|
con = DriverManager.getConnection(
|
||||||
|
"jdbc:jtds:sqlserver://" + IP + ":1433/" + DBName + ";useunicode=true;characterEncoding=UTF-8",
|
||||||
|
USER, PWD);
|
||||||
|
} catch (ClassNotFoundException | SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
System.out.println("==连接数据库失败===");
|
||||||
|
}
|
||||||
|
// System.out.println("==连接数据库成功===");
|
||||||
|
return con;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static void main(String[] args) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGetCurrentTimeGroup() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT * FROM [dbo].[V_chen_Dashboard_当前] order by line";
|
||||||
|
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("line",rs.getString("line"));
|
||||||
|
map.put("Moulds",rs.getString("Moulds"));
|
||||||
|
map.put("Person",rs.getString("Person"));
|
||||||
|
map.put("NormalCapacity",rs.getString("NormalCapacity"));
|
||||||
|
map.put("currentspeed",rs.getString("currentspeed"));
|
||||||
|
map.put("FinishedQuantity",rs.getString("FinishedQuantity"));
|
||||||
|
map.put("GroupTime",rs.getString("GroupTime"));
|
||||||
|
map.put("GroupChangeMouldTime",rs.getString("GroupChangeMouldTime"));
|
||||||
|
map.put("CurrentYield",rs.getString("CurrentYield"));
|
||||||
|
map.put("CapacityStandardObtainedRate",rs.getString("CapacityStandardObtainedRate"));
|
||||||
|
map.put("AvgDensity",rs.getString("AvgDensity"));
|
||||||
|
map.put("MouldAndChangeMouldTime",rs.getString("MouldAndChangeMouldTime"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGetLastDay() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT * FROM V_chen_Dashboard_当天";
|
||||||
|
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("line",rs.getString("line"));
|
||||||
|
map.put("Moulds",rs.getString("Moulds"));
|
||||||
|
map.put("sumbox",rs.getString("sumbox"));
|
||||||
|
map.put("sum_box_meter",rs.getString("sum_box_meter"));
|
||||||
|
map.put("sum_device_meter",rs.getString("sum_device_meter"));
|
||||||
|
map.put("avg_density",rs.getString("avg_density"));
|
||||||
|
map.put("avg_currentcapacity",rs.getString("avg_currentcapacity"));
|
||||||
|
map.put("avg_normalcapacity",rs.getString("avg_normalcapacity"));
|
||||||
|
map.put("lastchangemouldtime",rs.getString("lastchangemouldtime"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGet30Day() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT * FROM V_chen_Dashboard_当月";
|
||||||
|
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("line",rs.getString("line"));
|
||||||
|
map.put("Moulds",rs.getString("Moulds"));
|
||||||
|
map.put("sumbox",rs.getString("sumbox"));
|
||||||
|
map.put("sum_box_meter",rs.getString("sum_box_meter"));
|
||||||
|
map.put("sum_device_meter",rs.getString("sum_device_meter"));
|
||||||
|
map.put("avg_density",rs.getString("avg_density"));
|
||||||
|
map.put("avg_currentcapacity",rs.getString("avg_currentcapacity"));
|
||||||
|
map.put("avg_normalcapacity",rs.getString("avg_normalcapacity"));
|
||||||
|
map.put("lastchangemouldtime",rs.getString("lastchangemouldtime"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGetDateRange(String fstarttime, String fendtime) {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "DECLARE @FStartTime DATETIME\r\n" +
|
||||||
|
"DECLARE @FEndTime DATETIME\r\n" +
|
||||||
|
"\r\n" +
|
||||||
|
"set @FStartTime='" + fstarttime + "'\r\n" +
|
||||||
|
"set @FEndTime='" + fendtime + "'\r\n" +
|
||||||
|
"\r\n" +
|
||||||
|
"\r\n" +
|
||||||
|
"\r\n" +
|
||||||
|
"\r\n" +
|
||||||
|
"SELECT\r\n" +
|
||||||
|
" db1.line,\r\n" +
|
||||||
|
" AVG ( avg_density ) AS avg_density,\r\n" +
|
||||||
|
" SUM ( sumbox ) AS sumbox,\r\n" +
|
||||||
|
" MAX ( db2.sum1 ) AS sum_box_meter,\r\n" +
|
||||||
|
" MAX ( db2.sum0 ) AS sum_device_meter,\r\n" +
|
||||||
|
" dbo.chen_cal_line_time_mould ( MIN ( db1.StartTime ), MAX ( db1.EndTime ), db1.Line ) AS Moulds,\r\n" +
|
||||||
|
" SUM ( currentcap * ( boxmeter / db2.sum1 )) AS avg_currentcapacity,\r\n" +
|
||||||
|
" SUM ( db1.NormalCapacity* ( boxmeter / db2.sum1 )) AS avg_normalcapacity,\r\n" +
|
||||||
|
" SUM ( boxmeter / db2.sum1 ) AS 校验字段 ,\r\n" +
|
||||||
|
" avg(db4.ChangeMouldTime) as lastchangemouldtime\r\n" +
|
||||||
|
"FROM \r\n" +
|
||||||
|
" (SELECT\r\n" +
|
||||||
|
" dbo.chen_cal_line_difftime( db3.StartTime, db3.EndTime, db3.line, db3.EndTime) as difftime,\r\n" +
|
||||||
|
" db3.Quantity as Quantity,\r\n" +
|
||||||
|
" db3.StartTime as StartTime,\r\n" +
|
||||||
|
" db3.EndTime as EndTime,\r\n" +
|
||||||
|
" db3.line as line,\r\n" +
|
||||||
|
" db3.Length as Length ,\r\n" +
|
||||||
|
" db3.NumberOfEveryKit as NumberOfEveryKit,\r\n" +
|
||||||
|
" db3.MouldingStyleCode as MouldingStyleCode,\r\n" +
|
||||||
|
" db3.SoCode as SoCode,\r\n" +
|
||||||
|
" dbo.chen_cal_line_time_mould ( db3.StartTime, db3.EndTime, Line ) AS Moulds,\r\n" +
|
||||||
|
" dbo.chen_cal_line_time_density ( db3.StartTime, db3.EndTime, Line ) AS avg_density,\r\n" +
|
||||||
|
" \r\n" +
|
||||||
|
" dbo.chen_cal_line_meter ( db3.StartTime, db3.EndTime, Line, @FEndTime ) / dbo.chen_cal_line_difftime( db3.StartTime, db3.EndTime, db3.line, db3.EndTime) * 60 * 60 * 12 AS currentcap,\r\n" +
|
||||||
|
" NormalCapacity,\r\n" +
|
||||||
|
" db3.sumbox AS sumbox,\r\n" +
|
||||||
|
" dbo.chen_cal_line_meter ( db3.StartTime, db3.EndTime, Line, @FEndTime ) AS meter,\r\n" +
|
||||||
|
" (db3.Length * db3.NumberOfEveryKit * db3.sumbox) AS boxmeter\r\n" +
|
||||||
|
" \r\n" +
|
||||||
|
"FROM\r\n" +
|
||||||
|
" (\r\n" +
|
||||||
|
" SELECT\r\n" +
|
||||||
|
" db2.id,\r\n" +
|
||||||
|
" db2.line,\r\n" +
|
||||||
|
" SUM ( db1.Quantity ) AS sumbox,\r\n" +
|
||||||
|
" MIN ( db1.OperateTime ) AS minop,\r\n" +
|
||||||
|
" MAX ( db1.OperateTime ) AS maxop,\r\n" +
|
||||||
|
" MAX (db2.Quantity) as Quantity, \r\n" +
|
||||||
|
" MAX (db2.Length) as Length,\r\n" +
|
||||||
|
" MAX (db2.NumberOfEveryKit) as NumberOfEveryKit,\r\n" +
|
||||||
|
" MAX (db2.MouldingStyleCode) as MouldingStyleCode,\r\n" +
|
||||||
|
" MAX (db2.SoCode) as SoCode, MAX (db2.NormalCapacity) as NormalCapacity,\r\n" +
|
||||||
|
" ( CASE WHEN MIN ( db2.StartTime ) < @FStartTime THEN @FStartTime ELSE MIN ( db2.StartTime ) END ) AS StartTime,\r\n" +
|
||||||
|
" ( CASE WHEN MIN ( db2.EndTime ) IS NULL THEN (dbo.chen_cal_line_op_lasttime(MIN ( db2.EndTime ),db2.line,@FEndTime)) ELSE ( CASE WHEN MIN ( db2.EndTime ) > @FEndTime THEN @FEndTime ELSE MIN ( db2.EndTime ) END ) END ) AS EndTime FROM\r\n" +
|
||||||
|
" [dbo].[MouldingDisplayBoardOperation] AS db1\r\n" +
|
||||||
|
" INNER JOIN MouldingDisplayBoard AS db2 ON db2.id = db1.DisplayBoardId \r\n" +
|
||||||
|
" WHERE\r\n" +
|
||||||
|
" db1.OperateTime >= @FStartTime \r\n" +
|
||||||
|
" AND db1.OperateTime <= @FEndTime \r\n" +
|
||||||
|
" GROUP BY\r\n" +
|
||||||
|
" db2.id,\r\n" +
|
||||||
|
" db2.line \r\n" +
|
||||||
|
" ) AS db3) AS db1\r\n" +
|
||||||
|
" INNER JOIN ( SELECT line, SUM ( meter ) AS sum0, SUM ( boxmeter ) AS sum1 FROM (SELECT\r\n" +
|
||||||
|
" dbo.chen_cal_line_difftime( db3.StartTime, db3.EndTime, db3.line, db3.EndTime) as difftime,\r\n" +
|
||||||
|
" db3.Quantity as Quantity,\r\n" +
|
||||||
|
" db3.StartTime as StartTime,\r\n" +
|
||||||
|
" db3.EndTime as EndTime,\r\n" +
|
||||||
|
" db3.line as line,\r\n" +
|
||||||
|
" db3.Length as Length ,\r\n" +
|
||||||
|
" db3.NumberOfEveryKit as NumberOfEveryKit,\r\n" +
|
||||||
|
" db3.MouldingStyleCode as MouldingStyleCode,\r\n" +
|
||||||
|
" db3.SoCode as SoCode,\r\n" +
|
||||||
|
" dbo.chen_cal_line_time_mould ( db3.StartTime, db3.EndTime, Line ) AS Moulds,\r\n" +
|
||||||
|
" dbo.chen_cal_line_time_density ( db3.StartTime, db3.EndTime, Line ) AS avg_density,\r\n" +
|
||||||
|
" \r\n" +
|
||||||
|
" dbo.chen_cal_line_meter ( db3.StartTime, db3.EndTime, Line, @FEndTime ) / dbo.chen_cal_line_difftime( db3.StartTime, db3.EndTime, db3.line, db3.EndTime) * 60 * 60 * 12 AS currentcap,\r\n" +
|
||||||
|
" NormalCapacity,\r\n" +
|
||||||
|
" db3.sumbox AS sumbox,\r\n" +
|
||||||
|
" dbo.chen_cal_line_meter ( db3.StartTime, db3.EndTime, Line, @FEndTime ) AS meter,\r\n" +
|
||||||
|
" (db3.Length * db3.NumberOfEveryKit * db3.sumbox) AS boxmeter\r\n" +
|
||||||
|
" \r\n" +
|
||||||
|
"FROM\r\n" +
|
||||||
|
" (\r\n" +
|
||||||
|
" SELECT\r\n" +
|
||||||
|
" db2.id,\r\n" +
|
||||||
|
" db2.line,\r\n" +
|
||||||
|
" SUM ( db1.Quantity ) AS sumbox,\r\n" +
|
||||||
|
" MIN ( db1.OperateTime ) AS minop,\r\n" +
|
||||||
|
" MAX ( db1.OperateTime ) AS maxop,\r\n" +
|
||||||
|
" MAX (db2.Quantity) as Quantity, \r\n" +
|
||||||
|
" MAX (db2.Length) as Length,\r\n" +
|
||||||
|
" MAX (db2.NumberOfEveryKit) as NumberOfEveryKit,\r\n" +
|
||||||
|
" MAX (db2.MouldingStyleCode) as MouldingStyleCode,\r\n" +
|
||||||
|
" MAX (db2.SoCode) as SoCode, MAX (db2.NormalCapacity) as NormalCapacity,\r\n" +
|
||||||
|
" ( CASE WHEN MIN ( db2.StartTime ) < @FStartTime THEN @FStartTime ELSE MIN ( db2.StartTime ) END ) AS StartTime,\r\n" +
|
||||||
|
" ( CASE WHEN MIN ( db2.EndTime ) IS NULL THEN (dbo.chen_cal_line_op_lasttime(MIN ( db2.EndTime ),db2.line,@FEndTime)) ELSE ( CASE WHEN MIN ( db2.EndTime ) > @FEndTime THEN @FEndTime ELSE MIN ( db2.EndTime ) END ) END ) AS EndTime FROM\r\n" +
|
||||||
|
" [dbo].[MouldingDisplayBoardOperation] AS db1\r\n" +
|
||||||
|
" INNER JOIN MouldingDisplayBoard AS db2 ON db2.id = db1.DisplayBoardId \r\n" +
|
||||||
|
" WHERE\r\n" +
|
||||||
|
" db1.OperateTime >= @FStartTime \r\n" +
|
||||||
|
" AND db1.OperateTime <= @FEndTime \r\n" +
|
||||||
|
" GROUP BY\r\n" +
|
||||||
|
" db2.id,\r\n" +
|
||||||
|
" db2.line \r\n" +
|
||||||
|
" ) AS db3) AS db3 GROUP BY line ) AS db2 ON db2.line = db1.line\r\n" +
|
||||||
|
" LEFT JOIN (SELECT Line,id,DATEDIFF(MINUTE,StartTime,EndTime) as ChangeMouldTime FROM MouldingDisplayBoard WHERE id IN (SELECT MAX (id) AS id FROM MouldingDisplayBoard WHERE ChangeMould=1 GROUP BY Line)) as db4 on db4.line = db1.line\r\n" +
|
||||||
|
"\r\n" +
|
||||||
|
"GROUP BY\r\n" +
|
||||||
|
" db1.line";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("line",rs.getString("line"));
|
||||||
|
map.put("Moulds",rs.getString("Moulds"));
|
||||||
|
map.put("sumbox",rs.getString("sumbox"));
|
||||||
|
map.put("sum_box_meter",rs.getString("sum_box_meter"));
|
||||||
|
map.put("sum_device_meter",rs.getString("sum_device_meter"));
|
||||||
|
map.put("avg_density",rs.getString("avg_density"));
|
||||||
|
map.put("avg_currentcapacity",rs.getString("avg_currentcapacity"));
|
||||||
|
map.put("avg_normalcapacity",rs.getString("avg_normalcapacity"));
|
||||||
|
map.put("lastchangemouldtime",rs.getString("lastchangemouldtime"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,151 @@
|
|||||||
|
package com.ruoyi.db.mssql;
|
||||||
|
|
||||||
|
import java.sql.*;
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.HashMap;
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
public class DB_Ajax_DashBoard_ChangeMouldTime_48102 {
|
||||||
|
|
||||||
|
private static final String IP = "192.168.48.102";
|
||||||
|
private static final String DBName = "ERPDATA";
|
||||||
|
private static final String USER = "sa";
|
||||||
|
private static final String PWD = "park$1299";
|
||||||
|
|
||||||
|
/** 创建数据库对象 */
|
||||||
|
private static Connection getSQLConnection() {
|
||||||
|
Connection con = null;
|
||||||
|
try {
|
||||||
|
Class.forName("net.sourceforge.jtds.jdbc.Driver");
|
||||||
|
// 加上 useunicode=true;characterEncoding=UTF-8 防止中文乱码
|
||||||
|
con = DriverManager.getConnection(
|
||||||
|
"jdbc:jtds:sqlserver://" + IP + ":1433/" + DBName + ";useunicode=true;characterEncoding=UTF-8",
|
||||||
|
USER, PWD);
|
||||||
|
} catch (ClassNotFoundException | SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
System.out.println("==连接数据库失败===");
|
||||||
|
}
|
||||||
|
// System.out.println("==连接数据库成功===");
|
||||||
|
return con;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static void main(String[] args) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGetChangeMouldTimeList() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\n" +
|
||||||
|
"\tLine,\n" +
|
||||||
|
"\tLEFT ( MouldingStyleCode, charindex( '-', MouldingStyleCode ) - 1 ) as Mould,MouldingStyleCode,\n" +
|
||||||
|
"\tStartTime,\n" +
|
||||||
|
"\tEndTime ,\n" +
|
||||||
|
"\tDATEDIFF( minute,starttime, endtime) as ChangeMouldTime\n" +
|
||||||
|
"FROM\n" +
|
||||||
|
"\t[dbo].[MouldingDisplayBoard] \n" +
|
||||||
|
"WHERE\n" +
|
||||||
|
"\tChangeMould = 1 and \tDATEDIFF( minute,starttime, endtime) > 20\n" +
|
||||||
|
"\torder by starttime desc \n";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("Line",rs.getString("Line"));
|
||||||
|
map.put("Mould",rs.getString("Mould"));
|
||||||
|
map.put("MouldingStyleCode",rs.getString("MouldingStyleCode"));
|
||||||
|
map.put("StartTime",rs.getString("StartTime"));
|
||||||
|
map.put("EndTime",rs.getString("EndTime"));
|
||||||
|
map.put("ChangeMouldTime",rs.getString("ChangeMouldTime"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGet_avg_changemouldtime_date_range(String fstarttime, String fendtime) {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT AVG\r\n" +
|
||||||
|
" (\r\n" +
|
||||||
|
" DATEDIFF( MINUTE, StartTime, EndTime )) AS avgchangemouldtime \r\n" +
|
||||||
|
"FROM\r\n" +
|
||||||
|
" dbo.MouldingDisplayBoard \r\n" +
|
||||||
|
"WHERE\r\n" +
|
||||||
|
"\tChangeMould = 1 and \tDATEDIFF( minute,starttime, endtime) > 20\n" +
|
||||||
|
" AND Deleted = 0 \r\n" +
|
||||||
|
" AND StartTime > '" + fstarttime + "' \r\n" +
|
||||||
|
" AND endtime < '" + fendtime + "'";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("avgchangemouldtime",rs.getString("avgchangemouldtime"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGetGroupDensityListMap() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\r\n" +
|
||||||
|
" line AS line,\r\n" +
|
||||||
|
" AVG ( Density ) AS density \r\n" +
|
||||||
|
"FROM\r\n" +
|
||||||
|
" [dbo].[MouldingRealTimeDensity] \r\n" +
|
||||||
|
"WHERE\r\n" +
|
||||||
|
" CreatedOn > dbo.GetWorkShiftStartDate ( GETDATE( ) ) \r\n" +
|
||||||
|
"GROUP BY\r\n" +
|
||||||
|
" line \r\n" +
|
||||||
|
"ORDER BY\r\n" +
|
||||||
|
" convert(int,REPLACE( line, '#', '' ) )";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("density",rs.getString("density"));
|
||||||
|
map.put("time",rs.getString("line"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,245 @@
|
|||||||
|
package com.ruoyi.db.mssql;
|
||||||
|
|
||||||
|
import java.sql.*;
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.HashMap;
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
public class DB_Ajax_DashBoard_Density_48102 {
|
||||||
|
|
||||||
|
private static final String IP = "192.168.48.102";
|
||||||
|
private static final String DBName = "ERPDATA";
|
||||||
|
private static final String USER = "sa";
|
||||||
|
private static final String PWD = "park$1299";
|
||||||
|
|
||||||
|
/** 创建数据库对象 */
|
||||||
|
private static Connection getSQLConnection() {
|
||||||
|
Connection con = null;
|
||||||
|
try {
|
||||||
|
Class.forName("net.sourceforge.jtds.jdbc.Driver");
|
||||||
|
// 加上 useunicode=true;characterEncoding=UTF-8 防止中文乱码
|
||||||
|
con = DriverManager.getConnection(
|
||||||
|
"jdbc:jtds:sqlserver://" + IP + ":1433/" + DBName + ";useunicode=true;characterEncoding=UTF-8",
|
||||||
|
USER, PWD);
|
||||||
|
} catch (ClassNotFoundException | SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
System.out.println("==连接数据库失败===");
|
||||||
|
}
|
||||||
|
// System.out.println("==连接数据库成功===");
|
||||||
|
return con;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static void main(String[] args) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public static List<String> DoGet72hdensity() {
|
||||||
|
List<String> list = new ArrayList<String>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\r\n" +
|
||||||
|
" ProductDate+TIME as time,\r\n" +
|
||||||
|
" AVG ( Density ) as density\r\n" +
|
||||||
|
"FROM\r\n" +
|
||||||
|
" [dbo].[MouldingRealTimeDensity] \r\n" +
|
||||||
|
"WHERE\r\n" +
|
||||||
|
" CreatedOn > GETDATE( ) - 3\r\n" +
|
||||||
|
"GROUP BY\r\n" +
|
||||||
|
" ProductDate,\r\n" +
|
||||||
|
"TIME ORDER BY MAX(CreatedOn)";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
System.out.println(sql);
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
list.add("{time:\"" + rs.getString("time") + "\",density:\"" + rs.getString("density")
|
||||||
|
+ "\"}");
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return list;
|
||||||
|
}
|
||||||
|
public static List<String> DoGetgroupdensity() {
|
||||||
|
List<String> list = new ArrayList<String>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\r\n" +
|
||||||
|
" line AS line,\r\n" +
|
||||||
|
" AVG ( Density ) AS density \r\n" +
|
||||||
|
"FROM\r\n" +
|
||||||
|
" [dbo].[MouldingRealTimeDensity] \r\n" +
|
||||||
|
"WHERE\r\n" +
|
||||||
|
" CreatedOn > dbo.GetWorkShiftStartDate ( GETDATE( ) ) \r\n" +
|
||||||
|
"GROUP BY\r\n" +
|
||||||
|
" line \r\n" +
|
||||||
|
"ORDER BY\r\n" +
|
||||||
|
" convert(int,REPLACE( line, '#', '' ) )";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
System.out.println(sql);
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
list.add("{line:\"" + rs.getString("line") + "\",density:\"" + rs.getString("density")
|
||||||
|
+ "\"}");
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return list;
|
||||||
|
}
|
||||||
|
public static List<String> DoGet30ddensity() {
|
||||||
|
List<String> list = new ArrayList<String>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\r\n" +
|
||||||
|
" ProductDate as time,\r\n" +
|
||||||
|
" AVG ( Density ) as density\r\n" +
|
||||||
|
"FROM\r\n" +
|
||||||
|
" [dbo].[MouldingRealTimeDensity] \r\n" +
|
||||||
|
"WHERE\r\n" +
|
||||||
|
" CreatedOn > GETDATE( ) - 30\r\n" +
|
||||||
|
"GROUP BY\r\n" +
|
||||||
|
" ProductDate ORDER BY MAX(CreatedOn)";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
System.out.println(sql);
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
list.add("{time:\"" + rs.getString("time") + "\",density:\"" + rs.getString("density")
|
||||||
|
+ "\"}");
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return list;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGet30dDensityListMap() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\r\n" +
|
||||||
|
" ProductDate as time,\r\n" +
|
||||||
|
" AVG ( Density ) as density\r\n" +
|
||||||
|
"FROM\r\n" +
|
||||||
|
" [dbo].[MouldingRealTimeDensity] \r\n" +
|
||||||
|
"WHERE\r\n" +
|
||||||
|
" CreatedOn > GETDATE( ) - 30\r\n" +
|
||||||
|
"GROUP BY\r\n" +
|
||||||
|
" ProductDate ORDER BY MAX(CreatedOn)";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
System.out.println(sql);
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("density",rs.getString("density"));
|
||||||
|
map.put("time",rs.getString("time"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGet72hDensityListMap() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\r\n" +
|
||||||
|
" ProductDate+TIME as time,\r\n" +
|
||||||
|
" AVG ( Density ) as density\r\n" +
|
||||||
|
"FROM\r\n" +
|
||||||
|
" [dbo].[MouldingRealTimeDensity] \r\n" +
|
||||||
|
"WHERE\r\n" +
|
||||||
|
" CreatedOn > GETDATE( ) - 3\r\n" +
|
||||||
|
"GROUP BY\r\n" +
|
||||||
|
" ProductDate,\r\n" +
|
||||||
|
"TIME ORDER BY MAX(CreatedOn)";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
System.out.println(sql);
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("density",rs.getString("density"));
|
||||||
|
map.put("time",rs.getString("time"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGetGroupDensityListMap() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\r\n" +
|
||||||
|
" line AS line,\r\n" +
|
||||||
|
" AVG ( Density ) AS density \r\n" +
|
||||||
|
"FROM\r\n" +
|
||||||
|
" [dbo].[MouldingRealTimeDensity] \r\n" +
|
||||||
|
"WHERE\r\n" +
|
||||||
|
" CreatedOn > dbo.GetWorkShiftStartDate ( GETDATE( ) ) \r\n" +
|
||||||
|
"GROUP BY\r\n" +
|
||||||
|
" line \r\n" +
|
||||||
|
"ORDER BY\r\n" +
|
||||||
|
" convert(int,REPLACE( line, '#', '' ) )";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
System.out.println(sql);
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("density",rs.getString("density"));
|
||||||
|
map.put("time",rs.getString("line"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,452 @@
|
|||||||
|
package com.ruoyi.db.mssql;
|
||||||
|
|
||||||
|
import java.sql.*;
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.HashMap;
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
public class DB_Ajax_DashBoard_Technologist_48102 {
|
||||||
|
|
||||||
|
private static final String IP = "192.168.48.102";
|
||||||
|
private static final String DBName = "ERPDATA";
|
||||||
|
private static final String USER = "sa";
|
||||||
|
private static final String PWD = "park$1299";
|
||||||
|
|
||||||
|
/** 创建数据库对象 */
|
||||||
|
private static Connection getSQLConnection() {
|
||||||
|
Connection con = null;
|
||||||
|
try {
|
||||||
|
Class.forName("net.sourceforge.jtds.jdbc.Driver");
|
||||||
|
// 加上 useunicode=true;characterEncoding=UTF-8 防止中文乱码
|
||||||
|
con = DriverManager.getConnection(
|
||||||
|
"jdbc:jtds:sqlserver://" + IP + ":1433/" + DBName + ";useunicode=true;characterEncoding=UTF-8",
|
||||||
|
USER, PWD);
|
||||||
|
} catch (ClassNotFoundException | SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
System.out.println("==连接数据库失败===");
|
||||||
|
}
|
||||||
|
// System.out.println("==连接数据库成功===");
|
||||||
|
return con;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static void main(String[] args) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGetSampleConfirmation() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\n" +
|
||||||
|
"\t内外销,\n" +
|
||||||
|
"\tSUM ( CASE WHEN 客户是否下单 = '是' THEN 1 ELSE 0 END ) AS 下单数,\n" +
|
||||||
|
"\tCOUNT (内外销) AS 打样数 \n" +
|
||||||
|
"FROM\n" +
|
||||||
|
"\t[dbo].[chen_打样分析汇总] \n" +
|
||||||
|
"GROUP BY\n" +
|
||||||
|
"\t内外销;";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("NWX",rs.getString("内外销"));
|
||||||
|
map.put("ConfirmationNum",rs.getString("下单数"));
|
||||||
|
map.put("SampleNum",rs.getString("打样数"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGetBestOEM() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT TOP\n" +
|
||||||
|
"\t20 MouldingStyleCode,\n" +
|
||||||
|
"\t[折算人民币价税合计] AS CNY \n" +
|
||||||
|
"FROM\n" +
|
||||||
|
"\t[chen_12个月_A版本BOM销售额] \n" +
|
||||||
|
"WHERE\n" +
|
||||||
|
"\ttagname = 'OEM' \n" +
|
||||||
|
"ORDER BY\n" +
|
||||||
|
"\t折算人民币价税合计 DESC";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("MouldingStyleCode",rs.getString("MouldingStyleCode"));
|
||||||
|
map.put("CNY",rs.getString("CNY"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static List<HashMap<String,String>> DoGetBestODM() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT TOP\n" +
|
||||||
|
"\t20 MouldingStyleCode,\n" +
|
||||||
|
"\t[折算人民币价税合计] AS CNY \n" +
|
||||||
|
"FROM\n" +
|
||||||
|
"\t[chen_12个月_A版本BOM销售额] \n" +
|
||||||
|
"WHERE\n" +
|
||||||
|
"\ttagname = 'ODM' \n" +
|
||||||
|
"ORDER BY\n" +
|
||||||
|
"\t折算人民币价税合计 DESC";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("MouldingStyleCode",rs.getString("MouldingStyleCode"));
|
||||||
|
map.put("CNY",rs.getString("CNY"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 已完成订单交期
|
||||||
|
* 根据工艺员共计数量
|
||||||
|
*/
|
||||||
|
public static List<HashMap<String,String>> DoFinishedSampleAvgDay() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\n" +
|
||||||
|
"\tTechnologist,\n" +
|
||||||
|
"\tCOUNT(id) as num,\n" +
|
||||||
|
"\tAVG (\n" +
|
||||||
|
"\tCAST ( [分解天数] AS FLOAT )) AS avg_f,\n" +
|
||||||
|
"\tAVG ( CAST ( [交期天数] AS FLOAT ) ) AS avg_j \n" +
|
||||||
|
"FROM\n" +
|
||||||
|
"\t[dbo].[chen_打样分析汇总] \n" +
|
||||||
|
"WHERE\n" +
|
||||||
|
"\tStatus = 3 \n" +
|
||||||
|
"GROUP BY\n" +
|
||||||
|
"\tTechnologist";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("Technologist",rs.getString("Technologist"));
|
||||||
|
map.put("avg_f",rs.getString("avg_f"));
|
||||||
|
map.put("num",rs.getString("num"));
|
||||||
|
map.put("avg_j",rs.getString("avg_j"));
|
||||||
|
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 未完成打样交期
|
||||||
|
* 根据工艺员共计数量
|
||||||
|
*/
|
||||||
|
public static List<HashMap<String,String>> DoUnFinishedSampleAvgDay() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\n" +
|
||||||
|
"\tTechnologist,\n" +
|
||||||
|
"\tCOUNT ( id ) AS num,\n" +
|
||||||
|
"\tSUM ( CASE WHEN use_date >= 15 THEN 1 ELSE 0 END ) as day15num,\n" +
|
||||||
|
"\tAVG(use_date) as avg_use_date\n" +
|
||||||
|
"\tFROM\n" +
|
||||||
|
"\t\t( SELECT Technologist, id, DATEDIFF( DAY, [经理审核时间], GETDATE()) AS use_date FROM [dbo].[chen_打样分析汇总] WHERE ( Status = 2 OR Status = 1 ) AND [经理审核时间] IS NOT NULL ) AS db0 \n" +
|
||||||
|
"GROUP BY\n" +
|
||||||
|
"\tTechnologist";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("Technologist",rs.getString("Technologist"));
|
||||||
|
map.put("day15num",rs.getString("day15num"));
|
||||||
|
map.put("num",rs.getString("num"));
|
||||||
|
map.put("avg_use_date",rs.getString("avg_use_date"));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增订单
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
public static List<HashMap<String,String>> DayFinishedSampleOrder() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\n" +
|
||||||
|
"dbo.[chen_打样分析汇总].Technologist,\n" +
|
||||||
|
"dbo.[chen_打样分析汇总].SalesMan,\n" +
|
||||||
|
"dbo.[chen_打样分析汇总].MouldingStyleCode,\n" +
|
||||||
|
"dbo.[chen_打样分析汇总].[折算人民币价税合计] as CNY\n" +
|
||||||
|
"\n" +
|
||||||
|
"FROM\n" +
|
||||||
|
"dbo.[chen_打样分析汇总]\n" +
|
||||||
|
"WHERE\n" +
|
||||||
|
"dbo.[chen_打样分析汇总].CreatedOn >= dbo.GetWorkShiftStartDate ( GETDATE( ) - 1 ) AND\n" +
|
||||||
|
"dbo.[chen_打样分析汇总].CreatedOn <= dbo.GetWorkShiftStartDate ( GETDATE( ) )\n";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("Technologist",rs.getString("Technologist"));
|
||||||
|
map.put("SalesMan",rs.getString("SalesMan"));
|
||||||
|
map.put("MouldingStyleCode",rs.getString("MouldingStyleCode"));
|
||||||
|
map.put("CNY",rs.getString("CNY"));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新开模
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
public static List<HashMap<String,String>> DayNewMould() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\n" +
|
||||||
|
"dbo.MouldManufacture.MouldCode,\n" +
|
||||||
|
"CASE dbo.MouldManufacture.ManufactureType\n" +
|
||||||
|
"\tWHEN 1 THEN N'新开模'\n" +
|
||||||
|
"\tELSE N'修模'\n" +
|
||||||
|
"END as new_or_fix\n" +
|
||||||
|
",\n" +
|
||||||
|
"BD_User.UserName\n" +
|
||||||
|
"FROM\n" +
|
||||||
|
"dbo.MouldManufacture\n" +
|
||||||
|
"INNER JOIN BD_User on dbo.MouldManufacture.CreatedBy = BD_User.UserId\n" +
|
||||||
|
"WHERE\n" +
|
||||||
|
"dbo.MouldManufacture.CreatedOn >= dbo.GetWorkShiftStartDate ( GETDATE( ) - 1 ) AND\n" +
|
||||||
|
"dbo.MouldManufacture.CreatedOn <= dbo.GetWorkShiftStartDate ( GETDATE( ) ) AND\n" +
|
||||||
|
"dbo.MouldManufacture.Status <> -1\n";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("UserName",rs.getString("UserName"));
|
||||||
|
map.put("new_or_fix",rs.getString("new_or_fix"));
|
||||||
|
map.put("MouldCode",rs.getString("MouldCode"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打样完成
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
public static List<HashMap<String,String>> DayFinishedSample() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\n" +
|
||||||
|
"\tdbo.[chen_打样分析汇总].MouldingStyleCode,\n" +
|
||||||
|
"\tdbo.[chen_打样分析汇总].Technologist,\n" +
|
||||||
|
"\tdbo.[chen_打样分析汇总].FinishedDensity,\n" +
|
||||||
|
"\tdbo.[chen_打样分析汇总].FinishedSpeed,\n" +
|
||||||
|
"\tdbo.[chen_打样分析汇总].FinishedBy,\n" +
|
||||||
|
"\tdbo.[chen_打样分析汇总].[交期天数] as UseDay\n" +
|
||||||
|
"FROM\n" +
|
||||||
|
"\tdbo.[chen_打样分析汇总] \n" +
|
||||||
|
"WHERE\n" +
|
||||||
|
"\tdbo.[chen_打样分析汇总].FinishedOn >= dbo.GetWorkShiftStartDate ( GETDATE( ) - 1 ) \n" +
|
||||||
|
"\tAND dbo.[chen_打样分析汇总].FinishedOn <= dbo.GetWorkShiftStartDate ( GETDATE( ) )";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("MouldingStyleCode",rs.getString("MouldingStyleCode"));
|
||||||
|
map.put("Technologist",rs.getString("Technologist"));
|
||||||
|
map.put("FinishedDensity",rs.getString("FinishedDensity"));
|
||||||
|
map.put("FinishedSpeed",rs.getString("FinishedSpeed"));
|
||||||
|
map.put("FinishedBy",rs.getString("FinishedBy"));
|
||||||
|
map.put("UseDay",rs.getString("UseDay"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* BOM完成
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
public static List<HashMap<String,String>> DayFinishedBOM() {
|
||||||
|
List<HashMap<String,String>> hashMapList = new ArrayList<>();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT\n" +
|
||||||
|
"dbo.MouldingTechnicalForm.MouldingStyleCode,\n" +
|
||||||
|
"dbo.MouldingTechnicalForm.Maker\n" +
|
||||||
|
"\n" +
|
||||||
|
"FROM\n" +
|
||||||
|
"dbo.MouldingTechnicalForm\n" +
|
||||||
|
"WHERE\n" +
|
||||||
|
"dbo.MouldingTechnicalForm.ModifiedOn >= dbo.GetWorkShiftStartDate ( GETDATE( ) - 1 ) AND\n" +
|
||||||
|
"dbo.MouldingTechnicalForm.ModifiedOn <= dbo.GetWorkShiftStartDate ( GETDATE( ) )";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
HashMap<String,String> map = new HashMap<>();
|
||||||
|
map.put("MouldingStyleCode",rs.getString("MouldingStyleCode"));
|
||||||
|
map.put("Maker",rs.getString("Maker"));
|
||||||
|
hashMapList.add(map);
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return hashMapList;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public static String All() {
|
||||||
|
StringBuilder jsonpath = new StringBuilder();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT * from [chen_打样分析汇总] order by CreatedOn desc FOR JSON PATH";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
jsonpath.append(rs.getString(1));
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return jsonpath.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public static String AllDataDataRange(String fDateStart,String fDateEnd) {
|
||||||
|
StringBuilder jsonpath = new StringBuilder();
|
||||||
|
try {
|
||||||
|
Connection conn = getSQLConnection();
|
||||||
|
String sql = "SELECT * from [chen_打样分析汇总] where CreatedOn >= '"+fDateStart+"' and CreatedOn <= '"+fDateEnd+"' order by CreatedOn desc FOR JSON PATH";
|
||||||
|
Statement stmt = conn.createStatement();//
|
||||||
|
|
||||||
|
ResultSet rs = stmt.executeQuery(sql);
|
||||||
|
while (rs.next()) {
|
||||||
|
// 截面积(mm2)
|
||||||
|
jsonpath.append(rs.getString(1));
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
rs.close();
|
||||||
|
stmt.close();
|
||||||
|
conn.close();
|
||||||
|
} catch (SQLException e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
|
||||||
|
}
|
||||||
|
return jsonpath.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
Application Version: ${ruoyi.version}
|
||||||
|
Spring Boot Version: ${spring-boot.version}
|
||||||
|
////////////////////////////////////////////////////////////////////
|
||||||
|
// _ooOoo_ //
|
||||||
|
// o8888888o //
|
||||||
|
// 88" . "88 //
|
||||||
|
// (| ^_^ |) //
|
||||||
|
// O\ = /O //
|
||||||
|
// ____/`---'\____ //
|
||||||
|
// .' \\| |// `. //
|
||||||
|
// / \\||| : |||// \ //
|
||||||
|
// / _||||| -:- |||||- \ //
|
||||||
|
// | | \\\ - /// | | //
|
||||||
|
// | \_| ''\---/'' | | //
|
||||||
|
// \ .-\__ `-` ___/-. / //
|
||||||
|
// ___`. .' /--.--\ `. . ___ //
|
||||||
|
// ."" '< `.___\_<|>_/___.' >'"". //
|
||||||
|
// | | : `- \`.;`\ _ /`;.`/ - ` : | | //
|
||||||
|
// \ \ `-. \_ __\ /__ _/ .-` / / //
|
||||||
|
// ========`-.____`-.___\_____/___.-`____.-'======== //
|
||||||
|
// `=---=' //
|
||||||
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ //
|
||||||
|
// 佛祖保佑 永不宕机 永无BUG //
|
||||||
|
////////////////////////////////////////////////////////////////////
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
package com.ruoyi.project.fx_changemouldtime.controller;
|
||||||
|
|
||||||
|
import com.ruoyi.db.mssql.DB_Ajax_DashBoard_ChangeMouldTime_48102;
|
||||||
|
import com.ruoyi.framework.web.controller.BaseController;
|
||||||
|
import com.ruoyi.framework.web.domain.AjaxResult;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.web.bind.annotation.PathVariable;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RestController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 服务器监控
|
||||||
|
*
|
||||||
|
* @author ruoyi
|
||||||
|
*/
|
||||||
|
@RestController
|
||||||
|
@RequestMapping("/fx_changemouldtime")
|
||||||
|
public class ChangeMouldTimeController extends BaseController
|
||||||
|
{
|
||||||
|
// @PreAuthorize("@ss.hasPermi('monitor:server:list')")
|
||||||
|
@GetMapping("/list")
|
||||||
|
public AjaxResult get30Day() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_ChangeMouldTime_48102.DoGetChangeMouldTimeList());
|
||||||
|
}
|
||||||
|
|
||||||
|
@GetMapping("/rangetimeavg/{fDateStart}/{fDateEnd}")
|
||||||
|
public AjaxResult getRangeTimeAvg(@PathVariable String fDateStart, @PathVariable String fDateEnd) throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_ChangeMouldTime_48102.DoGet_avg_changemouldtime_date_range(fDateStart,fDateEnd));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
Application Version: ${ruoyi.version}
|
||||||
|
Spring Boot Version: ${spring-boot.version}
|
||||||
|
////////////////////////////////////////////////////////////////////
|
||||||
|
// _ooOoo_ //
|
||||||
|
// o8888888o //
|
||||||
|
// 88" . "88 //
|
||||||
|
// (| ^_^ |) //
|
||||||
|
// O\ = /O //
|
||||||
|
// ____/`---'\____ //
|
||||||
|
// .' \\| |// `. //
|
||||||
|
// / \\||| : |||// \ //
|
||||||
|
// / _||||| -:- |||||- \ //
|
||||||
|
// | | \\\ - /// | | //
|
||||||
|
// | \_| ''\---/'' | | //
|
||||||
|
// \ .-\__ `-` ___/-. / //
|
||||||
|
// ___`. .' /--.--\ `. . ___ //
|
||||||
|
// ."" '< `.___\_<|>_/___.' >'"". //
|
||||||
|
// | | : `- \`.;`\ _ /`;.`/ - ` : | | //
|
||||||
|
// \ \ `-. \_ __\ /__ _/ .-` / / //
|
||||||
|
// ========`-.____`-.___\_____/___.-`____.-'======== //
|
||||||
|
// `=---=' //
|
||||||
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ //
|
||||||
|
// 佛祖保佑 永不宕机 永无BUG //
|
||||||
|
////////////////////////////////////////////////////////////////////
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
package com.ruoyi.project.fx_dashboard.controller;
|
||||||
|
|
||||||
|
import com.ruoyi.db.mssql.DB_Ajax_DashBoard_48102;
|
||||||
|
import com.ruoyi.framework.web.controller.BaseController;
|
||||||
|
import com.ruoyi.framework.web.domain.AjaxResult;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.web.bind.annotation.PathVariable;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RestController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 服务器监控
|
||||||
|
*
|
||||||
|
* @author ruoyi
|
||||||
|
*/
|
||||||
|
@RestController
|
||||||
|
@RequestMapping("/fx_dashboard")
|
||||||
|
public class DashBoardController extends BaseController
|
||||||
|
{
|
||||||
|
// @PreAuthorize("@ss.hasPermi('monitor:server:list')")
|
||||||
|
@GetMapping("/30day")
|
||||||
|
public AjaxResult get30Day() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_48102.DoGet30Day());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@GetMapping("/lastday")
|
||||||
|
public AjaxResult getLastDay() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_48102.DoGetLastDay());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@GetMapping("/group")
|
||||||
|
public AjaxResult getGroup() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_48102.DoGetCurrentTimeGroup());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@GetMapping("/daterange/{fDateStart}/{fDateEnd}")
|
||||||
|
public AjaxResult getDateRange(@PathVariable String fDateStart, @PathVariable String fDateEnd) throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_48102.DoGetDateRange(fDateStart,fDateEnd));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
package com.ruoyi.project.fx_density.controller;
|
||||||
|
|
||||||
|
import com.ruoyi.db.mssql.DB_Ajax_DashBoard_Density_48102;
|
||||||
|
import com.ruoyi.framework.web.controller.BaseController;
|
||||||
|
import com.ruoyi.framework.web.domain.AjaxResult;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RestController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 服务器监控
|
||||||
|
*
|
||||||
|
* @author ruoyi
|
||||||
|
*/
|
||||||
|
@RestController
|
||||||
|
@RequestMapping("/fx_density")
|
||||||
|
public class DensityController extends BaseController
|
||||||
|
{
|
||||||
|
// @PreAuthorize("@ss.hasPermi('monitor:server:list')")
|
||||||
|
@GetMapping("/30day")
|
||||||
|
public AjaxResult get30Day() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Density_48102.DoGet30dDensityListMap());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@GetMapping("/72h")
|
||||||
|
public AjaxResult get72h() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Density_48102.DoGet72hDensityListMap());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@GetMapping("/group")
|
||||||
|
public AjaxResult getGroup() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Density_48102.DoGetGroupDensityListMap());
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
Application Version: ${ruoyi.version}
|
||||||
|
Spring Boot Version: ${spring-boot.version}
|
||||||
|
////////////////////////////////////////////////////////////////////
|
||||||
|
// _ooOoo_ //
|
||||||
|
// o8888888o //
|
||||||
|
// 88" . "88 //
|
||||||
|
// (| ^_^ |) //
|
||||||
|
// O\ = /O //
|
||||||
|
// ____/`---'\____ //
|
||||||
|
// .' \\| |// `. //
|
||||||
|
// / \\||| : |||// \ //
|
||||||
|
// / _||||| -:- |||||- \ //
|
||||||
|
// | | \\\ - /// | | //
|
||||||
|
// | \_| ''\---/'' | | //
|
||||||
|
// \ .-\__ `-` ___/-. / //
|
||||||
|
// ___`. .' /--.--\ `. . ___ //
|
||||||
|
// ."" '< `.___\_<|>_/___.' >'"". //
|
||||||
|
// | | : `- \`.;`\ _ /`;.`/ - ` : | | //
|
||||||
|
// \ \ `-. \_ __\ /__ _/ .-` / / //
|
||||||
|
// ========`-.____`-.___\_____/___.-`____.-'======== //
|
||||||
|
// `=---=' //
|
||||||
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ //
|
||||||
|
// 佛祖保佑 永不宕机 永无BUG //
|
||||||
|
////////////////////////////////////////////////////////////////////
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
package com.ruoyi.project.fx_technologist.controller;
|
||||||
|
|
||||||
|
import com.ruoyi.db.mssql.DB_Ajax_DashBoard_Technologist_48102;
|
||||||
|
import com.ruoyi.framework.web.controller.BaseController;
|
||||||
|
import com.ruoyi.framework.web.domain.AjaxResult;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.web.bind.annotation.PathVariable;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RestController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 服务器监控
|
||||||
|
*
|
||||||
|
* @author ruoyi
|
||||||
|
*/
|
||||||
|
@RestController
|
||||||
|
@RequestMapping("/fx_technologist")
|
||||||
|
public class TechnologistController extends BaseController
|
||||||
|
{
|
||||||
|
// @PreAuthorize("@ss.hasPermi('monitor:server:list')")
|
||||||
|
@GetMapping("/getConfirmation")
|
||||||
|
public AjaxResult getConfirmation() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Technologist_48102.DoGetSampleConfirmation());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@GetMapping("/getBestOEM")
|
||||||
|
public AjaxResult getBestOEM() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Technologist_48102.DoGetBestOEM());
|
||||||
|
}
|
||||||
|
|
||||||
|
@GetMapping("/getBestODM")
|
||||||
|
public AjaxResult getBestODM() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Technologist_48102.DoGetBestODM());
|
||||||
|
}
|
||||||
|
|
||||||
|
@GetMapping("/getFinishedSampleAvgDay")
|
||||||
|
public AjaxResult getFinishedSampleAvgDay() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Technologist_48102.DoFinishedSampleAvgDay());
|
||||||
|
}
|
||||||
|
|
||||||
|
@GetMapping("/getUnFinishedSampleAvgDay")
|
||||||
|
public AjaxResult getUnFinishedSampleAvgDay() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Technologist_48102.DoUnFinishedSampleAvgDay());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
*日报
|
||||||
|
*/
|
||||||
|
@GetMapping("/DayFinishedSampleOrder")
|
||||||
|
public AjaxResult DayFinishedSampleOrder() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Technologist_48102.DayFinishedSampleOrder());
|
||||||
|
}
|
||||||
|
|
||||||
|
@GetMapping("/DayNewMould")
|
||||||
|
public AjaxResult DayNewMould() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Technologist_48102.DayNewMould());
|
||||||
|
}
|
||||||
|
|
||||||
|
@GetMapping("/DayFinishedSample")
|
||||||
|
public AjaxResult DayFinishedSample() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Technologist_48102.DayFinishedSample());
|
||||||
|
}
|
||||||
|
|
||||||
|
@GetMapping("/DayFinishedBOM")
|
||||||
|
public AjaxResult DayFinishedBOM() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Technologist_48102.DayFinishedBOM());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@GetMapping("/All")
|
||||||
|
public AjaxResult ALL() throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Technologist_48102.All());
|
||||||
|
}
|
||||||
|
|
||||||
|
@GetMapping("/AllDataDataRange/{fDateStart}/{fDateEnd}")
|
||||||
|
public AjaxResult getDateRange(@PathVariable String fDateStart, @PathVariable String fDateEnd) throws Exception
|
||||||
|
{
|
||||||
|
return AjaxResult.success(DB_Ajax_DashBoard_Technologist_48102.AllDataDataRange(fDateStart,fDateEnd));
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -6,16 +6,16 @@ spring:
|
|||||||
druid:
|
druid:
|
||||||
# 主库数据源
|
# 主库数据源
|
||||||
master:
|
master:
|
||||||
url: jdbc:mysql://localhost:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
|
url: jdbc:mysql://192.168.48.32:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
|
||||||
username: root
|
username: root
|
||||||
password: password
|
password: js*168
|
||||||
# 从库数据源
|
# 从库数据源
|
||||||
slave:
|
slave:
|
||||||
# 从数据源开关/默认关闭
|
# 从数据源开关/默认关闭
|
||||||
enabled: false
|
enabled: false
|
||||||
url:
|
url:
|
||||||
username:
|
username:
|
||||||
password:
|
password:
|
||||||
# 初始连接数
|
# 初始连接数
|
||||||
initialSize: 5
|
initialSize: 5
|
||||||
# 最小连接池数量
|
# 最小连接池数量
|
||||||
@ -35,7 +35,7 @@ spring:
|
|||||||
testWhileIdle: true
|
testWhileIdle: true
|
||||||
testOnBorrow: false
|
testOnBorrow: false
|
||||||
testOnReturn: false
|
testOnReturn: false
|
||||||
webStatFilter:
|
webStatFilter:
|
||||||
enabled: true
|
enabled: true
|
||||||
statViewServlet:
|
statViewServlet:
|
||||||
enabled: true
|
enabled: true
|
||||||
@ -43,8 +43,8 @@ spring:
|
|||||||
allow:
|
allow:
|
||||||
url-pattern: /druid/*
|
url-pattern: /druid/*
|
||||||
# 控制台管理用户名和密码
|
# 控制台管理用户名和密码
|
||||||
login-username:
|
login-username:
|
||||||
login-password:
|
login-password:
|
||||||
filter:
|
filter:
|
||||||
stat:
|
stat:
|
||||||
enabled: true
|
enabled: true
|
||||||
@ -54,4 +54,4 @@ spring:
|
|||||||
merge-sql: true
|
merge-sql: true
|
||||||
wall:
|
wall:
|
||||||
config:
|
config:
|
||||||
multi-statement-allow: true
|
multi-statement-allow: true
|
||||||
|
|||||||
@ -1,15 +1,15 @@
|
|||||||
# 项目相关配置
|
# 项目相关配置
|
||||||
ruoyi:
|
ruoyi:
|
||||||
# 名称
|
# 名称
|
||||||
name: RuoYi
|
name: Intco
|
||||||
# 版本
|
# 版本
|
||||||
version: 2.3.0
|
version: 2.3.0
|
||||||
# 版权年份
|
# 版权年份
|
||||||
copyrightYear: 2019
|
copyrightYear: 2020
|
||||||
# 实例演示开关
|
# 实例演示开关
|
||||||
demoEnabled: true
|
demoEnabled: false
|
||||||
# 文件路径 示例（ Windows配置D:/ruoyi/uploadPath，Linux配置 /home/ruoyi/uploadPath）
|
# 文件路径 示例（ Windows配置D:/ruoyi/uploadPath，Linux配置 /home/ruoyi/uploadPath）
|
||||||
profile: D:/ruoyi/uploadPath
|
profile: /home/ruoyi/uploadPath
|
||||||
# 获取ip地址开关
|
# 获取ip地址开关
|
||||||
addressEnabled: false
|
addressEnabled: false
|
||||||
|
|
||||||
@ -40,7 +40,7 @@ spring:
|
|||||||
messages:
|
messages:
|
||||||
# 国际化资源文件路径
|
# 国际化资源文件路径
|
||||||
basename: i18n/messages
|
basename: i18n/messages
|
||||||
profiles:
|
profiles:
|
||||||
active: druid
|
active: druid
|
||||||
# 文件上传
|
# 文件上传
|
||||||
servlet:
|
servlet:
|
||||||
@ -61,7 +61,7 @@ spring:
|
|||||||
# 端口，默认为6379
|
# 端口，默认为6379
|
||||||
port: 6379
|
port: 6379
|
||||||
# 密码
|
# 密码
|
||||||
password:
|
password:
|
||||||
# 连接超时时间
|
# 连接超时时间
|
||||||
timeout: 10s
|
timeout: 10s
|
||||||
lettuce:
|
lettuce:
|
||||||
@ -83,7 +83,7 @@ token:
|
|||||||
secret: abcdefghijklmnopqrstuvwxyz
|
secret: abcdefghijklmnopqrstuvwxyz
|
||||||
# 令牌有效期（默认30分钟）
|
# 令牌有效期（默认30分钟）
|
||||||
expireTime: 30
|
expireTime: 30
|
||||||
|
|
||||||
# MyBatis配置
|
# MyBatis配置
|
||||||
mybatis:
|
mybatis:
|
||||||
# 搜索指定包别名
|
# 搜索指定包别名
|
||||||
@ -94,11 +94,11 @@ mybatis:
|
|||||||
configLocation: classpath:mybatis/mybatis-config.xml
|
configLocation: classpath:mybatis/mybatis-config.xml
|
||||||
|
|
||||||
# PageHelper分页插件
|
# PageHelper分页插件
|
||||||
pagehelper:
|
pagehelper:
|
||||||
helperDialect: mysql
|
helperDialect: mysql
|
||||||
reasonable: true
|
reasonable: true
|
||||||
supportMethodsArguments: true
|
supportMethodsArguments: true
|
||||||
params: count=countSql
|
params: count=countSql
|
||||||
|
|
||||||
# Swagger配置
|
# Swagger配置
|
||||||
swagger:
|
swagger:
|
||||||
@ -108,16 +108,16 @@ swagger:
|
|||||||
pathMapping: /dev-api
|
pathMapping: /dev-api
|
||||||
|
|
||||||
# 防止XSS攻击
|
# 防止XSS攻击
|
||||||
xss:
|
xss:
|
||||||
# 过滤开关
|
# 过滤开关
|
||||||
enabled: true
|
enabled: true
|
||||||
# 排除链接（多个用逗号分隔）
|
# 排除链接（多个用逗号分隔）
|
||||||
excludes: /system/notice/*
|
excludes: /system/notice/*
|
||||||
# 匹配链接
|
# 匹配链接
|
||||||
urlPatterns: /system/*,/monitor/*,/tool/*
|
urlPatterns: /system/*,/monitor/*,/tool/*
|
||||||
|
|
||||||
# 代码生成
|
# 代码生成
|
||||||
gen:
|
gen:
|
||||||
# 作者
|
# 作者
|
||||||
author: ruoyi
|
author: ruoyi
|
||||||
# 默认生成包路径 system 需改成自己的模块名称 如 system monitor tool
|
# 默认生成包路径 system 需改成自己的模块名称 如 system monitor tool
|
||||||
@ -125,4 +125,4 @@ gen:
|
|||||||
# 自动去除表前缀，默认是true
|
# 自动去除表前缀，默认是true
|
||||||
autoRemovePre: false
|
autoRemovePre: false
|
||||||
# 表前缀（生成类名不会包含表前缀，多个用逗号分隔）
|
# 表前缀（生成类名不会包含表前缀，多个用逗号分隔）
|
||||||
tablePrefix: sys_
|
tablePrefix: sys_
|
||||||
|
|||||||
Reference in New Issue
Block a user