INTCO-MES
This commit is contained in:
ICEC
@ -42,17 +42,21 @@
|
||||
"dependencies": {
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.18.1",
|
||||
"bootstrap": "^4.5.0",
|
||||
"bootstrap-table": "^1.16.0",
|
||||
"clipboard": "2.0.4",
|
||||
"echarts": "4.2.1",
|
||||
"element-ui": "2.13.0",
|
||||
"file-saver": "2.0.1",
|
||||
"js-beautify": "^1.10.2",
|
||||
"fuse.js": "3.4.4",
|
||||
"jquery": "^3.5.1",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsencrypt": "3.0.0-rc.1",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"popper.js": "^1.16.1",
|
||||
"screenfull": "4.2.0",
|
||||
"sortablejs": "1.8.4",
|
||||
"vue": "2.6.10",
|
||||
|
||||
22
ruoyi-ui/src/api/dashboard/changemouldtime.js
Normal file
22
ruoyi-ui/src/api/dashboard/changemouldtime.js
Normal file
@ -0,0 +1,22 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询服务器详细
|
||||
export function getChangeMouldTimeList() {
|
||||
return request({
|
||||
url: '/fx_changemouldtime/list',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
export function getDateRangeChangeMouldTime(fDateStart,fDateEnd) {
|
||||
|
||||
|
||||
return request({
|
||||
url: '/fx_changemouldtime/rangetimeavg/'+fDateStart+'/'+fDateEnd,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
21
ruoyi-ui/src/api/dashboard/density.js
Normal file
21
ruoyi-ui/src/api/dashboard/density.js
Normal file
@ -0,0 +1,21 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询服务器详细
|
||||
export function getDensity30Day() {
|
||||
return request({
|
||||
url: '/fx_density/30day',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export function getDensity72h() {
|
||||
return request({
|
||||
url: '/fx_density/72h',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export function getDensityGroup() {
|
||||
return request({
|
||||
url: '/fx_density/group',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
87
ruoyi-ui/src/api/dashboard/fx_technologist.js
Normal file
87
ruoyi-ui/src/api/dashboard/fx_technologist.js
Normal file
@ -0,0 +1,87 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询服务器详细
|
||||
export function getConfirmation() {
|
||||
return request({
|
||||
url: '/fx_technologist/getConfirmation',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getBestODM() {
|
||||
return request({
|
||||
url: '/fx_technologist/getBestODM',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getBestOEM() {
|
||||
return request({
|
||||
url: '/fx_technologist/getBestOEM',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getFinishedSampleAvgDay() {
|
||||
return request({
|
||||
url: '/fx_technologist/getFinishedSampleAvgDay',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getUnFinishedSampleAvgDay() {
|
||||
return request({
|
||||
url: '/fx_technologist/getUnFinishedSampleAvgDay',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function DayFinishedSampleOrder() {
|
||||
return request({
|
||||
url: '/fx_technologist/DayFinishedSampleOrder',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function DayNewMould() {
|
||||
return request({
|
||||
url: '/fx_technologist/DayNewMould',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function DayFinishedSample() {
|
||||
return request({
|
||||
url: '/fx_technologist/DayFinishedSample',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function DayFinishedBOM() {
|
||||
return request({
|
||||
url: '/fx_technologist/DayFinishedBOM',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function ALL() {
|
||||
return request({
|
||||
url: '/fx_technologist/All',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function AllDataDataRange(fDateStart,fDateEnd) {
|
||||
return request({
|
||||
url: '/fx_technologist/AllDataDataRange/'+fDateStart+'/'+fDateEnd,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
31
ruoyi-ui/src/api/dashboard/fxdashboard.js
Normal file
31
ruoyi-ui/src/api/dashboard/fxdashboard.js
Normal file
@ -0,0 +1,31 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询服务器详细
|
||||
export function getDashboardGroup() {
|
||||
return request({
|
||||
url: '/fx_dashboard/group',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export function getLastDay() {
|
||||
return request({
|
||||
url: '/fx_dashboard/lastday',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export function get30Day() {
|
||||
return request({
|
||||
url: '/fx_dashboard/30day',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getDateRange(fDateStart,fDateEnd) {
|
||||
|
||||
|
||||
return request({
|
||||
url: '/fx_dashboard/daterange/'+fDateStart+'/'+fDateEnd,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
125
ruoyi-ui/src/views/fx_changemouldtime/changemouldtime_list.vue
Normal file
125
ruoyi-ui/src/views/fx_changemouldtime/changemouldtime_list.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>换膜明细 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="StartTime"
|
||||
sortable
|
||||
label="换模开始时间">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Mould"
|
||||
sortable
|
||||
label="模具">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ChangeMouldTime"
|
||||
sortable
|
||||
label="换模时间">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Line"
|
||||
sortable
|
||||
label="线号">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getChangeMouldTimeList} from '@/api/dashboard/changemouldtime'
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
getChangeMouldTimeList().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
// lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
// lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
|
||||
|
||||
this.tableData.push({
|
||||
Line: response.data[i].Line,
|
||||
ChangeMouldTime: (response.data[i].ChangeMouldTime)*1,
|
||||
Mould: response.data[i].Mould,
|
||||
StartTime: response.data[i].StartTime,
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
718
ruoyi-ui/src/views/fx_dashboard/dashboard_30day.vue
Normal file
718
ruoyi-ui/src/views/fx_dashboard/dashboard_30day.vue
Normal file
@ -0,0 +1,718 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_zhengpin_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">正品率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_change_moulding_time" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均换模时间</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_density" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均密度</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_energy_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">产能达标率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>产线明细 </h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="line"
|
||||
label="线号"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Moulds"
|
||||
label="换膜次数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sumbox"
|
||||
label="完成箱数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_currentcapacity"
|
||||
label="平均实际产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_normalcapacity"
|
||||
label="平均标准产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="capacityrate"
|
||||
label="产能达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="yieldrate"
|
||||
label="正品达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_density"
|
||||
label="平均密度">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {get30Day} from '@/api/dashboard/fxdashboard'
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
get30Day().then(response => {
|
||||
|
||||
var j;
|
||||
var avg_zhengpin_avg = 0;
|
||||
var avg_density = 0;
|
||||
var avg_energy_avg = 0;
|
||||
var avg_chang_moulding_time = 0;
|
||||
var sum_quantity = 0;
|
||||
var sum_currentfinishedquantity = 0;
|
||||
j = 0;
|
||||
|
||||
var data_ajax = response.data;
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
|
||||
|
||||
this.tableData.push({
|
||||
line: response.data[i].line,
|
||||
Moulds: ((response.data[i].Moulds.split('/')).length - 1),
|
||||
sumbox: response.data[i].sumbox,
|
||||
avg_currentcapacity: (response.data[i].avg_currentcapacity * 1 * response.data[i].sum_box_meter / response.data[i].sum_device_meter).toFixed(2),
|
||||
avg_normalcapacity: (response.data[i].avg_normalcapacity * 1).toFixed(2),
|
||||
capacityrate: (response.data[i].avg_currentcapacity / response.data[i].avg_normalcapacity * response.data[i].sum_box_meter / response.data[i].sum_device_meter * 100).toFixed(2) + "%",
|
||||
yieldrate: (response.data[i].sum_box_meter / response.data[i].sum_device_meter * 100).toFixed(2) + "%",
|
||||
avg_density: (response.data[i].avg_density * 1).toFixed(4),
|
||||
lastchangemouldtime: (response.data[i].lastchangemouldtime),
|
||||
|
||||
})
|
||||
|
||||
if (data_ajax[i].lastchangemouldtime !== 0) {
|
||||
avg_chang_moulding_time = avg_chang_moulding_time + (data_ajax[i].lastchangemouldtime) * 1;
|
||||
j = j + 1;
|
||||
}
|
||||
avg_density = parseFloat(avg_density) + parseFloat(data_ajax[i].avg_density);
|
||||
avg_energy_avg = avg_energy_avg + (data_ajax[i].avg_currentcapacity / data_ajax[i].avg_normalcapacity);
|
||||
avg_zhengpin_avg = avg_zhengpin_avg + (data_ajax[i].sum_box_meter / data_ajax[i].sum_device_meter);
|
||||
sum_quantity = 2000;
|
||||
sum_currentfinishedquantity = sum_currentfinishedquantity + (data_ajax[i].sumbox) * 1;
|
||||
|
||||
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById("chart_energy_avg"));
|
||||
const chart_zhengpin_avg = echarts.init(document.getElementById("chart_zhengpin_avg"));
|
||||
const chart_density = echarts.init(document.getElementById("chart_density"));
|
||||
const chart_change_moulding_time = echarts.init(document.getElementById("chart_change_moulding_time"));
|
||||
|
||||
// 设置仪表盘数据
|
||||
option_zhengpin_avg.series[0].data[0].value = (avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_zhengpin_avg.setOption(option_zhengpin_avg, true);
|
||||
|
||||
option_density.series[0].data[0].value = (avg_density / data_ajax.length).toFixed(3);
|
||||
chart_density.setOption(option_density, true);
|
||||
|
||||
//option_change_moulding_time.series[0].data[0].value = (avg_chang_moulding_time / data_ajax.length).toFixed(0);
|
||||
option_change_moulding_time.series[0].data[0].value = 0 ;
|
||||
chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
|
||||
option_energy_avg.series[0].data[0].value = (avg_energy_avg / data_ajax.length * avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_energy_avg.setOption(option_energy_avg, true);
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var colorTemplate_energy_avg = [//50-85 85-100 100-120
|
||||
[0.5, "rgba(255,0,0,0.8)"],
|
||||
[5 / 7, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_zhengpin_avg = [//50-75 75-85 85-100
|
||||
[6 / 10, "rgba(255,0,0,0.8)"],
|
||||
[7 / 10, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_density = [//0.4-0.42 红 0.4-0.38 0.38-0.36
|
||||
[1 / 3, "rgba(0,200,250,0.8)"],
|
||||
[2 / 3, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
var colorTemplate_change_moulding_time = [ //30-70 蓝 70-90 绿 90-120 红
|
||||
[4 / 9, "rgba(0,200,250,0.8)"],
|
||||
[6 / 9, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
|
||||
|
||||
var data_energy_avg = [{
|
||||
// name: "产能达标率",
|
||||
value: 50,
|
||||
}];
|
||||
|
||||
var data_zhengpin_avg = [{
|
||||
// name: "正品率",
|
||||
value: 0,
|
||||
}];
|
||||
var data_density = [{
|
||||
// name: "密度",
|
||||
value: 0,
|
||||
}];
|
||||
var data_change_moulding_time = [{
|
||||
// name: "换模时间",
|
||||
value: 0,
|
||||
}];
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option_energy_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 7, // 仪表盘刻度的分割段数,默认 10。
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_energy_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_energy_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_zhengpin_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 5, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_zhengpin_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_zhengpin_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_density = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{c}",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 0.36, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 0.42, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 6, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_density, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_density
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_change_moulding_time = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 30, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 9, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_change_moulding_time, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_change_moulding_time
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
823
ruoyi-ui/src/views/fx_dashboard/dashboard_daterange.vue
Normal file
823
ruoyi-ui/src/views/fx_dashboard/dashboard_daterange.vue
Normal file
@ -0,0 +1,823 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<div class="ibox-title">
|
||||
<el-row :gutter="32">
|
||||
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
|
||||
<b>选择时间范围</b>
|
||||
|
||||
<el-date-picker
|
||||
v-model="daterange_time1"
|
||||
align="right"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
<el-select style="width: 90px" v-model="daterange_group_value1" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<b>--</b>
|
||||
<el-date-picker
|
||||
v-model="daterange_time2"
|
||||
align="right"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
<el-select style="width: 90px" v-model="daterange_group_value2" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button @click="getData" type="primary">查询</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_zhengpin_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">正品率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_change_moulding_time" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均换模时间</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_density" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均密度</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_energy_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">产能达标率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<b>产线明细</b>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="line"
|
||||
label="线号"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Moulds"
|
||||
label="模具">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sumbox"
|
||||
label="完成箱数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_currentcapacity"
|
||||
label="平均实际产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_normalcapacity"
|
||||
label="平均标准产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="capacityrate"
|
||||
label="产能达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="yieldrate"
|
||||
label="正品达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_density"
|
||||
label="平均密度">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getDateRange} from '@/api/dashboard/fxdashboard'
|
||||
import {getDateRangeChangeMouldTime} from '@/api/dashboard/changemouldtime'
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
options: [{
|
||||
value: '08:00:01',
|
||||
label: '白班'
|
||||
}, {
|
||||
value: '20:00:00',
|
||||
label: '夜班'
|
||||
}],
|
||||
daterange_group_value1: [],
|
||||
daterange_group_value2: [],
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
daterange_time1: '',
|
||||
daterange_time2: '',
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
this.daterange_group_value1 = "08:00:01"
|
||||
this.daterange_group_value2 = "08:00:01"
|
||||
this.daterange_time1= '2020-05-01'
|
||||
this.daterange_time2= '2020-05-01'
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
const fDateStart = this.daterange_time1 + ' ' + this.daterange_group_value1
|
||||
const fDateEnd = this.daterange_time2 + ' ' + this.daterange_group_value2
|
||||
this.lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
this.tableData=[];
|
||||
|
||||
getDateRange(fDateStart,fDateEnd).then(response => {
|
||||
|
||||
var j;
|
||||
var avg_zhengpin_avg = 0;
|
||||
var avg_density = 0;
|
||||
var avg_energy_avg = 0;
|
||||
var avg_chang_moulding_time = 0;
|
||||
var sum_quantity = 0;
|
||||
var sum_currentfinishedquantity = 0;
|
||||
j = 0;
|
||||
|
||||
var data_ajax = response.data;
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
|
||||
|
||||
this.tableData.push({
|
||||
line: response.data[i].line,
|
||||
Moulds: response.data[i].Moulds,
|
||||
sumbox: response.data[i].sumbox,
|
||||
avg_currentcapacity: (response.data[i].avg_currentcapacity * 1 * response.data[i].sum_box_meter / response.data[i].sum_device_meter).toFixed(2),
|
||||
avg_normalcapacity: (response.data[i].avg_normalcapacity * 1).toFixed(2),
|
||||
capacityrate: (response.data[i].avg_currentcapacity / response.data[i].avg_normalcapacity * response.data[i].sum_box_meter / response.data[i].sum_device_meter * 100).toFixed(2) + "%",
|
||||
yieldrate: (response.data[i].sum_box_meter / response.data[i].sum_device_meter * 100).toFixed(2) + "%",
|
||||
avg_density: (response.data[i].avg_density * 1).toFixed(4),
|
||||
lastchangemouldtime: (response.data[i].lastchangemouldtime),
|
||||
|
||||
})
|
||||
|
||||
if (data_ajax[i].lastchangemouldtime !== 0) {
|
||||
avg_chang_moulding_time = avg_chang_moulding_time + (data_ajax[i].lastchangemouldtime) * 1;
|
||||
j = j + 1;
|
||||
}
|
||||
avg_density = parseFloat(avg_density) + parseFloat(data_ajax[i].avg_density);
|
||||
avg_energy_avg = avg_energy_avg + (data_ajax[i].avg_currentcapacity / data_ajax[i].avg_normalcapacity);
|
||||
avg_zhengpin_avg = avg_zhengpin_avg + (data_ajax[i].sum_box_meter / data_ajax[i].sum_device_meter);
|
||||
sum_quantity = 2000;
|
||||
sum_currentfinishedquantity = sum_currentfinishedquantity + (data_ajax[i].sumbox) * 1;
|
||||
|
||||
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById("chart_energy_avg"));
|
||||
const chart_zhengpin_avg = echarts.init(document.getElementById("chart_zhengpin_avg"));
|
||||
const chart_density = echarts.init(document.getElementById("chart_density"));
|
||||
const chart_change_moulding_time = echarts.init(document.getElementById("chart_change_moulding_time"));
|
||||
|
||||
// 设置仪表盘数据
|
||||
option_zhengpin_avg.series[0].data[0].value = (avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_zhengpin_avg.setOption(option_zhengpin_avg, true);
|
||||
|
||||
option_density.series[0].data[0].value = (avg_density / data_ajax.length).toFixed(3);
|
||||
chart_density.setOption(option_density, true);
|
||||
|
||||
//option_change_moulding_time.series[0].data[0].value = (avg_chang_moulding_time / data_ajax.length).toFixed(0);
|
||||
// option_change_moulding_time.series[0].data[0].value = 0;
|
||||
// chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
|
||||
option_energy_avg.series[0].data[0].value = (avg_energy_avg / data_ajax.length * avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_energy_avg.setOption(option_energy_avg, true);
|
||||
|
||||
})
|
||||
|
||||
|
||||
getDateRangeChangeMouldTime(fDateStart,fDateEnd).then(response => {
|
||||
const chart_change_moulding_time = echarts.init(document.getElementById("chart_change_moulding_time"));
|
||||
|
||||
option_change_moulding_time.series[0].data[0].value = (response.data[0].avgchangemouldtime * 1);
|
||||
|
||||
chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var colorTemplate_energy_avg = [//50-85 85-100 100-120
|
||||
[0.5, "rgba(255,0,0,0.8)"],
|
||||
[5 / 7, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_zhengpin_avg = [//50-75 75-85 85-100
|
||||
[6 / 10, "rgba(255,0,0,0.8)"],
|
||||
[7 / 10, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_density = [//0.4-0.42 红 0.4-0.38 0.38-0.36
|
||||
[1 / 3, "rgba(0,200,250,0.8)"],
|
||||
[2 / 3, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
var colorTemplate_change_moulding_time = [ //30-70 蓝 70-90 绿 90-120 红
|
||||
[4 / 9, "rgba(0,200,250,0.8)"],
|
||||
[6 / 9, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
|
||||
|
||||
var data_energy_avg = [{
|
||||
// name: "产能达标率",
|
||||
value: 50,
|
||||
}];
|
||||
|
||||
var data_zhengpin_avg = [{
|
||||
// name: "正品率",
|
||||
value: 0,
|
||||
}];
|
||||
var data_density = [{
|
||||
// name: "密度",
|
||||
value: 0,
|
||||
}];
|
||||
var data_change_moulding_time = [{
|
||||
// name: "换模时间",
|
||||
value: 0,
|
||||
}];
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option_energy_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 7, // 仪表盘刻度的分割段数,默认 10。
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_energy_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_energy_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_zhengpin_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 5, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_zhengpin_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_zhengpin_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_density = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{c}",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 0.36, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 0.42, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 6, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_density, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_density
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_change_moulding_time = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 30, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 9, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_change_moulding_time, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_change_moulding_time
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
781
ruoyi-ui/src/views/fx_dashboard/dashboard_group.vue
Normal file
781
ruoyi-ui/src/views/fx_dashboard/dashboard_group.vue
Normal file
@ -0,0 +1,781 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<el-row :gutter="32">
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="12" style="height: 170px">
|
||||
|
||||
|
||||
<table class="ibox" style="font-size:24px;width: 100%;margin-top: 50px" >
|
||||
<tbody>
|
||||
<tr>
|
||||
<!-- <td>
|
||||
<strong>日期</strong> <i id="groupdate"></i>
|
||||
</td> -->
|
||||
<td id="groupdate">
|
||||
</td>
|
||||
<td>
|
||||
<strong>班次</strong> 白班
|
||||
</td>
|
||||
<tr>
|
||||
</tr>
|
||||
<td>
|
||||
<strong>班组</strong> 陈亮
|
||||
</td>
|
||||
<td>
|
||||
<strong>开线数量</strong> <i id="line_open_numbers">31/32</i>
|
||||
</td>
|
||||
</tbody>
|
||||
</table>
|
||||
<!--右上角 生产进度 -->
|
||||
|
||||
</el-col>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="12">
|
||||
<div class="ibox">
|
||||
<div class="m-b-xs">
|
||||
<h5 style="font-size:20px;">生产进度</h5>
|
||||
<h2 id=shengchanjindu>65%</h2>
|
||||
<div id=finishedbox class="m-t-sm small">当班已完成: 1200/2500 (箱)</div>
|
||||
<el-progress id="shengchanjinduavg" :percentage="56" :format="format"></el-progress>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_zhengpin_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">正品率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_change_moulding_time" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均换模时间</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_density" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均密度</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_energy_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">产能达标率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>产线明细 </h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="line"
|
||||
label="线号"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Moulds"
|
||||
label="量产模具">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="FinishedQuantity"
|
||||
label="完成箱数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="GroupProcessTime"
|
||||
label="量产用时">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="NormalCapacity"
|
||||
label="标准产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="currentspeed"
|
||||
label="牵引产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="CapacityStandardObtainedRate"
|
||||
label="产能达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="CurrentYield"
|
||||
label="正品率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="AvgDensity"
|
||||
label="平均密度">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="MouldAndChangeMouldTime"
|
||||
label="换模型号-用时">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Person"
|
||||
label="人员">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getDashboardGroup} from '@/api/dashboard/fxdashboard'
|
||||
|
||||
let lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
|
||||
getDashboardGroup().then(response => {
|
||||
|
||||
var j;
|
||||
var avg_zhengpin_avg = 0;
|
||||
var avg_density = 0;
|
||||
var avg_energy_avg = 0;
|
||||
var avg_chang_moulding_time = 0;
|
||||
var sum_quantity = 0;
|
||||
var sum_currentfinishedquantity = 0;
|
||||
j = 0;
|
||||
|
||||
var data_ajax = response.data;
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
|
||||
|
||||
this.tableData.push({
|
||||
line: response.data[i].line,
|
||||
Moulds: response.data[i].Moulds,
|
||||
FinishedQuantity: response.data[i].FinishedQuantity,
|
||||
GroupProcessTime: (response.data[i].GroupTime * 1) - (response.data[i].GroupChangeMouldTime * 1),
|
||||
NormalCapacity: response.data[i].NormalCapacity,
|
||||
currentspeed: (response.data[i].currentspeed * 1).toFixed(0),
|
||||
CapacityStandardObtainedRate: (response.data[i].CapacityStandardObtainedRate * 100).toFixed(2) + '%',
|
||||
CurrentYield: (response.data[i].CurrentYield * 100).toFixed(2) + '%',
|
||||
AvgDensity: (response.data[i].AvgDensity * 1).toFixed(4),
|
||||
MouldAndChangeMouldTime: response.data[i].MouldAndChangeMouldTime,
|
||||
Person: response.data[i].Person,
|
||||
})
|
||||
|
||||
if (data_ajax[i].GroupChangeMouldTime !== 0) {
|
||||
avg_chang_moulding_time = avg_chang_moulding_time + (data_ajax[i].GroupChangeMouldTime) * 1;
|
||||
j = j + 1;
|
||||
}
|
||||
|
||||
avg_density = parseFloat(avg_density) + parseFloat(data_ajax[i].AvgDensity);
|
||||
|
||||
avg_energy_avg = avg_energy_avg + (data_ajax[i].CapacityStandardObtainedRate) * 1;
|
||||
|
||||
avg_zhengpin_avg = avg_zhengpin_avg + (data_ajax[i].CurrentYield) * 1;
|
||||
|
||||
sum_quantity = 2000;
|
||||
|
||||
sum_currentfinishedquantity = sum_currentfinishedquantity + (data_ajax[i].FinishedQuantity) * 1;
|
||||
|
||||
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById("chart_energy_avg"));
|
||||
const chart_zhengpin_avg = echarts.init(document.getElementById("chart_zhengpin_avg"));
|
||||
const chart_density = echarts.init(document.getElementById("chart_density"));
|
||||
const chart_change_moulding_time = echarts.init(document.getElementById("chart_change_moulding_time"));
|
||||
|
||||
|
||||
option_zhengpin_avg.series[0].data[0].value = (avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_zhengpin_avg.setOption(option_zhengpin_avg, true);
|
||||
|
||||
option_density.series[0].data[0].value = (avg_density / data_ajax.length).toFixed(3);
|
||||
chart_density.setOption(option_density, true);
|
||||
|
||||
option_change_moulding_time.series[0].data[0].value = (avg_chang_moulding_time / j).toFixed(0);
|
||||
chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
|
||||
option_energy_avg.series[0].data[0].value = (avg_energy_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_energy_avg.setOption(option_energy_avg, true);
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var colorTemplate_energy_avg = [//50-85 85-100 100-120
|
||||
[0.5, "rgba(255,0,0,0.8)"],
|
||||
[5 / 7, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_zhengpin_avg = [//50-75 75-85 85-100
|
||||
[6 / 10, "rgba(255,0,0,0.8)"],
|
||||
[7 / 10, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_density = [//0.4-0.42 红 0.4-0.38 0.38-0.36
|
||||
[1 / 3, "rgba(0,200,250,0.8)"],
|
||||
[2 / 3, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
var colorTemplate_change_moulding_time = [ //30-70 蓝 70-90 绿 90-120 红
|
||||
[4 / 9, "rgba(0,200,250,0.8)"],
|
||||
[6 / 9, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
|
||||
|
||||
var data_energy_avg = [{
|
||||
// name: "产能达标率",
|
||||
value: 50,
|
||||
}];
|
||||
|
||||
var data_zhengpin_avg = [{
|
||||
// name: "正品率",
|
||||
value: 0,
|
||||
}];
|
||||
var data_density = [{
|
||||
// name: "密度",
|
||||
value: 0,
|
||||
}];
|
||||
var data_change_moulding_time = [{
|
||||
// name: "换模时间",
|
||||
value: 0,
|
||||
}];
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option_energy_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 7, // 仪表盘刻度的分割段数,默认 10。
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_energy_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_energy_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_zhengpin_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 5, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_zhengpin_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_zhengpin_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_density = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{c}",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 0.36, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 0.42, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 6, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_density, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_density
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_change_moulding_time = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 30, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 9, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_change_moulding_time, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_change_moulding_time
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
721
ruoyi-ui/src/views/fx_dashboard/dashboard_lastday.vue
Normal file
721
ruoyi-ui/src/views/fx_dashboard/dashboard_lastday.vue
Normal file
@ -0,0 +1,721 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_zhengpin_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">正品率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_change_moulding_time" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均换模时间</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_density" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">平均密度</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<div class="ibox">
|
||||
<div id="chart_energy_avg" style="width: 100%;height: 204px;left: 0%;"></div>
|
||||
<h2 class="text-center" style="margin-top: 0px;">产能达标率</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>产线明细 </h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="line"
|
||||
label="线号"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Moulds"
|
||||
label="模具">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sumbox"
|
||||
label="完成箱数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_currentcapacity"
|
||||
label="平均实际产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_normalcapacity"
|
||||
label="平均标准产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="capacityrate"
|
||||
label="产能达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="yieldrate"
|
||||
label="正品达标率">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_density"
|
||||
label="平均密度">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="lastchangemouldtime"
|
||||
label="上次换模时间">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getLastDay} from '@/api/dashboard/fxdashboard'
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
getLastDay().then(response => {
|
||||
|
||||
var j;
|
||||
var avg_zhengpin_avg = 0;
|
||||
var avg_density = 0;
|
||||
var avg_energy_avg = 0;
|
||||
var avg_chang_moulding_time = 0;
|
||||
var sum_quantity = 0;
|
||||
var sum_currentfinishedquantity = 0;
|
||||
j = 0;
|
||||
|
||||
var data_ajax = response.data;
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
|
||||
|
||||
this.tableData.push({
|
||||
line: response.data[i].line,
|
||||
Moulds: response.data[i].Moulds,
|
||||
sumbox: response.data[i].sumbox,
|
||||
avg_currentcapacity: (response.data[i].avg_currentcapacity * 1 * response.data[i].sum_box_meter / response.data[i].sum_device_meter).toFixed(2),
|
||||
avg_normalcapacity: (response.data[i].avg_normalcapacity * 1).toFixed(2),
|
||||
capacityrate: (response.data[i].avg_currentcapacity / response.data[i].avg_normalcapacity * response.data[i].sum_box_meter / response.data[i].sum_device_meter * 100).toFixed(2) + "%",
|
||||
yieldrate: (response.data[i].sum_box_meter / response.data[i].sum_device_meter * 100).toFixed(2) + "%",
|
||||
avg_density: (response.data[i].avg_density * 1).toFixed(4),
|
||||
lastchangemouldtime: (response.data[i].lastchangemouldtime),
|
||||
|
||||
})
|
||||
|
||||
if (data_ajax[i].lastchangemouldtime !== 0) {
|
||||
avg_chang_moulding_time = avg_chang_moulding_time + (data_ajax[i].lastchangemouldtime) * 1;
|
||||
j = j + 1;
|
||||
}
|
||||
avg_density = parseFloat(avg_density) + parseFloat(data_ajax[i].avg_density);
|
||||
avg_energy_avg = avg_energy_avg + (data_ajax[i].avg_currentcapacity / data_ajax[i].avg_normalcapacity);
|
||||
avg_zhengpin_avg = avg_zhengpin_avg + (data_ajax[i].sum_box_meter / data_ajax[i].sum_device_meter);
|
||||
sum_quantity = 2000;
|
||||
sum_currentfinishedquantity = sum_currentfinishedquantity + (data_ajax[i].sumbox) * 1;
|
||||
|
||||
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById("chart_energy_avg"));
|
||||
const chart_zhengpin_avg = echarts.init(document.getElementById("chart_zhengpin_avg"));
|
||||
const chart_density = echarts.init(document.getElementById("chart_density"));
|
||||
const chart_change_moulding_time = echarts.init(document.getElementById("chart_change_moulding_time"));
|
||||
|
||||
// 设置仪表盘数据
|
||||
option_zhengpin_avg.series[0].data[0].value = (avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_zhengpin_avg.setOption(option_zhengpin_avg, true);
|
||||
|
||||
option_density.series[0].data[0].value = (avg_density / data_ajax.length).toFixed(3);
|
||||
chart_density.setOption(option_density, true);
|
||||
|
||||
//option_change_moulding_time.series[0].data[0].value = (avg_chang_moulding_time / data_ajax.length).toFixed(0);
|
||||
option_change_moulding_time.series[0].data[0].value = 0 ;
|
||||
chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
|
||||
option_energy_avg.series[0].data[0].value = (avg_energy_avg / data_ajax.length * avg_zhengpin_avg / data_ajax.length * 100).toFixed(0);
|
||||
chart_energy_avg.setOption(option_energy_avg, true);
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var colorTemplate_energy_avg = [//50-85 85-100 100-120
|
||||
[0.5, "rgba(255,0,0,0.8)"],
|
||||
[5 / 7, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_zhengpin_avg = [//50-75 75-85 85-100
|
||||
[6 / 10, "rgba(255,0,0,0.8)"],
|
||||
[7 / 10, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(0,200,250,0.8)"]
|
||||
];
|
||||
var colorTemplate_density = [//0.4-0.42 红 0.4-0.38 0.38-0.36
|
||||
[1 / 3, "rgba(0,200,250,0.8)"],
|
||||
[2 / 3, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
var colorTemplate_change_moulding_time = [ //30-70 蓝 70-90 绿 90-120 红
|
||||
[4 / 9, "rgba(0,200,250,0.8)"],
|
||||
[6 / 9, "rgba(0,180,0,0.8)"],
|
||||
[1, "rgba(255,0,0,0.8)"]
|
||||
];
|
||||
|
||||
|
||||
var data_energy_avg = [{
|
||||
// name: "产能达标率",
|
||||
value: 50,
|
||||
}];
|
||||
|
||||
var data_zhengpin_avg = [{
|
||||
// name: "正品率",
|
||||
value: 0,
|
||||
}];
|
||||
var data_density = [{
|
||||
// name: "密度",
|
||||
value: 0,
|
||||
}];
|
||||
var data_change_moulding_time = [{
|
||||
// name: "换模时间",
|
||||
value: 0,
|
||||
}];
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option_energy_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 7, // 仪表盘刻度的分割段数,默认 10。
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_energy_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_energy_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_zhengpin_avg = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 50, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 100, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 5, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_zhengpin_avg, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}%", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_zhengpin_avg
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_density = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{c}",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 0.36, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 0.42, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 6, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_density, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_density
|
||||
}]
|
||||
|
||||
};
|
||||
// 指定图表的配置项和数据
|
||||
var option_change_moulding_time = {
|
||||
|
||||
//backgroundColor: "#000",
|
||||
|
||||
tooltip: { // 本系列特定的 tooltip 设定。
|
||||
show: true,
|
||||
formatter: "{b}：{c}%",
|
||||
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
|
||||
borderColor: "#333", // 提示框浮层的边框颜色。...
|
||||
borderWidth: 0, // 提示框浮层的边框宽。...
|
||||
padding: 5, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
|
||||
textStyle: { // 提示框浮层的文本样式。...
|
||||
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
|
||||
},
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
|
||||
type: "gauge", // 系列类型
|
||||
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
||||
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
|
||||
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
|
||||
endAngle: -45, // 仪表盘结束角度,默认 -45
|
||||
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
|
||||
min: 30, // 最小的数据值,默认 0 。映射到 minAngle。
|
||||
max: 120, // 最大的数据值,默认 100 。映射到 maxAngle。
|
||||
splitNumber: 9, // 仪表盘刻度的分割段数,默认 10。
|
||||
|
||||
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
||||
lineStyle: { // 仪表盘轴线样式。
|
||||
color: colorTemplate_change_moulding_time, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 15, //轴线宽度,默认 30。
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: { // 分隔线样式。
|
||||
show: true, // 是否显示分隔线,默认 true。
|
||||
length: 21, // 分隔线线长。支持相对半径的百分比,默认 30。
|
||||
lineStyle: { // 分隔线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 2, //线度,默认 2。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: { // 刻度(线)样式。
|
||||
show: true, // 是否显示刻度(线),默认 true。
|
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
||||
length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
|
||||
lineStyle: { // 刻度线样式。
|
||||
color: "#eee", //线的颜色,默认 #eee。
|
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
width: 1, //线度,默认 1。
|
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
||||
//shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", //阴影颜色。支持的格式同color。
|
||||
},
|
||||
},
|
||||
axisLabel: { // 刻度标签。
|
||||
show: true, // 是否显示标签,默认 true。
|
||||
distance: 1, // 标签与刻度线的距离,默认 5。
|
||||
color: "#000", // 文字的颜色,默认 #fff。
|
||||
fontSize: 10, // 文字的字体大小,默认 5。
|
||||
formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
|
||||
},
|
||||
pointer: { // 仪表盘指针。
|
||||
show: true, // 是否显示指针,默认 true。
|
||||
length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
|
||||
width: 5, // 指针宽度,默认 8。
|
||||
},
|
||||
itemStyle: { // 仪表盘指针样式。
|
||||
color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
|
||||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
||||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
|
||||
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
|
||||
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
|
||||
//shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
||||
//shadowColor: "#000", // 阴影颜色。支持的格式同color。
|
||||
},
|
||||
emphasis: { // 高亮的 仪表盘指针样式
|
||||
itemStyle: {
|
||||
//高亮 和正常 两者具有同样的配置项,只是在不同状态下配置项的值不同。
|
||||
}
|
||||
},
|
||||
title: { // 仪表盘标题。
|
||||
show: true, // 是否显示标题,默认 true。
|
||||
offsetCenter: [0,
|
||||
"20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "#000", // 文字的颜色,默认 #333。
|
||||
fontSize: 15, // 文字的字体大小,默认 15。
|
||||
},
|
||||
detail: { // 仪表盘详情，用于显示数据。
|
||||
show: true, // 是否显示详情,默认 true。
|
||||
offsetCenter: [0,
|
||||
"50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
|
||||
color: "auto", // 文字的颜色,默认 auto。
|
||||
fontSize: 20, // 文字的字体大小,默认 15。
|
||||
formatter: "{value}", // 格式化函数或者字符串
|
||||
},
|
||||
|
||||
data: data_change_moulding_time
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
193
ruoyi-ui/src/views/fx_density/fx_density_30d.vue
Normal file
193
ruoyi-ui/src/views/fx_density/fx_density_30d.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div >
|
||||
<el-container >
|
||||
<div id="chart_density_avg" style="width: 90%;height: 600px;top:20px"></div>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import { getDensity30Day } from '@/api/dashboard/density'
|
||||
|
||||
let lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
getDensity30Day().then(response => {
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById('chart_density_avg'))
|
||||
|
||||
option_energy_avg.xAxis[0].data = lineChartData.xAxisData
|
||||
option_energy_avg.series[0].data = lineChartData.actualData
|
||||
option_energy_avg.title.text = '30天平均密度'
|
||||
option_energy_avg.yAxis[0].min = (Math.min.apply(null, lineChartData.actualData).toFixed(2)*1-0.01)
|
||||
option_energy_avg.yAxis[0].max = (Math.max.apply(null, lineChartData.actualData).toFixed(2)*1+0.01)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
chart_energy_avg.setOption(option_energy_avg, true)
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const option_energy_avg = {
|
||||
title: {
|
||||
text: '',
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 18
|
||||
},
|
||||
itemGap: 5,
|
||||
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['1#', '2#', '3#', '30#'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
min: 0.36,
|
||||
max: 0.42,
|
||||
|
||||
// splitNumber: 12,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#DDD'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#999'
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '密度',
|
||||
type: 'line',
|
||||
data: [80, 72],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 8,
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#A9F387' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#48D8BF' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff',
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: '#A9F387'
|
||||
}
|
||||
},
|
||||
smooth: false,
|
||||
markLine: {
|
||||
label: {
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
precision: 4,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: 'red'
|
||||
},
|
||||
data: [{
|
||||
name: '目标',
|
||||
yAxis: '0.38'
|
||||
}, {
|
||||
type: 'average',
|
||||
name: '平均'
|
||||
}]
|
||||
}
|
||||
}]
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
195
ruoyi-ui/src/views/fx_density/fx_density_72h.vue
Normal file
195
ruoyi-ui/src/views/fx_density/fx_density_72h.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div >
|
||||
<el-container >
|
||||
<div id="chart_density_avg" style="width: 90%;height: 600px;top:20px"></div>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import { getDensity72h } from '@/api/dashboard/density'
|
||||
|
||||
let lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density72h',
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
getDensity72h().then(response => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById('chart_density_avg'))
|
||||
|
||||
option_energy_avg.xAxis[0].data = lineChartData.xAxisData
|
||||
option_energy_avg.series[0].data = lineChartData.actualData
|
||||
option_energy_avg.title.text = '72小时平均密度'
|
||||
option_energy_avg.yAxis[0].min = (Math.min.apply(null, lineChartData.actualData).toFixed(2)*1-0.01)
|
||||
option_energy_avg.yAxis[0].max = (Math.max.apply(null, lineChartData.actualData).toFixed(2)*1+0.01)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
chart_energy_avg.setOption(option_energy_avg, true)
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const option_energy_avg = {
|
||||
title: {
|
||||
text: '',
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 18
|
||||
},
|
||||
itemGap: 5,
|
||||
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['1#', '2#', '3#', '30#'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
min: 0.36,
|
||||
max: 0.42,
|
||||
|
||||
// splitNumber: 12,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#DDD'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#999'
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '密度',
|
||||
type: 'line',
|
||||
data: [80, 72],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 8,
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#A9F387' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#48D8BF' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff',
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: '#A9F387'
|
||||
}
|
||||
},
|
||||
smooth: false,
|
||||
markLine: {
|
||||
label: {
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
precision: 4,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: 'red'
|
||||
},
|
||||
data: [{
|
||||
name: '目标',
|
||||
yAxis: '0.38'
|
||||
}, {
|
||||
type: 'average',
|
||||
name: '平均'
|
||||
}]
|
||||
}
|
||||
}]
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
188
ruoyi-ui/src/views/fx_density/fx_density_group.vue
Normal file
188
ruoyi-ui/src/views/fx_density/fx_density_group.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div >
|
||||
<el-container >
|
||||
<div id="chart_density_avg" style="width: 90%;height: 600px;top:20px"></div>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import { getDensityGroup } from '@/api/dashboard/density'
|
||||
|
||||
let lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'density30day',
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
getDensityGroup().then(response => {
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
lineChartData.xAxisData.push((response.data[i].time + '').replace(' 00:00:00.0', ''))
|
||||
lineChartData.actualData.push(parseFloat(response.data[i].density).toFixed(4))
|
||||
}
|
||||
|
||||
const chart_energy_avg = echarts.init(document.getElementById('chart_density_avg'))
|
||||
|
||||
option_energy_avg.xAxis[0].data = lineChartData.xAxisData
|
||||
option_energy_avg.series[0].data = lineChartData.actualData
|
||||
option_energy_avg.title.text = '当班平均密度'
|
||||
option_energy_avg.yAxis[0].min = (Math.min.apply(null, lineChartData.actualData).toFixed(2)*1-0.01)
|
||||
option_energy_avg.yAxis[0].max = (Math.max.apply(null, lineChartData.actualData).toFixed(2)*1+0.01)
|
||||
|
||||
chart_energy_avg.setOption(option_energy_avg, true)
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const option_energy_avg = {
|
||||
title: {
|
||||
text: '',
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 18
|
||||
},
|
||||
itemGap: 5,
|
||||
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['1#', '2#', '3#', '30#'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
min: 0.36,
|
||||
max: 0.42,
|
||||
|
||||
// splitNumber: 12,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#DDD'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#999'
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '密度',
|
||||
type: 'line',
|
||||
data: [80, 72],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 8,
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#A9F387' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#48D8BF' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff',
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: '#A9F387'
|
||||
}
|
||||
},
|
||||
smooth: false,
|
||||
markLine: {
|
||||
label: {
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
precision: 4,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: 'red'
|
||||
},
|
||||
data: [{
|
||||
name: '目标',
|
||||
yAxis: '0.38'
|
||||
}, {
|
||||
type: 'average',
|
||||
name: '平均'
|
||||
}]
|
||||
}
|
||||
}]
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
326
ruoyi-ui/src/views/fx_technologist/fx_sample_all.vue
Normal file
326
ruoyi-ui/src/views/fx_technologist/fx_sample_all.vue
Normal file
@ -0,0 +1,326 @@
|
||||
<template>
|
||||
|
||||
|
||||
<div class="dashboard-editor-container">
|
||||
<div class="ibox-title">
|
||||
<el-row :gutter="32">
|
||||
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
|
||||
<b>选择时间范围</b>
|
||||
|
||||
<el-date-picker
|
||||
v-model="daterange_time1"
|
||||
align="right"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
<el-select style="width: 90px" v-model="daterange_group_value1" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<b>--</b>
|
||||
<el-date-picker
|
||||
v-model="daterange_time2"
|
||||
align="right"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions">
|
||||
</el-date-picker>
|
||||
<el-select style="width: 90px" v-model="daterange_group_value2" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button @click="getDataRange" type="primary">查询</el-button>
|
||||
<el-button @click="getData" type="success">所有数据</el-button>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
|
||||
<div class="ibox table-responsive">
|
||||
<div class="ibox-title">
|
||||
<h3>汇总表 </h3>
|
||||
</div>
|
||||
<div id="tableL01" class="table table-striped table-bordered table-hover float-left">
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import $ from 'jquery'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
import 'bootstrap/dist/js/bootstrap.min'
|
||||
import 'bootstrap-table/dist/bootstrap-table.min.css'
|
||||
import 'bootstrap-table/dist/bootstrap-table.min'
|
||||
import 'popper.js/dist/popper.min'
|
||||
import 'bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.min.css'
|
||||
import 'bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.min.js'
|
||||
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {ALL, AllDataDataRange} from '@/api/dashboard/fx_technologist'
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'fx_sample_all',
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
options: [{
|
||||
value: '08:00:01',
|
||||
label: '白班'
|
||||
}, {
|
||||
value: '20:00:00',
|
||||
label: '夜班'
|
||||
}],
|
||||
daterange_group_value1: [],
|
||||
daterange_group_value2: [],
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
daterange_time1: '',
|
||||
daterange_time2: '',
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
this.daterange_group_value1 = "08:00:01"
|
||||
this.daterange_group_value2 = "08:00:01"
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
getData() {
|
||||
|
||||
ALL().then(response => {
|
||||
|
||||
|
||||
var tableColumns = [
|
||||
{field: 'Technologist', title: '工艺员', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: '全称', title: '客户', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{
|
||||
field: 'MouldingStyleCode',
|
||||
title: '框型',
|
||||
sortable: true,
|
||||
filterControl: 'input',
|
||||
filterStrictSearch: false
|
||||
},
|
||||
{field: 'SalesMan', title: '销售员', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: 'TagName', title: '类型', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: 'ProductionLine', title: '产品线', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: 'NewMould', title: '是否新模', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: '地区', title: '区域', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: '经理审核时间', title: '下单日期', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '分解天数', title: '分解(天)', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{
|
||||
field: 'FactMakingDate',
|
||||
title: '完成时间',
|
||||
sortable: true,
|
||||
filterControl: 'input',
|
||||
filterStrictSearch: false
|
||||
},
|
||||
{field: '交期天数', title: '交期(天)', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '客户是否下单', title: '是否确认', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: '折算人民币价税合计', title: '销售金额', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '客户数量', title: '客户数量', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{
|
||||
field: 'FinishedDensity',
|
||||
title: '打样密度',
|
||||
sortable: true,
|
||||
filterControl: 'input',
|
||||
filterStrictSearch: false
|
||||
},
|
||||
{field: 'FinishedSpeed', title: '打样产能', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: 'FinishedBy', title: '打样人员', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
];
|
||||
|
||||
$('#tableL01').bootstrapTable('destroy');
|
||||
|
||||
$('#tableL01').bootstrapTable({//表格初始化
|
||||
columns: tableColumns, //表头
|
||||
data: JSON.parse(response.msg), //通过ajax返回的数据
|
||||
width: 30,
|
||||
// height:900,
|
||||
method: 'get',
|
||||
// pageSize: 50,
|
||||
pageNumber: 1,
|
||||
pageList: [],
|
||||
cache: false,
|
||||
searchText: '',
|
||||
filterControl: true,
|
||||
disableUnusedSelectOptions: true, striped: true,
|
||||
pagination: true,
|
||||
sidePagination: 'client',
|
||||
searchAlign: 'left',
|
||||
pageSize: 20,
|
||||
iconSize: 'lg',
|
||||
// search: true,
|
||||
|
||||
showRefresh: false,
|
||||
showExport: false,
|
||||
showFooter: true,
|
||||
// exportTypes: ['csv', 'txt', 'xml'],
|
||||
clickToSelect: true,
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
,
|
||||
|
||||
getDataRange() {
|
||||
const fDateStart = this.daterange_time1 + ' ' + this.daterange_group_value1
|
||||
const fDateEnd = this.daterange_time2 + ' ' + this.daterange_group_value2
|
||||
AllDataDataRange(fDateStart, fDateEnd).then(response => {
|
||||
|
||||
|
||||
var tableColumns = [
|
||||
{field: 'Technologist', title: '工艺员', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: '全称', title: '客户', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{
|
||||
field: 'MouldingStyleCode',
|
||||
title: '框型',
|
||||
sortable: true,
|
||||
filterControl: 'input',
|
||||
filterStrictSearch: false
|
||||
},
|
||||
{field: 'SalesMan', title: '销售员', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: 'TagName', title: '类型', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: 'ProductionLine', title: '产品线', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: 'SalesPerson', title: '是否新模', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '地区', title: '区域', sortable: true, filterControl: 'select', filterStrictSearch: false},
|
||||
{field: '经理审核时间', title: '下单日期', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '分解天数', title: '分解天数', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{
|
||||
field: 'ExpectMakingDate',
|
||||
title: '完成时间',
|
||||
sortable: true,
|
||||
filterControl: 'input',
|
||||
filterStrictSearch: false
|
||||
},
|
||||
{field: '交期天数', title: '交期天数', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '客户是否下单', title: '打样客户是否确认', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '折算人民币价税合计', title: '销售金额', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: '客户数量', title: '客户数量', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{
|
||||
field: 'FinishedDensity',
|
||||
title: '打样密度',
|
||||
sortable: true,
|
||||
filterControl: 'input',
|
||||
filterStrictSearch: false
|
||||
},
|
||||
{field: 'FinishedSpeed', title: '打样产能', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
{field: 'FinishedBy', title: '打样人员', sortable: true, filterControl: 'input', filterStrictSearch: false},
|
||||
];
|
||||
|
||||
$('#tableL01').bootstrapTable('destroy');
|
||||
|
||||
$('#tableL01').bootstrapTable({//表格初始化
|
||||
columns: tableColumns, //表头
|
||||
data: JSON.parse(response.msg), //通过ajax返回的数据
|
||||
width: 30,
|
||||
// height:900,
|
||||
method: 'get',
|
||||
// pageSize: 50,
|
||||
pageNumber: 1,
|
||||
pageList: [],
|
||||
cache: false,
|
||||
searchText: '',
|
||||
filterControl: true,
|
||||
disableUnusedSelectOptions: true, striped: true,
|
||||
pagination: true,
|
||||
sidePagination: 'client',
|
||||
searchAlign: 'left',
|
||||
pageSize: 20,
|
||||
iconSize: 'lg',
|
||||
// search: true,
|
||||
|
||||
showRefresh: false,
|
||||
showExport: false,
|
||||
showFooter: true,
|
||||
// exportTypes: ['csv', 'txt', 'xml'],
|
||||
clickToSelect: true,
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
161
ruoyi-ui/src/views/fx_technologist/fx_sample_best_selling.vue
Normal file
161
ruoyi-ui/src/views/fx_technologist/fx_sample_best_selling.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>ODM爆款 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataODM"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="MouldingStyleCode"
|
||||
sortable
|
||||
label="型号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="CNY"
|
||||
sortable
|
||||
label="金额">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="1" :lg="1">
|
||||
<h1></h1>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>OEM爆款 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataOEM"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="MouldingStyleCode"
|
||||
sortable
|
||||
label="型号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="CNY"
|
||||
sortable
|
||||
label="金额">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getBestOEM} from '@/api/dashboard/fx_technologist'
|
||||
import {getBestODM} from '@/api/dashboard/fx_technologist'
|
||||
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'fx_sample_confirmation',
|
||||
data() {
|
||||
return {
|
||||
tableDataODM: [],
|
||||
tableDataOEM: []
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
getBestOEM().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataOEM.push({
|
||||
MouldingStyleCode: response.data[i].MouldingStyleCode,
|
||||
CNY: ((response.data[i].CNY)*1).toFixed(2)
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
getBestODM().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataODM.push({
|
||||
MouldingStyleCode: response.data[i].MouldingStyleCode,
|
||||
CNY: ((response.data[i].CNY)*1).toFixed(2)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
124
ruoyi-ui/src/views/fx_technologist/fx_sample_confirmation.vue
Normal file
124
ruoyi-ui/src/views/fx_technologist/fx_sample_confirmation.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>打样确认率 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="NWX"
|
||||
sortable
|
||||
label="内外销">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ConfirmationNum"
|
||||
sortable
|
||||
label="确认数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="SampleNum"
|
||||
sortable
|
||||
label="打样数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Avg"
|
||||
sortable
|
||||
label="确认率">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getConfirmation} from '@/api/dashboard/fx_technologist'
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'fx_sample_confirmation',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
getConfirmation().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableData.push({
|
||||
NWX: response.data[i].NWX,
|
||||
ConfirmationNum: (response.data[i].ConfirmationNum),
|
||||
SampleNum: (response.data[i].SampleNum),
|
||||
Avg: ((response.data[i].ConfirmationNum) / (response.data[i].SampleNum) * 100).toFixed(0) + '%'
|
||||
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
296
ruoyi-ui/src/views/fx_technologist/fx_sample_day_report.vue
Normal file
296
ruoyi-ui/src/views/fx_technologist/fx_sample_day_report.vue
Normal file
@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>新订单 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataDayFinishedSampleOrder"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="MouldingStyleCode"
|
||||
sortable
|
||||
label="型号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Technologist"
|
||||
sortable
|
||||
filter-method="filterHandler"
|
||||
filters="[{text: '唐力', value: '唐力'}, {text: '唐加名', value: '唐加名'}]"
|
||||
label="工艺员">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="SalesMan"
|
||||
sortable
|
||||
label="销售">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="CNY"
|
||||
sortable
|
||||
label="该款12个月销售金额">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="1" :lg="1">
|
||||
<h1></h1>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>开模单 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataDayNewMould"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="UserName"
|
||||
sortable
|
||||
label="工艺员">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="new_or_fix"
|
||||
sortable
|
||||
label="分类">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="MouldCode"
|
||||
sortable
|
||||
label="模具">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>打样完成 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataDayFinishedSample"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="MouldingStyleCode"
|
||||
sortable
|
||||
label="型号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Technologist"
|
||||
sortable
|
||||
label="工艺员">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="FinishedDensity"
|
||||
sortable
|
||||
label="密度">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="FinishedSpeed"
|
||||
sortable
|
||||
label="产能">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="FinishedBy"
|
||||
sortable
|
||||
label="打样员">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="UseDay"
|
||||
sortable
|
||||
label="交期">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="1" :lg="1">
|
||||
<h1></h1>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>BOM完成 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataDayFinishedBOM"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="MouldingStyleCode"
|
||||
sortable
|
||||
label="型号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="Maker"
|
||||
sortable
|
||||
label="制作人">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {DayFinishedSampleOrder} from '@/api/dashboard/fx_technologist'
|
||||
import {DayNewMould} from '@/api/dashboard/fx_technologist'
|
||||
import {DayFinishedSample} from '@/api/dashboard/fx_technologist'
|
||||
import {DayFinishedBOM} from '@/api/dashboard/fx_technologist'
|
||||
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'fx_sample_confirmation',
|
||||
data() {
|
||||
return {
|
||||
tableDataDayFinishedSampleOrder: [],
|
||||
tableDataDayNewMould: [],
|
||||
tableDataDayFinishedSample: [],
|
||||
tableDataDayFinishedBOM: [],
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
DayFinishedSampleOrder().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataDayFinishedSampleOrder.push({
|
||||
MouldingStyleCode: response.data[i].MouldingStyleCode,
|
||||
CNY: ((response.data[i].CNY)*1).toFixed(2),
|
||||
SalesMan: response.data[i].SalesMan,
|
||||
Technologist: response.data[i].Technologist,
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
DayNewMould().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataDayNewMould.push({
|
||||
UserName: response.data[i].UserName,
|
||||
new_or_fix: response.data[i].new_or_fix,
|
||||
MouldCode: response.data[i].MouldCode,
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
DayFinishedSample().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataDayFinishedSample.push({
|
||||
MouldingStyleCode: response.data[i].MouldingStyleCode,
|
||||
Technologist: response.data[i].Technologist,
|
||||
FinishedDensity: response.data[i].FinishedDensity,
|
||||
FinishedSpeed: response.data[i].FinishedSpeed,
|
||||
FinishedBy: response.data[i].FinishedBy,
|
||||
UseDay: response.data[i].UseDay,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
DayFinishedBOM().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataDayFinishedBOM.push({
|
||||
MouldingStyleCode: response.data[i].MouldingStyleCode,
|
||||
Maker: response.data[i].Maker,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
185
ruoyi-ui/src/views/fx_technologist/fx_sample_sample_use_day.vue
Normal file
185
ruoyi-ui/src/views/fx_technologist/fx_sample_sample_use_day.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>已完成打样 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataFinished"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="Technologist"
|
||||
sortable
|
||||
label="工艺员">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="num"
|
||||
sortable
|
||||
label="数量">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_f"
|
||||
sortable
|
||||
label="平均分解(天)">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_j"
|
||||
sortable
|
||||
label="平均交期(天)">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="1" :lg="1">
|
||||
<h1></h1>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="11" :lg="11">
|
||||
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h3>未完成打样 </h3>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<el-table
|
||||
:data="tableDataUnFinished"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="Technologist"
|
||||
sortable
|
||||
label="工艺员">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="num"
|
||||
sortable
|
||||
label="数量">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avg_use_date"
|
||||
sortable
|
||||
label="平均已过天数(天)">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="day15num"
|
||||
sortable
|
||||
label="超15天数量">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../dashboard/mixins/resize'
|
||||
import {getUnFinishedSampleAvgDay} from '@/api/dashboard/fx_technologist'
|
||||
import {getFinishedSampleAvgDay} from '@/api/dashboard/fx_technologist'
|
||||
|
||||
|
||||
const lineChartData = {
|
||||
xAxisData: [],
|
||||
actualData: []
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'fx_sample_confirmation',
|
||||
data() {
|
||||
return {
|
||||
tableDataFinished: [],
|
||||
tableDataUnFinished: []
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getData()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
|
||||
getFinishedSampleAvgDay().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataFinished.push({
|
||||
Technologist: response.data[i].Technologist,
|
||||
avg_f: ((response.data[i].avg_f)*1).toFixed(2),
|
||||
num: response.data[i].num,
|
||||
avg_j: ((response.data[i].avg_j)*1).toFixed(2)
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
getUnFinishedSampleAvgDay().then(response => {
|
||||
|
||||
|
||||
for (var i = 0; i < response.data.length; i++) {
|
||||
|
||||
|
||||
this.tableDataUnFinished.push({
|
||||
Technologist: response.data[i].Technologist,
|
||||
num: response.data[i].num,
|
||||
day15num: response.data[i].day15num,
|
||||
avg_use_date: ((response.data[i].avg_use_date)*1)
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,98 +1,782 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<el-row :gutter="32">
|
||||
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||
<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 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 />
|
||||
<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="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart />
|
||||
<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="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
<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 PanelGroup from './dashboard/PanelGroup'
|
||||
import LineChart from './dashboard/LineChart'
|
||||
import RaddarChart from './dashboard/RaddarChart'
|
||||
import PieChart from './dashboard/PieChart'
|
||||
import BarChart from './dashboard/BarChart'
|
||||
import echarts from 'echarts'
|
||||
|
||||
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]
|
||||
}
|
||||
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;
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
@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,7 +1,7 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<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-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
||||
@ -48,7 +48,7 @@
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<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>
|
||||
</template>
|
||||
@ -65,8 +65,8 @@ export default {
|
||||
codeUrl: "",
|
||||
cookiePassword: "",
|
||||
loginForm: {
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
username: "",
|
||||
password: "",
|
||||
rememberMe: false,
|
||||
code: "",
|
||||
uuid: ""
|
||||
|
||||
@ -133,7 +133,7 @@
|
||||
|
||||
<!-- 添加或修改定时任务对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="任务名称" prop="jobName">
|
||||
@ -397,7 +397,7 @@ export default {
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return runJob(row.jobId, row.jobGroup);
|
||||
}).then(() => {
|
||||
}).then(function() {
|
||||
this.msgSuccess("执行成功");
|
||||
}).catch(function() {});
|
||||
},
|
||||
@ -438,6 +438,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -446,6 +448,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -87,7 +87,7 @@
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['monitor:job:export']"
|
||||
v-hasPermi="['monitor:jobLog:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -196,7 +196,9 @@ export default {
|
||||
jobName: undefined,
|
||||
jobGroup: undefined,
|
||||
status: undefined
|
||||
}
|
||||
},
|
||||
// 表单参数
|
||||
form: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
<el-table-column label="访问编号" align="center" prop="infoId" />
|
||||
<el-table-column label="用户名称" align="center" prop="userName" />
|
||||
<el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录地点" align="center" prop="loginLocation" />
|
||||
<el-table-column label="浏览器" align="center" prop="browser" />
|
||||
<el-table-column label="操作系统" align="center" prop="os" />
|
||||
<el-table-column label="登录状态" align="center" prop="status" :formatter="statusFormat" />
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
<el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="部门名称" align="center" prop="deptName" />
|
||||
<el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录地点" align="center" prop="loginLocation" />
|
||||
<el-table-column label="浏览器" align="center" prop="browser" />
|
||||
<el-table-column label="操作系统" align="center" prop="os" />
|
||||
<el-table-column label="登录时间" align="center" prop="loginTime" width="180">
|
||||
|
||||
@ -110,7 +110,7 @@
|
||||
<el-table-column label="请求方式" align="center" prop="requestMethod" />
|
||||
<el-table-column label="操作人员" align="center" prop="operName" />
|
||||
<el-table-column label="主机" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作地点" align="center" prop="operLocation" />
|
||||
<el-table-column label="操作状态" align="center" prop="status" :formatter="statusFormat" />
|
||||
<el-table-column label="操作日期" align="center" prop="operTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
|
||||
@ -193,6 +193,9 @@ export default {
|
||||
getList() {
|
||||
getServer().then(response => {
|
||||
this.server = response.data;
|
||||
console.log(response);
|
||||
console.log(response.data);
|
||||
|
||||
this.loading.close();
|
||||
});
|
||||
},
|
||||
|
||||
@ -88,15 +88,6 @@
|
||||
v-hasPermi="['system:config:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-refresh"
|
||||
size="mini"
|
||||
@click="handleClearCache"
|
||||
v-hasPermi="['system:config:remove']"
|
||||
>清理缓存</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
|
||||
@ -174,7 +165,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listConfig, getConfig, delConfig, addConfig, updateConfig, exportConfig, clearCache } from "@/api/system/config";
|
||||
import { listConfig, getConfig, delConfig, addConfig, updateConfig, exportConfig } from "@/api/system/config";
|
||||
|
||||
export default {
|
||||
name: "Config",
|
||||
@ -305,6 +296,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -313,6 +306,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -345,14 +340,6 @@ export default {
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
}).catch(function() {});
|
||||
},
|
||||
/** 清理缓存按钮操作 */
|
||||
handleClearCache() {
|
||||
clearCache().then(response => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess("清理成功");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -138,7 +138,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
|
||||
import { listDept, getDept, delDept, addDept, updateDept } from "@/api/system/dept";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
@ -220,6 +220,12 @@ export default {
|
||||
children: node.children
|
||||
};
|
||||
},
|
||||
/** 查询部门下拉树结构 */
|
||||
getTreeselect() {
|
||||
listDept().then(response => {
|
||||
this.deptOptions = this.handleTree(response.data, "deptId");
|
||||
});
|
||||
},
|
||||
// 字典状态字典翻译
|
||||
statusFormat(row, column) {
|
||||
return this.selectDictLabel(this.statusOptions, row.status);
|
||||
@ -250,26 +256,22 @@ export default {
|
||||
/** 新增按钮操作 */
|
||||
handleAdd(row) {
|
||||
this.reset();
|
||||
this.getTreeselect();
|
||||
if (row != undefined) {
|
||||
this.form.parentId = row.deptId;
|
||||
}
|
||||
this.open = true;
|
||||
this.title = "添加部门";
|
||||
listDept().then(response => {
|
||||
this.deptOptions = this.handleTree(response.data, "deptId");
|
||||
});
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
this.getTreeselect();
|
||||
getDept(row.deptId).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改部门";
|
||||
});
|
||||
listDeptExcludeChild(row.deptId).then(response => {
|
||||
this.deptOptions = this.handleTree(response.data, "deptId");
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
@ -281,6 +283,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -289,6 +293,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -305,6 +305,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -313,6 +315,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -94,15 +94,6 @@
|
||||
v-hasPermi="['system:dict:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-refresh"
|
||||
size="mini"
|
||||
@click="handleClearCache"
|
||||
v-hasPermi="['system:dict:remove']"
|
||||
>清理缓存</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
|
||||
@ -182,7 +173,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listType, getType, delType, addType, updateType, exportType, clearCache } from "@/api/system/dict/type";
|
||||
import { listType, getType, delType, addType, updateType, exportType } from "@/api/system/dict/type";
|
||||
|
||||
export default {
|
||||
name: "Dict",
|
||||
@ -309,6 +300,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -317,6 +310,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -349,14 +344,6 @@ export default {
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
}).catch(function() {});
|
||||
},
|
||||
/** 清理缓存按钮操作 */
|
||||
handleClearCache() {
|
||||
clearCache().then(response => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess("清理成功");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -340,6 +340,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -348,6 +350,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -308,6 +308,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -316,6 +318,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -277,6 +277,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -285,6 +287,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -482,6 +482,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -491,6 +493,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -506,6 +510,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.openDataScope = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -82,6 +82,7 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@ -133,7 +134,7 @@
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column type="selection" width="40" align="center" />
|
||||
<el-table-column label="用户编号" align="center" prop="userId" />
|
||||
<el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
|
||||
@ -208,11 +209,9 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="归属部门" prop="deptId">
|
||||
<treeselect v-model="form.deptId" :options="deptOptions" :disable-branch-nodes="true" :show-count="true" placeholder="请选择归属部门" />
|
||||
<treeselect v-model="form.deptId" :options="deptOptions" placeholder="请选择归属部门" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="手机号码" prop="phonenumber">
|
||||
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
|
||||
@ -223,8 +222,6 @@
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
|
||||
<el-input v-model="form.userName" placeholder="请输入用户名称" />
|
||||
@ -235,8 +232,6 @@
|
||||
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户性别">
|
||||
<el-select v-model="form.sex" placeholder="请选择">
|
||||
@ -260,8 +255,7 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item label="岗位">
|
||||
<el-select v-model="form.postIds" multiple placeholder="请选择">
|
||||
@ -288,8 +282,6 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
|
||||
@ -581,6 +573,8 @@ export default {
|
||||
resetUserPwd(row.userId, value).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess("修改成功，新密码是：" + value);
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}).catch(() => {});
|
||||
@ -595,6 +589,8 @@ export default {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@ -603,6 +599,8 @@ export default {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -59,6 +59,8 @@ export default {
|
||||
response => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess("修改成功");
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg" />
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened">
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
||||
<el-row>
|
||||
<el-col :xs="24" :md="12" :style="{height: '350px'}">
|
||||
<vue-cropper
|
||||
@ -13,7 +13,6 @@
|
||||
:autoCropHeight="options.autoCropHeight"
|
||||
:fixedBox="options.fixedBox"
|
||||
@realTime="realTime"
|
||||
v-if="visible"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="12" :style="{height: '350px'}">
|
||||
@ -68,8 +67,6 @@ export default {
|
||||
return {
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否显示cropper
|
||||
visible: false,
|
||||
// 弹出层标题
|
||||
title: "修改头像",
|
||||
options: {
|
||||
@ -87,10 +84,6 @@ export default {
|
||||
editCropper() {
|
||||
this.open = true;
|
||||
},
|
||||
// 打开弹出层结束时的回调
|
||||
modalOpened() {
|
||||
this.visible = true;
|
||||
},
|
||||
// 覆盖默认的上传行为
|
||||
requestUpload() {
|
||||
},
|
||||
@ -128,10 +121,11 @@ export default {
|
||||
if (response.code === 200) {
|
||||
this.open = false;
|
||||
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
|
||||
store.commit('SET_AVATAR', this.options.img);
|
||||
this.msgSuccess("修改成功");
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
this.visible = false;
|
||||
this.$refs.cropper.clearCrop();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
@ -64,6 +64,8 @@ export default {
|
||||
updateUserProfile(this.user).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess("修改成功");
|
||||
} else {
|
||||
this.msgError(response.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
86
ruoyi-ui/src/views/test001/density30day.vue
Normal file
86
ruoyi-ui/src/views/test001/density30day.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>test001</h1>
|
||||
|
||||
<div id="chart_change_moulding_time" style="width: 80%;height: 600px;left: 10%;"></div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from "../dashboard/mixins/resize";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务器信息 */
|
||||
getList() {
|
||||
getServer().then(response => {
|
||||
console.log(response);
|
||||
console.log(response.data);
|
||||
console.log(response.data[0]);
|
||||
console.log(JSON.parse(response.data[0]));
|
||||
});
|
||||
},
|
||||
|
||||
drawchart() {
|
||||
const chart_change_moulding_time = echarts.init(document.getElementById("chart_change_moulding_time"));
|
||||
const option_change_moulding_time = {
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '业务指标',
|
||||
type: 'gauge',
|
||||
detail: {formatter: '{value}%'},
|
||||
data: [{value: 50, name: '完成率'}]
|
||||
}
|
||||
]
|
||||
};
|
||||
chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
|
||||
setInterval(function () {
|
||||
option_change_moulding_time.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
|
||||
chart_change_moulding_time.setOption(option_change_moulding_time, true);
|
||||
},2000);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.drawchart();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export function getServer() {
|
||||
return request({
|
||||
url: '/monitor/server',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
49
ruoyi-ui/src/views/test001/index.vue
Normal file
49
ruoyi-ui/src/views/test001/index.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>test001</h1>
|
||||
<div id="chart_change_moulding_time" style="width: 80%;height: 204px;left: 10%;"></div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from "../dashboard/mixins/resize";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务器信息 */
|
||||
getList() {
|
||||
getServer().then(response => {
|
||||
console.log(response);
|
||||
console.log(response.data);
|
||||
console.log(response.data[0]);
|
||||
console.log(JSON.parse(response.data[0]));
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export function getServer() {
|
||||
return request({
|
||||
url: '/monitor/server',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -147,8 +147,8 @@ export default {
|
||||
info: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const tableId = this.$route.params && this.$route.params.tableId;
|
||||
beforeCreate() {
|
||||
const { tableId } = this.$route.query;
|
||||
if (tableId) {
|
||||
// 获取表详细信息
|
||||
getGenTable(tableId).then(res => {
|
||||
|
||||
@ -270,7 +270,7 @@ export default {
|
||||
/** 修改按钮操作 */
|
||||
handleEditTable(row) {
|
||||
const tableId = row.tableId || this.ids[0];
|
||||
this.$router.push("/gen/edit/" + tableId);
|
||||
this.$router.push({ path: "/gen/edit", query: { tableId: tableId } });
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<packaging>jar</packaging>
|
||||
|
||||
<name>ruoyi</name>
|
||||
<url>http://www.ruoyi.vip</url>
|
||||
<url>http://www.ruoyi.</url>
|
||||
<description>若依管理系统</description>
|
||||
|
||||
<parent>
|
||||
@ -96,6 +96,17 @@
|
||||
<scope>runtime</scope>
|
||||
</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框架 -->
|
||||
<dependency>
|
||||
<groupId>org.mybatis.spring.boot</groupId>
|
||||
|
||||
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,9 +6,9 @@ spring:
|
||||
druid:
|
||||
# 主库数据源
|
||||
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
|
||||
password: password
|
||||
password: js*168
|
||||
# 从库数据源
|
||||
slave:
|
||||
# 从数据源开关/默认关闭
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
# 项目相关配置
|
||||
ruoyi:
|
||||
# 名称
|
||||
name: RuoYi
|
||||
name: Intco
|
||||
# 版本
|
||||
version: 2.3.0
|
||||
# 版权年份
|
||||
copyrightYear: 2019
|
||||
copyrightYear: 2020
|
||||
# 实例演示开关
|
||||
demoEnabled: true
|
||||
demoEnabled: false
|
||||
# 文件路径 示例（ Windows配置D:/ruoyi/uploadPath，Linux配置 /home/ruoyi/uploadPath）
|
||||
profile: D:/ruoyi/uploadPath
|
||||
profile: /home/ruoyi/uploadPath
|
||||
# 获取ip地址开关
|
||||
addressEnabled: false
|
||||
|
||||
|
||||
Reference in New Issue
Block a user