yinq
/
aucma-mes-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改自定义数据

Browse Source
master
夜笙歌 1 month ago
parent 68f15adb50
commit 3d143954c8
3 changed files with 1593 additions and 1413 deletions
Show Stats Download Patch File Download Diff File

2
src/api/board/getData.js
Unescape Escape View File

@ -23,7 +23,7 @@ export function getSimulateData(query) {
isMsg:true,
url: '/base/customData/list',
method: 'get',
params: {customType: 1, ...query}
params: query
})
}

4
src/api/board/mixData.js
Unescape Escape View File

@ -8,8 +8,8 @@ let screenData = (e) => {
}
}
export function mixData(params) {
getSimulateData({customCode: params?.e || ''}).then(val => {
export function mixData(params,customType=1) {
getSimulateData({customCode: params?.e || '',customType}).then(val => {
if (val && val.rows.length > 0 && val.rows[0].isFlag === 0) {
let data = JSON.parse(val.rows[0].customData);
(params?.f || (() => {

708
src/views/model/dataCentre.vue
Unescape Escape View File

@ -81,11 +81,13 @@
import Chart from "@/components/board/Chart";
import chinaMap from "@/views/model/china2.json";
import * as echarts from "echarts";
import {mixData} from "@/api/board/mixData";
let getDateIntervalFun = null
let time1 = () => {
}
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
let intervalFun = null
export default {
name: "Liner",
components: {
@ -165,142 +167,152 @@ export default {
},
],
time: '',
date: ''
}
},
created() {
const getDate = () => {
let date = new Date()
let YYYY = date.getFullYear()
let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
this.date = `${YYYY} - ${MM} - ${dd}`
this.time = `${HH} : ${mm} : ${ss}`
}
getDate()
getDateIntervalFun = setInterval(getDate, 1000)
},
mounted() {
let points = [
{value: [118.8062, 31.9208], itemStyle: {color: "#4ab2e5"}},
{value: [127.9688, 45.368], itemStyle: {color: "#4fb6d2"}},
{value: [110.3467, 41.4899], itemStyle: {color: "#52b9c7"}},
{value: [125.8154, 44.2584], itemStyle: {color: "#5abead"}},
{value: [116.4551, 40.2539], itemStyle: {color: "#f34e2b"}},
{value: [123.1238, 42.1216], itemStyle: {color: "#f56321"}},
{value: [114.4995, 38.1006], itemStyle: {color: "#f56f1c"}},
{value: [117.4219, 39.4189], itemStyle: {color: "#f58414"}},
{value: [112.3352, 37.9413], itemStyle: {color: "#f58f0e"}},
{value: [109.1162, 34.2004], itemStyle: {color: "#f5a305"}},
{value: [103.5901, 36.3043], itemStyle: {color: "#e7ab0b"}},
{value: [106.3586, 38.1775], itemStyle: {color: "#dfae10"}},
{value: [101.4038, 36.8207], itemStyle: {color: "#d5b314"}},
{value: [103.9526, 30.7617], itemStyle: {color: "#c1bb1f"}},
{value: [108.384366, 30.439702], itemStyle: {color: "#b9be23"}},
{value: [113.0823, 28.2568], itemStyle: {color: "#a6c62c"}},
{value: [102.9199, 25.46639], itemStyle: {color: "#96cc34"}},
{value: [115.179594, 34.647758]},
];
date: '',
let plantCap = [
{
name: "外观时尚",
value: "24231",
RequestDataSet: [
{
e: 'data-01',
t: 4,
f: (e) => {
let data = {
yNameOne: [],
yData: []
}
e.forEach((i, k) => {
data.yNameOne.push(i.COLUMN_A)
data.yData.push(i.COLUMN_B)
})
const chart1Option = (data, id) => {
clearInterval(time1)
let bgBar = []
data.yData.forEach(() => {
bgBar.push(100)
})
let option = {
grid: {
left: "0%",
right: "15%",
bottom: "0%",
top: "0%",
containLabel: true,
},
{
name: "低碳环保",
value: "36232",
dataZoom: [],
xAxis: {
show: false,
},
yAxis: [
{
name: "高端智能",
value: "45423",
show: true,
data: data.yNameOne,
inverse: true,
axisLine: {
show: false,
},
{
name: "老品牌",
value: "24542",
splitLine: {
show: false,
},
];
let datalist = [
{
offset: [56, 48],
symbolSize: 120,
opacity: 0.95,
color: "#f467ce",
axisTick: {
show: false,
},
{
offset: [35, 80],
symbolSize: 95,
opacity: 0.88,
color: "#7aabe2",
axisLabel: {
color: "#fff",
// margin:150,
fontSize: 0.75 * vw,
textStyle: {
textAlign: 'center'
},
{
offset: [20, 43],
symbolSize: 90,
opacity: 0.84,
color: "#ff7123",
},
{
offset: [83, 30],
symbolSize: 90,
opacity: 0.8,
color: "#ffc400",
},
],
series: [
{
offset: [36, 20],
symbolSize: 65,
opacity: 0.75,
color: "#5e333f",
name: "条",
type: "bar",
yAxisIndex: 0,
data: data.yData,
barWidth: '80%',
itemStyle: {
normal: {
barBorderRadius: 30,
color: function (params) {
return 'green'
},
{
offset: [64, 10],
symbolSize: 70,
opacity: 0.7,
color: "#6b3442",
},
{
offset: [75, 75],
symbolSize: 60,
opacity: 0.68,
color: "#8a3647",
},
{
offset: [88, 62],
symbolSize: 50,
opacity: 0.6,
color: "#68333f",
},
];
let datas = [];
for (var i = 0; i < plantCap.length; i++) {
var item = plantCap[i];
var itemToStyle = datalist[i];
datas.push({
name: item.value + "\n" + item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
{
name: "框",
type: "bar",
yAxisIndex: 0,
barGap: "-100%",
data: bgBar,
barWidth: '80%',
label: {
normal: {
show: true,
position: "right",
textStyle: {
fontSize: 11,
},
color: "#fff",
fontSize: 0.75 * vw
},
formatter: function (val, index, e) {
return data.yData[val.dataIndex] + '%'
}
},
itemStyle: {
normal: {
color: itemToStyle.color,
opacity: itemToStyle.opacity,
color: "none",
borderColor: "#00c1de",
borderWidth: 1,
barBorderRadius: 15,
},
},
});
},
],
};
if (data.yNameOne.length > 8) {
option.dataZoom.push({
show: false,
type: 'slider',
bottom: '0%',
yAxisIndex: 0,
height: 12,
start: 0,
end: 1 / (data.yNameOne.length / 9) * 100,
textStyle: {
fontSize: 0,
color: 'rgba(0,0,0,0)'
}
})
let step = 1 / (data.yNameOne.length / 9) * 100
time1 = setInterval(() => {
option.dataZoom[0].end += step
option.dataZoom[0].start += step
if (option.dataZoom[0].start >= 100) {
option.dataZoom[0].start = 0
option.dataZoom[0].end = step
}
if (option.dataZoom[0].end >= 100) {
option.dataZoom[0].end = 100
option.dataZoom[0].start = option.dataZoom[0].end - step
}
this.$refs.chart1 && this.$refs.chart1.setData(option);
}, 6000)
// time()
}
return option
}
this.$refs.chart1 && this.$refs.chart1.setData(chart1Option(data));
}
},
{
e: 'data-02',
t: 4,
f: (e) => {
echarts.registerMap('china', chinaMap);
this.$refs.chart1 && this.$refs.chart1.setData(this.chart1Option());
this.$refs.chart4.setData({
tooltip: {},
grid: {
@ -340,7 +352,7 @@ export default {
axisTick: {
show: false,
},
data: ["预装检漏", "发泡质检", "电检", "低压捡漏", "高压捡漏", "制冷性能"],
data: e.map(v => v.COLUMN_A),
},
],
yAxis: [
@ -416,7 +428,7 @@ export default {
color: '#72b3fe'
},
},
data: [315, 309, 311, 311, 311, 313],
data: e.map(v => v.COLUMN_B),
},
{
name: "合格率",
@ -450,10 +462,16 @@ export default {
tooltip: {
show: false,
},
data: [99.74, 99.68, 99.76, 99.75, 99.58, 99.57, 99.43],
data: e.map(v => v.COLUMN_C),
},
],
})
}
},
{
e: 'data-03',
t: 4,
f: (e) => {
this.$refs.chart5.setData({
tooltip: {},
grid: {
@ -492,7 +510,7 @@ export default {
axisTick: {
show: false,
},
data: ["1-10", "1-11", "1-12", "1-13", "1-14", "1-15", "1-16"],
data: e.map(v => v.COLUMN_A),
},
],
yAxis: [
@ -568,7 +586,7 @@ export default {
color: '#9fe080'
},
},
data: [200, 350, 400, 350, 450, 500, 343],
data: e.map(v => v.COLUMN_B),
},
{
name: "订单履约率",
@ -602,10 +620,37 @@ export default {
tooltip: {
show: false,
},
data: [100, 100, 100, 100, 100, 100, 46],
data: e.map(v => v.COLUMN_C),
},
],
})
}
},
{
e: 'data-04',
t: 4,
f: (e) => {
console.log(e)
let points = [
{value: [118.8062, 31.9208], itemStyle: {color: "#4ab2e5"}},
{value: [127.9688, 45.368], itemStyle: {color: "#4fb6d2"}},
{value: [110.3467, 41.4899], itemStyle: {color: "#52b9c7"}},
{value: [125.8154, 44.2584], itemStyle: {color: "#5abead"}},
{value: [116.4551, 40.2539], itemStyle: {color: "#f34e2b"}},
{value: [123.1238, 42.1216], itemStyle: {color: "#f56321"}},
{value: [114.4995, 38.1006], itemStyle: {color: "#f56f1c"}},
{value: [117.4219, 39.4189], itemStyle: {color: "#f58414"}},
{value: [112.3352, 37.9413], itemStyle: {color: "#f58f0e"}},
{value: [109.1162, 34.2004], itemStyle: {color: "#f5a305"}},
{value: [103.5901, 36.3043], itemStyle: {color: "#e7ab0b"}},
{value: [106.3586, 38.1775], itemStyle: {color: "#dfae10"}},
{value: [101.4038, 36.8207], itemStyle: {color: "#d5b314"}},
{value: [103.9526, 30.7617], itemStyle: {color: "#c1bb1f"}},
{value: [108.384366, 30.439702], itemStyle: {color: "#b9be23"}},
{value: [113.0823, 28.2568], itemStyle: {color: "#a6c62c"}},
{value: [102.9199, 25.46639], itemStyle: {color: "#96cc34"}},
{value: [115.179594, 34.647758]},
];
this.$refs.chart6.setData({
geo: {
@ -883,6 +928,104 @@ export default {
},
],
})
}
},
{
e: 'data-05',
t: 4,
f: (e) => {
let plantCap = [
{
name: "外观时尚",
value: "24231",
},
{
name: "低碳环保",
value: "36232",
},
{
name: "高端智能",
value: "45423",
},
{
name: "老品牌",
value: "24542",
},
];
let datalist = [
{
offset: [56, 48],
symbolSize: 120,
opacity: 0.95,
color: "#f467ce",
},
{
offset: [35, 80],
symbolSize: 95,
opacity: 0.88,
color: "#7aabe2",
},
{
offset: [20, 43],
symbolSize: 90,
opacity: 0.84,
color: "#ff7123",
},
{
offset: [83, 30],
symbolSize: 90,
opacity: 0.8,
color: "#ffc400",
},
{
offset: [36, 20],
symbolSize: 65,
opacity: 0.75,
color: "#5e333f",
},
{
offset: [64, 10],
symbolSize: 70,
opacity: 0.7,
color: "#6b3442",
},
{
offset: [75, 75],
symbolSize: 60,
opacity: 0.68,
color: "#8a3647",
},
{
offset: [88, 62],
symbolSize: 50,
opacity: 0.6,
color: "#68333f",
},
];
let datas = [];
for (var i = 0; i < plantCap.length; i++) {
var item = plantCap[i];
var itemToStyle = datalist[i];
datas.push({
name: item.value + "\n" + item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
normal: {
textStyle: {
fontSize: 11,
},
},
},
itemStyle: {
normal: {
color: itemToStyle.color,
opacity: itemToStyle.opacity,
},
},
});
}
this.$refs.chart7.setData({
grid: {
show: false,
@ -934,6 +1077,13 @@ export default {
},
],
})
}
},
{
e: 'data-06',
t: 4,
f: (e) => {
this.$refs.chart8.setData({
tooltip: {
trigger: "item",
@ -1020,51 +1170,17 @@ export default {
show: false,
},
},
data:[
{
name: "干燥过滤器",
value: 1
},
{
name: "压机室外观",
value: 1
},
{
name: "箱体外观",
value: 3
},
{
name: "集液管",
value: 2
},
{
name: "A内胆外观",
value: 1
},
{
name: "毛细管",
value: 1
},
{
name: "封口",
value: 1
},
{
name: "集液管漏",
value: 1
},
{
name: "蒸发器缠绕圈数错",
value: 1
},
{
name: "少全铜管标",
value: 1
}
]
data: e
},
],
})
}
},
{
e: 'data-07',
t: 4,
f: (e) => {
this.$refs.chart9.setData({
tooltip: {
textStyle: {
@ -1079,7 +1195,7 @@ export default {
containLabel: true,
},
xAxis: {
data: ['2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],
data: e.map(v=>v.COLUMN_A),
axisLine: {
lineStyle: {
color: "#0177d4",
@ -1145,10 +1261,16 @@ export default {
),
},
},
data: [40631, 71777, 23375, 29402, 32359, 35070, 40360, 52643, 50001, 44100, 54000, 27555,],
data: e.map(v=>v.COLUMN_B),
}
],
})
}
},
{
e: 'data-08',
t: 4,
f: (e) => {
this.$refs.chart10_1.setData({
series: [
{
@ -1171,7 +1293,7 @@ export default {
center: ["50%", "50%"],
data: [
{
value: 102,
value: e?.[0]?.COLUMN_B,
label: {
normal: {
rich: {
@ -1192,7 +1314,7 @@ export default {
"{a|" +
params.value +
"}" +
"\n{b|在网数量}"
"\n{b|"+ e?.[0]?.COLUMN_A+"}"
);
},
position: "center",
@ -1250,7 +1372,7 @@ export default {
center: ["50%", "50%"],
data: [
{
value: 5.5,
value: e?.[1]?.COLUMN_B,
label: {
normal: {
rich: {
@ -1271,7 +1393,7 @@ export default {
"{a|" +
params.value +
"}" +
"\n{b|单台能耗}"
"\n{b|"+ e?.[1]?.COLUMN_A+"}"
);
},
position: "center",
@ -1329,7 +1451,7 @@ export default {
center: ["50%", "50%"],
data: [
{
value: 78,
value: e?.[2]?.COLUMN_B,
label: {
normal: {
rich: {
@ -1350,7 +1472,7 @@ export default {
"{a|" +
params.value +
"%}" +
"\n{b|产线OEE}"
"\n{b|"+ e?.[2]?.COLUMN_A+"}"
);
},
position: "center",
@ -1386,6 +1508,12 @@ export default {
},
],
})
}
},
{
e: 'data-09',
t: 4,
f: (e) => {
this.$refs.chart11.setData({
grid: {
top: "20%",
@ -1421,7 +1549,7 @@ export default {
color: "#F1F1F3",
},
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
data: e.map(v=>v.COLUMN_A),
}
],
yAxis: [
@ -1471,7 +1599,7 @@ export default {
fontSize: 0.6 * vw
},
},
data: [8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
data: e.map(v=>v.COLUMN_B),
},
{
name: '闭环数',
@ -1503,10 +1631,16 @@ export default {
color: true ? '#9ce375' : "#4FD3B9",
},
},
data: [8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
data: e.map(v=>v.COLUMN_C),
},
]
})
}
},
{
e: 'data-10',
t: 4,
f: (e) => {
this.$refs.chart12.setData({
tooltip: {},
grid: {
@ -1547,7 +1681,7 @@ export default {
axisTick: {
show: false,
},
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
data: e.map(v=>v.COLUMN_A),
},
],
yAxis: [
@ -1609,7 +1743,7 @@ export default {
tooltip: {
show: false,
},
data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2],
data: e.map(v=>v.COLUMN_B),
},
{
name: "目标市场不良率",
@ -1642,149 +1776,195 @@ export default {
tooltip: {
show: false,
},
data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
data: e.map(v=>v.COLUMN_C),
},
],
})
}
},
methods: {
exitFun() {
this.exit()
},
chart1Option(data, id) {
clearInterval(time1)
if (!data) {
data = {
yNameOne: ["11244726", "11244725", "11244695", "11244639", "11244635", "11244634", "11244633", "11244632", "11244311", "11244310"],
yData: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
xDataName: "达成率",
status: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
]
}
},
created() {
const getDate = () => {
let date = new Date()
let YYYY = date.getFullYear()
let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
this.date = `${YYYY} - ${MM} - ${dd}`
this.time = `${HH} : ${mm} : ${ss}`
}
let bgBar = []
data.yData.forEach(() => {
bgBar.push(100)
getDate()
getDateIntervalFun = setInterval(getDate, 1000)
},
mounted() {
this.RequestDataSet.forEach(val => {
mixData(val, 2)
})
let option = {
intervalFun = setInterval(() => {
this.RequestDataSet.forEach(val => {
mixData(val, 2)
})
}, 1000 * 10)
echarts.registerMap('china', chinaMap);
this.$refs.chart12.setData({
tooltip: {},
grid: {
// left: "-10%",
left: "0%",
right: "15%",
bottom: "0%",
top: "0%",
top: "25%",
left: "5%",
right: "1%",
bottom: "8%",
containLabel: true,
},
dataZoom: [],
xAxis: {
show: false,
legend: {
itemGap: 50,
top: "3%",
textStyle: {
fontSize: 0.6 * vw,
color: "#f9f9f9",
borderColor: "#fff",
},
yAxis: [
},
xAxis: [
{
show: true,
data: data.yNameOne,
inverse: true,
type: "category",
boundaryGap: true,
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: "#f9f9f9",
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
margin: 15,
fontSize: 0.4 * vw,
},
},
axisTick: {
show: false,
},
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
},
],
yAxis: [
{
name: '不良率',
type: "value",
min: 0,
splitLine: {
show: false,
show: true,
lineStyle: {
color: "#0a3256",
},
axisTick: {
},
axisLine: {
show: false,
},
axisLabel: {
color: "#fff",
// margin:150,
fontSize: 0.75 * vw,
margin: 5,
textStyle: {
textAlign: 'center'
color: "#d1e6eb",
},
fontSize: 0.4 * vw,
formatter: '{value}%'
},
axisTick: {
show: false,
},
},
],
series: [
{
name: "条",
type: "bar",
yAxisIndex: 0,
data: data.yData,
barWidth: '80%',
name: "当年市场不良率",
type: "line",
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: "emptyCircle",
symbolSize: 6,
lineStyle: {
normal: {
color: "#e8f1ff", // 线条颜色
},
borderColor: "#28ffb3",
},
label: {
show: true,
position: "bottom",
fontSize: 0.4 * vw,
textStyle: {
color: "#fff",
},
formatter: '{c}%'
},
itemStyle: {
normal: {
barBorderRadius: 30,
color: function (params) {
return 'green'
color: "#28ffb3",
},
},
tooltip: {
show: false,
},
data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2],
},
{
name: "框",
type: "bar",
yAxisIndex: 0,
barGap: "-100%",
data: bgBar,
barWidth: '80%',
name: "目标市场不良率",
type: "line",
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: "emptyCircle",
symbolSize: 6,
lineStyle: {
normal: {
color: "#4268aa", // 线条颜色
},
borderColor: "#ecf3ff",
},
label: {
show: true,
position: "right",
position: "top",
fontSize: 0.4 * vw,
textStyle: {
color: "#fff",
fontSize: 0.75 * vw
},
formatter: function (val, index, e) {
return data.yData[val.dataIndex] + '%'
}
formatter: '{c}%'
},
itemStyle: {
normal: {
color: "none",
borderColor: "#00c1de",
borderWidth: 1,
barBorderRadius: 15,
color: "#28ffb3",
},
},
tooltip: {
show: false,
},
data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
},
],
};
if (data.yNameOne.length > 8) {
option.dataZoom.push({
show: false,
type: 'slider',
bottom: '0%',
yAxisIndex: 0,
height: 12,
start: 0,
end: 1 / (data.yNameOne.length / 9) * 100,
textStyle: {
fontSize: 0,
color: 'rgba(0,0,0,0)'
}
})
let step = 1 / (data.yNameOne.length / 9) * 100
time1 = setInterval(() => {
option.dataZoom[0].end += step
option.dataZoom[0].start += step
if (option.dataZoom[0].start >= 100) {
option.dataZoom[0].start = 0
option.dataZoom[0].end = step
}
if (option.dataZoom[0].end >= 100) {
option.dataZoom[0].end = 100
option.dataZoom[0].start = option.dataZoom[0].end - step
}
this.$refs.chart1 && this.$refs.chart1.setData(option);
}, 6000)
// time()
}
return option
}
},
methods: {
exitFun() {
this.exit()
},
},
beforeDestroy() {
getDateIntervalFun = null
if (intervalFun) {
clearInterval(intervalFun)
intervalFun = null
}
}
}
</script>

Write Preview
Loading…
Cancel
Save