projects/mescc/zhp
into projects/mescc/develop
3 months ago
@@ -1,8 +1,8 @@ | |||
### | |||
# @Author: zhp | |||
# @Date: 2024-04-28 13:42:51 | |||
# @LastEditTime: 2024-06-07 10:32:24 | |||
# @LastEditors: DY | |||
# @LastEditTime: 2024-06-11 08:33:19 | |||
# @LastEditors: zhp | |||
# @Description: | |||
### | |||
# 开发环境配置 | |||
@@ -13,9 +13,9 @@ VUE_APP_TITLE = 发电玻璃智能管控平台 | |||
# 芋道管理系统/开发环境 | |||
# VUE_APP_BASE_API = 'http://192.168.1.70:30307' | |||
# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com' | |||
VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com' | |||
# sara | |||
VUE_APP_BASE_API = 'http://192.168.1.63:48080' | |||
# VUE_APP_BASE_API = 'http://192.168.1.63:48080' | |||
# 张一丁 | |||
# VUE_APP_BASE_API = 'http://192.168.4.139:48080' | |||
@@ -0,0 +1,148 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-06-07 08:37:17 | |||
* @LastEditTime: 2024-06-07 11:04:41 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<template> | |||
<button | |||
class="chart-btn" | |||
:class="[active ? 'active' : '']" | |||
@click="$emit('click', label)" | |||
> | |||
{{ label }} | |||
</button> | |||
</template> | |||
<script> | |||
export default { | |||
name: "CopilotButton", | |||
props: { | |||
label: { | |||
type: String, | |||
required: true, | |||
}, | |||
active: { | |||
type: Boolean, | |||
default: false, | |||
}, | |||
}, | |||
mounted() { | |||
}, | |||
}; | |||
</script> | |||
<style> | |||
button { | |||
appearance: none; | |||
outline: none; | |||
border: none; | |||
background: none; | |||
} | |||
</style> | |||
<style scoped> | |||
.skate { | |||
/* flex: 1; */ | |||
position: relative; | |||
width: 88px; | |||
height: 32px; | |||
background: #01306C; | |||
/* border-radius: 4px 0px 0px 4px; */ | |||
backdrop-filter: blur(3px); | |||
/* text-align: center; | |||
padding: 12px; | |||
padding-left: 20px; | |||
color: #fff; | |||
font-size: 18px; */ | |||
font-family: PingFangSC, PingFang SC; | |||
font-weight: 400; | |||
font-size: 12px; | |||
color: #FFFFFF; | |||
line-height: 22px; | |||
letter-spacing: 5px; | |||
text-align: center; | |||
font-style: normal; | |||
/* margin-right: 1px; */ | |||
/* letter-spacing: 10px; */ | |||
cursor: pointer; | |||
} | |||
.chart-btn:nth-child(6)::after { | |||
content: ''; | |||
width: 0; | |||
height: 0; | |||
display: none; | |||
} | |||
.chart-btn { | |||
/* flex: 1; */ | |||
position: relative; | |||
width: 88px; | |||
height: 32px; | |||
background: #01306C; | |||
/* border-radius: 4px 0px 0px 4px; */ | |||
backdrop-filter: blur(3px); | |||
/* text-align: center; | |||
padding: 12px; | |||
padding-left: 20px; | |||
color: #fff; | |||
font-size: 18px; */ | |||
font-family: PingFangSC, PingFang SC; | |||
font-weight: 400; | |||
font-size: 12px; | |||
color: #FFFFFF; | |||
line-height: 22px; | |||
letter-spacing: 5px; | |||
text-align: center; | |||
font-style: normal; | |||
/* margin-right: 1px; */ | |||
/* letter-spacing: 10px; */ | |||
cursor: pointer; | |||
} | |||
.chart-btn::after { | |||
/* flex: 1; */ | |||
/* position: relative; */ | |||
content: ""; | |||
position: absolute; | |||
/* width: 16px; */ | |||
/* height: 16px; */ | |||
top: px; | |||
right: -1px; | |||
width: 1px; | |||
height: 23px; | |||
border: 1px solid #010D18; | |||
} | |||
.chart-btn.active { | |||
background: #1D74D8; | |||
/* border-radius: 4px;; */ | |||
} | |||
.chart-btn.active::after { | |||
display: none; | |||
/* border-radius: 4px;; */ | |||
} | |||
/* .copilot-btn::before, | |||
.copilot-btn::after { | |||
content: ""; | |||
position: absolute; | |||
width: 16px; | |||
height: 16px; | |||
top: 0; | |||
background: transparent; | |||
border-style: solid; | |||
border-width: 2px; | |||
border-color: transparent; | |||
border-top-color: #007be4; | |||
} | |||
.copilot-btn::before { | |||
left: 0; | |||
border-left-color: #007be4; | |||
} | |||
.copilot-btn::after { | |||
right: 0; | |||
border-right-color: #007be4; | |||
} */ | |||
</style> |
@@ -0,0 +1,218 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-06-11 09:48:40 | |||
* @LastEditTime: 2024-06-11 10:22:05 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<template> | |||
<!-- <div> --> | |||
<!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> --> | |||
<div :id="id" :class="className" style="height: 100%,width: 100%;;" /> | |||
<!-- </div> --> | |||
</template> | |||
<script> | |||
import * as echarts from 'echarts' | |||
import { debounce } from "@/utils/debounce"; | |||
export default { | |||
name: 'OverviewBar', | |||
// mixins: [resize], | |||
props: { | |||
id: { | |||
type: String, | |||
default: 'reportChart' | |||
}, | |||
className: { | |||
type: String, | |||
default: 'reportChart' | |||
}, | |||
width: { | |||
type: String, | |||
default: '100%' | |||
}, | |||
beilv: { | |||
type: Number, | |||
default: 1 | |||
}, | |||
height: { | |||
type: String, | |||
default: '100%' | |||
}, | |||
legendPosition: { | |||
type: String, | |||
default: 'center' | |||
}, | |||
showLegend: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
legendData: { | |||
type: Array, | |||
default: () => [] | |||
} | |||
}, | |||
data() { | |||
return { | |||
chart: null | |||
} | |||
}, | |||
mounted() { | |||
this.$nextTick(() => { | |||
this.initChart() | |||
}) | |||
}, | |||
beforeDestroy() { | |||
if (!this.chart) { | |||
return | |||
} | |||
this.chart.dispose() | |||
this.chart = null | |||
}, | |||
mounted() { | |||
// if (screenfull.isEnabled) { | |||
// screenfull.on("change", () => { | |||
// this.isFullscreen = screenfull.isFullscreen; | |||
// }); | |||
// } | |||
this.canvasReset(); | |||
window.addEventListener("resize", this.canvasReset); | |||
}, | |||
beforeDestroy() { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
}, | |||
destroyed() { | |||
window.removeEventListener("resize", this.canvasReset); | |||
}, | |||
methods: { | |||
canvasReset() { | |||
debounce(() => { | |||
this.initChart(); | |||
}, 500)(); | |||
}, | |||
initChart() { | |||
console.log(1111) | |||
this.chart = echarts.init(document.getElementById(this.id)) | |||
console.log(this.$parent); | |||
this.chart.setOption({ | |||
title: { | |||
text: '', | |||
// subtext: 'Fake Data' | |||
}, | |||
tooltip: { | |||
trigger: 'axis' | |||
}, | |||
grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true }, | |||
legend: { | |||
data: ['芯片总功率', '标准组件总功率', '转化效率'], | |||
right: '90px', | |||
top: '0%', | |||
icon: 'rect', | |||
itemWidth: 10, | |||
itemHeight: 10, | |||
itemGap: 40, | |||
}, | |||
// toolbox: { | |||
// show: true, | |||
// feature: { | |||
// dataView: { show: true, readOnly: false }, | |||
// magicType: { show: true, type: ['line', 'bar'] }, | |||
// restore: { show: true }, | |||
// saveAsImage: { show: true } | |||
// } | |||
// }, | |||
calculable: true, | |||
xAxis: [ | |||
{ | |||
type: 'category', | |||
// prettier-ignore | |||
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | |||
} | |||
], | |||
yAxis: [ | |||
{ | |||
type: 'value' | |||
}, | |||
{ | |||
type: 'value', | |||
// name: 'Temperature', | |||
min: 0, | |||
max: 100, | |||
interval: 20, | |||
axisLabel: { | |||
formatter: '{value}%' | |||
} | |||
} | |||
], | |||
grid: { | |||
top: '20%', | |||
left: "1%", | |||
right: "3%", | |||
bottom: "1%", | |||
containLabel: true | |||
}, | |||
series: [ | |||
{ | |||
name: '芯片总功率', | |||
type: 'bar', | |||
itemStyle: { | |||
normal: { | |||
color: 'rgba(142, 240, 171, 1)', //改变折线点的颜色 | |||
lineStyle: { | |||
color: 'rgba(142, 240, 171, 1)' //改变折线颜色 | |||
} | |||
} | |||
}, | |||
data: [ | |||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 | |||
], | |||
}, | |||
{ | |||
name: '标准组件总功率', | |||
type: 'bar', | |||
itemStyle: { | |||
normal: { | |||
color: '#288AFF', //改变折线点的颜色 | |||
lineStyle: { | |||
color: '#288AFF' //改变折线颜色 | |||
} | |||
} | |||
}, | |||
data: [ | |||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 | |||
], | |||
}, | |||
{ | |||
name: '转化效率', | |||
type: 'bar', | |||
type: 'line', | |||
yAxisIndex: 1, | |||
itemStyle: { | |||
normal: { | |||
color: '#FFCE6A', //改变折线点的颜色 | |||
lineStyle: { | |||
color: '#FFCE6A' //改变折线颜色 | |||
} | |||
} | |||
}, | |||
data: [ | |||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3 | |||
], | |||
} | |||
] | |||
}) | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
/* .reportChart { | |||
position: absolute; | |||
height: 100%; | |||
width: 100%; | |||
top: 10px; | |||
} */ | |||
</style> |
@@ -0,0 +1,460 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-04-15 10:49:13 | |||
* @LastEditTime: 2024-06-07 16:22:57 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<template> | |||
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)"> | |||
<!-- <div class="app-container" | |||
style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;"> | |||
<p style="margin-bottom: 0">数据概览</p> | |||
<div class="view"> | |||
<div v-for="(item, index) in data" :key="index"> | |||
<p style="color: rgb(194,128,255)">{{ item }}</p> | |||
<p>{{ index }}</p> | |||
</div> | |||
</div> | |||
</div> --> | |||
<div class="" style="height: auto;"> | |||
<ButtonNav style="padding: 0;" :menus="['邯郸', '瑞昌']" :button-mode="true" @change="currentMenu = $event"> | |||
<!-- <template v-slot:tab1> | |||
<div style="margin: 20px; background: #f001;"> | |||
Page1: 状态时序图 | |||
</div> | |||
</template> | |||
<template v-slot:tab2> | |||
<div style="margin: 20px"> | |||
Page2: 产量时序图 | |||
</div> | |||
</template> --> | |||
</ButtonNav> | |||
</div> | |||
<div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto;"> | |||
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> | |||
<el-form-item label="时间维度" prop="date"> | |||
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择"> | |||
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime"> | |||
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至" | |||
start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期"> | |||
</el-date-picker> | |||
</el-form-item> | |||
<el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime"> | |||
<el-date-picker size="small" clearable v-model="start" type="week" format="yyyy 第 WW 周" placeholder="选择周" | |||
style="width: 180px" @change="onValueChange"> | |||
</el-date-picker> | |||
至 | |||
<el-date-picker size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周" placeholder="选择周" | |||
style="width: 180px" @change="onValueChange"> | |||
</el-date-picker> | |||
<!-- <span v-if="start && end" style="margin-left: 10px"> | |||
{{ date1 }} 至 {{ date2 }},共 {{ weekNum }} 周 | |||
</span> --> | |||
</el-form-item> | |||
<el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime"> | |||
<el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="yyyyMM" | |||
range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime"> | |||
</el-date-picker> | |||
</el-form-item> | |||
<el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime"> | |||
<el-date-picker size="small" clearable v-model="start" value-format="yyyy" type="year" placeholder="开始时间"> | |||
</el-date-picker> | |||
~ | |||
<el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间" | |||
@change="getYear"> | |||
</el-date-picker> | |||
</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> | |||
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" | |||
:table-data="tableData"> | |||
<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> | |||
<!-- <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" | |||
@refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" /> --> | |||
</div> | |||
</template> | |||
<script> | |||
// import { parseTime } from '../../core/mixins/code-filter'; | |||
// import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order'; | |||
// import { getWorkOrderPage, exportExcel, getOverView } from '@/components/buttonNav' | |||
// 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 AddOrUpdate from './add-or-updata'; | |||
import { factoryList, factoryArray } from "@/utils/constants"; | |||
import { publicFormatter } from "@/utils/dict"; | |||
// import FileSaver from 'file-saver' | |||
// import * as XLSX from 'xlsx' | |||
export default { | |||
components: { ButtonNav }, | |||
mixins: [basicPage], | |||
data() { | |||
return { | |||
factoryList, | |||
factoryArray, | |||
start: undefined, | |||
end: undefined, | |||
listQuery: { | |||
size: 10, | |||
current: 1, | |||
factorys: null, | |||
total: 0, | |||
date: 3, | |||
beginTime: undefined, | |||
endTime: undefined, | |||
reportTime: [] | |||
}, | |||
timeList: [ | |||
{ | |||
value: 1, | |||
label: '日' | |||
}, | |||
{ | |||
value: 2, | |||
label: '周' | |||
}, | |||
{ | |||
value: 3, | |||
label: '月' | |||
}, | |||
{ | |||
value: 4, | |||
label: '年' | |||
} | |||
], | |||
detailOrUpdateVisible: false, | |||
tableBtn: [ | |||
{ | |||
type: 'detail', | |||
btnName: '详情', | |||
}, | |||
// { | |||
// type: 'delete', | |||
// btnName: '删除', | |||
// }, | |||
].filter((v) => v), | |||
typeList: [ | |||
{ | |||
name: '芯片', | |||
id: 0, | |||
}, | |||
{ | |||
name: '标准组件', | |||
id: 1, | |||
}, | |||
{ | |||
name: 'BIPV产品', | |||
id: 2, | |||
}, | |||
], | |||
tableProps: [ | |||
{ | |||
prop: 'factory', | |||
label: '玻璃类型', | |||
fixed:true, | |||
// filter: (val) => factoryList[val], | |||
// minWidth: 200, | |||
// showOverflowtooltip: true | |||
}, | |||
{ | |||
prop: 'workOrderNumber', | |||
label: '科目/日期', | |||
fixed: true, | |||
// filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val] | |||
}, | |||
{ | |||
prop: 'workOrderType', | |||
label: '单位', | |||
fixed: true, | |||
// filter: publicFormatter('workorder_status') | |||
// filter: (val) => ['', '芯片工单', '组件类型', 'bipv类型'][val], | |||
}, | |||
{ | |||
prop: 'plannedInvestment', | |||
label: '计划投入', | |||
}, | |||
{ | |||
prop: 'actualInvestment', | |||
label: '实际投入', | |||
}, | |||
{ | |||
prop: 'targetProduction', | |||
label: '目标产量', | |||
}, | |||
{ | |||
prop: 'actualProduction', | |||
label: '实际产量', | |||
}, | |||
{ | |||
prop: 'productionProgress', | |||
label: '生产进度', | |||
filter: (val) => (val * 100) + '%' | |||
}, | |||
{ | |||
prop: 'orderStatus', | |||
label: '工单状态', | |||
filter: publicFormatter('workorder_status') | |||
// filter: (val) => ['未开始', '生产中', '已完成'][val], | |||
}, | |||
{ | |||
prop: 'startTime', | |||
label: '开始时间', | |||
minWidth: 100, | |||
showOverflowtooltip: true | |||
}, | |||
{ | |||
prop: 'endTime', | |||
label: '完成时间', | |||
minWidth: 100, | |||
showOverflowtooltip: true | |||
} | |||
], | |||
tableData: [], | |||
xAxis: [], | |||
lineData: {}, | |||
data: {} | |||
// proLineList: [], | |||
// all: {} | |||
}; | |||
}, | |||
computed: { | |||
weekNum() { | |||
return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1 | |||
}, | |||
}, | |||
created() { | |||
const currentMonth = new Date() | |||
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')] | |||
this.changeTime() | |||
}, | |||
mounted() { | |||
this.getOverView() | |||
const currentMonth = new Date() | |||
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')] | |||
this.changeTime() | |||
}, | |||
methods: { | |||
getYear(e) { | |||
if (this.end && Number(this.end) - Number(this.start) > 10) { | |||
this.$message({ | |||
message: '年份起止时间不能超过十年', | |||
type: 'warning' | |||
}); | |||
this.start = undefined | |||
this.end = undefined | |||
// console.log(); | |||
} else { | |||
if (Number(this.end) < Number(this.start)) { | |||
this.$message({ | |||
message: '结束年份不能小于开始年份', | |||
type: 'warning' | |||
}); | |||
this.start = undefined | |||
this.end = undefined | |||
} else { | |||
this.listQuery.beginTime = Number(this.start) | |||
this.listQuery.endTime = Number(this.end) | |||
} | |||
} | |||
if (!this.start && !this.end) { | |||
this.listQuery.beginTime = undefined | |||
this.listQuery.endTime = undefined | |||
} | |||
// console.log(e); | |||
}, | |||
changeTime() { | |||
if (this.listQuery.reportTime) { | |||
const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4)) | |||
const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4)) | |||
if (years * 12 + months > 24) { | |||
this.$message({ | |||
message: '时间范围不能超过24个月', | |||
type: 'warning' | |||
}); | |||
this.listQuery.reportTime = []; | |||
} else { | |||
this.listQuery.beginTime = Number(this.listQuery.reportTime[0]) | |||
this.listQuery.endTime = Number(this.listQuery.reportTime[1]) | |||
} | |||
} else { | |||
this.listQuery.beginTime = undefined | |||
this.listQuery.endTime = undefined | |||
} | |||
}, | |||
onValueChange(picker, k) { // 选中近k周后触发的操作 | |||
if (this.start && this.end) { | |||
this.date1 = moment(this.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') | |||
this.date2 = moment(this.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); | |||
if (numDays > 168) { | |||
console.log(numDays) | |||
this.$message({ | |||
message: '周范围不能超过24周', | |||
type: 'warning' | |||
}); | |||
} else { | |||
this.listQuery.beginTime = Number(moment(this.start.getTime()).format('YYYYWW')) | |||
this.listQuery.endTime = Number(moment(this.end.getTime()).format('YYYYWW')) | |||
} | |||
} | |||
if (!this.start && !this.end) { | |||
this.listQuery.beginTime = undefined | |||
this.listQuery.endTime = undefined | |||
} | |||
}, | |||
changeDayTime() { | |||
if (this.listQuery.reportTime) { | |||
const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0]) | |||
if (numDays > 30) { | |||
this.$message({ | |||
message: '时间范围不能超过30天', | |||
type: 'warning' | |||
}); | |||
this.listQuery.reportTime = []; | |||
} else { | |||
this.listQuery.beginTime = Number(this.listQuery.reportTime[0]) | |||
this.listQuery.endTime = Number(this.listQuery.reportTime[1]) | |||
} | |||
} else { | |||
this.listQuery.beginTime = undefined | |||
this.listQuery.endTime = undefined | |||
} | |||
}, | |||
getOverView() { | |||
// getOverView().then(res => { | |||
// this.data = res.data | |||
// console.log('aa', res.data) | |||
// }) | |||
}, | |||
otherMethods(val) { | |||
this.detailOrUpdateVisible = true; | |||
// this.addOrEditTitle = "详情"; | |||
this.$nextTick(() => { | |||
// this.$refs.detailOrUpdate.init(val.data.id); | |||
}); | |||
}, | |||
async getDataList() { | |||
// const res = await getWorkOrderPage(this.listQuery) | |||
// this.tableData = res.data.list | |||
// this.listQuery.total = res.data.total | |||
// if (this.listQuery.total > 0) { | |||
// this.tableData.forEach(item => { | |||
// item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--' | |||
// item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--' | |||
// }) | |||
// } | |||
}, | |||
buttonClick(val) { | |||
this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined | |||
this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined | |||
this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined | |||
switch (val.btnName) { | |||
case 'search': | |||
this.listQuery.pageNo = 1; | |||
this.listQuery.pageSize = 20; | |||
if (this.listQuery.time) { | |||
this.getDataList(); | |||
} else { | |||
this.$message.warning('请选择时间范围!') | |||
} | |||
break; | |||
case 'export': | |||
if (this.listQuery.time) { | |||
this.handleExport(); | |||
} else { | |||
this.$message.warning('请选择时间范围!') | |||
} | |||
break; | |||
default: | |||
console.log(val); | |||
} | |||
}, | |||
/** 导出按钮操作 */ | |||
handleExport() { | |||
// this.$modal.confirm('是否确认导出工单数据?').then(() => { | |||
// // 处理查询参数 | |||
// // let params = {...this.listQuery}; | |||
// // params.current = 1; | |||
// // params.size = 999; | |||
// this.exportLoading = true; | |||
// return exportExcel({ | |||
// factorys: this.listQuery.factorys, | |||
// orderStatus: this.listQuery.orderStatus, | |||
// time: this.listQuery.time | |||
// }); | |||
// }).then(response => { | |||
// this.$download.excel(response, '工单数据.xls'); | |||
// this.exportLoading = false; | |||
// }).catch(() => { }) | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
/* .blueTip { */ | |||
/* padding-bottom: 10px; */ | |||
/* } */ | |||
/* .blueTi */ | |||
.view { | |||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
flex: 1; | |||
} | |||
.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 0px 0; | |||
background-color: #fff; | |||
border-radius: 4px; | |||
padding: 16px 16px 0; | |||
height: calc(100vh - 134px); | |||
overflow: auto; | |||
} | |||
.noBack{ | |||
background-color:black; | |||
} | |||
</style> |
@@ -0,0 +1,450 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-06-11 08:45:34 | |||
* @LastEditTime: 2024-06-11 11:08:27 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<template> | |||
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)"> | |||
<!-- <div class="app-container" | |||
style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;"> | |||
<p style="margin-bottom: 0">数据概览</p> | |||
<div class="view"> | |||
<div v-for="(item, index) in data" :key="index"> | |||
<p style="color: rgb(194,128,255)">{{ item }}</p> | |||
<p>{{ index }}</p> | |||
</div> | |||
</div> | |||
</div> --> | |||
<div class="app-container" style="flex: 1;min-height: 40vh;"> | |||
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> | |||
<el-form-item label="时间维度" prop="date"> | |||
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择"> | |||
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> | |||
</el-option> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime"> | |||
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至" | |||
start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期"> | |||
</el-date-picker> | |||
</el-form-item> | |||
<el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime"> | |||
<el-date-picker size="small" clearable v-model="start" type="week" format="yyyy 第 WW 周" placeholder="选择周" | |||
style="width: 180px" @change="onValueChange"> | |||
</el-date-picker> | |||
至 | |||
<el-date-picker size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周" placeholder="选择周" | |||
style="width: 180px" @change="onValueChange"> | |||
</el-date-picker> | |||
<!-- <span v-if="start && end" style="margin-left: 10px"> | |||
{{ date1 }} 至 {{ date2 }},共 {{ weekNum }} 周 | |||
</span> --> | |||
</el-form-item> | |||
<el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime"> | |||
<el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="yyyyMM" | |||
range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime"> | |||
</el-date-picker> | |||
</el-form-item> | |||
<el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime"> | |||
<el-date-picker size="small" clearable v-model="start" value-format="yyyy" type="year" placeholder="开始时间"> | |||
</el-date-picker> | |||
~ | |||
<el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间" | |||
@change="getYear"> | |||
</el-date-picker> | |||
</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> | |||
<line-chart ref="lineChart" style="height: 90%; width: 100%"></line-chart> | |||
</div> | |||
<div class="app-container" style="margin-top: 8px;flex: 1"> | |||
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" | |||
:table-data="tableData"> | |||
<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> | |||
<!-- <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" | |||
@refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" /> --> | |||
</div> | |||
</template> | |||
<script> | |||
// import { parseTime } from '../../core/mixins/code-filter'; | |||
// import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order'; | |||
// import { getWorkOrderPage, exportExcel, getOverView } from '@/components/buttonNav' | |||
// 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 AddOrUpdate from './add-or-updata'; | |||
import { factoryList, factoryArray } from "@/utils/constants"; | |||
import { publicFormatter } from "@/utils/dict"; | |||
import lineChart from "./components/lineChart"; | |||
// import FileSaver from 'file-saver' | |||
// import * as XLSX from 'xlsx' | |||
export default { | |||
components: { ButtonNav, lineChart }, | |||
mixins: [basicPage], | |||
data() { | |||
return { | |||
factoryList, | |||
factoryArray, | |||
start: undefined, | |||
end: undefined, | |||
listQuery: { | |||
size: 10, | |||
current: 1, | |||
factorys: null, | |||
total: 0, | |||
date: 3, | |||
beginTime: undefined, | |||
endTime: undefined, | |||
reportTime: [] | |||
}, | |||
timeList: [ | |||
{ | |||
value: 1, | |||
label: '日' | |||
}, | |||
{ | |||
value: 2, | |||
label: '周' | |||
}, | |||
{ | |||
value: 3, | |||
label: '月' | |||
}, | |||
{ | |||
value: 4, | |||
label: '年' | |||
} | |||
], | |||
detailOrUpdateVisible: false, | |||
tableBtn: [ | |||
{ | |||
type: 'detail', | |||
btnName: '详情', | |||
}, | |||
// { | |||
// type: 'delete', | |||
// btnName: '删除', | |||
// }, | |||
].filter((v) => v), | |||
typeList: [ | |||
{ | |||
name: '芯片', | |||
id: 0, | |||
}, | |||
{ | |||
name: '标准组件', | |||
id: 1, | |||
}, | |||
{ | |||
name: 'BIPV产品', | |||
id: 2, | |||
}, | |||
], | |||
tableProps: [ | |||
{ | |||
prop: 'factory', | |||
label: '玻璃类型', | |||
fixed:true, | |||
// filter: (val) => factoryList[val], | |||
// minWidth: 200, | |||
// showOverflowtooltip: true | |||
}, | |||
{ | |||
prop: 'workOrderNumber', | |||
label: '科目/日期', | |||
fixed: true, | |||
// filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val] | |||
}, | |||
{ | |||
prop: 'workOrderType', | |||
label: '单位', | |||
fixed: true, | |||
// filter: publicFormatter('workorder_status') | |||
// filter: (val) => ['', '芯片工单', '组件类型', 'bipv类型'][val], | |||
}, | |||
{ | |||
prop: 'plannedInvestment', | |||
label: '计划投入', | |||
}, | |||
{ | |||
prop: 'actualInvestment', | |||
label: '实际投入', | |||
}, | |||
{ | |||
prop: 'targetProduction', | |||
label: '目标产量', | |||
}, | |||
{ | |||
prop: 'actualProduction', | |||
label: '实际产量', | |||
}, | |||
{ | |||
prop: 'productionProgress', | |||
label: '生产进度', | |||
filter: (val) => (val * 100) + '%' | |||
}, | |||
{ | |||
prop: 'orderStatus', | |||
label: '工单状态', | |||
filter: publicFormatter('workorder_status') | |||
// filter: (val) => ['未开始', '生产中', '已完成'][val], | |||
}, | |||
{ | |||
prop: 'startTime', | |||
label: '开始时间', | |||
minWidth: 100, | |||
showOverflowtooltip: true | |||
}, | |||
{ | |||
prop: 'endTime', | |||
label: '完成时间', | |||
minWidth: 100, | |||
showOverflowtooltip: true | |||
} | |||
], | |||
tableData: [], | |||
xAxis: [], | |||
lineData: {}, | |||
data: {} | |||
// proLineList: [], | |||
// all: {} | |||
}; | |||
}, | |||
computed: { | |||
weekNum() { | |||
return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1 | |||
}, | |||
}, | |||
created() { | |||
const currentMonth = new Date() | |||
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')] | |||
this.changeTime() | |||
}, | |||
mounted() { | |||
this.getOverView() | |||
const currentMonth = new Date() | |||
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')] | |||
this.changeTime() | |||
}, | |||
methods: { | |||
getYear(e) { | |||
if (this.end && Number(this.end) - Number(this.start) > 10) { | |||
this.$message({ | |||
message: '年份起止时间不能超过十年', | |||
type: 'warning' | |||
}); | |||
this.start = undefined | |||
this.end = undefined | |||
// console.log(); | |||
} else { | |||
if (Number(this.end) < Number(this.start)) { | |||
this.$message({ | |||
message: '结束年份不能小于开始年份', | |||
type: 'warning' | |||
}); | |||
this.start = undefined | |||
this.end = undefined | |||
} else { | |||
this.listQuery.beginTime = Number(this.start) | |||
this.listQuery.endTime = Number(this.end) | |||
} | |||
} | |||
if (!this.start && !this.end) { | |||
this.listQuery.beginTime = undefined | |||
this.listQuery.endTime = undefined | |||
} | |||
// console.log(e); | |||
}, | |||
changeTime() { | |||
if (this.listQuery.reportTime) { | |||
const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4)) | |||
const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4)) | |||
if (years * 12 + months > 24) { | |||
this.$message({ | |||
message: '时间范围不能超过24个月', | |||
type: 'warning' | |||
}); | |||
this.listQuery.reportTime = []; | |||
} else { | |||
this.listQuery.beginTime = Number(this.listQuery.reportTime[0]) | |||
this.listQuery.endTime = Number(this.listQuery.reportTime[1]) | |||
} | |||
} else { | |||
this.listQuery.beginTime = undefined | |||
this.listQuery.endTime = undefined | |||
} | |||
}, | |||
onValueChange(picker, k) { // 选中近k周后触发的操作 | |||
if (this.start && this.end) { | |||
this.date1 = moment(this.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') | |||
this.date2 = moment(this.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); | |||
if (numDays > 168) { | |||
console.log(numDays) | |||
this.$message({ | |||
message: '周范围不能超过24周', | |||
type: 'warning' | |||
}); | |||
} else { | |||
this.listQuery.beginTime = Number(moment(this.start.getTime()).format('YYYYWW')) | |||
this.listQuery.endTime = Number(moment(this.end.getTime()).format('YYYYWW')) | |||
} | |||
} | |||
if (!this.start && !this.end) { | |||
this.listQuery.beginTime = undefined | |||
this.listQuery.endTime = undefined | |||
} | |||
}, | |||
changeDayTime() { | |||
if (this.listQuery.reportTime) { | |||
const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0]) | |||
if (numDays > 30) { | |||
this.$message({ | |||
message: '时间范围不能超过30天', | |||
type: 'warning' | |||
}); | |||
this.listQuery.reportTime = []; | |||
} else { | |||
this.listQuery.beginTime = Number(this.listQuery.reportTime[0]) | |||
this.listQuery.endTime = Number(this.listQuery.reportTime[1]) | |||
} | |||
} else { | |||
this.listQuery.beginTime = undefined | |||
this.listQuery.endTime = undefined | |||
} | |||
}, | |||
getOverView() { | |||
// getOverView().then(res => { | |||
// this.data = res.data | |||
// console.log('aa', res.data) | |||
// }) | |||
}, | |||
otherMethods(val) { | |||
this.detailOrUpdateVisible = true; | |||
// this.addOrEditTitle = "详情"; | |||
this.$nextTick(() => { | |||
// this.$refs.detailOrUpdate.init(val.data.id); | |||
}); | |||
}, | |||
async getDataList() { | |||
// const res = await getWorkOrderPage(this.listQuery) | |||
// this.tableData = res.data.list | |||
// this.listQuery.total = res.data.total | |||
// if (this.listQuery.total > 0) { | |||
// this.tableData.forEach(item => { | |||
// item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--' | |||
// item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--' | |||
// }) | |||
// } | |||
}, | |||
buttonClick(val) { | |||
this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined | |||
this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined | |||
this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined | |||
switch (val.btnName) { | |||
case 'search': | |||
this.listQuery.pageNo = 1; | |||
this.listQuery.pageSize = 20; | |||
if (this.listQuery.time) { | |||
this.getDataList(); | |||
} else { | |||
this.$message.warning('请选择时间范围!') | |||
} | |||
break; | |||
case 'export': | |||
if (this.listQuery.time) { | |||
this.handleExport(); | |||
} else { | |||
this.$message.warning('请选择时间范围!') | |||
} | |||
break; | |||
default: | |||
console.log(val); | |||
} | |||
}, | |||
/** 导出按钮操作 */ | |||
handleExport() { | |||
// this.$modal.confirm('是否确认导出工单数据?').then(() => { | |||
// // 处理查询参数 | |||
// // let params = {...this.listQuery}; | |||
// // params.current = 1; | |||
// // params.size = 999; | |||
// this.exportLoading = true; | |||
// return exportExcel({ | |||
// factorys: this.listQuery.factorys, | |||
// orderStatus: this.listQuery.orderStatus, | |||
// time: this.listQuery.time | |||
// }); | |||
// }).then(response => { | |||
// this.$download.excel(response, '工单数据.xls'); | |||
// this.exportLoading = false; | |||
// }).catch(() => { }) | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
/* .blueTip { */ | |||
/* padding-bottom: 10px; */ | |||
/* } */ | |||
/* .blueTi */ | |||
.view { | |||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
flex: 1; | |||
} | |||
.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 0px 0; | |||
background-color: #fff; | |||
border-radius: 4px; | |||
padding: 16px 16px 0; | |||
height: calc(100vh - 134px); | |||
overflow: auto; | |||
} | |||
.noBack{ | |||
background-color:black; | |||
} | |||
</style> |