Compare commits
20 Commits
71f548cb3b
...
projects/m
| Author | SHA1 | Date | |
|---|---|---|---|
|
a618e081b5 | ||
|
|
9efddba586 | ||
| 12b37c13c7 | |||
|
|
eda007d713 | ||
| 9e3c9fff6d | |||
|
|
4d8300d213 | ||
|
|
52dbb694a8 | ||
|
|
cd36d33be9 | ||
| 52d968fdde | |||
|
|
b05d9067d3 | ||
|
|
7e9f89fdda | ||
| 2d89137809 | |||
|
|
f5f472854b | ||
|
|
737949d3ec | ||
| e802674196 | |||
|
8da6dc6232 | ||
|
|
3e2661581e | ||
| ec5e47a416 | |||
|
|
99d60a14bd | ||
|
|
6409d2d348 |
6
.env.dev
6
.env.dev
@@ -1,8 +1,8 @@
|
||||
###
|
||||
# @Author: zhp
|
||||
# @Date: 2024-04-28 13:42:51
|
||||
# @LastEditTime: 2024-06-24 16:57:53
|
||||
# @LastEditors: DY
|
||||
# @LastEditTime: 2024-07-26 10:50:10
|
||||
# @LastEditors: zhp
|
||||
# @Description:
|
||||
###
|
||||
# 开发环境配置
|
||||
@@ -21,7 +21,7 @@ VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
|
||||
# 郭
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.61:48080'
|
||||
# sara
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.63:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.63:8080'
|
||||
# 张一丁
|
||||
# VUE_APP_BASE_API = 'http://192.168.4.139:48080'
|
||||
# 蔡
|
||||
|
||||
@@ -1,32 +1,24 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-26 14:53:45
|
||||
* @LastEditTime: 2024-05-06 14:55:33
|
||||
* @LastEditTime: 2024-07-26 09:32:26
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询部门列表
|
||||
export function getOrderList(data) {
|
||||
export function getCostMainPage(data) {
|
||||
return request({
|
||||
url: 'ip/prod-order/prodOrderList',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getCostPage(data) {
|
||||
return request({
|
||||
url: 'ip/cost/costPage',
|
||||
url: 'ip/cost-main/page',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function getCostList(data) {
|
||||
export function exportExcel(data) {
|
||||
return request({
|
||||
url: 'ip/cost/costList',
|
||||
url: 'ip/cost-main/export-excel',
|
||||
method: 'post',
|
||||
data: data
|
||||
data: data,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,15 +1,24 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-28 09:28:12
|
||||
* @LastEditTime: 2024-04-28 15:52:36
|
||||
* @LastEditTime: 2024-07-25 15:05:43
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
export function getStockPage(data) {
|
||||
export function getStockRealTimePage(data) {
|
||||
return request({
|
||||
url: 'ip/stock/page',
|
||||
url: 'ip/stock-realtime/page',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function exportExcel(data) {
|
||||
return request({
|
||||
url: '/ip/stock-realtime/export-excel',
|
||||
method: 'get',
|
||||
data: data,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-03 15:38:31
|
||||
* @LastEditTime: 2024-07-11 13:56:19
|
||||
* @LastEditTime: 2024-07-22 16:15:21
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div style="padding: 0 15px;" @click="toggleClick">
|
||||
<svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
|
||||
width="64" height="64" :fill="changeColor === true ? 'rgba(255, 255, 255, 1)' : '' ">
|
||||
width="64" height="64" :fill="changeColor === true ? 'rgba(255, 255, 255,.65)' : '' ">
|
||||
<path
|
||||
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
|
||||
</svg>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div ref="navbar" class="navbar"
|
||||
:style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35)' : ''">
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
|
||||
:style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35);' : ''">
|
||||
<hamburger style="margin-left: 20px;" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
|
||||
@toggleClick="toggleSideBar" />
|
||||
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-12 11:13:06
|
||||
* @LastEditTime: 2024-04-12 16:20:31
|
||||
* @LastEditTime: 2024-07-26 09:31:09
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import Element, { DatePicker } from 'element-ui'
|
||||
|
||||
// 修改如下样式文件，覆盖样式，或者新增样式文件
|
||||
import "./assets/styles/element-variables.scss";
|
||||
@@ -44,7 +44,7 @@ import {
|
||||
} from "@/utils/dict";
|
||||
import CodeBrickZj from 'code-brick-zj';
|
||||
import "./theme/index.css"; // 自定义主题包 - code-brick-zj
|
||||
|
||||
// Vue.component(Select.name, Select)
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts;
|
||||
Vue.prototype.parseTime = parseTime;
|
||||
@@ -68,7 +68,8 @@ Vue.component("RightToolbar", RightToolbar);
|
||||
import DictTag from "@/components/DictTag";
|
||||
// 头部标签插件
|
||||
import VueMeta from "vue-meta";
|
||||
|
||||
// import locale from './views/cost/zh'; // 请根据实际路径修改
|
||||
// Vue.use(ElementUI, { locale });
|
||||
Vue.use(directive)
|
||||
Vue.use(plugins)
|
||||
Vue.use(VueMeta)
|
||||
|
||||
@@ -9,13 +9,9 @@ function __resizeHandler(entries) {
|
||||
: entry.contentBoxSize;
|
||||
this.chart_mixin_chartInstance.resize({
|
||||
// width:
|
||||
// contentBoxSize.inlineSize < this.MIN_WIDTH
|
||||
// ? this.MIN_WIDTH
|
||||
// : contentBoxSize.inlineSize,
|
||||
// width:
|
||||
// entry.contentRect.width < this.MIN_WIDTH
|
||||
// ? this.MIN_WIDTH
|
||||
// : entry.contentRect.width,
|
||||
// contentBoxSize.inlineSize < this.MIN_WIDTH
|
||||
// ? this.MIN_WIDTH
|
||||
// : contentBoxSize.inlineSize,
|
||||
height: contentBoxSize.blockSize,
|
||||
});
|
||||
} else {
|
||||
|
||||
@@ -551,15 +551,15 @@ function getFactoryTargetValueA(targetList, factoryId) {
|
||||
*/
|
||||
function initA() {
|
||||
const t_ = {
|
||||
current: Array(7).fill(0),
|
||||
previous: Array(7).fill(0),
|
||||
current: Array(2).fill(0),
|
||||
previous: Array(2).fill(0),
|
||||
};
|
||||
// 芯片OEE
|
||||
// 转化效率
|
||||
// 标准组件良率
|
||||
const stdRate = {
|
||||
...deepClone(t_),
|
||||
target: Array(7).fill(0),
|
||||
target: Array(2).fill(0),
|
||||
};
|
||||
// 芯片良率
|
||||
const transformRate = deepClone(stdRate);
|
||||
@@ -579,8 +579,8 @@ function initA() {
|
||||
*/
|
||||
function init() {
|
||||
const t_ = {
|
||||
current: Array(7).fill(0),
|
||||
previous: Array(7).fill(0),
|
||||
current: Array(2).fill(0),
|
||||
previous: Array(2).fill(0),
|
||||
};
|
||||
// 芯片投入
|
||||
const chipInvest = deepClone(t_);
|
||||
@@ -589,7 +589,7 @@ function init() {
|
||||
// 芯片产出
|
||||
const chipOutput = {
|
||||
...deepClone(t_),
|
||||
target: Array(7).fill(0),
|
||||
target: Array(2).fill(0),
|
||||
};
|
||||
// 标准组件产出
|
||||
const stdOutput = deepClone(chipOutput);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-07-10 15:17:28
|
||||
* @LastEditTime: 2024-07-19 15:18:00
|
||||
* @LastEditTime: 2024-07-23 17:03:42
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -27,7 +27,7 @@ export default {
|
||||
props: {
|
||||
noScroll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
@@ -51,7 +51,7 @@ export default {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 80%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
|
||||
@@ -79,7 +79,7 @@ export default {
|
||||
// console.log(item.color, color);
|
||||
res +=
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
|
||||
`<span style='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0}</span>`;
|
||||
}
|
||||
@@ -129,7 +129,7 @@ export default {
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
color: "rgba(69,97,174,.4)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,8 +1,15 @@
|
||||
<!--
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-03 15:38:31
|
||||
* @LastEditTime: 2024-07-24 10:29:26
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<!--
|
||||
filename: ChartContainer.vue
|
||||
author: liubin
|
||||
date: 2024-04-10 08:54:33
|
||||
description:
|
||||
description:
|
||||
todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
|
||||
-->
|
||||
|
||||
@@ -19,7 +26,7 @@ export default {
|
||||
props: {
|
||||
noScroll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
<template>
|
||||
<div class="copilot-header">
|
||||
<section class="menu">
|
||||
<section class="menu left">
|
||||
<CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active"
|
||||
@click="() => $emit('update:active', i)" />
|
||||
<div class="type-name"></div>
|
||||
@@ -15,7 +15,7 @@
|
||||
@click="() => $emit('update:than', i)" />
|
||||
</section>
|
||||
<div class="page-title">{{ active }}驾驶舱</div>
|
||||
<section class="menu" style="width: 24vw;float: right;">
|
||||
<section class="menu right" style="width: 24vw;float: right;">
|
||||
<CopilotButton v-for="i in ['日', '周', '月', '年']" :key="i" :label="i" :active="i === period"
|
||||
@click="() => $emit('update:period', i)" />
|
||||
<div class="btn-group">
|
||||
@@ -132,7 +132,13 @@ export default {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.copilot-header > section {
|
||||
.copilot-header > .left {
|
||||
width: 26vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.copilot-header >.right {
|
||||
width: 26vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -184,7 +190,7 @@ export default {
|
||||
/* top: 10px; */
|
||||
}
|
||||
.page-title {
|
||||
width: 25vw;
|
||||
width: 26vw;
|
||||
font-size: 54px;
|
||||
line-height: 70px;
|
||||
letter-spacing: 5px;
|
||||
|
||||
@@ -154,14 +154,15 @@ export default {
|
||||
}
|
||||
|
||||
.page-title {
|
||||
flex: 1 1 auto;
|
||||
flex: 1;
|
||||
font-size: 40px;
|
||||
line-height: 70px;
|
||||
justify-content: center;
|
||||
letter-spacing: 5px;
|
||||
font-family: 优设标题黑;
|
||||
color: #6db6ff;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
background: url(../../../assets/images/homeindex/page-title-two.png) 0 0 / 100% 100% no-repeat;
|
||||
background: url(../../../assets/images/homeindex/page-title-two.png) center no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-07-09 15:07:50
|
||||
* @LastEditTime: 2024-07-09 15:41:38
|
||||
* @LastEditTime: 2024-07-22 13:41:40
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -80,6 +80,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.copilot-container {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
@@ -87,29 +88,29 @@ export default {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 20px 1px #fff1;
|
||||
border-left: 0.11415vw solid;
|
||||
border-image: linear-gradient(to bottom, transparent 10%,
|
||||
#024798 20%,
|
||||
transparent 90%) 1;
|
||||
backdrop-filter: blur(4px);
|
||||
border-right: .13vw solid;
|
||||
// border-image: linear-gradient(to bottom,transparent 10%,
|
||||
// #024798 20%,
|
||||
// transparent 90%) 1;
|
||||
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 92%;
|
||||
width: 0.11415vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
right: 0;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
#024798 2%,
|
||||
#024798 100%,
|
||||
transparent
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 92%;
|
||||
width: 0.13vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
left: 0;
|
||||
background: radial-gradient(circle at center,
|
||||
#1481fd 2%,
|
||||
#024798 90%,
|
||||
transparent);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@@ -120,7 +121,7 @@ export default {
|
||||
border-radius: 2px;
|
||||
left: 8%;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to right, transparent 60%, #024798 98%, transparent 90%);
|
||||
background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -74,6 +74,7 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.copilot-container {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
@@ -81,10 +82,12 @@ export default {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 20px 1px #fff1;
|
||||
border-right: 0.11415vw solid;
|
||||
border-image: linear-gradient(to bottom, transparent 10%,
|
||||
#024798 20%,
|
||||
transparent 90%) 1;
|
||||
border-right: .13vw solid;
|
||||
// border-image: linear-gradient(to bottom,transparent 10%,
|
||||
// #024798 20%,
|
||||
// transparent 90%) 1;
|
||||
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
&::before {
|
||||
@@ -92,16 +95,14 @@ export default {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 92%;
|
||||
width: 0.11415vw;
|
||||
width: 0.13vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
left: 0;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
#024798 2%,
|
||||
#024798 100%,
|
||||
transparent
|
||||
);
|
||||
background: radial-gradient(circle at center,
|
||||
#1481fd 2%,
|
||||
#024798 90%,
|
||||
transparent);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -114,7 +115,7 @@ export default {
|
||||
border-radius: 2px;
|
||||
right: 3%;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
|
||||
background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-28 13:42:51
|
||||
* @LastEditTime: 2024-05-31 13:26:32
|
||||
* @LastEditTime: 2024-07-31 08:52:25
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -54,8 +54,8 @@ button {
|
||||
background: #006acd40;
|
||||
backdrop-filter: blur(3px);
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
padding-left: 20px;
|
||||
padding: 16px 24px 16px 24px;
|
||||
padding-left: 32px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
letter-spacing: 10px;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-07-09 15:15:00
|
||||
* @LastEditTime: 2024-07-19 16:11:37
|
||||
* @LastEditTime: 2024-07-22 13:42:08
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -81,10 +81,12 @@ export default {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 20px 1px #fff1;
|
||||
border-left: 0.11415vw solid;
|
||||
border-image: linear-gradient(to bottom, transparent 5%,
|
||||
#024798 10%,
|
||||
transparent 90%) 1;
|
||||
border-right: .13vw solid;
|
||||
// border-image: linear-gradient(to bottom,transparent 10%,
|
||||
// #024798 20%,
|
||||
// transparent 90%) 1;
|
||||
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
&::before {
|
||||
@@ -92,16 +94,14 @@ export default {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 92%;
|
||||
width: 0.11415vw;
|
||||
width: 0.13vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
right: 0;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
#024798 5%,
|
||||
#024798 100%,
|
||||
transparent
|
||||
);
|
||||
left: 0;
|
||||
background: radial-gradient(circle at center,
|
||||
#1481fd 2%,
|
||||
#024798 90%,
|
||||
transparent);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -114,7 +114,7 @@ export default {
|
||||
border-radius: 2px;
|
||||
left: 10%;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%);
|
||||
background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -82,29 +82,29 @@ export default {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 20px 1px #fff1;
|
||||
border-right: 0.11415vw solid;
|
||||
border-image: linear-gradient(to bottom,transparent 5%,
|
||||
#024798 10%,
|
||||
transparent 90%) 1;
|
||||
backdrop-filter: blur(4px);
|
||||
border-right: .13vw solid;
|
||||
// border-image: linear-gradient(to bottom,transparent 10%,
|
||||
// #024798 20%,
|
||||
// transparent 90%) 1;
|
||||
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 92%;
|
||||
width: 0.11415vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
left: 0;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
#024798 2%,
|
||||
#024798 100%,
|
||||
transparent
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 92%;
|
||||
width: 0.13vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
left: 0;
|
||||
background: radial-gradient(circle at center,
|
||||
#1481fd 2%,
|
||||
#024798 90%,
|
||||
transparent);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@@ -115,7 +115,7 @@ export default {
|
||||
border-radius: 2px;
|
||||
right: 3%;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
|
||||
background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-23 15:49:14
|
||||
* @LastEditTime: 2024-07-19 16:08:27
|
||||
* @LastEditTime: 2024-07-25 14:29:40
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
// console.log(item.color, color);
|
||||
res +=
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
|
||||
`<span style='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0 }</span>`;
|
||||
}
|
||||
@@ -130,7 +130,7 @@ export default {
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
color: "rgba(69,97,174,.4)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-05 09:43:51
|
||||
* @LastEditTime: 2024-07-19 16:11:59
|
||||
* @LastEditTime: 2024-07-22 13:36:30
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -81,28 +81,28 @@ export default {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 20px 1px #fff1;
|
||||
border-left: 0.11415vw solid;
|
||||
border-image: linear-gradient(to bottom, transparent 10%,
|
||||
#024798 20%,
|
||||
transparent 90%) 1;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 92%;
|
||||
width: 0.11415vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
right: 0;
|
||||
background: radial-gradient(circle at center,
|
||||
#024798 2%,
|
||||
#024798 100%,
|
||||
border-right: .13vw solid;
|
||||
// border-image: linear-gradient(to bottom,transparent 10%,
|
||||
// #024798 20%,
|
||||
// transparent 90%) 1;
|
||||
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(4px);
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 92%;
|
||||
width: 0.13vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
left: 0;
|
||||
background: radial-gradient(circle at center,
|
||||
#1481fd 2%,
|
||||
#024798 90%,
|
||||
transparent);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -112,7 +112,7 @@ export default {
|
||||
border-radius: 2px;
|
||||
left: 7%;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%);
|
||||
background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -82,10 +82,12 @@ export default {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 20px 1px #fff1;
|
||||
border-right: 0.11415vw solid;
|
||||
border-image: linear-gradient(to bottom,transparent 10%,
|
||||
#024798 20%,
|
||||
transparent 90%) 1;
|
||||
border-right: .13vw solid;
|
||||
// padding-right: .2vw;
|
||||
box-sizing: border-box; // border-image: linear-gradient(to bottom,transparent 10%,
|
||||
// #024798 20%,
|
||||
// transparent 90%) 1;
|
||||
border-image: linear-gradient(to bottom,transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
&::before {
|
||||
@@ -93,14 +95,14 @@ export default {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 92%;
|
||||
width: 0.11415vw;
|
||||
width: 0.13vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
left: 0;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
#024798 2%,
|
||||
#024798 100%,
|
||||
#1481fd 2%,
|
||||
#024798 90%,
|
||||
transparent
|
||||
);
|
||||
z-index: 1;
|
||||
@@ -115,7 +117,7 @@ export default {
|
||||
border-radius: 2px;
|
||||
right: 1%;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%);
|
||||
background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-05 09:48:37
|
||||
* @LastEditTime: 2024-07-19 16:14:07
|
||||
* @LastEditTime: 2024-07-22 13:37:48
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -108,38 +108,40 @@ export default {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 20px 1px #fff1;
|
||||
border-right: 0.11415vw solid;
|
||||
border-image: linear-gradient(to bottom, transparent 10%,
|
||||
#024798 20%,
|
||||
transparent 90%) 1;
|
||||
backdrop-filter: blur(4px);
|
||||
border-right: .13vw solid;
|
||||
// border-image: linear-gradient(to bottom,transparent 10%,
|
||||
// #024798 20%,
|
||||
// transparent 90%) 1;
|
||||
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 92%;
|
||||
width: 0.11415vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
left: 0;
|
||||
background: radial-gradient(circle at center,
|
||||
#024798 2%,
|
||||
#024798 100%,
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 92%;
|
||||
width: 0.13vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
left: 0;
|
||||
background: radial-gradient(circle at center,
|
||||
#1481fd 2%,
|
||||
#024798 90%,
|
||||
transparent);
|
||||
z-index: 1;
|
||||
}
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
width: 95%;
|
||||
height: 0.31415vh;
|
||||
border-radius: 2px;
|
||||
left: 6%;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to right, #024798, transparent);
|
||||
background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -177,6 +177,11 @@ function getTemplate(period, dataList, than) {
|
||||
const year = new Date().getFullYear();
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${year - 1}年${yesterday}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
@@ -186,14 +191,15 @@ function getTemplate(period, dataList, than) {
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
|
||||
];
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${dayBeYes}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
@@ -203,14 +209,15 @@ function getTemplate(period, dataList, than) {
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${yesterday}日目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
|
||||
];
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `本周目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${year-1}年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
@@ -220,14 +227,15 @@ function getTemplate(period, dataList, than) {
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
|
||||
];
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `本周目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `上周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
@@ -237,14 +245,15 @@ function getTemplate(period, dataList, than) {
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `本周目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
|
||||
];
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `${month}月目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${year-1}年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
@@ -254,31 +263,33 @@ function getTemplate(period, dataList, than) {
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${month}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
|
||||
];
|
||||
} else if (period === '月' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${lastMonth}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${month}目标`,
|
||||
name: `${month}月目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${lastMonth}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{
|
||||
name: `${year}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${year - 1}年`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
@@ -288,11 +299,7 @@ function getTemplate(period, dataList, than) {
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${year}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
|
||||
];
|
||||
}
|
||||
return items
|
||||
|
||||
@@ -168,23 +168,29 @@ function getTemplate(period, dataList,than) {
|
||||
const year = new Date().getFullYear();
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日目标`,
|
||||
data: dataList ? dataList[2].splice(0,2) : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${year - 1}年${yesterday}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
data: dataList ? dataList[0].splice(0, 2) : [],
|
||||
},
|
||||
{
|
||||
name: `${yesterday}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
data: dataList ? dataList[1].splice(0, 2) : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
|
||||
];
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${dayBeYes}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
@@ -194,16 +200,17 @@ function getTemplate(period, dataList,than) {
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${yesterday}日目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
|
||||
];
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `${year-1}年本周`,
|
||||
name: `本周目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${year - 1}年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
@@ -211,14 +218,15 @@ function getTemplate(period, dataList,than) {
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
|
||||
];
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `本周目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `上周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
@@ -228,16 +236,17 @@ function getTemplate(period, dataList,than) {
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `本周目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
|
||||
];
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `${year-1}年${month}月`,
|
||||
name: `${month}月目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${year - 1}年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
@@ -245,31 +254,34 @@ function getTemplate(period, dataList,than) {
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${month}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
|
||||
];
|
||||
} else if (period === '月' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${lastMonth}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
name: `${month}月目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
|
||||
{
|
||||
name: `${month}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
name: `${lastMonth}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{
|
||||
name: `${year}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${year - 1}年`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
@@ -279,11 +291,7 @@ function getTemplate(period, dataList,than) {
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${year}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
|
||||
];
|
||||
}
|
||||
return items
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 13:22:43
|
||||
* @LastEditTime: 2024-07-19 16:10:10
|
||||
* @LastEditTime: 2024-07-25 14:29:04
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -56,7 +56,7 @@ export default {
|
||||
actualOptions: null,
|
||||
options: {
|
||||
grid: {
|
||||
left: "5%",
|
||||
left: "6%",
|
||||
right: "0%",
|
||||
bottom: "3%",
|
||||
top: "15%",
|
||||
@@ -81,13 +81,13 @@ export default {
|
||||
res +=
|
||||
"<br/>" +
|
||||
`${params[i].seriesType === "line"
|
||||
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
|
||||
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
|
||||
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:39%;left:3.05%;'></span>
|
||||
<span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:36%;left:4.8%;'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
|
||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
|
||||
}` +
|
||||
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
|
||||
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value.toFixed(2) + '%' : "0.00" + '%'}</span>`;
|
||||
}
|
||||
const htmlContent = `
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
@@ -118,6 +118,7 @@ export default {
|
||||
nameTextStyle: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
align: "right",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
@@ -134,11 +135,46 @@ export default {
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
color: "rgba(69,97,174,.4)",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "", // "2024年目标值",
|
||||
type: "line",
|
||||
lineStyle: {
|
||||
color: "#f3c000",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#f3c000",
|
||||
},
|
||||
// areaStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#f3c000", // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 0.55,
|
||||
// color: "#f3c00033",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "transparent", // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// global: false, // 缺省为 false
|
||||
// },
|
||||
// },
|
||||
data: [], // this.series[0].data,
|
||||
},
|
||||
{
|
||||
name: "", // this.series[0].name,
|
||||
type: "bar",
|
||||
@@ -205,42 +241,7 @@ export default {
|
||||
},
|
||||
},
|
||||
data: [], // this.series[1].data,
|
||||
},
|
||||
{
|
||||
name: "", // "2024年目标值",
|
||||
type: "line",
|
||||
lineStyle: {
|
||||
color: "#f3c000",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#f3c000",
|
||||
},
|
||||
// areaStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#f3c000", // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 0.55,
|
||||
// color: "#f3c00033",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "transparent", // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// global: false, // 缺省为 false
|
||||
// },
|
||||
// },
|
||||
data: [], // this.series[0].data,
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
};
|
||||
@@ -366,34 +367,34 @@ export default {
|
||||
.legend-item:nth-child(1) {
|
||||
margin-left: 1vw;
|
||||
}
|
||||
.legend-item:nth-child(1):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #f3c000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -1.3vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.legend-item:nth-child(1):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #f3c000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -1.2vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(1):after {
|
||||
background-color: #f3c000;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
// width: 6px;
|
||||
// height: 6px;
|
||||
width: 0.3191vw;
|
||||
height: 0.3191vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -1.13vw;
|
||||
// left: -16px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
.legend-item:nth-child(1):after {
|
||||
background-color: #f3c000;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
// width: 6px;
|
||||
// height: 6px;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -1.1vw;
|
||||
// left: -16px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
.legend-item:nth-child(2):before {
|
||||
background-color: #12f7f1;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-23 15:50:44
|
||||
* @LastEditTime: 2024-07-19 16:10:19
|
||||
* @LastEditTime: 2024-07-25 14:29:09
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -56,7 +56,7 @@ export default {
|
||||
actualOptions: null,
|
||||
options: {
|
||||
grid: {
|
||||
left: "5%",
|
||||
left: "6%",
|
||||
right: "0%",
|
||||
bottom: "3%",
|
||||
top: "15%",
|
||||
@@ -81,13 +81,13 @@ export default {
|
||||
res +=
|
||||
"<br/>" +
|
||||
`${params[i].seriesType === "line"
|
||||
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
|
||||
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
|
||||
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:39%;left:3.05%;'></span>
|
||||
<span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:36%;left:4.8%;'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
|
||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
|
||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
|
||||
}` +
|
||||
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
|
||||
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value.toFixed(2) + '%' : "0.00" + '%'}</span>`;
|
||||
}
|
||||
const htmlContent = `
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
@@ -118,6 +118,7 @@ export default {
|
||||
nameTextStyle: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
align: "right",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
@@ -134,11 +135,46 @@ export default {
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
color: "rgba(69,97,174,.4)",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "", // "2024年目标值",
|
||||
type: "line",
|
||||
lineStyle: {
|
||||
color: "#f3c000",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#f3c000",
|
||||
},
|
||||
// areaStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#f3c000", // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 0.55,
|
||||
// color: "#f3c00033",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "transparent", // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// global: false, // 缺省为 false
|
||||
// },
|
||||
// },
|
||||
data: [], // this.series[0].data,
|
||||
},
|
||||
{
|
||||
name: "", // this.series[0].name,
|
||||
type: "bar",
|
||||
@@ -206,41 +242,7 @@ export default {
|
||||
},
|
||||
data: [], // this.series[1].data,
|
||||
},
|
||||
{
|
||||
name: "", // "2024年目标值",
|
||||
type: "line",
|
||||
lineStyle: {
|
||||
color: "#f3c000",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#f3c000",
|
||||
},
|
||||
// areaStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#f3c000", // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 0.55,
|
||||
// color: "#f3c00033",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "transparent", // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// global: false, // 缺省为 false
|
||||
// },
|
||||
// },
|
||||
data: [], // this.series[0].data,
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
};
|
||||
@@ -372,33 +374,33 @@ export default {
|
||||
.legend-item:nth-child(3):before {
|
||||
background-color: #58adfa;
|
||||
}
|
||||
.legend-item:nth-child(1):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #f3c000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -1.3vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.legend-item:nth-child(1):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #f3c000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -1.2vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(1):after {
|
||||
background-color: #f3c000;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
// width: 6px;
|
||||
// height: 6px;
|
||||
width: 0.3191vw;
|
||||
height: 0.3191vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -1.13vw;
|
||||
// left: -16px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
.legend-item:nth-child(1):after {
|
||||
background-color: #f3c000;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
// width: 6px;
|
||||
// height: 6px;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -1.1vw;
|
||||
// left: -16px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -152,10 +152,14 @@ export default {
|
||||
年: `${year}良率`,
|
||||
}[this.period];
|
||||
console.log(vt[0]);
|
||||
let titleSize = this.fontSize(0.35)
|
||||
let subtitleSize = this.fontSize(0.14)
|
||||
const t = getOptions({
|
||||
// single,
|
||||
color: this.color == 1 ? "#4CF0E8" : "#1065ff",
|
||||
titleValue,
|
||||
titleSize,
|
||||
subtitleSize,
|
||||
subtitle,
|
||||
yesterday,
|
||||
currentName: items[0].label,
|
||||
@@ -261,6 +265,12 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fontSize(res){
|
||||
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
||||
if (!clientWidth) return;
|
||||
let fontSize = 100 * (clientWidth / 1920);
|
||||
return res * fontSize;
|
||||
},
|
||||
formatNumber(num) {
|
||||
console.log(num);
|
||||
// 判断是否为整数
|
||||
@@ -290,9 +300,9 @@ export default {
|
||||
// justify-content: center;
|
||||
gap: 3px;
|
||||
backdrop-filter: blur(24px);
|
||||
.cities {
|
||||
height: 40px;
|
||||
}
|
||||
// .cities {
|
||||
// // height: 40px;
|
||||
// }
|
||||
|
||||
.chart {
|
||||
// margin-left: 5%;
|
||||
@@ -300,12 +310,12 @@ export default {
|
||||
flex: 1 1 auto;
|
||||
padding: 0 20%;
|
||||
/* margin: 10%; */
|
||||
height: 16vh;
|
||||
height: 0;
|
||||
/* min-width: 300px; */
|
||||
align-self: stretch;
|
||||
}
|
||||
.legend {
|
||||
height: 80px;
|
||||
// height: 80px;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
justify-content: flex-end;
|
||||
|
||||
@@ -73,7 +73,7 @@ export default {
|
||||
&:before {
|
||||
content: attr(data-title);
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
color:rgba(223,241,254,.8);
|
||||
position: absolute;
|
||||
bottom: -200%;
|
||||
font-size: 12px;
|
||||
@@ -82,7 +82,7 @@ export default {
|
||||
&:after {
|
||||
content: attr(data-rate);
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
color: rgba(223, 241, 254, .8);
|
||||
position: absolute;
|
||||
bottom: -200%;
|
||||
right: 0;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-27 09:12:54
|
||||
* @LastEditTime: 2024-07-09 15:02:46
|
||||
* @LastEditTime: 2024-07-22 17:03:48
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -60,6 +60,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.progress-bar {
|
||||
height: 10px;
|
||||
background-color: #002f6b;
|
||||
@@ -70,7 +72,7 @@ export default {
|
||||
&:before {
|
||||
content: attr(data-title);
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
color: rgba(223, 241, 254, .8);
|
||||
position: absolute;
|
||||
bottom: -200%;
|
||||
font-size: 12px;
|
||||
@@ -79,7 +81,7 @@ export default {
|
||||
&:after {
|
||||
content: attr(data-rate);
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
color: rgba(223, 241, 254, .8);
|
||||
position: absolute;
|
||||
bottom: -200%;
|
||||
right: 0;
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
export default ({
|
||||
titleValue,
|
||||
subtitle,
|
||||
titleSize,
|
||||
subtitleSize,
|
||||
previousSum,
|
||||
currentSum,
|
||||
targetSum,
|
||||
@@ -26,14 +28,15 @@
|
||||
left: "48%",
|
||||
top: "middle",
|
||||
textAlign: "center",
|
||||
textVerticalAlign:'auto',
|
||||
textStyle: {
|
||||
fontWeight: 600,
|
||||
fontSize: 36,
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontWeight: 400,
|
||||
fontSize: titleSize,
|
||||
color: "rgba(223,241,254,1)",
|
||||
},
|
||||
subtext: `\u2002${yesterday + '日良率'}\u2002`,
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
fontSize: subtitleSize,
|
||||
fontWeight: 100,
|
||||
color: "rgba(255,255,255,.7)",
|
||||
align: "right",
|
||||
@@ -44,8 +47,8 @@
|
||||
{
|
||||
type: "pie",
|
||||
name: "当前良率",
|
||||
radius: ["70%", "85%"],
|
||||
center: ["50%", "52%"],
|
||||
radius: ["80%", "92%"],
|
||||
center: ["50%", "50%"],
|
||||
emptyCircleStyle: {
|
||||
color: "#003982",
|
||||
},
|
||||
@@ -53,8 +56,8 @@
|
||||
// 数据 series
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["70%", "85%"],
|
||||
center: ["50%", "52%"],
|
||||
radius: ["80%", "92%"],
|
||||
center: ["50%", "50%"],
|
||||
avoidLabelOvervlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
@@ -118,8 +121,8 @@
|
||||
// 数据 series2 - 2023累计
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["55%", "70%"],
|
||||
center: ["50%", "52%"],
|
||||
radius: ["70%", "80%"],
|
||||
center: ["50%", "50%"],
|
||||
avoidLabelOvervlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/rightContainer.vue";
|
||||
import leftContainer from "./components/leftContainer.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import ProdMonitor from "./components/bipvProdMonitor.vue";
|
||||
import { deepClone } from "@/utils";
|
||||
// import Store from "./components/Store.vue";
|
||||
// import Energy from "./components/Energy.vue";
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/rightContainer.vue";
|
||||
import leftContainer from "./components/leftContainer.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import ProdMonitor from "./components/bipvProdMonitor";
|
||||
import { deepClone } from "@/utils";
|
||||
// import Store from "./components/Store.vue";
|
||||
// import Energy from "./components/Energy.vue";
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
:style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }">{{ item.label }}</span>
|
||||
</div> -->
|
||||
|
||||
<div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
|
||||
<div v-if="energyCockpits.length != 0" id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</chart-container>
|
||||
</template>
|
||||
@@ -56,7 +56,7 @@ export default {
|
||||
color: ["#FFD160", "#2760FF", "#12FFF5"],
|
||||
grid: {
|
||||
left: "9%",
|
||||
right: "3%",
|
||||
right: "0%",
|
||||
bottom: "15%",
|
||||
top: "15%",
|
||||
},
|
||||
@@ -76,7 +76,7 @@ export default {
|
||||
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
|
||||
// console.log(item.color, color);
|
||||
res +=
|
||||
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
|
||||
`<span style='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0}</span>`;
|
||||
}
|
||||
@@ -143,7 +143,7 @@ export default {
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
color: "rgba(69,97,174,.4)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-30 08:58:39
|
||||
* @LastEditTime: 2024-07-18 16:48:10
|
||||
* @LastEditTime: 2024-07-26 16:48:15
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -56,11 +56,11 @@ export default {
|
||||
actualOptions: null,
|
||||
options: {
|
||||
grid: {
|
||||
left: "8%",
|
||||
right: "0%",
|
||||
bottom: "3%",
|
||||
top: "15%",
|
||||
containLabel: true,
|
||||
left: "10%",
|
||||
right: "3%",
|
||||
bottom: "14%",
|
||||
top: "20%",
|
||||
// containLabel: true,
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: "axis",
|
||||
@@ -106,7 +106,7 @@ export default {
|
||||
// console.log(item.color, color);
|
||||
res +=
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
|
||||
`<span style='border-radius:2px;display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align:right'>${params[i].value ? params[i].value : 0}</span>`;
|
||||
}
|
||||
@@ -158,7 +158,7 @@ export default {
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
color: "rgba(69,97,174,.4)",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -349,7 +349,7 @@ export default {
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 3vh;
|
||||
top: 6vh;
|
||||
right: 13vw;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-30 09:00:01
|
||||
* @LastEditTime: 2024-05-30 09:50:02
|
||||
* @LastEditTime: 2024-07-24 10:31:52
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -19,7 +19,7 @@ export default {
|
||||
props: {
|
||||
noScroll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
||||
@@ -13,7 +13,8 @@
|
||||
<CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i"
|
||||
:active="i === type" @click="() => $emit('update:type', i)" />
|
||||
</div>
|
||||
<barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase>
|
||||
<barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1">
|
||||
</barChartBase>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -105,7 +106,7 @@ export default {
|
||||
}</span>`,
|
||||
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
|
||||
}</span>`,
|
||||
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
|
||||
`<span style='color: rgba(223,241,254,.8);font-size:1.2em' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
|
||||
}</span>`,
|
||||
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
|
||||
}</span>`,
|
||||
@@ -114,11 +115,11 @@ export default {
|
||||
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
|
||||
}</span>`,
|
||||
`<span style="display:inline-block;width:45px;color: rgba(223,241,254,.8)">${this.prodOrder[i].productionProgress
|
||||
? this.prodOrder[i].productionProgress.toFixed(2) * 100 + "%"
|
||||
? parseFloat((this.prodOrder[i].productionProgress * 100).toFixed(2)) + "%"
|
||||
: "0%"
|
||||
}</span>
|
||||
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
|
||||
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
|
||||
<div style="display:inline-block;height:20px;vertical-align:top;margin-top:3px;">
|
||||
<svg xmlns="http://www.w3.org/200/svg" height="18" width="18">
|
||||
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
|
||||
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress
|
||||
? this.prodOrder[i].productionProgress.toFixed(2) *100 *
|
||||
@@ -156,7 +157,6 @@ export default {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// gap: 6px;
|
||||
.chart-title {
|
||||
margin-top: 5px;
|
||||
@@ -189,8 +189,9 @@ export default {
|
||||
height: 1px; // display: inline-block;
|
||||
border: 1px solid;
|
||||
// display: inline-block;
|
||||
border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 0%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2;
|
||||
backdrop-filter: blur(3px);
|
||||
// border-image: linear-gradient(to right, transparent 5%, rgba(95, 190, 249, 1) 20%, transparent 90%, )1;
|
||||
border-image: linear-gradient(to right, transparent 10%, rgba(95, 190, 249, 1 )30%, transparent 90%,)1;
|
||||
// backdrop-filter: blur(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,8 +28,8 @@
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,8 +38,8 @@
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
@@ -61,8 +61,8 @@
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -71,8 +71,8 @@
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
@@ -94,8 +94,8 @@
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,8 +104,8 @@
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
@@ -118,14 +118,14 @@
|
||||
<div class="chart">
|
||||
<div class="chart-title">
|
||||
<span class="title">生产情况</span>
|
||||
<div class="button-than" style="position: absolute;right: 3%;">
|
||||
<div class="button-than" style="position: absolute;right: 0%;">
|
||||
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
|
||||
@click="() => $emit('update:than', i)" />
|
||||
</div>
|
||||
<!-- <span class="line"></span> -->
|
||||
</div>
|
||||
<barChartBase :companyId="companyId" :than="than" :period="period" :data="factoryData" ref="barChart"
|
||||
style="height: 0;flex:1">
|
||||
<barChartBase v-if="factoryData.length != 0" :companyId="companyId" :than="than" :period="period" :data="factoryData"
|
||||
ref="barChart" style="height: 0;flex:1">
|
||||
</barChartBase>
|
||||
</div>
|
||||
</div>
|
||||
@@ -222,13 +222,13 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.chart{
|
||||
flex: 1;
|
||||
flex: 1.3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
// gap: 6px;
|
||||
.chart-title{
|
||||
margin-top: 5px;
|
||||
margin-top: 20px;
|
||||
// flex: 1;
|
||||
// gap: 6px;
|
||||
height: 1.5vw;
|
||||
@@ -360,7 +360,7 @@ export default {
|
||||
}
|
||||
|
||||
.fto-box {
|
||||
flex: 1;
|
||||
flex: .5;
|
||||
|
||||
.type::before {
|
||||
content: "";
|
||||
@@ -379,15 +379,15 @@ export default {
|
||||
}
|
||||
|
||||
.std-box {
|
||||
flex: 1.3;
|
||||
flex: .6;
|
||||
}
|
||||
|
||||
.chip-box {
|
||||
flex: 1.3;
|
||||
flex: .6;
|
||||
}
|
||||
|
||||
.bipv-box {
|
||||
flex: 1.3;
|
||||
flex: .6;
|
||||
}
|
||||
|
||||
.std-box,
|
||||
|
||||
422
src/views/copilot/factoryData/components/bipvProdMonitor.vue
Normal file
422
src/views/copilot/factoryData/components/bipvProdMonitor.vue
Normal file
@@ -0,0 +1,422 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-07-25 10:10:07
|
||||
* @LastEditTime: 2024-07-26 16:47:15
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="prod-monitor">
|
||||
|
||||
<div class="data">
|
||||
<div class="fto-box">
|
||||
<div class="icon">
|
||||
<img src="./../assets/images/fto.png" alt="" style="width: 2.1875vw; height: 2.2875vw" />
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">FTO</span>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<span class="type">投入数量</span>
|
||||
<span class="num">{{ prodFto[0] ? prodFto[0].chipInput.toLocaleString() : 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="std-box">
|
||||
<div class="icon">
|
||||
<img src="./../assets/images/std.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">标准组件</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate.toFixed(2) : 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chip-box">
|
||||
<div class="icon">
|
||||
<img src="./../assets/images/chip.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">芯片</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate.toFixed(2) : 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bipv-box" v-if="companyId != 0">
|
||||
<div class="icon">
|
||||
<img src="./../assets/images/bipv.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">BIPV</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate.toFixed(2) : 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="chart-title">
|
||||
<span class="title">生产情况</span>
|
||||
<div class="button-than" style="position: absolute;right: 0%;">
|
||||
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
|
||||
@click="() => $emit('update:than', i)" />
|
||||
</div>
|
||||
<!-- <span class="line"></span> -->
|
||||
</div>
|
||||
<barChartBase v-if="factoryData.length != 0" :companyId="companyId" :than="than" :period="period" :data="factoryData"
|
||||
ref="barChart" style="height: 0;flex:1">
|
||||
</barChartBase>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { number } from 'echarts';
|
||||
import barChartBase from './ChipOee'
|
||||
import CopilotButton from "./button.vue"
|
||||
export default {
|
||||
name: "ProdMonitor",
|
||||
components: {
|
||||
barChartBase,
|
||||
CopilotButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bipvVis:false,
|
||||
msgObj: {
|
||||
stand: {},
|
||||
chip: {},
|
||||
bipv: {},
|
||||
},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
period: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
companyId: {
|
||||
type: Number,
|
||||
default:0
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: '同比',
|
||||
},
|
||||
prodOutPut: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
prodFto: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
factoryData: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
showBipv: {
|
||||
type: Boolean,
|
||||
default:true,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
prodOutPut() {
|
||||
this.makeData();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.makeData();
|
||||
this.$nextTick(() => {
|
||||
let button = document.getElementsByClassName('button-than')
|
||||
button[0].children[0].style.borderRadius = '4px 0 0 4px'
|
||||
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
makeData() {
|
||||
this.msgObj.chip = {};
|
||||
this.msgObj.stand = {};
|
||||
this.msgObj.bipv = {};
|
||||
if (this.prodOutPut.length > 0) {
|
||||
this.prodOutPut.map((item) => {
|
||||
if (item.glassType === 0) {
|
||||
this.msgObj.chip = item;
|
||||
} else if (item.glassType === 1) {
|
||||
this.msgObj.stand = item;
|
||||
} else if (item.glassType === 2) {
|
||||
this.msgObj.bipv = item;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.prod-monitor {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.chart{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
// gap: 6px;
|
||||
.chart-title{
|
||||
margin-top: 20px;
|
||||
// flex: 1;
|
||||
// gap: 6px;
|
||||
height: 1.5vw;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// flex-direction: column;
|
||||
// flex-wrap: nowrap;
|
||||
// justify-content: end
|
||||
// margin-top: 10px;
|
||||
.title{
|
||||
// flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
// width: 5vw;
|
||||
color: #FFFFFF;
|
||||
line-height: 24px;
|
||||
// text-align: left;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
}
|
||||
// .line{
|
||||
// flex: 1;
|
||||
// // width: 80%;
|
||||
// height: 1px; // display: inline-block;
|
||||
// border: 1px solid;
|
||||
// // display: inline-block;
|
||||
// border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2;
|
||||
// backdrop-filter: blur(3px);
|
||||
// }
|
||||
}
|
||||
}
|
||||
.data{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-direction: column;
|
||||
.fto-box,
|
||||
.std-box,
|
||||
.chip-box,
|
||||
.bipv-box {
|
||||
box-shadow: inset 0 0 12px 2px #fff3;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.middle-box {
|
||||
flex: 2.086;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
flex: 2.424;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.type {
|
||||
display: inline-block;
|
||||
font-size: 0.9375vw;
|
||||
color: #6db6ff;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
padding-right: 0.417vw;
|
||||
letter-spacing: 2px;
|
||||
width: 6.25vw;
|
||||
}
|
||||
|
||||
.type1 {
|
||||
display: inline-block;
|
||||
font-size: 0.9375vw;
|
||||
color: #6db6ff;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
padding-right: 0.6vw;
|
||||
width: 6.25vw;
|
||||
padding-left: 1.6vw;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.type-name {
|
||||
font-size: 1.042vw;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding-left: 0.573vw;
|
||||
}
|
||||
|
||||
.type-name::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 1.042vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(180deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1)) 2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 1.042vw;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding-left: 0.573vw;
|
||||
}
|
||||
|
||||
.num::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 1.042vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(180deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1)) 2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.fto-box {
|
||||
flex: 1;
|
||||
|
||||
.type::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 1.6146vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(135deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1),
|
||||
rgba(31, 143, 255, 0)) 2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.std-box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.chip-box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bipv-box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.std-box,
|
||||
.chip-box,
|
||||
.bipv-box {
|
||||
.separate::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 3.125vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(135deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1),
|
||||
rgba(31, 143, 255, 0)) 2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +1,10 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-05 09:36:07
|
||||
* @LastEditTime: 2024-07-19 16:16:02
|
||||
* @LastEditTime: 2024-07-24 13:39:01
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<!--
|
||||
filename: Container.vue
|
||||
author: liubin
|
||||
date: 2024-04-09 10:44:09
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="copilot-container">
|
||||
@@ -89,27 +83,29 @@ export default {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 20px 1px #fff1;
|
||||
border-left: 0.11415vw solid;
|
||||
border-image: linear-gradient(to bottom, transparent 2%, rgba(5, 138, 237, .7) 20%, rgba(2, 82, 215, 0.24) 70%, ) 71 71;
|
||||
backdrop-filter: blur(4px);
|
||||
border-right: .13vw solid;
|
||||
// border-image: linear-gradient(to bottom,transparent 10%,
|
||||
// #024798 20%,
|
||||
// transparent 90%) 1;
|
||||
border-image:radial-gradient(circle at center,
|
||||
#1481fd 2%,
|
||||
#024798 95%,
|
||||
transparent)1;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 96%;
|
||||
width: 0.11415vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
right: 0;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
#024798 2%,
|
||||
#024798 100%,
|
||||
transparent
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 92%;
|
||||
width: 0.13vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
left: 0;
|
||||
background: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@@ -120,7 +116,7 @@ export default {
|
||||
border-radius: 2px;
|
||||
right: 4%;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to right, transparent 10%, #024798 95%, transparent 98%);
|
||||
background: linear-gradient(to right, transparent 60%, #4197f9 98%, transparent 98%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@@ -141,7 +137,7 @@ export default {
|
||||
}
|
||||
|
||||
.container-body {
|
||||
padding: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
@@ -87,24 +87,29 @@ export default {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 20px 1px #fff1;
|
||||
border-right: 0.11415vw solid;
|
||||
border-image: linear-gradient(to bottom,transparent 0%,rgba(5, 138, 237, .7) 40%, rgba(2, 82, 215, 0.24) 70%,) 71 71;
|
||||
backdrop-filter: blur(4px);
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 96%;
|
||||
width: 0.11415vw;
|
||||
border-right: .13vw solid;
|
||||
// border-image: linear-gradient(to bottom,transparent 10%,
|
||||
// #024798 20%,
|
||||
// transparent 90%) 1;
|
||||
border-image: linear-gradient(to bottom, transparent 10%, rgba(5, 138, 237, 1) 30%, rgba(2, 82, 215, 0.24) 90%)1;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 92%;
|
||||
width: 0.13vw;
|
||||
border-radius: 2px;
|
||||
top: 0%;
|
||||
left: 0;
|
||||
background: radial-gradient(circle at center,
|
||||
#024798 2%,
|
||||
#024798 100%,
|
||||
#1481fd 2%,
|
||||
#024798 95%,
|
||||
transparent);
|
||||
z-index: 1;
|
||||
}
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@@ -115,7 +120,7 @@ export default {
|
||||
border-radius: 2px;
|
||||
left: 3%;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to left, transparent 10%, #024798 95%, transparent 98%);
|
||||
background: linear-gradient(to left, transparent 60%, #4197f9 98%, transparent 98%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@@ -136,7 +141,7 @@ export default {
|
||||
}
|
||||
|
||||
.container-body {
|
||||
padding: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/rightContainer.vue";
|
||||
import leftContainer from "./components/leftContainer.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import ProdMonitor from "./components/bipvProdMonitor";
|
||||
import { deepClone } from "@/utils";
|
||||
// import Store from "./components/Store.vue";
|
||||
// import Energy from "./components/Energy.vue";
|
||||
|
||||
@@ -29,7 +29,7 @@ import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/rightContainer.vue";
|
||||
import leftContainer from "./components/leftContainer.vue";
|
||||
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor";
|
||||
import { deepClone } from "@/utils";
|
||||
// import Store from "./components/Store.vue";
|
||||
// import Energy from "./components/Energy.vue";
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/rightContainer.vue";
|
||||
import leftContainer from "./components/leftContainer.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import ProdMonitor from "./components/bipvProdMonitor.vue";
|
||||
import { deepClone } from "@/utils";
|
||||
// import Store from "./components/Store.vue";
|
||||
// import Energy from "./components/Energy.vue";
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/rightContainer.vue";
|
||||
import leftContainer from "./components/leftContainer.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import ProdMonitor from "./components/bipvProdMonitor.vue";
|
||||
import { deepClone } from "@/utils";
|
||||
// import Store from "./components/Store.vue";
|
||||
// import Energy from "./components/Energy.vue";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 13:24:03
|
||||
* @LastEditTime: 2024-06-05 09:43:30
|
||||
* @LastEditTime: 2024-07-25 10:52:35
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -38,7 +38,7 @@
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
// import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import ProdMonitor from "./components/bipvProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
|
||||
@@ -29,7 +29,7 @@ import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/rightContainer.vue";
|
||||
import leftContainer from "./components/leftContainer.vue";
|
||||
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import ProdMonitor from "./components/bipvProdMonitor.vue";
|
||||
import { deepClone } from "@/utils";
|
||||
// import Store from "./components/Store.vue";
|
||||
// import Energy from "./components/Energy.vue";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-20 13:32:59
|
||||
* @LastEditTime: 2024-07-19 16:05:46
|
||||
* @LastEditTime: 2024-07-22 14:41:37
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
@@ -32,7 +32,7 @@ export default ({
|
||||
textStyle: {
|
||||
fontWeight: 400,
|
||||
fontSize: titleSize,
|
||||
color: "rgba(223,241,254,.8)",
|
||||
color: "rgba(223,241,254,1)",
|
||||
},
|
||||
subtext: `\u2002${subtitle}\u2002`,
|
||||
subtextStyle: {
|
||||
@@ -47,7 +47,7 @@ export default ({
|
||||
{
|
||||
type: "pie",
|
||||
name: "当前目标",
|
||||
radius: ["74%", "86%"],
|
||||
radius: ["73%", "85%"],
|
||||
center: ["50%", "48%"],
|
||||
emptyCircleStyle: {
|
||||
color: "#042c5f33",
|
||||
@@ -56,7 +56,7 @@ export default ({
|
||||
// 数据 series
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["74%", "86%"],
|
||||
radius: ["73%", "85%"],
|
||||
center: ["50%", "48%"],
|
||||
avoidLabelOvervlap: false,
|
||||
label: {
|
||||
@@ -121,7 +121,7 @@ export default ({
|
||||
// 数据 series2 - 2023累计
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["61%", "74%"],
|
||||
radius: ["60%", "73%"],
|
||||
center: ["50%", "48%"],
|
||||
avoidLabelOvervlap: false,
|
||||
label: {
|
||||
|
||||
590
src/views/cost/accounting.vue
Normal file
590
src/views/cost/accounting.vue
Normal file
@@ -0,0 +1,590 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-15 10:49:13
|
||||
* @LastEditTime: 2024-07-26 14:28:19
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 32px)">
|
||||
<div class="app-container" style="height: auto; flex-grow: 1;">
|
||||
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
|
||||
<el-form-item label="时间维度" prop="start">
|
||||
<el-cascader clearable :options="options" v-model="listQuery.start"
|
||||
:props="{ multiple: false, emitPath: false }" @change="handleChange" placeholder="选择开始年份和期数" />
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0" prop="end">
|
||||
<el-cascader clearable :options="options" v-model="listQuery.end"
|
||||
:props="{ multiple: false, emitPath: false }" @change="handleChange" placeholder="选择结束年份和期数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="成本中心名称" prop="center">
|
||||
<el-input v-model="listQuery.center" placeholder="请填写成本中心名称" clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="getDataList">查询</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<!-- <el-button type="primary" size="small" plain @click="handleImport">导入</el-button> -->
|
||||
<el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
|
||||
<!-- <el-button type="success" size="small" plain @click="addFactory">新增</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> -->
|
||||
<base-table :row-key="(record, index) => { return record.in }" border :table-props="tableProps"
|
||||
:page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData" :max-height="tableH">
|
||||
<!-- <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
|
||||
:method-list="tableBtn" @clickBtn="handleClick" /> -->
|
||||
</base-table>
|
||||
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
</div>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
|
||||
<!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
|
||||
:type="listQuery.reportType" @refreshDataList="getDataList" /> -->
|
||||
<!-- <pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { parseTime } from '@/utils/ruoyi';
|
||||
import { getCostMainPage, exportExcel } from '@/api/cost';
|
||||
// import inputTable from './inputTable.vue';
|
||||
import moment from 'moment'
|
||||
|
||||
// 设置语言
|
||||
// 引入组件
|
||||
// Vue.component(DatePicker.months, DatePicker)
|
||||
// Vue.component(Select.name, Select)
|
||||
// import ButtonNav from '@/components/ButtonNav'
|
||||
import basicPage from '@/mixins/basic-page'
|
||||
// import detailOrUpdate from './detail-or-updata';
|
||||
// import addOrUpdate from './add-or-updata';
|
||||
// import { factoryList, dhgfactoryList, tyjxfactoryList } from "@/utils/constants";
|
||||
import { getBaseHeader } from "@/utils/request";
|
||||
|
||||
import { factoryList } from "@/utils/constants";
|
||||
// import tableHeightMixin from "@/mixins/tableHeightMixin";
|
||||
|
||||
// import FileSaver from 'file-saver'
|
||||
// import * as XLSX from 'xlsx'
|
||||
export default {
|
||||
// components: { ButtonNav, detailOrUpdate, addOrUpdate },
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
const startYear = currentYear - 10;
|
||||
const endYear = currentYear + 10;
|
||||
const options = [];
|
||||
for (let year = startYear; year <= endYear; year++) {
|
||||
const yearOptions = [];
|
||||
for (let period = 1; period <= 12; period++) {
|
||||
yearOptions.push({
|
||||
value: `${year}${('0' + period + '期').slice(-3)}`,
|
||||
label: `${year}${('0' + period + '期').slice(-3)}`
|
||||
});
|
||||
}
|
||||
options.push({
|
||||
value: year,
|
||||
label: year,
|
||||
children: yearOptions
|
||||
});
|
||||
}
|
||||
return {
|
||||
start: undefined,
|
||||
end: undefined,
|
||||
// selectedValues: [],
|
||||
options,
|
||||
tableH: this.tableHeight(300),
|
||||
listQuery: {
|
||||
pageSize: 20,
|
||||
pageNo: 1,
|
||||
total: 0,
|
||||
center: undefined,
|
||||
start: undefined,
|
||||
end: undefined,
|
||||
yearPhaseStart:undefined,
|
||||
yearPhaseEnd:undefined,
|
||||
},
|
||||
// 用户导入参数
|
||||
mainFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: '工单',
|
||||
placeholder: '请选择工单',
|
||||
param: 'workOrderId',
|
||||
selectOptions: [],
|
||||
},
|
||||
// {
|
||||
// type: 'select',
|
||||
// label: '产线',
|
||||
// placeholder: '请选择产线',
|
||||
// param: 'lineId',
|
||||
// selectOptions: [],
|
||||
// },
|
||||
// 选项切换
|
||||
// {
|
||||
// type: 'select',
|
||||
// label: '时间类型',
|
||||
// param: 'dateFilterType',
|
||||
// defaultSelect: 0,
|
||||
// selectOptions: [
|
||||
// { id: 0, name: '按时间段' },
|
||||
// { id: 1, name: '按日期' },
|
||||
// ],
|
||||
// index: 2,
|
||||
// extraOptions: [
|
||||
{
|
||||
// parent: 'dateFilterType',
|
||||
// 时间段选择
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
// dateType: 'datetimerange',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'recordTime',
|
||||
},
|
||||
// {
|
||||
// parent: 'dateFilterType',
|
||||
// // 日期选择
|
||||
// type: 'datePicker',
|
||||
// // label: '日期',
|
||||
// dateType: 'date',
|
||||
// placeholder: '选择日期',
|
||||
// format: 'yyyy-MM-dd',
|
||||
// valueFormat: 'yyyy-MM-dd',
|
||||
// param: 'timeday',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type: 'separate'
|
||||
},
|
||||
// {
|
||||
// type: this.$auth.hasPermi(
|
||||
// 'analysis:equipment:export'
|
||||
// )
|
||||
// ? 'separate'
|
||||
// : '',
|
||||
// },
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'warning',
|
||||
},
|
||||
],
|
||||
formConfig: [
|
||||
{
|
||||
type: 'title',
|
||||
label: '成本管理',
|
||||
},
|
||||
],
|
||||
mDTypeList: [
|
||||
{
|
||||
value: 0,
|
||||
label: '物料编码'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '物料名称'
|
||||
}
|
||||
],
|
||||
wDTypeList: [
|
||||
{
|
||||
value: 0,
|
||||
label: '仓库名称'
|
||||
}
|
||||
],
|
||||
tableProps: [
|
||||
{
|
||||
prop: 'yearPhaseName',
|
||||
label: '年期',
|
||||
minWidth: 200,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'center',
|
||||
label: '成本中心名称',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'product',
|
||||
label: '产品名称',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'spec',
|
||||
label: '规格型号',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'workorderCode',
|
||||
label: '工单编号',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'workorderLineNum',
|
||||
label: '工单行号',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'supplierCode',
|
||||
label: '供应商编码',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'supplier',
|
||||
label: '供应商名称',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'unit',
|
||||
label: '基本单位',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'planNum',
|
||||
label: '计划产量',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'project',
|
||||
label: '成本项目名称',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'material',
|
||||
label: '子项物料名称',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'currentTime',
|
||||
label: '本期完工',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true,
|
||||
children: [
|
||||
{
|
||||
prop: 'finishNum',
|
||||
label: '数量',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'unitConsume',
|
||||
label: '单耗',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'unitCost',
|
||||
label: '单位成本',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'cost',
|
||||
label: '金额',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'totalTime',
|
||||
label: '累计完工',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true,
|
||||
children: [
|
||||
{
|
||||
prop: 'totalFinishNum',
|
||||
label: '数量',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'totalUnitConsume',
|
||||
label: '单耗',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'totalUnitCost',
|
||||
label: '单位成本',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'totalCost',
|
||||
label: '金额',
|
||||
minWidth: 150,
|
||||
// filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
// timeSelect:'month',
|
||||
// startTimeStamp:null, //开始时间
|
||||
// endTimeStamp:null, //结束时间
|
||||
// date:'凯盛玻璃控股成员企业2024生产数据',
|
||||
// reportTime: '',
|
||||
// startTimeStamp: '',
|
||||
// endTimeStamp: '',
|
||||
tableData: [],
|
||||
// proLineList: [],
|
||||
// all: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
created() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
this.listQuery.start = `${currentYear}01期`;
|
||||
this.listQuery.end = `${currentYear}12期`;
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
// console.log('选择的值:', this.selectedValues);
|
||||
},
|
||||
async getDataList() {
|
||||
this.tableData = []
|
||||
this.listQuery.yearPhaseStart = this.listQuery.start ? this.listQuery.start.slice(0,6) :undefined
|
||||
this.listQuery.yearPhaseEnd = this.listQuery.end ? this.listQuery.end.slice(0, 6) : undefined
|
||||
if (this.listQuery.end && this.listQuery.start) {
|
||||
if (this.listQuery.end.slice(0, 4) - this.listQuery.start.slice(0, 4) > 10) {
|
||||
this.listQuery.end = undefined
|
||||
this.listQuery.start = undefined
|
||||
this.listQuery.yearPhaseStart = undefined
|
||||
this.listQuery.yearPhaseEnd = undefined
|
||||
return this.$message({
|
||||
message: '起止年份不能超过十年',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
await getCostMainPage(this.listQuery).then(res => {
|
||||
if (res.code === 0) {
|
||||
// this.tableData = res.data.list
|
||||
res.data.list.forEach((item, index) => {
|
||||
let obj = {
|
||||
in: Math.random().toString().slice(2, 10),
|
||||
id:item.id,
|
||||
yearPhase: item.yearPhase,
|
||||
center: item.center,
|
||||
product: item.product,
|
||||
spec: item.spec,
|
||||
workorderCode: item.workorderCode,
|
||||
workorderLineNum: item.workorderLineNum,
|
||||
supplierCode: item.supplierCode,
|
||||
supplier: item.supplier,
|
||||
unit: item.unit,
|
||||
planNum: item.planNum,
|
||||
finishNum: item.finishNum,
|
||||
unitConsume: item.unitConsume,
|
||||
unitCost: item.unitCost,
|
||||
cost: item.cost,
|
||||
totalFinishNum: item.totalFinishNum,
|
||||
totalUnitConsume: item.totalUnitConsume,
|
||||
totalUnitCost: item.totalUnitCost,
|
||||
totalCost: item.totalCost,
|
||||
createTime: item.createTime,
|
||||
yearPhaseName: item.yearPhaseName,
|
||||
project: item.project,
|
||||
material: item.material,
|
||||
children:[]
|
||||
}
|
||||
this.tableData.push(obj)
|
||||
item.children.forEach((ele, ind) => {
|
||||
// for (let i in item.projs) {
|
||||
let obj = {
|
||||
in: Math.random().toString().slice(2, 10),
|
||||
id: ele.id,
|
||||
yearPhase: ele.yearPhase,
|
||||
center: ele.center,
|
||||
product: ele.product,
|
||||
spec: ele.spec,
|
||||
workorderCode: ele.workorderCode,
|
||||
workorderLineNum: ele.workorderLineNum,
|
||||
supplierCode: ele.supplierCode,
|
||||
supplier: ele.supplier,
|
||||
unit: ele.unit,
|
||||
planNum: ele.planNum,
|
||||
finishNum: ele.finishNum,
|
||||
unitConsume: ele.unitConsume,
|
||||
unitCost: ele.unitCost,
|
||||
cost: ele.cost,
|
||||
totalFinishNum: ele.totalFinishNum,
|
||||
totalUnitConsume: ele.totalUnitConsume,
|
||||
totalUnitCost: ele.totalUnitCost,
|
||||
totalCost: ele.totalCost,
|
||||
createTime: ele.createTime,
|
||||
yearPhaseName: ele.yearPhaseName,
|
||||
project: ele.project,
|
||||
material: ele.material,
|
||||
children:[]
|
||||
}
|
||||
this.tableData[index].children.push(obj)
|
||||
ele.children?.forEach((i,inde) => {
|
||||
// for (let i in item.projs) {
|
||||
let obj = {
|
||||
in: Math.random().toString().slice(2, 10),
|
||||
id: i.id,
|
||||
yearPhase: i.yearPhase,
|
||||
center: i.center,
|
||||
product: i.product,
|
||||
spec: i.spec,
|
||||
workorderCode: i.workorderCode,
|
||||
workorderLineNum: i.workorderLineNum,
|
||||
supplierCode: i.supplierCode,
|
||||
supplier: i.supplier,
|
||||
unit: i.unit,
|
||||
planNum: i.planNum,
|
||||
finishNum: i.finishNum,
|
||||
unitConsume: i.unitConsume,
|
||||
unitCost: i.unitCost,
|
||||
cost: i.cost,
|
||||
totalFinishNum: i.totalFinishNum,
|
||||
totalUnitConsume: i.totalUnitConsume,
|
||||
totalUnitCost: i.totalUnitCost,
|
||||
totalCost: i.totalCost,
|
||||
createTime: i.createTime,
|
||||
yearPhaseName: i.yearPhaseName,
|
||||
project: i.project,
|
||||
material: i.material,
|
||||
}
|
||||
this.tableData[index].children[ind].children.push(obj)
|
||||
// });
|
||||
// }
|
||||
});
|
||||
// });
|
||||
// }
|
||||
});
|
||||
|
||||
});
|
||||
console.log(this.tableData);
|
||||
this.listQuery.total = res.data.total
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return this.$message({
|
||||
message: '请选择起止年份和期数',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
buttonClick(val) {
|
||||
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.listQuery;
|
||||
// queryParams.current = 1
|
||||
// queryParams.size = 999
|
||||
// if (this.facType === 0) {
|
||||
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
|
||||
this.exportLoading = true;
|
||||
return exportExcel(queryParams);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '成本核算数据.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => { });
|
||||
// }
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* .blueTip { */
|
||||
/* padding-bottom: 10px; */
|
||||
/* } */
|
||||
.blueTip .el-date-editor .el-range__icon {
|
||||
font-size: 16px;
|
||||
color: #0b58ff;
|
||||
}
|
||||
|
||||
.blueTip .el-input__prefix .el-icon-date {
|
||||
font-size: 16px;
|
||||
color: #0b58ff;
|
||||
}
|
||||
|
||||
.blueTip .el-input__prefix .el-icon-time {
|
||||
font-size: 16px;
|
||||
color: #0b58ff;
|
||||
}
|
||||
|
||||
.blueTip::before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8PX;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px 16px 0;
|
||||
height: calc(100vh - 134px);
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,421 +0,0 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-15 10:49:13
|
||||
* @LastEditTime: 2024-05-06 14:55:56
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)">
|
||||
<div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;">
|
||||
<search-bar :formConfigs="mainFormConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12" v-for="item in dataList" :key="item.id">
|
||||
<line-chart :id="item.id" class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="app-container" style="margin-top: 18px;flex-grow: 1; height: auto; padding: 16px;">
|
||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
|
||||
:table-data="tableData">
|
||||
</base-table>
|
||||
</div>
|
||||
<!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
|
||||
:type="listQuery.reportType" @refreshDataList="getDataList" /> -->
|
||||
<!-- <pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { parseTime } from '../../core/mixins/code-filter';
|
||||
import { getOrderList, getCostPage } from '@/api/cost/index';
|
||||
// import inputTable from './inputTable.vue';
|
||||
import lineChart from './lineChart';
|
||||
import moment from 'moment'
|
||||
// import FileSaver from 'file-saver'
|
||||
// import * as XLSX from 'xlsx'
|
||||
export default {
|
||||
components: { lineChart },
|
||||
data() {
|
||||
return {
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
// factoryId: null,
|
||||
// total: 0,
|
||||
// type: null,
|
||||
// reportType: 2,
|
||||
reportTime: []
|
||||
},
|
||||
dataList: [
|
||||
{
|
||||
id:'first',
|
||||
},
|
||||
{
|
||||
id: 'second',
|
||||
},
|
||||
{
|
||||
id: 'third',
|
||||
},
|
||||
{
|
||||
id: 'fourth',
|
||||
},
|
||||
{
|
||||
id: 'fifth',
|
||||
},
|
||||
{
|
||||
id: 'sixth',
|
||||
},
|
||||
],
|
||||
urlOptions: {
|
||||
// getDataListURL: getGlassPage,
|
||||
// exportURL: exportGlasscExcel
|
||||
},
|
||||
mainFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: '工单',
|
||||
placeholder: '请选择工单',
|
||||
param: 'workOrderId',
|
||||
selectOptions: [],
|
||||
clearable: true,
|
||||
},
|
||||
// {
|
||||
// type: 'select',
|
||||
// label: '产线',
|
||||
// placeholder: '请选择产线',
|
||||
// param: 'lineId',
|
||||
// selectOptions: [],
|
||||
// },
|
||||
// 选项切换
|
||||
// {
|
||||
// type: 'select',
|
||||
// label: '时间类型',
|
||||
// param: 'dateFilterType',
|
||||
// defaultSelect: 0,
|
||||
// selectOptions: [
|
||||
// { id: 0, name: '按时间段' },
|
||||
// { id: 1, name: '按日期' },
|
||||
// ],
|
||||
// index: 2,
|
||||
// extraOptions: [
|
||||
{
|
||||
// parent: 'dateFilterType',
|
||||
// 时间段选择
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
// dateType: 'datetimerange',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'recordTime',
|
||||
clearable:true,
|
||||
},
|
||||
// {
|
||||
// parent: 'dateFilterType',
|
||||
// // 日期选择
|
||||
// type: 'datePicker',
|
||||
// // label: '日期',
|
||||
// dateType: 'date',
|
||||
// placeholder: '选择日期',
|
||||
// format: 'yyyy-MM-dd',
|
||||
// valueFormat: 'yyyy-MM-dd',
|
||||
// param: 'timeday',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
type:'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type:'separate'
|
||||
},
|
||||
// {
|
||||
// type: this.$auth.hasPermi(
|
||||
// 'analysis:equipment:export'
|
||||
// )
|
||||
// ? 'separate'
|
||||
// : '',
|
||||
// },
|
||||
{
|
||||
type:'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
color: 'warning',
|
||||
},
|
||||
],
|
||||
formConfig: [
|
||||
{
|
||||
type: 'title',
|
||||
label: '成本管理',
|
||||
},
|
||||
],
|
||||
timeList: [
|
||||
{
|
||||
value: 'month',
|
||||
label:'月'
|
||||
},
|
||||
{
|
||||
value: 'year',
|
||||
label: '年'
|
||||
}
|
||||
],
|
||||
factoryList: [
|
||||
{
|
||||
name: '测试',
|
||||
id:1
|
||||
}
|
||||
],
|
||||
tableProps: [
|
||||
// {
|
||||
// prop: 'createTime',
|
||||
// label: '添加时间',
|
||||
// fixed: true,
|
||||
// width: 180,
|
||||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
// },
|
||||
{
|
||||
prop: 'userName',
|
||||
label: '日期',
|
||||
},
|
||||
{
|
||||
prop: 'nickName',
|
||||
label: '工厂名称',
|
||||
}
|
||||
],
|
||||
timeSelect:'month',
|
||||
startTimeStamp:null, //开始时间
|
||||
endTimeStamp:null, //结束时间
|
||||
// date:'凯盛玻璃控股成员企业2024生产数据',
|
||||
// reportTime: '',
|
||||
startTimeStamp: '',
|
||||
endTimeStamp: '',
|
||||
tableData: [
|
||||
{
|
||||
userName: 'userName',
|
||||
nickName: '用户名',
|
||||
datas:'111111'
|
||||
},
|
||||
{
|
||||
userName: 'userName',
|
||||
nickName: '用户名',
|
||||
datas: '111111'
|
||||
},
|
||||
{
|
||||
userName: 'userName',
|
||||
nickName: '用户名',
|
||||
datas: '111111'
|
||||
// subcomponent: row
|
||||
}
|
||||
],
|
||||
// proLineList: [],
|
||||
// all: {}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getDict()
|
||||
// this.getCurrentYearFirst()
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
buttonClick() {
|
||||
|
||||
},
|
||||
// handleTime() {
|
||||
// this.$forceUpdate()
|
||||
// // this.$nextTick(() => [
|
||||
|
||||
// // ])
|
||||
// },
|
||||
// getCurrentYearFirst() {
|
||||
// let date = new Date();
|
||||
// date.setDate(1);
|
||||
// date.setMonth(0);
|
||||
// this.reportTime = date;
|
||||
// this.startTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()); //开始时间
|
||||
// this.endTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()); //结束时间
|
||||
// this.listQuery.reportTime[0] = parseTime(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
|
||||
// this.listQuery.reportTime[1] = parseTime(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 100
|
||||
// },
|
||||
changeTime(val) {
|
||||
if (val) {
|
||||
// let timeStamp = val.getTime(); //标准时间转为时间戳，毫秒级别
|
||||
// this.endTimeStamp = this.timeFun(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()); //开始时间
|
||||
// this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()); //结束时间
|
||||
// this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
|
||||
// this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
|
||||
} else {
|
||||
this.listQuery.reportTime = []
|
||||
}
|
||||
},
|
||||
async getDict() {
|
||||
// this.$refs.lineChart.initChart()
|
||||
// 产线列表
|
||||
const res = await getOrderList({
|
||||
current:1,
|
||||
size:999,
|
||||
});
|
||||
console.log(res)
|
||||
this.mainFormConfig[0].selectOptions = res.data;
|
||||
},
|
||||
// 获取数据列表
|
||||
multipliedByHundred(str) {
|
||||
console.log(str);
|
||||
// console.log(str)
|
||||
if ( str != 0) {
|
||||
let floatVal = parseFloat(str);
|
||||
if (isNaN(floatVal)) {
|
||||
return 0;
|
||||
}
|
||||
floatVal = Math.round(str * 10000) / 100;
|
||||
let strVal = floatVal.toString();
|
||||
let searchVal = strVal.indexOf('.');
|
||||
if (searchVal < 0) {
|
||||
searchVal = strVal.length;
|
||||
strVal += '.';
|
||||
}
|
||||
while (strVal.length <= searchVal + 2) {
|
||||
strVal += '0';
|
||||
}
|
||||
return parseFloat(strVal);
|
||||
}
|
||||
|
||||
},
|
||||
async getDataList() {
|
||||
const res = await getCostPage({
|
||||
current: 1,
|
||||
size: 999,
|
||||
});
|
||||
},
|
||||
add0(m) {
|
||||
return m < 10 ? '0' + m : m
|
||||
},
|
||||
format(shijianchuo) {
|
||||
//shijianchuo是整数，否则要parseInt转换
|
||||
var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss')
|
||||
// console.log(time)
|
||||
// var y = time.getFullYear();
|
||||
// var m = time.getMonth() + 1;
|
||||
// var d = time.getDate();
|
||||
// var h = time.getHours();
|
||||
// var mm = time.getMinutes();
|
||||
// var s = time.getSeconds();
|
||||
return time
|
||||
},
|
||||
changeTime(val) {
|
||||
if (val) {
|
||||
// console.log(val)
|
||||
// console.log(val.setHours(7, 0, 0))
|
||||
// console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000)
|
||||
// let time = this.format(val.setHours(7, 0, 0))
|
||||
this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
|
||||
this.startTimeStamp = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
|
||||
// console.log(this.listQuery.reportTime);
|
||||
this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
|
||||
this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
|
||||
console.log(this.listQuery.reportTime);
|
||||
} else {
|
||||
this.listQuery.reportTime = []
|
||||
}
|
||||
},
|
||||
|
||||
//时间戳转为yy-mm-dd hh:mm:ss
|
||||
timeFun(unixtimestamp) {
|
||||
var unixtimestamp = new Date(unixtimestamp);
|
||||
var year = 1900 + unixtimestamp.getYear();
|
||||
var month = "0" + (unixtimestamp.getMonth() + 1);
|
||||
var date = "0" + unixtimestamp.getDate();
|
||||
return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
|
||||
},
|
||||
buttonClick(val) {
|
||||
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
// 处理查询参数
|
||||
// var xlsxParam = { raw: true };
|
||||
// /* 从表生成工作簿对象 */
|
||||
// import('xlsx').then(excel => {
|
||||
// var wb = excel.utils.table_to_book(
|
||||
// document.querySelector("#exportTable"),
|
||||
// xlsxParam
|
||||
// );
|
||||
// /* 获取二进制字符串作为输出 */
|
||||
// var wbout = excel.write(wb, {
|
||||
// bookType: "xlsx",
|
||||
// bookSST: true,
|
||||
// type: "array",
|
||||
// });
|
||||
// try {
|
||||
// FileSaver.saveAs(
|
||||
// //Blob 对象表示一个不可变、原始数据的类文件对象。
|
||||
// //Blob 表示的不一定是JavaScript原生格式的数据。
|
||||
// //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
|
||||
// //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
|
||||
// new Blob([wbout], { type: "application/octet-stream" }),
|
||||
// //设置导出文件名称
|
||||
// "许昌安彩日原片生产汇总.xlsx"
|
||||
// );
|
||||
// } catch (e) {
|
||||
// if (typeof console !== "undefined") console.log(e, wbout);
|
||||
// }
|
||||
// return wbout;
|
||||
// //do something......
|
||||
// })
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .blueTip { */
|
||||
/* padding-bottom: 10px; */
|
||||
/* } */
|
||||
/* .blueTi */
|
||||
.blueTip::before{
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8PX;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.app-container {
|
||||
margin: 0 16px 0;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px 16px 0;
|
||||
height: calc(100vh - 134px);
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,233 +0,0 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-01-21 14:43:06
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-04-16 14:16:17
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<!-- <div> -->
|
||||
<!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
|
||||
<div :id="id" class="costChart" :style="{ height: height, width: width }" />
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
// import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'OverviewLine'
|
||||
},
|
||||
// className: {
|
||||
// type: String,
|
||||
// default: 'epChart'
|
||||
// },
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '35vh'
|
||||
},
|
||||
legendPosition: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
legendData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartData: [
|
||||
{
|
||||
name: '产品1',
|
||||
num: 1112,
|
||||
yield: 0.97,
|
||||
},
|
||||
{
|
||||
name: '产品2',
|
||||
num: 1112,
|
||||
yield: 0.97,
|
||||
},
|
||||
{
|
||||
name: '产品3',
|
||||
num: 1112,
|
||||
yield: 0.97,
|
||||
},
|
||||
{
|
||||
name: '产品4',
|
||||
num: 1112,
|
||||
yield: 0.97,
|
||||
},
|
||||
{
|
||||
name: '产品5',
|
||||
num: 1112,
|
||||
yield: 0.97,
|
||||
}
|
||||
],
|
||||
chart: null,
|
||||
colors: ['rgba(113, 99, 254, 1)', 'rgba(39, 139, 255, 1)', 'rgba(100, 189, 255, 1)', 'rgba(143, 240, 170, 1)', 'rgba(246, 189, 22, 0.85)'],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
getEqualNewlineString(params, length) {
|
||||
let text = ''
|
||||
let count = Math.ceil(params.length / length) // 向上取整数
|
||||
// 一行展示length个
|
||||
if (count > 1) {
|
||||
for (let z = 1; z <= count; z++) {
|
||||
text += params.substr((z - 1) * length, length)
|
||||
if (z < count) {
|
||||
text += '\n'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
text += params.substr(0, length)
|
||||
}
|
||||
return text
|
||||
},
|
||||
initChart() {
|
||||
console.log(1111)
|
||||
let num = 0
|
||||
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
|
||||
num += i.num
|
||||
})
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
color: this.colors,
|
||||
title: {
|
||||
text: num,
|
||||
subtext: '总数/片',
|
||||
top: '32%',
|
||||
left: '49%',
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 32,
|
||||
color: 'rgba(140, 140, 140, 1)',
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 20,
|
||||
color: '#fff00',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
bottom: '2%',
|
||||
left: 'center',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
icon: 'roundRect',
|
||||
textStyle: {
|
||||
color: 'rgba(140, 140, 140, 1)'
|
||||
},
|
||||
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
||||
name: item.name,
|
||||
itemStyle: {
|
||||
color: this.colors[index % 4]
|
||||
}
|
||||
}))
|
||||
},
|
||||
series: [{
|
||||
name: 'ISRA缺陷检测',
|
||||
type: 'pie',
|
||||
// position:outerHeight,
|
||||
center: ['50%', '40%'],
|
||||
radius: ['45%', '70%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
normal: {
|
||||
alignTo: 'labelLine',
|
||||
margin: 10,
|
||||
edgeDistance: 10,
|
||||
lineHeight: 16,
|
||||
// 各分区的提示内容
|
||||
// params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
|
||||
formatter: function (params) {
|
||||
console.log(params);
|
||||
return;
|
||||
},
|
||||
formatter: (params) => {
|
||||
//调用自定义显示格式
|
||||
return this.getEqualNewlineString(params.value + " | " + params.percent.toFixed(0) + "%" + "\n" + params.name, 10);
|
||||
},
|
||||
textStyle: { // 提示文字的样式
|
||||
// color: 'rgba(0, 0, 0, 0.65)',
|
||||
fontSize: 18
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 25,
|
||||
length2: 100,
|
||||
},
|
||||
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
||||
name: item.name,
|
||||
value: item.num,
|
||||
label: {
|
||||
color: this.colors[index % 4]
|
||||
},
|
||||
itemStyle: {
|
||||
// color: {
|
||||
// type: 'linear',
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// global: false,
|
||||
// colorStops: [
|
||||
// { offset: 0, color: this.colors[index % 4] },
|
||||
// { offset: 1, color: this.colors[index % 4] + '33' }
|
||||
// ]
|
||||
// }
|
||||
}
|
||||
}))
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
className: "isra-chart-tooltip"
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,16 +1,10 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-28 13:42:51
|
||||
* @LastEditTime: 2024-07-18 16:37:41
|
||||
* @LastEditTime: 2024-07-23 16:36:18
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<!--
|
||||
filename: ChipYield.vue
|
||||
author: liubin
|
||||
date: 2024-04-11 10:46:47
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<chart-container class="chip-yield-chart" :noScroll="true">
|
||||
@@ -70,7 +64,7 @@ export default {
|
||||
top: "40%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontWeight: 600,
|
||||
fontWeight: 400,
|
||||
fontSize: 32,
|
||||
color: "#fffd",
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-28 13:42:51
|
||||
* @LastEditTime: 2024-06-27 16:30:58
|
||||
* @LastEditTime: 2024-07-23 17:03:50
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
@@ -129,7 +129,7 @@ export default {
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
color: "rgba(69,97,174,.4)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,10 +1,3 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-28 13:42:51
|
||||
* @LastEditTime: 2024-07-19 15:25:37
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<!--
|
||||
filename: right-chart-base
|
||||
author: liubin
|
||||
@@ -82,8 +75,8 @@ export default {
|
||||
res +=
|
||||
"<br/>" +
|
||||
`${params[i].seriesType === "line"
|
||||
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:4%;'></span>
|
||||
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:38.82%;left:5%;'></span>
|
||||
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:3.05%;'></span>
|
||||
<span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:39.4%;left:4.6%;'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
|
||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
|
||||
@@ -138,7 +131,7 @@ export default {
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
color: "rgba(69,97,174,.4)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -67,15 +67,15 @@ export default {
|
||||
return [
|
||||
{
|
||||
name: `${new Date().getFullYear()}年目标值`,
|
||||
data: stdOutput.target,
|
||||
data: stdOutput.target.splice(0,2),
|
||||
},
|
||||
{
|
||||
name: `${new Date().getFullYear() - 1}年`,
|
||||
data: stdOutput.previous,
|
||||
data: stdOutput.previous.splice(0, 2),
|
||||
},
|
||||
{
|
||||
name: `${new Date().getFullYear()}年`,
|
||||
data: stdOutput.current,
|
||||
data: stdOutput.current.splice(0, 2),
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-15 10:49:13
|
||||
* @LastEditTime: 2024-07-17 08:55:15
|
||||
* @LastEditTime: 2024-07-30 10:31:35
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 200px - 31px)">
|
||||
<div class="app-container" style="padding: 16px 24px 0; height: auto; flex-grow: 1;">
|
||||
<div class="app-container" style="padding: 16px 16px 0; height: auto; flex-grow: 1;">
|
||||
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
|
||||
<el-form-item label="时间维度" prop="type">
|
||||
<el-select @change="changType" v-model="listQuery.type" size="small" clearable placeholder="请选择">
|
||||
@@ -39,7 +39,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.type === 3" label="时间范围" prop="reportTime">
|
||||
<el-date-picker size="small" clearable v-model="listQuery.start" value-format="yyyy-MM-dd" type="year"
|
||||
placeholder="开始时间">
|
||||
placeholder="开始时间" @change="getYear">
|
||||
</el-date-picker>
|
||||
~
|
||||
<el-date-picker size="small" clearable v-model="listQuery.end" value-format="yyyy-MM-dd" type="year" placeholder="结束时间"
|
||||
@@ -265,6 +265,8 @@ export default {
|
||||
this.listQuery.endDate = null
|
||||
this.listQuery.startDate = null
|
||||
this.listQuery.reportTime = null
|
||||
this.listQuery.start = null
|
||||
this.listQuery.end = null
|
||||
},
|
||||
otherMethods(val) {
|
||||
this.detailOrUpdateVisible = true;
|
||||
@@ -282,20 +284,14 @@ export default {
|
||||
this.listQuery.reportTime = []
|
||||
this.listQuery.start = undefined
|
||||
this.listQuery.end = undefined
|
||||
// console.log();
|
||||
} else {
|
||||
this.listQuery.startDate = this.listQuery.start
|
||||
this.listQuery.endDate = this.listQuery.end
|
||||
}
|
||||
if (!this.listQuery.start && !this.listQuery.end) {
|
||||
this.listQuery.startDate = undefined
|
||||
this.listQuery.endDate = undefined
|
||||
}
|
||||
// console.log(e);
|
||||
},
|
||||
onValueChange(picker, k) { // 选中近k周后触发的操作
|
||||
if (this.listQuery.start && this.listQuery.end) {
|
||||
console.log(this.listQuery.reportTime)
|
||||
// console.log(this.listQuery.start, this.listQuery.end - this.listQuery.start)
|
||||
this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
this.date2 = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
|
||||
@@ -309,11 +305,15 @@ export default {
|
||||
this.listQuery.startDate = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
|
||||
this.listQuery.endDate = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
|
||||
}
|
||||
}
|
||||
if (!this.listQuery.start && !this.listQuery.end) {
|
||||
console.log(this.listQuery.startDate, this.listQuery.endDate)
|
||||
} else {
|
||||
this.listQuery.startDate = undefined
|
||||
this.listQuery.endDate = undefined
|
||||
}
|
||||
// if (!this.listQuery.start && !this.listQuery.end) {
|
||||
// this.listQuery.startDate = undefined
|
||||
// this.listQuery.endDate = undefined
|
||||
// }
|
||||
},
|
||||
changeDayTime() {
|
||||
if (this.listQuery.reportTime) {
|
||||
@@ -359,7 +359,7 @@ export default {
|
||||
this.$message.warning('请选择时间维度！')
|
||||
return
|
||||
}
|
||||
if (!this.listQuery.startDate) {
|
||||
if (!this.listQuery.startDate || !this.listQuery.endDate) {
|
||||
this.$message.warning('请选择时间范围！')
|
||||
} else {
|
||||
await getProduceDataPage(this.listQuery).then(res => {
|
||||
@@ -392,8 +392,8 @@ export default {
|
||||
// 工厂名称 this.factoryListabbr
|
||||
const factoryNameArray = (this.listQuery.factory.length === 0 || this.listQuery.factory.length === this.factoryListabbr.length) ? [0, 1] : this.listQuery.factory
|
||||
const seriesArray = []
|
||||
typeArray.forEach((type, typeIndex) => {
|
||||
factoryNameArray.forEach((fac, facIndex) => {
|
||||
factoryNameArray.forEach((fac, facIndex) => {
|
||||
typeArray.forEach((type, typeIndex) => {
|
||||
const series = {
|
||||
data: Array(xAxisData.length).fill(0),
|
||||
type: 'bar',
|
||||
@@ -407,27 +407,26 @@ export default {
|
||||
seriesArray.push(series)
|
||||
})
|
||||
})
|
||||
// 构造series的data
|
||||
const seriesDataArray = []
|
||||
Object.values(data).forEach((item) => {
|
||||
let seriesData = []
|
||||
// item[0].datestr 为日期
|
||||
typeArray.forEach(t => {
|
||||
const zidr = ['chipYield', 'componentYield', 'bipvProductOutput'][t]
|
||||
|
||||
// 按工厂分
|
||||
const arrayByFacArray = Object.groupBy(dataList, (member) => member.factory)
|
||||
// const seriesDataArray = []
|
||||
let n = 0
|
||||
Object.values(arrayByFacArray).forEach((item) => {
|
||||
typeArray.forEach(type => {
|
||||
const typeName = ['chipYield', 'componentYield', 'bipvProductOutput'][type]
|
||||
let seriesData = Array(xAxisData.length).fill(0)
|
||||
item.forEach(it => {
|
||||
seriesData.push(it[zidr])
|
||||
xAxisData.forEach((x, xindex) => {
|
||||
if (x === it['datestr']) {
|
||||
seriesData[xindex] = it[typeName]
|
||||
}
|
||||
})
|
||||
})
|
||||
seriesArray[n].data = seriesData
|
||||
n ++
|
||||
})
|
||||
seriesDataArray.push(seriesData)
|
||||
})
|
||||
for (let y = 0; y < seriesArray.length; y ++) {
|
||||
const days = []
|
||||
seriesDataArray.forEach(a => {
|
||||
days.push(a[y])
|
||||
})
|
||||
// 赋值完成
|
||||
seriesArray[y].data = days
|
||||
}
|
||||
|
||||
// 添加工厂
|
||||
const validSeriesArray = []
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-01-21 14:43:06
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2024-07-16 18:41:27
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-07-23 09:45:30
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
|
||||
@@ -75,7 +75,7 @@ export default {
|
||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${params[i].color}"></span>`
|
||||
}` +
|
||||
`<span style='display:inline-block;width:180px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${
|
||||
`<span style='color:rgba(0,0,0,0.48);width:150px;display:inline-block;font-size:14px;text-align:right'>${
|
||||
params[i].name === "%"
|
||||
? (params[i].value ? params[i].value.toFixed(2) : "0.00") +
|
||||
params[i].name
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-19 15:28:34
|
||||
* @LastEditTime: 2024-07-12 09:12:10
|
||||
* @LastEditTime: 2024-07-30 10:56:01
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -61,7 +61,7 @@ export default {
|
||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${params[i].color}"></span>`
|
||||
}` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
|
||||
`<span style='color:rgba(0,0,0,0.48);width:100px;display:inline-block;font-size:14px;text-align:right'>${params[i].seriesName === "综合良率"
|
||||
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
|
||||
: params[i].seriesName === "转化效率"
|
||||
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-20 16:13:36
|
||||
* @LastEditTime: 2024-07-09 16:15:10
|
||||
* @LastEditTime: 2024-07-30 16:04:05
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -58,7 +58,7 @@ export default {
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
|
||||
`<span style='color:rgba(0,0,0,0.48);width:auto;display:inline-block;font-size:14px;text-align:right'>${params[i].seriesName === "综合良率"
|
||||
? (params[i].data.titleValue ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0.0) + "%"
|
||||
: params[i].seriesName === "转化效率"
|
||||
? (params[i].data.titleValue ? parseFloat(params[i].data.titleValue.toFixed(2)) : 0.0) + "%"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-20 16:13:52
|
||||
* @LastEditTime: 2024-07-11 16:45:08
|
||||
* @LastEditTime: 2024-07-30 10:42:10
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -57,7 +57,7 @@ export default {
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
|
||||
`<span style='color:rgba(0,0,0,0.48);width:150px;display:inline-block;font-size:14px;text-align:right'>${params[i].seriesName === "综合良率"
|
||||
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
|
||||
: params[i].seriesName === "转化效率"
|
||||
? parseFloat(params[i].value.toFixed(2)) + "%"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-07-09 16:06:13
|
||||
* @LastEditTime: 2024-07-09 16:14:54
|
||||
* @LastEditTime: 2024-07-30 10:42:16
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -68,7 +68,7 @@ export default {
|
||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${params[i].color}"></span>`
|
||||
}` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
|
||||
`<span style='color:rgba(0,0,0,0.48);width:150px;display:inline-block;font-size:14px;text-align:right'>${params[i].seriesName === "综合良率"
|
||||
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
|
||||
: params[i].seriesName === "转化效率"
|
||||
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
|
||||
@@ -139,6 +139,7 @@ export default {
|
||||
height: 3,
|
||||
// 设置滚动条显示位置
|
||||
left: "center",
|
||||
minValueSpan:2,
|
||||
// 是否锁定选择区域（或叫做数据窗口）的大小
|
||||
zoomLoxk: true,
|
||||
// 控制手柄的尺寸
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-21 09:05:14
|
||||
* @LastEditTime: 2024-07-09 16:15:04
|
||||
* @LastEditTime: 2024-07-30 10:42:20
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -74,7 +74,7 @@ export default {
|
||||
res +=
|
||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[1].color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[1].axisValueLabel}</span>` +
|
||||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[1].name === "综合良率"
|
||||
`<span style='color:rgba(0,0,0,0.48);width:150px;display:inline-block;font-size:14px;text-align:right'>${params[1].name === "综合良率"
|
||||
? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0.0) + "%"
|
||||
: params[1].name === "转化效率"
|
||||
? (params[1].value ? parseFloat(params[1].value.toFixed(2)) : 0.0) + "%"
|
||||
|
||||
@@ -770,6 +770,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
.search {
|
||||
// height: calc((100px));
|
||||
background-color: #fff;
|
||||
@@ -797,7 +798,7 @@ export default {
|
||||
height: calc((100vh - 170px));
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 4px 16px 16px 16px;
|
||||
padding: 16px 16px 16px 16px;
|
||||
}
|
||||
|
||||
.blueTip::before {
|
||||
|
||||
@@ -78,8 +78,8 @@
|
||||
生产情况对比
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row v-if="this.listQuery.type === 2">
|
||||
<el-col :span="12">
|
||||
<el-row v-if="this.listQuery.type === 2" type="flex" justify="space-around">
|
||||
<el-col :span="11">
|
||||
<!-- <div class="blueTip">
|
||||
生产情况对比
|
||||
</div> -->
|
||||
@@ -89,6 +89,9 @@
|
||||
<el-col :span="6">
|
||||
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
|
||||
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartTarget'" :chartNum="chartNum" />
|
||||
</el-col>
|
||||
<el-col :span="1">
|
||||
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<!-- <div class="blueTip">
|
||||
@@ -985,6 +988,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.search {
|
||||
// height: calc((100px));
|
||||
background-color: #fff;
|
||||
@@ -1013,7 +1017,7 @@ export default {
|
||||
height: calc((100vh - 170px));
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 4px 16px 16px 16px;
|
||||
padding: 16px 16px 16px 16px;
|
||||
}
|
||||
|
||||
.blueTip::before {
|
||||
|
||||
@@ -78,8 +78,8 @@
|
||||
生产情况对比
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row v-if="this.listQuery.type === 2">
|
||||
<el-col :span="12">
|
||||
<el-row v-if="this.listQuery.type === 2" type="flex" justify="space-around">
|
||||
<el-col :span="11">
|
||||
<!-- <div class="blueTip">
|
||||
生产情况对比
|
||||
</div> -->
|
||||
@@ -91,6 +91,9 @@
|
||||
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" ref="dayTargetChart" :chartId=" 'chartTarget'"
|
||||
:chartNum="chartNum" />
|
||||
</el-col>
|
||||
<el-col :span="1">
|
||||
<!-- <div v-show="false">1111111111111</div> -->
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<!-- <div class="blueTip">
|
||||
{{ title }}
|
||||
@@ -108,9 +111,8 @@
|
||||
:legendList="legendList" :chartMsg="chartMsg" :chartId="'chartDay'" :chartNum="chartNum" />
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight"
|
||||
:legendList="legendList" :chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartDayTarget'"
|
||||
:chartNum="chartNum" />
|
||||
<bm-line-bar-target :type="listQuery.type" :chartHeight="chartHeight" :legendList="legendList"
|
||||
:chartMsg="chartMsgTarget" :gridLeft="gridLeft" :chartId="'chartDayTarget'" :chartNum="chartNum" />
|
||||
</el-col>
|
||||
<!-- <el-col :span="6">
|
||||
<div class="blueTip">
|
||||
@@ -1393,7 +1395,7 @@ export default {
|
||||
height: calc((100vh - 170px));
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 4px 16px 16px 16px;
|
||||
padding: 16px 16px 16px 16px;
|
||||
}
|
||||
|
||||
.blueTip::before {
|
||||
|
||||
@@ -846,6 +846,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
.search {
|
||||
// height: calc((100px));
|
||||
background-color: #fff;
|
||||
@@ -873,7 +874,7 @@ export default {
|
||||
height: calc((100vh - 170px));
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 4px 16px 16px 16px;
|
||||
padding: 16px 16px 16px 16px;
|
||||
}
|
||||
|
||||
.blueTip::before {
|
||||
|
||||
@@ -1,93 +1,123 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-15 10:49:13
|
||||
* @LastEditTime: 2024-04-29 16:10:36
|
||||
* @LastEditTime: 2024-07-26 13:58:56
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)">
|
||||
<div class="app-container" style="padding: 16px 24px 0;height: 400px; flex-grow: 1;">
|
||||
<search-bar :formConfigs="mainFormConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||
<div class="content">
|
||||
<!-- v-for 遍历父级div-->
|
||||
<div class="main" :span="12" v-for="(item,index) in chartData" :key="index">
|
||||
<line-chart :data="item" ref="lineChart" style="height: 600px;width: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <el-row :gutter="24">
|
||||
<el-col>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
</div>
|
||||
<div class="app-container" style="margin-top: 18px;flex-grow: 1; height: auto; padding: 16px;">
|
||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
|
||||
:table-data="tableData">
|
||||
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 32px)">
|
||||
<div class="app-container" style="height: auto; flex-grow: 1;">
|
||||
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
|
||||
<el-form-item label="快捷查询" prop="mDType">
|
||||
<el-select size="small" v-model="listQuery.mDType" clearable @change="handleChange">
|
||||
<el-option v-for="item in mDTypeList" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="listQuery.mDType === 0" prop="materialCode">
|
||||
<el-input @keyup.enter.native="getDataList" v-model="listQuery.materialCode" placeholder="请填写物料编码" clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-else prop="materialName">
|
||||
<el-input @keyup.enter.native="getDataList" v-model="listQuery.materialName" placeholder="请填写物料名称" clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="wDType">
|
||||
<el-select size="small" v-model="listQuery.wDType" clearable>
|
||||
<el-option v-for="item in wDTypeList" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="listQuery.wDType === 0" prop="warehouse">
|
||||
<el-input @keyup.enter.native="getDataList" v-model="listQuery.warehouse" placeholder="请填写仓库名称" clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="玻璃类型" prop="type">
|
||||
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
|
||||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item label="玻璃类型" prop="type">
|
||||
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
|
||||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="getDataList">查询</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<!-- <el-button type="primary" size="small" plain @click="handleImport">导入</el-button> -->
|
||||
<el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
|
||||
<!-- <el-button type="success" size="small" plain @click="addFactory">新增</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> -->
|
||||
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData"
|
||||
:max-height="tableH">
|
||||
<!-- <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
|
||||
:method-list="tableBtn" @clickBtn="handleClick" /> -->
|
||||
</base-table>
|
||||
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
</div>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
|
||||
<!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
|
||||
:type="listQuery.reportType" @refreshDataList="getDataList" /> -->
|
||||
<!-- <pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { parseTime } from '../../core/mixins/code-filter';
|
||||
import { getStockPage } from '@/api/wareHouse';
|
||||
import { parseTime } from '@/utils/ruoyi';
|
||||
import { getStockRealTimePage, exportExcel } from '@/api/wareHouse';
|
||||
// import inputTable from './inputTable.vue';
|
||||
import lineChart from './lineChart';
|
||||
import moment from 'moment'
|
||||
// import ButtonNav from '@/components/ButtonNav'
|
||||
import basicPage from '@/mixins/basic-page'
|
||||
// import detailOrUpdate from './detail-or-updata';
|
||||
// import addOrUpdate from './add-or-updata';
|
||||
// import { factoryList, dhgfactoryList, tyjxfactoryList } from "@/utils/constants";
|
||||
import { getBaseHeader } from "@/utils/request";
|
||||
// import tableHeightMixin from "@/mixins/tableHeightMixin";
|
||||
|
||||
import { factoryList } from "@/utils/constants";
|
||||
|
||||
// import FileSaver from 'file-saver'
|
||||
// import * as XLSX from 'xlsx'
|
||||
export default {
|
||||
components: { lineChart },
|
||||
data() {
|
||||
// components: { ButtonNav, detailOrUpdate, addOrUpdate },
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
chartData:[],
|
||||
start: undefined,
|
||||
end: undefined,
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
pageSize: 20,
|
||||
pageNo: 1,
|
||||
factory:undefined,
|
||||
},
|
||||
urlOptions: {
|
||||
// getDataListURL: getGlassPage,
|
||||
// exportURL: exportGlasscExcel
|
||||
total: 0,
|
||||
mDType:0,
|
||||
wDType: 0,
|
||||
materialCode:null,
|
||||
materialName: null,
|
||||
warehouse: null,
|
||||
},
|
||||
tableH: this.tableHeight(300),
|
||||
// 用户导入参数
|
||||
mainFormConfig: [
|
||||
{
|
||||
{
|
||||
type: 'select',
|
||||
label: '工厂名称',
|
||||
placeholder: '请选择工厂名称',
|
||||
param: 'factory',
|
||||
selectOptions: [
|
||||
{
|
||||
id: 0,
|
||||
name: '瑞昌中建材光电材料有限公司'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '邯郸中建材光电材料有限公司'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '中建材株洲光电材料有限公司'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '佳木斯中建材光电材料有限公司'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '成都中建材光电材料有限公司'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '凯盛光伏材料有限公司'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '蚌埠兴科玻璃有限公司'
|
||||
},
|
||||
],
|
||||
clearable:true,
|
||||
label: '工单',
|
||||
placeholder: '请选择工单',
|
||||
param: 'workOrderId',
|
||||
selectOptions: [],
|
||||
},
|
||||
// {
|
||||
// type: 'select',
|
||||
@@ -108,21 +138,21 @@ export default {
|
||||
// ],
|
||||
// index: 2,
|
||||
// extraOptions: [
|
||||
// {
|
||||
// // parent: 'dateFilterType',
|
||||
// // 时间段选择
|
||||
// type: 'datePicker',
|
||||
// label: '时间段',
|
||||
// // dateType: 'datetimerange',
|
||||
// dateType: 'datetimerange',
|
||||
// format: 'yyyy-MM-dd HH:mm:ss',
|
||||
// valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
||||
// rangeSeparator: '-',
|
||||
// rangeSeparator: '-',
|
||||
// startPlaceholder: '开始时间',
|
||||
// endPlaceholder: '结束时间',
|
||||
// param: 'recordTime',
|
||||
// },
|
||||
{
|
||||
// parent: 'dateFilterType',
|
||||
// 时间段选择
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
// dateType: 'datetimerange',
|
||||
dateType: 'datetimerange',
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
param: 'recordTime',
|
||||
},
|
||||
// {
|
||||
// parent: 'dateFilterType',
|
||||
// // 日期选择
|
||||
@@ -137,13 +167,13 @@ export default {
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
type:'button',
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
type:'separate'
|
||||
{
|
||||
type: 'separate'
|
||||
},
|
||||
// {
|
||||
// type: this.$auth.hasPermi(
|
||||
@@ -153,238 +183,171 @@ export default {
|
||||
// : '',
|
||||
// },
|
||||
{
|
||||
type:'button',
|
||||
type: 'button',
|
||||
btnName: '导出',
|
||||
name: 'export',
|
||||
plain: true,
|
||||
color: 'primary',
|
||||
color: 'warning',
|
||||
},
|
||||
],
|
||||
formConfig: [
|
||||
{
|
||||
type: 'title',
|
||||
label: '仓库管理',
|
||||
label: '成本管理',
|
||||
},
|
||||
],
|
||||
timeList: [
|
||||
mDTypeList: [
|
||||
{
|
||||
value: 'month',
|
||||
label:'月'
|
||||
value: 0,
|
||||
label: '物料编码'
|
||||
},
|
||||
{
|
||||
value: 'year',
|
||||
label: '年'
|
||||
value: 1,
|
||||
label: '物料名称'
|
||||
}
|
||||
],
|
||||
factoryList: [
|
||||
wDTypeList: [
|
||||
{
|
||||
name: '测试',
|
||||
id:1
|
||||
value: 0,
|
||||
label: '仓库名称'
|
||||
}
|
||||
],
|
||||
tableProps: [
|
||||
// {
|
||||
// prop: 'createTime',
|
||||
// label: '添加时间',
|
||||
// fixed: true,
|
||||
// width: 180,
|
||||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
// },
|
||||
{
|
||||
prop: 'materialCode',
|
||||
label: '物料编码',
|
||||
minWidth: 200,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'materialName',
|
||||
label: '物料名称',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'spec',
|
||||
label: '规格型号',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'warehouse',
|
||||
label: '仓库名称',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'batchCode',
|
||||
label: '批号',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'unit',
|
||||
label: '库存主单位',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'num',
|
||||
label: '库存量',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'factory',
|
||||
label: '工厂名称',
|
||||
filter: (val) => ['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'][val]
|
||||
},
|
||||
{
|
||||
prop: 'glassType',
|
||||
label: '玻璃类型',
|
||||
filter: (val) => ['玻璃芯片', '标准组件', 'BIPV'][val]
|
||||
},
|
||||
{
|
||||
prop: 'productSpecification',
|
||||
label: '产品规格',
|
||||
},
|
||||
{
|
||||
prop: 'stockNumber',
|
||||
label: '库存数量',
|
||||
},
|
||||
{
|
||||
prop: 'specificationProportion',
|
||||
label: '规格占比',
|
||||
},
|
||||
label: '库存组织',
|
||||
minWidth: 150,
|
||||
filter: (val) => factoryList[val],
|
||||
showOverflowtooltip: true
|
||||
}
|
||||
],
|
||||
timeSelect:'month',
|
||||
startTimeStamp:null, //开始时间
|
||||
endTimeStamp:null, //结束时间
|
||||
// timeSelect:'month',
|
||||
// startTimeStamp:null, //开始时间
|
||||
// endTimeStamp:null, //结束时间
|
||||
// date:'凯盛玻璃控股成员企业2024生产数据',
|
||||
// reportTime: '',
|
||||
startTimeStamp: '',
|
||||
endTimeStamp: '',
|
||||
// reportTime: '',
|
||||
// startTimeStamp: '',
|
||||
// endTimeStamp: '',
|
||||
tableData: [],
|
||||
// proLineList: [],
|
||||
// all: {}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getDict()
|
||||
console.log(this.$refs.lineChart)
|
||||
// this.getCurrentYearFirst()
|
||||
this.getDataList()
|
||||
},
|
||||
// proLineList: [],
|
||||
// all: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
created() {
|
||||
// const currentMonth = new Date()
|
||||
// this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
|
||||
// this.changeTime()
|
||||
},
|
||||
methods: {
|
||||
buttonClick() {
|
||||
},
|
||||
changeTime(val) {
|
||||
if (val) {
|
||||
} else {
|
||||
this.listQuery.reportTime = []
|
||||
}
|
||||
},
|
||||
async getDict() {
|
||||
},
|
||||
// 获取数据列表
|
||||
multipliedByHundred(str) {
|
||||
console.log(str);
|
||||
// console.log(str)
|
||||
if ( str != 0) {
|
||||
let floatVal = parseFloat(str);
|
||||
if (isNaN(floatVal)) {
|
||||
return 0;
|
||||
}
|
||||
floatVal = Math.round(str * 10000) / 100;
|
||||
let strVal = floatVal.toString();
|
||||
let searchVal = strVal.indexOf('.');
|
||||
if (searchVal < 0) {
|
||||
searchVal = strVal.length;
|
||||
strVal += '.';
|
||||
}
|
||||
while (strVal.length <= searchVal + 2) {
|
||||
strVal += '0';
|
||||
}
|
||||
return parseFloat(strVal);
|
||||
}
|
||||
|
||||
handleChange() {
|
||||
this.listQuery.materialCode = undefined
|
||||
this.listQuery.materialName = undefined
|
||||
},
|
||||
async getDataList() {
|
||||
getStockPage(this.listQuery).then((res) => {
|
||||
this.tableData = res.data.list
|
||||
let arr = res.data.list.map((ele) => {
|
||||
return {
|
||||
factory: ele.factory === 0 ? '瑞昌中建材光电材料有限公司' : ele.factory === 1 ? '邯郸中建材光电材料有限公司' : ele.factory === 2 ? '中建材株洲光电材料有限公司' : ele.factory === 3 ? '佳木斯中建材光电材料有限公司' : ele.factory === 4 ? '成都中建材光电材料有限公司' : ele.factory === 5 ? '凯盛光伏材料有限公司' : '蚌埠兴科玻璃有限公司',
|
||||
name: ele.glassType === 0 ? '玻璃芯片' : ele.glassType === 1 ? '标准组件' : 'BIPV',
|
||||
num: ele.stockNumber
|
||||
await getStockRealTimePage(this.listQuery).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.list
|
||||
this.listQuery.total = res.data.total
|
||||
}
|
||||
})
|
||||
this.checkSameData(arr)
|
||||
this, this.$nextTick(() => [
|
||||
this.$refs.lineChart.initChart()
|
||||
])
|
||||
})
|
||||
},
|
||||
checkSameData(data) {
|
||||
let dataInfo = {}
|
||||
data.forEach((item, index) => {
|
||||
let { factory } = item;
|
||||
if (!dataInfo[factory]) {
|
||||
dataInfo[factory] = {
|
||||
factory,
|
||||
child: []
|
||||
}
|
||||
}
|
||||
dataInfo[factory].child.push(item)
|
||||
})
|
||||
this.chartData = Object.values(dataInfo); // list 转换成功的数据
|
||||
// console.log(this.chartData[0])
|
||||
buttonClick(val) {
|
||||
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
add0(m) {
|
||||
return m < 10 ? '0' + m : m
|
||||
},
|
||||
format(shijianchuo) {
|
||||
//shijianchuo是整数，否则要parseInt转换
|
||||
var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss')
|
||||
return time
|
||||
},
|
||||
changeTime(val) {
|
||||
if (val) {
|
||||
this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
|
||||
this.startTimeStamp = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
|
||||
// console.log(this.listQuery.reportTime);
|
||||
this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000
|
||||
this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000
|
||||
console.log(this.listQuery.reportTime);
|
||||
} else {
|
||||
this.listQuery.reportTime = []
|
||||
}
|
||||
},
|
||||
//时间戳转为yy-mm-dd hh:mm:ss
|
||||
timeFun(unixtimestamp) {
|
||||
var unixtimestamp = new Date(unixtimestamp);
|
||||
var year = 1900 + unixtimestamp.getYear();
|
||||
var month = "0" + (unixtimestamp.getMonth() + 1);
|
||||
var date = "0" + unixtimestamp.getDate();
|
||||
return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
|
||||
},
|
||||
buttonClick(val) {
|
||||
// this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
|
||||
console.log(val)
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1
|
||||
this.listQuery.pageSize = 10
|
||||
this.listQuery.factory = val.factory ? val.factory : undefined
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
// 处理查询参数
|
||||
// var xlsxParam = { raw: true };
|
||||
// /* 从表生成工作簿对象 */
|
||||
// import('xlsx').then(excel => {
|
||||
// var wb = excel.utils.table_to_book(
|
||||
// document.querySelector("#exportTable"),
|
||||
// xlsxParam
|
||||
// );
|
||||
// /* 获取二进制字符串作为输出 */
|
||||
// var wbout = excel.write(wb, {
|
||||
// bookType: "xlsx",
|
||||
// bookSST: true,
|
||||
// type: "array",
|
||||
// });
|
||||
// try {
|
||||
// FileSaver.saveAs(
|
||||
// //Blob 对象表示一个不可变、原始数据的类文件对象。
|
||||
// //Blob 表示的不一定是JavaScript原生格式的数据。
|
||||
// //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
|
||||
// //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
|
||||
// new Blob([wbout], { type: "application/octet-stream" }),
|
||||
// //设置导出文件名称
|
||||
// "许昌安彩日原片生产汇总.xlsx"
|
||||
// );
|
||||
// } catch (e) {
|
||||
// if (typeof console !== "undefined") console.log(e, wbout);
|
||||
// }
|
||||
// return wbout;
|
||||
// //do something......
|
||||
// })
|
||||
|
||||
},
|
||||
},
|
||||
const queryParams = this.listQuery;
|
||||
// if (this.facType === 0) {
|
||||
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
|
||||
this.exportLoading = true;
|
||||
return exportExcel(queryParams);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '即时仓库数据.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => { });
|
||||
// }
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style>
|
||||
/* .blueTip { */
|
||||
/* padding-bottom: 10px; */
|
||||
/* padding-bottom: 10px; */
|
||||
/* } */
|
||||
/* .blueTi */
|
||||
.blueTip::before{
|
||||
.blueTip .el-date-editor .el-range__icon {
|
||||
font-size: 16px;
|
||||
color: #0b58ff;
|
||||
}
|
||||
|
||||
.blueTip .el-input__prefix .el-icon-date {
|
||||
font-size: 16px;
|
||||
color: #0b58ff;
|
||||
}
|
||||
|
||||
.blueTip .el-input__prefix .el-icon-time {
|
||||
font-size: 16px;
|
||||
color: #0b58ff;
|
||||
}
|
||||
|
||||
.blueTip::before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 4px;
|
||||
@@ -394,26 +357,13 @@ export default {
|
||||
margin-right: 8PX;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
margin: 0 16px 0;
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px 16px 0;
|
||||
height: calc(100vh - 134px);
|
||||
overflow: auto;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
/* grid-template-columns: 1fr 1fr 1fr; */
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: calc((100% - 46px)/2);
|
||||
/* border: 1px solid #D0D0D0; */
|
||||
height: 400px;
|
||||
/* background-color: #FFFFFF; */
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user