产量和效率
This commit is contained in:
‘937886381’
commit
dc1667cdb7
4
.env.dev
4
.env.dev
@ -1,7 +1,7 @@
|
||||
###
|
||||
# @Author: zhp
|
||||
# @Date: 2024-04-28 13:42:51
|
||||
# @LastEditTime: 2024-05-21 08:36:39
|
||||
# @LastEditTime: 2024-05-29 11:03:03
|
||||
# @LastEditors: zhp
|
||||
# @Description:
|
||||
###
|
||||
@ -14,7 +14,7 @@ VUE_APP_TITLE = 芋道管理系统
|
||||
# 芋道管理系统/开发环境
|
||||
VUE_APP_BASE_API = 'http://192.168.1.61:48080'
|
||||
# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
|
||||
#
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 08:54:59
|
||||
* @LastEditTime: 2024-05-14 15:43:50
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-05-20 14:56:56
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
@ -16,26 +16,99 @@ export function getProduceDataPage(data) {
|
||||
})
|
||||
}
|
||||
|
||||
export function getProduceDataDetail(data){
|
||||
export function getProduceDataDetail(id){
|
||||
return request({
|
||||
url: '/ip/prod-output/get=' + id,
|
||||
method: 'get',
|
||||
query: data
|
||||
url: '/ip/prod-output/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// export function cockpitDataMonitor(data) {
|
||||
// return request({
|
||||
// url: '/ip/prod-output/cockpitDataMonitor',
|
||||
// method: 'post',
|
||||
// data: data
|
||||
// })
|
||||
// }
|
||||
|
||||
export function cockpitDataMonitor(query) {
|
||||
// 导出生产数据
|
||||
export function exportOutPutExcel(data) {
|
||||
return request({
|
||||
url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=95bdbdc1c387a170105f84cd416c4c9f&city=110108',
|
||||
method: 'get',
|
||||
query: query
|
||||
url: '/ip/prod-output/output-export-excel',
|
||||
method: 'post',
|
||||
data: data,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取生产管理生产目标管理碲化镉工厂分页
|
||||
export function prodTargetDiPage(data) {
|
||||
return request({
|
||||
url: '/ip/prod-target/prodTargetDiPage',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取生产管理生产目标管理铜铟镓硒工厂分页
|
||||
export function prodTargetToPage(data) {
|
||||
return request({
|
||||
url: '/ip/prod-target/prodTargetToPage',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 创建生产目标
|
||||
export function createProduce(data) {
|
||||
return request({
|
||||
url: '/ip/prod-target/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得生产目标
|
||||
export function getProduceTargetDetail(id){
|
||||
return request({
|
||||
url: '/ip/prod-target/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 修改生产目标
|
||||
export function updateProduceTarget(data) {
|
||||
return request({
|
||||
url: '/ip/prod-target/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 导出碲化镉生产目标数据
|
||||
export function exportDiTargetExcel(data) {
|
||||
return request({
|
||||
url: '/ip/prod-target/di-target-export-excel',
|
||||
method: 'post',
|
||||
data: data,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
// 导出铜铟镓硒生产目标数据
|
||||
export function exportToTargetExcel(data) {
|
||||
return request({
|
||||
url: '/ip/prod-target/to-target-export-excel',
|
||||
method: 'post',
|
||||
data: data,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
// 删除生产目标
|
||||
export function delTarget(id) {
|
||||
return request({
|
||||
url: '/ip/prod-target/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export function cockpitDataMonitor(data) {
|
||||
return request({
|
||||
url: '/ip/prod-output/cockpitDataMonitor',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
14
src/assets/icons/svg/orgTreeIcon.svg
Normal file
14
src/assets/icons/svg/orgTreeIcon.svg
Normal file
@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>菜单</title>
|
||||
<g id="10系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="用户管理" transform="translate(-284.000000, -164.000000)" fill-rule="nonzero">
|
||||
<g id="编组-7" transform="translate(284.000000, 162.000000)">
|
||||
<g id="菜单" transform="translate(0.000000, 2.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
|
||||
<path d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z" id="形状" fill="#373738"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
15
src/assets/icons/svg/orgTreeIcon2.svg
Normal file
15
src/assets/icons/svg/orgTreeIcon2.svg
Normal file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="127.000000pt" height="127.000000pt" viewBox="0 0 127.000000 127.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,127.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M520 831 c-19 -10 -48 -35 -64 -55 -25 -30 -31 -48 -34 -100 -8 -122
|
||||
69 -206 188 -206 119 0 196 84 188 205 -5 74 -36 123 -98 155 -51 26 -133 26
|
||||
-180 1z m137 -32 c67 -25 111 -99 98 -165 -8 -45 -57 -100 -101 -114 -100 -33
|
||||
-209 62 -190 165 12 62 82 124 143 125 12 0 34 -5 50 -11z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 725 B |
BIN
src/assets/images/homeindex/page-title-two.png
Normal file
BIN
src/assets/images/homeindex/page-title-two.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/homeindex/page-title.png
Normal file
BIN
src/assets/images/homeindex/page-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
@ -123,7 +123,7 @@ aside {
|
||||
|
||||
//main-container全局样式
|
||||
.app-container {
|
||||
padding: 16px;
|
||||
// padding: 16px;
|
||||
}
|
||||
|
||||
.components-container {
|
||||
|
||||
@ -82,6 +82,8 @@ export default {
|
||||
border: none;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
padding: 20px;
|
||||
color: #888;
|
||||
letter-spacing: 2px;
|
||||
|
||||
@ -17,20 +17,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import iframeToggle from "./IframeToggle/index"
|
||||
import iframeToggle from "./IframeToggle/index";
|
||||
|
||||
export default {
|
||||
name: 'AppMain',
|
||||
name: "AppMain",
|
||||
components: { iframeToggle },
|
||||
computed: {
|
||||
cachedViews() {
|
||||
return this.$store.state.tagsView.cachedViews
|
||||
return this.$store.state.tagsView.cachedViews;
|
||||
},
|
||||
key() {
|
||||
return this.$route.path
|
||||
}
|
||||
}
|
||||
}
|
||||
return this.$route.path;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -56,6 +56,9 @@ Vue.prototype.DICT_TYPE = DICT_TYPE;
|
||||
Vue.prototype.handleTree = handleTree;
|
||||
Vue.prototype.addBeginAndEndTime = addBeginAndEndTime;
|
||||
Vue.prototype.divide = divide;
|
||||
Vue.prototype.tableHeight = function (n) {
|
||||
return window.innerHeight - n;
|
||||
};
|
||||
|
||||
// 全局组件挂载
|
||||
Vue.component("DictTag", DictTag);
|
||||
|
||||
20
src/mixins/tableHeightMixin.js
Normal file
20
src/mixins/tableHeightMixin.js
Normal file
@ -0,0 +1,20 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableH: this.tableHeight(260),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
|
||||
window.addEventListener('resize', this._setTableHeight);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this._setTableHeight);
|
||||
},
|
||||
methods: {
|
||||
_setTableHeight() {
|
||||
this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
|
||||
// this.tableH = this.tableHeight(260);
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
import axios from "@/utils/request";
|
||||
import { deepClone } from "../../utils";
|
||||
|
||||
@ -25,10 +24,12 @@ const state = {
|
||||
chipOee: {
|
||||
current: [],
|
||||
previous: [],
|
||||
target:[]
|
||||
},
|
||||
transformRate: {
|
||||
current: [],
|
||||
previous: [],
|
||||
target:[]
|
||||
},
|
||||
chipRate: {
|
||||
target: [],
|
||||
@ -39,6 +40,7 @@ const state = {
|
||||
stdRate: {
|
||||
target: [],
|
||||
current: [],
|
||||
previous: [],
|
||||
outputNumber:[]
|
||||
},
|
||||
},
|
||||
@ -77,7 +79,7 @@ const mutations = {
|
||||
state.copilot.energy.elecList = payload.elecList;
|
||||
break;
|
||||
case "efficiency":
|
||||
state.copilot.efficiency.chipOee = payload.chipOee;
|
||||
state.copilot.efficiency.chipOeeRate = payload.chipOeeRate;
|
||||
state.copilot.efficiency.transformRate = payload.transformRate;
|
||||
state.copilot.efficiency.chipRate = payload.chipRate;
|
||||
state.copilot.efficiency.stdRate = payload.stdRate;
|
||||
@ -97,7 +99,7 @@ const actions = {
|
||||
commit("SET_HOME_INFO", payload);
|
||||
},
|
||||
/** 初始化驾驶舱数据 */
|
||||
async initCopilot({ commit }, { period, source }) {
|
||||
async initCopilot({ commit }, { period,source,than}) {
|
||||
// if (source == "energy") return;
|
||||
|
||||
const fetcher = {
|
||||
@ -111,25 +113,27 @@ const actions = {
|
||||
efficiency: splitCurrentAndPreviousA,
|
||||
}[source]
|
||||
// 获取产量数据
|
||||
let { data: factoryList, type } = await fetcher(period)
|
||||
let targetList = null;
|
||||
if (source === "yield" || source === "efficiency") {
|
||||
// 获取目标数据
|
||||
let { data } = await fetcher(period, true)
|
||||
targetList = data
|
||||
}
|
||||
if (source == "energy") {
|
||||
let factoryData = factoryList
|
||||
const payload = handler(factoryData)
|
||||
commit("SET_COPILOT_INFO", { type, payload });
|
||||
} else {
|
||||
let { data: factoryList, type } = await fetcher(period,than)
|
||||
// let targetList = null;
|
||||
// if (source === "yield" || source === "efficiency") {
|
||||
// // 获取目标数据
|
||||
// let { data } = await fetcher(period,than, true)
|
||||
// targetList = data
|
||||
// }
|
||||
// if (source == "energy") {
|
||||
// let factoryData = factoryList
|
||||
// const payload = handler(factoryData)
|
||||
// commit("SET_COPILOT_INFO", { type, payload });
|
||||
// } else {
|
||||
let factoryData = factoryList.prodOutputOutDO ? factoryList.prodOutputOutDO : factoryList.prodOutputRateDO
|
||||
let preData = factoryList.previousProdOutputOutDO ? factoryList.previousProdOutputOutDO : factoryList.previousProdOutputRateDO
|
||||
let preFtoData = factoryList.previousProdOutputFtoDO ? factoryList.previousProdOutputFtoDO : []
|
||||
let prodOutputFtoDO = factoryList.prodOutputFtoDO ? factoryList.prodOutputFtoDO : []
|
||||
let targetData = targetList.prodTargetDO ? targetList.prodTargetDO : targetList.prodTargetDO
|
||||
const payload = handler(factoryData, targetData,prodOutputFtoDO)
|
||||
let targetData = factoryList.prodTargetOutputDO ? factoryList.prodTargetOutputDO : factoryList.prodTargetRateDO
|
||||
const payload = handler(factoryData,targetData,prodOutputFtoDO,preData,preFtoData)
|
||||
commit("SET_COPILOT_INFO", { type, payload });
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
},
|
||||
};
|
||||
@ -281,11 +285,11 @@ function splitCurrentAndPreviousB(factoryListResponse) {
|
||||
}
|
||||
}
|
||||
|
||||
function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
|
||||
// console.log('工厂',factoryListResponse);
|
||||
function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
|
||||
console.log('工厂',targetListResponse);
|
||||
|
||||
// 初始数据
|
||||
const { chipOee, transformRate, chipRate, stdRate } = initA();
|
||||
const { chipOeeRate, transformRate, chipRate, stdRate } = initA();
|
||||
// factoryListResponse = [
|
||||
// {
|
||||
// factory: 0,
|
||||
@ -336,6 +340,23 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
|
||||
// componentYieldRate: 0.73,
|
||||
// },
|
||||
// ];
|
||||
if (preData && preData[0] != null) {
|
||||
for (const factory of preData) {
|
||||
const fId = getPreFactoryId(factory);
|
||||
chipInvest.previous[fId] = factory.previousYearInputNumber;
|
||||
// chipOeeRate.current[fId] = factory.oee;
|
||||
chipOeeRate.previous[fId] = factory.previousYearOee;
|
||||
// 转化效率
|
||||
transformRate.previous[fId] =factory.previousYearComponentConversionEfficiency ;
|
||||
// 芯片良率 与 标准组件良率
|
||||
if (![0, 1].includes(factory.glassType)) continue;
|
||||
const _t = [chipRate, stdRate][factory.glassType]
|
||||
// _t.current[fId] = factory.yieldRate ;
|
||||
_t.previous[fId] = factory.previousYearYieldRate ;
|
||||
// }
|
||||
// debugger;
|
||||
}
|
||||
}
|
||||
if (factoryListResponse) {
|
||||
for (const factory of factoryListResponse) {
|
||||
const fId = getFactoryId(factory);
|
||||
@ -347,27 +368,27 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
|
||||
chipOee,
|
||||
componentConversionEfficiency,
|
||||
componentYield
|
||||
} = getFactoryTargetValueA(targetListResponse, fId);
|
||||
} = getFactoryTargetValueA(targetListResponse, fId)
|
||||
stdRate.target[fId] = componentYieldRate
|
||||
chipRate.target[fId] = chipYieldRate
|
||||
chipOeeRate.target[fId] = chipOee
|
||||
transformRate.target[fId] = componentConversionEfficiency
|
||||
}
|
||||
// 芯片OEE
|
||||
chipOee.current[fId] = factory.oee * 100 ;
|
||||
chipOee.previous[fId] = factory.previousYearOee * 100 ;
|
||||
chipOeeRate.current[fId] = factory.oee;
|
||||
// chipOeeRate.previous[fId] = factory.previousYearOee;
|
||||
// 转化效率
|
||||
transformRate.current[fId] =
|
||||
factory.componentConversionEfficiency * 100 ;
|
||||
transformRate.previous[fId] =
|
||||
factory.previousYearComponentConversionEfficiency * 100 ;
|
||||
transformRate.current[fId] = factory.componentConversionEfficiency;
|
||||
// transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency ;
|
||||
// 芯片良率 与 标准组件良率
|
||||
if (![0, 1].includes(factory.glassType)) continue;
|
||||
const _t = [chipRate, stdRate][factory.glassType]
|
||||
_t.current[fId] = factory.yieldRate ;
|
||||
_t.previous[fId] = factory.previousYearYieldRate ;
|
||||
// _t.previous[fId] = factory.previousYearYieldRate ;
|
||||
}
|
||||
|
||||
// console.log('chipOeeRate',chipOeeRate);
|
||||
return {
|
||||
chipOee,
|
||||
chipOeeRate,
|
||||
transformRate,
|
||||
chipRate,
|
||||
stdRate,
|
||||
@ -375,21 +396,57 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
|
||||
}
|
||||
}
|
||||
|
||||
function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes) {
|
||||
console.log('prodOutputFtoListRes',prodOutputFtoListRes);
|
||||
function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) {
|
||||
console.log('prodOutputFtoListRes',preData);
|
||||
// 初始数据
|
||||
const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init()
|
||||
if (prodOutputFtoListRes) {
|
||||
for (const factory of prodOutputFtoListRes) {
|
||||
console.log(factory);
|
||||
const fId = getFactoryId(factory);
|
||||
// const preFId = getPreFactoryId(factory);
|
||||
// if (fId) {
|
||||
ftoInvest.current[fId] = factory.chipInput;
|
||||
// }
|
||||
// if (preFId) {
|
||||
// ftoInvest.previous[fId] = factory.previousYearChipInput;
|
||||
// }
|
||||
}
|
||||
}
|
||||
if (preFtoData) {
|
||||
for (const factory of preFtoData) {
|
||||
console.log(factory);
|
||||
const fId = getPreFactoryId(factory);
|
||||
// const preFId = getPreFactoryId(factory);
|
||||
// if (fId) {
|
||||
ftoInvest.previous[fId] = factory.previousYearChipInput;
|
||||
// }
|
||||
// if (preFId) {
|
||||
// ftoInvest.previous[fId] = factory.previousYearChipInput;
|
||||
// }
|
||||
}
|
||||
}
|
||||
if (factoryListResponse) {
|
||||
if (preData && preData[0] != null) {
|
||||
for (const factory of preData) {
|
||||
const fId = getPreFactoryId(factory);
|
||||
chipInvest.previous[fId] = factory.previousYearInputNumber;
|
||||
if (![0, 1, 2].includes(factory.previousGlassType)) continue;
|
||||
const _t = [chipOutput, stdOutput, bipvOutput][factory.previousGlassType];
|
||||
// if (fId) {
|
||||
// _t.current[fId] = factory.outputNumber;
|
||||
// }
|
||||
// if (preFId) {
|
||||
_t.previous[fId] = factory.previousYearOutputNumber
|
||||
// }
|
||||
// debugger;
|
||||
}
|
||||
}
|
||||
// console.log('ftoInvest',ftoInvest)
|
||||
if (factoryListResponse && factoryListResponse[0] != null) {
|
||||
for (const factory of factoryListResponse) {
|
||||
const fId = getFactoryId(factory);
|
||||
// const preFId = getPreFactoryId(factory);
|
||||
|
||||
// 获取目标值
|
||||
if (targetListResponse) {
|
||||
const { chipYield, componentYield, bipvProductOutput } =
|
||||
@ -400,22 +457,13 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
|
||||
}
|
||||
// 芯片投入
|
||||
chipInvest.current[fId] = factory.inputNumber;
|
||||
chipInvest.previous[fId] = factory.previousYearInputNumber;
|
||||
// FTO投入
|
||||
// if (factory.chipInput || factory.previousYearChipInput) {
|
||||
// ftoInvest.current[fId] = factory.chipInput;
|
||||
// ftoInvest.previous[fId] = factory.previousYearChipInput;
|
||||
// }
|
||||
|
||||
// 产出数据, 0 - （玻璃）芯片产出， 1 - 标准组件产出， 2 - BIPV产出
|
||||
// 因为后端写的垃圾数据，所以这里要做一下判断
|
||||
if (![0, 1, 2].includes(factory.glassType)) continue;
|
||||
const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType];
|
||||
_t.current[fId] = factory.outputNumber;
|
||||
_t.previous[fId] = factory.previousYearOutputNumber;
|
||||
// debugger;
|
||||
}
|
||||
|
||||
return {
|
||||
chipInvest,
|
||||
// ftoInvest,
|
||||
@ -424,27 +472,39 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu
|
||||
stdOutput,
|
||||
bipvOutput,
|
||||
};
|
||||
}else{
|
||||
return {
|
||||
chipInvest,
|
||||
// ftoInvest,
|
||||
ftoInvest,
|
||||
chipOutput,
|
||||
stdOutput,
|
||||
bipvOutput,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getFactoryId(factory) {
|
||||
return factory.factory;
|
||||
}
|
||||
function getPreFactoryId(factory) {
|
||||
return factory.previousFactory;
|
||||
}
|
||||
|
||||
function getFactoryTargetValue(targetList, factoryId) {
|
||||
const target = targetList.find((item) => item.factory === factoryId);
|
||||
if (target) {
|
||||
return {
|
||||
// 自带模拟数据了.... random_default
|
||||
chipYield: target.chipYield ?? random_default(),
|
||||
componentYield: target.componentYield ?? random_default(),
|
||||
bipvProductOutput: target.bipvProductOutput ?? random_default(),
|
||||
chipYield: target.chipYield ?? 0,
|
||||
componentYield: target.componentYield ?? 0,
|
||||
bipvProductOutput: target.bipvProductOutput ?? 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
chipYield: random_default(),
|
||||
componentYield: random_default(),
|
||||
bipvProductOutput: random_default(),
|
||||
chipYield: 0,
|
||||
componentYield: 0,
|
||||
bipvProductOutput: 0,
|
||||
};
|
||||
}
|
||||
|
||||
@ -458,15 +518,18 @@ function getFactoryTargetValueA(targetList, factoryId) {
|
||||
const target = targetList.find((item) => item.factory === factoryId)
|
||||
if (target) {
|
||||
return {
|
||||
chipYieldRate: target.chipYieldRate ?? random_default(),
|
||||
componentYieldRate: target.componentYieldRate ?? random_default(),
|
||||
componentYield: target.componentYield ?? random_default(),
|
||||
chipYieldRate: target.chipYieldRate ?? 0,
|
||||
componentYieldRate: target.componentYieldRate ?? 0,
|
||||
componentYield: target.componentYield ?? 0,
|
||||
// componentYield: target.componentYield ?? 0,
|
||||
chipOee: target.chipOee ?? 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
chipYieldRate:0,
|
||||
componentYieldRate:0,
|
||||
componentYield: 0,
|
||||
chipOee:0,
|
||||
};
|
||||
}
|
||||
|
||||
@ -480,18 +543,18 @@ function initA() {
|
||||
previous: Array(7).fill(0),
|
||||
};
|
||||
// 芯片OEE
|
||||
const chipOee = deepClone(t_);
|
||||
// 转化效率
|
||||
const transformRate = deepClone(t_);
|
||||
// 标准组件良率
|
||||
const stdRate = {
|
||||
...deepClone(t_),
|
||||
target: Array(7).fill(0),
|
||||
};
|
||||
// 芯片良率
|
||||
const transformRate = deepClone(stdRate);
|
||||
const chipRate = deepClone(stdRate);
|
||||
const chipOeeRate = deepClone(stdRate);
|
||||
return {
|
||||
chipOee,
|
||||
chipOeeRate,
|
||||
transformRate,
|
||||
chipRate,
|
||||
stdRate,
|
||||
@ -544,6 +607,7 @@ async function getHomeInfo() {
|
||||
const { code, data } = await axios.post("ip/prod-output/cockpitData", {
|
||||
factorys: [],
|
||||
date: 4,
|
||||
mode:0
|
||||
});
|
||||
if (code == 0) {
|
||||
return data;
|
||||
@ -609,16 +673,16 @@ async function doFetch(copilot_module = "yield", fetch_target, params) {
|
||||
* @param {*} target 是否获取目标数据
|
||||
* @returns
|
||||
*/
|
||||
function getCopilotYield(period, target = false) {
|
||||
return getCopilotData("yield", period, target);
|
||||
function getCopilotYield(period,than,target = false) {
|
||||
return getCopilotData("yield", period,than, target);
|
||||
}
|
||||
|
||||
function getCopilotEnergy(period, target = false) {
|
||||
return getCopilotData("energy", period, target);
|
||||
return getCopilotData("energy", period,than, target);
|
||||
}
|
||||
|
||||
function getCopilotEfficiency(period, target = false) {
|
||||
return getCopilotData("efficiency", period, target);
|
||||
function getCopilotEfficiency(period,than, target = false) {
|
||||
return getCopilotData("efficiency", period,than, target);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -627,12 +691,13 @@ function getCopilotEfficiency(period, target = false) {
|
||||
* @param {*} target 是否获取目标数据：默认 否
|
||||
* @returns
|
||||
*/
|
||||
async function getCopilotData(copilot_module, period, target = false) {
|
||||
async function getCopilotData(copilot_module, period,than, target = false) {
|
||||
if (!copilot_module) copilot_module = "yield";
|
||||
// 请求参数，直接一次性获取所有工厂
|
||||
let queryParams = {
|
||||
factorys: [],
|
||||
date: 4,
|
||||
mode:0
|
||||
};
|
||||
|
||||
switch (period) {
|
||||
@ -652,7 +717,14 @@ async function getCopilotData(copilot_module, period, target = false) {
|
||||
queryParams.date = 1;
|
||||
break;
|
||||
}
|
||||
|
||||
switch (than) {
|
||||
case "同比":
|
||||
queryParams.mode = 0;
|
||||
break;
|
||||
case "环比":
|
||||
queryParams.mode = 1;
|
||||
break;
|
||||
}
|
||||
return {
|
||||
data: await doFetch(copilot_module, target ? true : false, queryParams),
|
||||
type: copilot_module,
|
||||
|
||||
@ -71,6 +71,45 @@ export const SystemDataScopeEnum = {
|
||||
DEPT_SELF: 5 // 仅本人数据权限
|
||||
}
|
||||
|
||||
/**
|
||||
* 工厂名称
|
||||
*/
|
||||
export const factoryList =['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司']
|
||||
|
||||
export const dhgfactoryList =[
|
||||
{
|
||||
name: '瑞昌中建材光电材料有限公司',
|
||||
id: 0
|
||||
},
|
||||
{
|
||||
name: '邯郸中建材光电材料有限公司',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
name: '中建材株洲光电材料有限公司',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: '佳木斯中建材光电材料有限公司',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
name: '成都中建材光电材料有限公司',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
name: '蚌埠兴科玻璃有限公司',
|
||||
id: 6
|
||||
}
|
||||
]
|
||||
|
||||
export const tyjxfactoryList =[
|
||||
{
|
||||
name: '凯盛光伏材料有限公司',
|
||||
id: 5
|
||||
}
|
||||
]
|
||||
|
||||
/**
|
||||
* 代码生成模板类型
|
||||
*/
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<span v-for="item in legend" :key="item.label" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="chart" :style="{ height: '95%',width: width}"></div>
|
||||
<div ref="chart" style="height:94%;width:100%"></div>
|
||||
</chart-container>
|
||||
</template>
|
||||
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: '',
|
||||
width: '100%',
|
||||
isFullscreen: false,
|
||||
actualOptions: null,
|
||||
options: {
|
||||
@ -184,16 +184,7 @@ export default {
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
isOpen(val) {
|
||||
// console.log(val)
|
||||
if (val === true) {
|
||||
console.log('ztl')
|
||||
this.width = 95 + '%'
|
||||
this.canvasReset()
|
||||
|
||||
console.log(this.width)
|
||||
} else {
|
||||
this.watch = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
},
|
||||
isFullscreen(val) {
|
||||
this.actualOptions.series.map((item) => {
|
||||
@ -203,21 +194,14 @@ export default {
|
||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions);
|
||||
if (val === false && this.isOpen === true) {
|
||||
console.log(val)
|
||||
this.width = 97 + '%'
|
||||
this.canvasReset()
|
||||
} else if (val === false && this.isOpen === false) {
|
||||
this.watch = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions);
|
||||
// this.initChart(this.actualOptions);
|
||||
this.canvasReset()
|
||||
},
|
||||
series(val) {
|
||||
if (!val) {
|
||||
|
||||
@ -10,15 +10,19 @@
|
||||
<section class="menu">
|
||||
<CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active"
|
||||
@click="() => $emit('update:active', i)" />
|
||||
<div class="type-name"></div>
|
||||
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
|
||||
@click="() => $emit('update:than', i)" />
|
||||
</section>
|
||||
<div class="page-title">{{ active }}驾驶舱</div>
|
||||
<section class="menu">
|
||||
<section class="menu" 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">
|
||||
<button type="button" class="export-btn" />
|
||||
<button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
|
||||
@click="toggleFullScreen" />
|
||||
<!-- <button class="times-btn"> {{ times }} </button> -->
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@ -38,14 +42,61 @@ export default {
|
||||
period: {
|
||||
type: String,
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
times:'',
|
||||
isFullscreen: false,
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.getTimes()
|
||||
this.getTimesInterval();
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
getTimes() {
|
||||
setInterval(this.getTimesInterval, 60000);
|
||||
},
|
||||
getTimesInterval() {
|
||||
var now = new Date();
|
||||
var weekDay = now.getDay();
|
||||
var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
|
||||
var week = weeks[weekDay]
|
||||
let _this = this;
|
||||
let year = new Date().getFullYear(); //获取当前时间的年份
|
||||
let month = new Date().getMonth() + 1; //获取当前时间的月份
|
||||
let day = new Date().getDate(); //获取当前时间的天数
|
||||
let hours = new Date().getHours(); //获取当前时间的小时
|
||||
let minutes = new Date().getMinutes(); //获取当前时间的分数
|
||||
// let seconds = new Date().getSeconds(); //获取当前时间的秒数
|
||||
//当小于 10 的是时候，在前面加 0
|
||||
if (hours < 10) {
|
||||
hours = '0' + hours;
|
||||
}
|
||||
if (minutes < 10) {
|
||||
minutes = '0' + minutes;
|
||||
}
|
||||
// if (seconds < 10) {
|
||||
// seconds = '0' + seconds;
|
||||
// }
|
||||
//拼接格式化当前时间
|
||||
this.times =
|
||||
|
||||
year +
|
||||
'.' +
|
||||
month +
|
||||
'.' +
|
||||
day +
|
||||
" " + hours +
|
||||
'.' +
|
||||
minutes +
|
||||
'.' +
|
||||
week
|
||||
},
|
||||
toggleFullScreen() {
|
||||
this.isFullscreen = !this.isFullscreen;
|
||||
screenfull.toggle(document.querySelector(".copilot-layout"))
|
||||
@ -68,10 +119,11 @@ export default {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.copilot-header > section {
|
||||
width: 24vw;
|
||||
width: 26vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@ -85,6 +137,17 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.times-btn {
|
||||
width: 240px;
|
||||
height: 32px;
|
||||
margin-left: 24px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
float: right;
|
||||
/* margin-bottom: 20px; */
|
||||
}
|
||||
.export-btn {
|
||||
background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
@ -98,9 +161,20 @@ export default {
|
||||
background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.type-name {
|
||||
/* content: ""; */
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 59px;
|
||||
border: 1px solid;
|
||||
opacity: 0.9;
|
||||
border-image: linear-gradient(180deg, rgba(0, 176, 243, 0), rgba(88, 194, 255, 1), rgba(0, 120, 228, 0)) 2 2;
|
||||
/* position: absolute; */
|
||||
/* left: 0; */
|
||||
/* top: 10px; */
|
||||
}
|
||||
.page-title {
|
||||
flex: 1;
|
||||
width: 25vw;
|
||||
font-size: 54px;
|
||||
line-height: 70px;
|
||||
letter-spacing: 5px;
|
||||
@ -108,5 +182,6 @@ export default {
|
||||
color: #6db6ff;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
background: url(../../../assets/images/homeindex/page-title.png) 0 0 / 100% 100% no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,39 +1,30 @@
|
||||
<template>
|
||||
<div class="factory-header">
|
||||
<section class="menu1">
|
||||
<FactorySelect
|
||||
:companyName="companyName"
|
||||
:companyId="companyId"
|
||||
@updateCompany="updateCompany"
|
||||
/>
|
||||
</section>
|
||||
<section class="menu2">
|
||||
<CopilotButton
|
||||
v-for="i in ['日', '周', '月', '年']"
|
||||
:key="i"
|
||||
:label="i"
|
||||
:active="i === period"
|
||||
@click="() => $emit('update:period', i)"
|
||||
/>
|
||||
<!-- <CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active"
|
||||
@click="() => $emit('update:active', i)" />
|
||||
<div class="type-name"></div> -->
|
||||
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
|
||||
@click="() => $emit('update:than', i)" />
|
||||
<div class="btn-group">
|
||||
<button type="button" class="export-btn" />
|
||||
<button
|
||||
type="button"
|
||||
class="fullscreen-btn"
|
||||
:class="[isFullscreen ? 'exit-fullscreen' : '']"
|
||||
@click="toggleFullScreen"
|
||||
/>
|
||||
<button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
|
||||
@click="toggleFullScreen" />
|
||||
</div>
|
||||
</section>
|
||||
<div class="page-title">{{ companyName }}</div>
|
||||
<section class="menu2">
|
||||
<CopilotButton v-for="i in dataList" :key="i.id" :label="i.name" :active="i.id === period"
|
||||
@click="() => $emit('update:period', i.id)" />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CopilotButton from "./button.vue";
|
||||
// import CopilotButton from "./button.vue";
|
||||
import FactorySelect from "./FactorySelect.vue";
|
||||
import screenfull from "screenfull";
|
||||
|
||||
import CopilotButton from "./button.vue";
|
||||
export default {
|
||||
name: "FactoryDataHeader",
|
||||
components: { CopilotButton, FactorySelect },
|
||||
@ -42,15 +33,24 @@ export default {
|
||||
type: String,
|
||||
},
|
||||
companyId: {
|
||||
type: String,
|
||||
type: Number,
|
||||
},
|
||||
period: {
|
||||
type: Number,
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullscreen: false,
|
||||
dataList: [
|
||||
{ id: 1, name: "日" },
|
||||
{ id: 2, name: "周" },
|
||||
{ id: 3, name: "月" },
|
||||
{ id: 4, name: "年" },
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
@ -84,13 +84,13 @@ export default {
|
||||
}
|
||||
|
||||
.factory-header > .menu1 {
|
||||
width: 24vw;
|
||||
/* display: flex;
|
||||
width: 20vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px; */
|
||||
gap: 8px;
|
||||
}
|
||||
.factory-header > .menu2 {
|
||||
width: 30vw;
|
||||
width: 26vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@ -119,13 +119,14 @@ export default {
|
||||
}
|
||||
|
||||
.page-title {
|
||||
flex: 1;
|
||||
flex: 1 1 auto;
|
||||
font-size: 40px;
|
||||
line-height: 70px;
|
||||
letter-spacing: 5px;
|
||||
font-family: 优设标题黑;
|
||||
color: #6db6ff;
|
||||
text-align: right;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
background: url(../../../assets/images/homeindex/page-title-two.png) 0 0 / 100% 100% no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -26,20 +26,20 @@ export default {
|
||||
type: String,
|
||||
},
|
||||
companyId: {
|
||||
type: String,
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isOpen: false,
|
||||
company: [
|
||||
{ id: "1", name: "瑞昌中建材光电材料有限公司" },
|
||||
{ id: "2", name: "邯郸中建材光电材料有限公司" },
|
||||
{ id: "3", name: "株洲中建材光电材料有限公司" },
|
||||
{ id: "4", name: "佳木斯中建材光电材料有限公司" },
|
||||
{ id: "5", name: "成都中建材光电材料有限公司" },
|
||||
{ id: "6", name: "凯盛中建材光电材料有限公司" },
|
||||
{ id: "7", name: "蚌埠中建材光电材料有限公司" },
|
||||
{ id: 0, name: "瑞昌中建材光电材料有限公司" },
|
||||
{ id: 1, name: "邯郸中建材光电材料有限公司" },
|
||||
{ id: 2, name: "株洲中建材光电材料有限公司" },
|
||||
{ id: 3, name: "佳木斯中建材光电材料有限公司" },
|
||||
{ id: 4, name: "成都中建材光电材料有限公司" },
|
||||
{ id: 5, name: "凯盛中建材光电材料有限公司" },
|
||||
{ id: 6, name: "蚌埠中建材光电材料有限公司" },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
@ -367,7 +367,7 @@ export default {
|
||||
this.canvasReset()
|
||||
console.log(this.width)
|
||||
} else {
|
||||
this.watch = 100 + '%'
|
||||
this.width = 100 + '%'
|
||||
this.canvasReset()
|
||||
|
||||
}
|
||||
@ -378,7 +378,7 @@ export default {
|
||||
this.width = 97 + '%'
|
||||
this.canvasReset()
|
||||
} else if (val === false && this.isOpen === false) {
|
||||
this.watch = 100 + '%'
|
||||
this.width = 100 + '%'
|
||||
this.canvasReset()
|
||||
|
||||
}
|
||||
|
||||
@ -365,7 +365,7 @@ export default {
|
||||
|
||||
console.log(this.width)
|
||||
} else {
|
||||
this.watch = 100 + '%'
|
||||
this.width = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
},
|
||||
@ -376,7 +376,7 @@ export default {
|
||||
this.width = 97 + '%'
|
||||
this.canvasReset()
|
||||
} else if(val === false && this.isOpen === false) {
|
||||
this.watch = 100 + '%'
|
||||
this.width = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
// this.actualOptions.series.map((item) => {
|
||||
|
||||
27
src/views/copilot/components/NotMsg.vue
Normal file
27
src/views/copilot/components/NotMsg.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="notmsg">暂无数据</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NotMsg',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.notmsg {
|
||||
padding-top: 72px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
298
src/views/copilot/components/ftoBarChartBase.vue
Normal file
298
src/views/copilot/components/ftoBarChartBase.vue
Normal file
@ -0,0 +1,298 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-23 15:49:14
|
||||
* @LastEditTime: 2024-05-29 10:56:21
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<!--
|
||||
filename: BarChartBase.vue
|
||||
author: liubin
|
||||
date: 2024-04-10 08:59:28
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<chart-container class="bar-chart-base">
|
||||
<div class="legend">
|
||||
<span v-for="item in legend" :key="item.label" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="ftoChart" style="height:94%;width:100%"></div>
|
||||
</chart-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import screenfull from "screenfull";
|
||||
import ChartContainer from "./ChartContainer.vue";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
// import chartMixin from "@/mixins/chart.js";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "BarChartBase",
|
||||
components: {
|
||||
ChartContainer,
|
||||
},
|
||||
// mixins: [chartMixin],
|
||||
props: {
|
||||
vHeight: {
|
||||
type: Number,
|
||||
default: 34,
|
||||
},
|
||||
legend: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
in: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: '100%',
|
||||
isFullscreen: false,
|
||||
actualOptions: null,
|
||||
options: {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
top: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: this.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/片",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "", // this.series[0].name,
|
||||
type: "bar",
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#12f7f1", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.35,
|
||||
color: "#12f7f177", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.75,
|
||||
color: "#12f7f133", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "transparent", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
data: [], // this.series[0].data,
|
||||
},
|
||||
{
|
||||
name: "", // this.series[1].name,
|
||||
type: "bar",
|
||||
barWidth: 12,
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value) {
|
||||
// return value + " ml";
|
||||
// },
|
||||
// },
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#57abf8", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#364BFE66", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
data: [], // this.series[1].data,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isOpen() {
|
||||
return this.$store.getters.sidebar.opened
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
isOpen(val) {
|
||||
// console.log(val)
|
||||
this.canvasReset()
|
||||
},
|
||||
isFullscreen(val) {
|
||||
this.actualOptions.series.map((item) => {
|
||||
item.barWidth = val ? 18 : 12;
|
||||
});
|
||||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions);
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// this.initChart(this.actualOptions);
|
||||
this.canvasReset()
|
||||
},
|
||||
series(val) {
|
||||
if (!val) {
|
||||
this.initChart(this.options);
|
||||
return;
|
||||
}
|
||||
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||
console.log('actualOptions', this.options)
|
||||
actualOptions.series[0].data = val[0].data;
|
||||
actualOptions.series[0].name = val[0].name;
|
||||
actualOptions.series[1].data = val[1].data;
|
||||
actualOptions.series[1].name = val[1].name;
|
||||
this.actualOptions = actualOptions;
|
||||
this.initChart(actualOptions);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on("change", () => {
|
||||
this.isFullscreen = screenfull.isFullscreen;
|
||||
});
|
||||
}
|
||||
this.actualOptions = this.options
|
||||
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() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.ftoChart);
|
||||
this.chart.setOption(this.actualOptions);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bar-chart-base {
|
||||
// position: relative;
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 5.2vh;
|
||||
right: 1vw;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
position: relative;
|
||||
// font-size: 12px;
|
||||
margin-right: 0.67vw;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.531vw;
|
||||
height: 0.531vw;
|
||||
background-color: #ccc;
|
||||
border-radius: 2px;
|
||||
margin-right: 0.22vw;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-item:nth-child(1):before {
|
||||
background-color: #12f7f1;
|
||||
}
|
||||
|
||||
.legend-item:nth-child(2):before {
|
||||
background-color: #58adfa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-13 14:08:51
|
||||
* @LastEditTime: 2024-05-17 09:37:01
|
||||
* @LastEditTime: 2024-05-23 15:18:53
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -191,7 +191,7 @@ export default {
|
||||
console.log(this.width)
|
||||
} else {
|
||||
console.log('ryf')
|
||||
this.watch = 100 + '%'
|
||||
this.width = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
},
|
||||
@ -201,7 +201,7 @@ export default {
|
||||
this.width = 97 + '%'
|
||||
this.canvasReset()
|
||||
} else if (val === false && this.isOpen === false) {
|
||||
this.watch = 100 + '%'
|
||||
this.width = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
// this.actualOptions.series.map((item) => {
|
||||
|
||||
@ -8,9 +8,10 @@
|
||||
<template>
|
||||
<!-- <div class="copilot-layout" ref="copilot-layout"> -->
|
||||
<div class="copilot-layout produce" ref="copilot-layout">
|
||||
<CopilotHeaderVue :active="page" :period="period" @update:active="updateActive" @update:period="period = $event" />
|
||||
<CopilotHeaderVue :than="than" :active="page" :period="period" @update:active="updateActive" @update:period="period = $event"
|
||||
@update:than="updateThan" />
|
||||
|
||||
<YieldCopilot :period="period" />
|
||||
<YieldCopilot :period="period" :than="than" />
|
||||
<!-- <EnergyCopilot v-if="page == '综合'" :period="period" /> -->
|
||||
<!-- <EfficiencyCopilot v-if="page == '效率'" :period="period" /> -->
|
||||
<div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
@ -20,25 +21,31 @@
|
||||
<script>
|
||||
import CopilotHeaderVue from "./components/CopilotHeader.vue";
|
||||
import YieldCopilot from "./yield/index.vue";
|
||||
import EnergyCopilot from "./energy/index.vue";
|
||||
import EfficiencyCopilot from "./efficiency/index.vue";
|
||||
// import EnergyCopilot from "./energy/index.vue";
|
||||
// import EfficiencyCopilot from "./efficiency/index.vue";
|
||||
|
||||
export default {
|
||||
name: "CopilotContainer",
|
||||
components: {
|
||||
CopilotHeaderVue,
|
||||
YieldCopilot,
|
||||
EnergyCopilot,
|
||||
EfficiencyCopilot,
|
||||
// EnergyCopilot,
|
||||
// EfficiencyCopilot,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: "产量",
|
||||
period: "日",
|
||||
than:'同比',
|
||||
currentsStyles: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateActive(val, oldVal) {
|
||||
console.log(val)
|
||||
if (val === '效率') {
|
||||
|
||||
@ -25,6 +25,14 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
chipOeeRate: {
|
||||
type: Object,
|
||||
default:{}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// 城市数组的顺序必须是固定的
|
||||
@ -35,78 +43,236 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
legend() {
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
return [{ label: "昨日", color: "#12f7f1" }];
|
||||
case "周":
|
||||
return [{ label: "本周", color: "#12f7f1" }];
|
||||
case "月": {
|
||||
const year = new Date().getFullYear();
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
return [
|
||||
{ label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${year}年${month}月`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
case "年": {
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
return [
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年本周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `上周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${lastMonth}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
default:
|
||||
return [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
|
||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||
];
|
||||
}
|
||||
return items
|
||||
// switch (this.period) {
|
||||
// case "日":
|
||||
// return [{ label: "昨日", color: "#12f7f1" }];
|
||||
// case "周":
|
||||
// return [{ label: "本周", color: "#12f7f1" }];
|
||||
// case "月": {
|
||||
// const year = new Date().getFullYear();
|
||||
// const month = new Date().getMonth() + 1;
|
||||
// return [
|
||||
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
// { label: `${year}年${month}月`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// case "年": {
|
||||
// const year = new Date().getFullYear();
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// default:
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
},
|
||||
// chipOeeRate() {
|
||||
// return this.$store.getters.copilot.efficiency.chipOeeRate
|
||||
// },
|
||||
series() {
|
||||
// console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
|
||||
const { chipOee } = this.$store.getters.copilot.efficiency;
|
||||
let dataList = null;
|
||||
const chipOeeRate = this.chipOeeRate
|
||||
// console.log('chipOee', chipOeeRate)
|
||||
let dataList = null
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
dataList = [];
|
||||
dataList[0] = chipOeeRate?.previous;
|
||||
dataList[1] = chipOeeRate?.current;
|
||||
case "周":
|
||||
dataList = chipOee?.current;
|
||||
case "周":
|
||||
dataList = chipOee?.current;
|
||||
break;
|
||||
dataList = [];
|
||||
dataList[0] = chipOeeRate?.previous;
|
||||
dataList[1] = chipOeeRate?.current;
|
||||
default:
|
||||
dataList = [];
|
||||
dataList[0] = chipOee?.previous;
|
||||
dataList[1] = chipOee?.current;
|
||||
dataList[0] = chipOeeRate?.previous;
|
||||
dataList[1] = chipOeeRate?.current
|
||||
dataList[2] = chipOeeRate?.target
|
||||
}
|
||||
// console.log(dataList)
|
||||
return getTemplate(this.period, dataList);
|
||||
console.log(dataList)
|
||||
return getTemplate(this.period, dataList,this.than);
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
|
||||
function getTemplate(period, dataList) {
|
||||
const year = new Date().getFullYear();
|
||||
function getTemplate(period, dataList, than) {
|
||||
// console.log('dataList',dataList);
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
// console.log('11111', dataList);
|
||||
return period == "日" || period == "周"
|
||||
? [
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: period == "日" ? "昨日" : "本周",
|
||||
data: dataList ?? [],
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
|
||||
name: `去年${month}月${today}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: period == "年" ? `${year}年` : `${year}年${month}月`,
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `上周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
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)),
|
||||
},
|
||||
];
|
||||
} 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}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{
|
||||
name: `${year - 1}年`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${year}年`,
|
||||
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
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,22 +1,15 @@
|
||||
<!--
|
||||
filename: ChipRate.vue
|
||||
author: liubin
|
||||
date: 2024-04-29 08:50:54
|
||||
description: 芯片良率
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-10 11:10:54
|
||||
* @LastEditTime: 2024-05-29 09:09:43
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="chip-rate">
|
||||
<ChipRateItem
|
||||
:period="period"
|
||||
:cities="['成都', '邯郸', '株洲', '瑞昌']"
|
||||
:color="1"
|
||||
/>
|
||||
<ChipRateItem
|
||||
:period="period"
|
||||
:cities="['佳木斯', '凯盛光伏', '蚌埠兴科']"
|
||||
:color="2"
|
||||
/>
|
||||
<ChipRateItem :period="period" :than="than" :cities="['成都', '邯郸', '株洲', '瑞昌']" :color="1" />
|
||||
<ChipRateItem :period="period" :than="than" :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']" :color="2" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -30,6 +23,10 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: '同比',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:25:10
|
||||
* @LastEditTime: 2024-05-20 10:04:03
|
||||
* @LastEditTime: 2024-05-29 16:10:45
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -12,7 +12,7 @@
|
||||
<StdRateItem :period="period" :city="cities[5]" />
|
||||
</div>
|
||||
<div class="flex-item" v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
|
||||
<StdRateItem :period="period" :city="item" />
|
||||
<StdRateItem :period="period" :than="than" :city="item" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -27,6 +27,10 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
cities() {
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
|
||||
import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue";
|
||||
export default {
|
||||
name: "TransformRate",
|
||||
components: { BarChartBase },
|
||||
@ -25,6 +25,14 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: '同比',
|
||||
},
|
||||
transformRate: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// 城市数组的顺序必须是固定的
|
||||
@ -35,75 +43,227 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
legend() {
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
return [{ label: "昨日", color: "#12f7f1" }];
|
||||
case "周":
|
||||
return [{ label: "本周", color: "#12f7f1" }];
|
||||
case "月": {
|
||||
const year = new Date().getFullYear();
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
return [
|
||||
{ label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${year}年${month}月`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
case "年": {
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
return [
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年本周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `上周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${lastMonth}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
default:
|
||||
return [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
},
|
||||
series() {
|
||||
const { transformRate } = this.$store.getters.copilot.efficiency;
|
||||
let dataList = null;
|
||||
|
||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||
];
|
||||
}
|
||||
return items
|
||||
},
|
||||
// transformRate() {
|
||||
// return this.$store.getters.copilot.efficiency.transformRate
|
||||
// },
|
||||
series() {
|
||||
// console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
|
||||
const transformRate = this.transformRate
|
||||
// console.log('chipOee', chipOeeRate)
|
||||
let dataList = null;
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
dataList = [];
|
||||
dataList[0] = transformRate.previous;
|
||||
dataList[1] = transformRate.current;
|
||||
case "周":
|
||||
dataList = transformRate?.current;
|
||||
break;
|
||||
dataList = [];
|
||||
dataList[0] = transformRate.previous;
|
||||
dataList[1] = transformRate.current;
|
||||
default:
|
||||
dataList = [];
|
||||
dataList[0] = transformRate?.previous;
|
||||
dataList[1] = transformRate?.current;
|
||||
dataList[0] = transformRate.previous;
|
||||
dataList[1] = transformRate.current
|
||||
dataList[2] = transformRate.target
|
||||
}
|
||||
|
||||
return getTemplate(this.period, dataList);
|
||||
console.log('transformRate', dataList)
|
||||
return getTemplate(this.period, dataList, this.than);
|
||||
},
|
||||
// series() {
|
||||
// const { transformRate } = this.$store.getters.copilot.efficiency;
|
||||
// let dataList = null;
|
||||
|
||||
// switch (this.period) {
|
||||
// case "日":
|
||||
// case "周":
|
||||
// dataList = transformRate?.current;
|
||||
// break;
|
||||
// default:
|
||||
// dataList = [];
|
||||
// dataList[0] = transformRate?.previous;
|
||||
// dataList[1] = transformRate?.current;
|
||||
// }
|
||||
|
||||
// return getTemplate(this.period, dataList);
|
||||
// },
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
|
||||
function getTemplate(period, dataList) {
|
||||
const year = new Date().getFullYear();
|
||||
function getTemplate(period, dataList,than) {
|
||||
// console.log('dataList',dataList);
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
return period == "日" || period == "周"
|
||||
? [
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: period == "日" ? "昨日" : "本周",
|
||||
data: dataList ?? [],
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
|
||||
name: `去年${month}月${today}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: period == "年" ? `${year}年` : `${year}年${month}月`,
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `上周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
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)),
|
||||
},
|
||||
];
|
||||
} 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}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{
|
||||
name: `${year - 1}年`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${year}年`,
|
||||
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
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 13:22:43
|
||||
* @LastEditTime: 2024-05-14 08:32:44
|
||||
* @LastEditTime: 2024-05-29 14:09:08
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<chart-container class="bar-chart-base">
|
||||
<div class="legend">
|
||||
<span v-for="item in legend" :key="item.label" class="legend-item"
|
||||
<span v-for="(item,index) in legend" :key="index" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="chart" :style="{ height: '100%',width: width}"></div>
|
||||
<div ref="oeeChart" style="height:96%;width:100%"></div>
|
||||
</chart-container>
|
||||
</template>
|
||||
|
||||
@ -171,6 +171,41 @@ 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,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -182,13 +217,7 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
isOpen(val) {
|
||||
if (val === true) {
|
||||
this.width = '100%-128px'
|
||||
this.canvasReset()
|
||||
} else {
|
||||
this.watch = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
},
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
isFullscreen(val) {
|
||||
@ -198,24 +227,47 @@ export default {
|
||||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions);
|
||||
// if (val === false && this.isOpen === true) {
|
||||
// console.log(val)
|
||||
// this.width = 97 + '%'
|
||||
// this.canvasReset()
|
||||
// } else if (val === false && this.isOpen === false) {
|
||||
// this.width = 100 + '%'
|
||||
// this.canvasReset()
|
||||
// }
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions)
|
||||
this.canvasReset()
|
||||
},
|
||||
series(val) {
|
||||
if (!val) {
|
||||
this.initChart(this.options);
|
||||
return;
|
||||
}
|
||||
console.log(val)
|
||||
// console.log('val', val)
|
||||
const actualOptions = JSON.parse(JSON.stringify(this.options))
|
||||
console.log(actualOptions)
|
||||
actualOptions.series[0].data = val[0].data;
|
||||
actualOptions.series[0].name = val[0].name;
|
||||
actualOptions.series[1].data = val?.[1]?.data || [];
|
||||
actualOptions.series[1].name = val?.[1]?.name || "";
|
||||
actualOptions.series[1].data = val?.[1]?.data;
|
||||
actualOptions.series[1].name = val?.[1]?.name;
|
||||
actualOptions.series[2].data = val?.[2]?.data || [];
|
||||
actualOptions.series[2].name = val?.[2]?.name || "";
|
||||
this.actualOptions = actualOptions;
|
||||
this.initChart(actualOptions);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// if (screenfull.isEnabled) {
|
||||
// screenfull.on("change", () => {
|
||||
// this.isFullscreen = screenfull.isFullscreen;
|
||||
// });
|
||||
// }
|
||||
// if (screenfull.isEnabled) {
|
||||
// screenfull.on("change", () => {
|
||||
// this.isFullscreen = screenfull.isFullscreen;
|
||||
@ -243,7 +295,7 @@ export default {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
this.chart = echarts.init(this.$refs.oeeChart);
|
||||
this.chart.setOption(this.actualOptions);
|
||||
},
|
||||
},
|
||||
@ -263,7 +315,7 @@ export default {
|
||||
.legend-item {
|
||||
position: relative;
|
||||
// font-size: 12px;
|
||||
margin-right: 0.67vw;
|
||||
margin-right: 1.3vw;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
@ -275,7 +327,34 @@ export default {
|
||||
margin-right: 0.22vw;
|
||||
}
|
||||
}
|
||||
.legend-item:nth-child(3):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #f3c000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -0.951vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(3):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: -0.851vw;
|
||||
// left: -16px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
.legend-item:nth-child(1):before {
|
||||
background-color: #12f7f1;
|
||||
}
|
||||
|
||||
@ -0,0 +1,366 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-23 15:50:44
|
||||
* @LastEditTime: 2024-05-29 14:25:10
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<chart-container class="bar-chart-base">
|
||||
<div class="legend">
|
||||
<span v-for="(item,index) in legend" :key="index" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="oeeChart" style="height:96%;width:100%"></div>
|
||||
</chart-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import screenfull from "screenfull";
|
||||
import ChartContainer from "../../../../components/ChartContainer.vue";
|
||||
// import chartMixin from "@/mixins/chart.js";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "BarChartBase",
|
||||
components: {
|
||||
ChartContainer,
|
||||
},
|
||||
// mixins: [chartMixin],
|
||||
props: {
|
||||
vHeight: {
|
||||
type: Number,
|
||||
default: 36,
|
||||
},
|
||||
legend: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
in: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: '100%',
|
||||
isFullscreen: false,
|
||||
actualOptions: null,
|
||||
options: {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "0%",
|
||||
bottom: "3%",
|
||||
top: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: this.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/%",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "", // this.series[0].name,
|
||||
type: "bar",
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#12f7f1", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.35,
|
||||
color: "#12f7f177", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.75,
|
||||
color: "#12f7f133", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "transparent", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
data: [], // this.series[0].data,
|
||||
},
|
||||
{
|
||||
name: "", // this.series[1].name,
|
||||
type: "bar",
|
||||
barWidth: 12,
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value) {
|
||||
// return value + " ml";
|
||||
// },
|
||||
// },
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#57abf8", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#364BFE66", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isOpen() {
|
||||
return this.$store.getters.sidebar.opened
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isOpen(val) {
|
||||
this.canvasReset()
|
||||
},
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
isFullscreen(val) {
|
||||
this.actualOptions.series.map((item) => {
|
||||
item.barWidth = val ? 18 : 12;
|
||||
});
|
||||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// if (val === false && this.isOpen === true) {
|
||||
// console.log(val)
|
||||
// this.width = 97 + '%'
|
||||
// this.canvasReset()
|
||||
// } else if (val === false && this.isOpen === false) {
|
||||
// this.width = 100 + '%'
|
||||
// this.canvasReset()
|
||||
// }
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions)
|
||||
// this.canvasReset()
|
||||
},
|
||||
series(val) {
|
||||
if (!val) {
|
||||
this.initChart(this.options);
|
||||
return;
|
||||
}
|
||||
console.log(val)
|
||||
const actualOptions = JSON.parse(JSON.stringify(this.options))
|
||||
actualOptions.series[0].data = val[0].data;
|
||||
actualOptions.series[0].name = val[0].name;
|
||||
actualOptions.series[1].data = val?.[1]?.data || [];
|
||||
actualOptions.series[1].name = val?.[1]?.name || "";
|
||||
actualOptions.series[2].data = val?.[2]?.data || [];
|
||||
actualOptions.series[2].name = val?.[2]?.name || "";
|
||||
this.actualOptions = actualOptions;
|
||||
this.initChart(actualOptions);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// if (screenfull.isEnabled) {
|
||||
// screenfull.on("change", () => {
|
||||
// this.isFullscreen = screenfull.isFullscreen;
|
||||
// });
|
||||
// }
|
||||
// if (screenfull.isEnabled) {
|
||||
// screenfull.on("change", () => {
|
||||
// this.isFullscreen = screenfull.isFullscreen;
|
||||
// });
|
||||
// }
|
||||
this.actualOptions = this.options
|
||||
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() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.oeeChart);
|
||||
this.chart.setOption(this.actualOptions);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bar-chart-base {
|
||||
// position: relative;
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 5.2vh;
|
||||
right: 1vw;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
position: relative;
|
||||
// font-size: 12px;
|
||||
margin-right:1.3vw;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.531vw;
|
||||
height: 0.531vw;
|
||||
background-color: #ccc;
|
||||
border-radius: 2px;
|
||||
margin-right: 0.22vw;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-item:nth-child(1):before {
|
||||
background-color: #12f7f1;
|
||||
}
|
||||
|
||||
.legend-item:nth-child(2):before {
|
||||
background-color: #58adfa;
|
||||
}
|
||||
.legend-item:nth-child(3):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #f3c000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -0.951vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(3):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: -0.851vw;
|
||||
// left: -16px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -13,7 +13,7 @@
|
||||
<!-- <div style="flex:1;padding: 0 20%;"> -->
|
||||
<div class="chart" ref="chart"></div>
|
||||
<!-- </div> -->
|
||||
<div class="legend" v-if="period == '月' || period == '年'">
|
||||
<div class="legend" >
|
||||
<div class="legend-item" v-for="lgd in legend" :key="lgd.label">
|
||||
<span class="legend-item__value">{{ lgd.value }}</span>
|
||||
<span class="legend-item__label">{{ lgd.label }}</span>
|
||||
@ -46,6 +46,10 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: '同比',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -103,21 +107,72 @@ export default {
|
||||
return t;
|
||||
},
|
||||
legend() {
|
||||
const year = new Date().getFullYear();
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
return [
|
||||
{
|
||||
label:
|
||||
this.period == "月"
|
||||
? `${year - 1}年${month}月良率`
|
||||
: `${year - 1}年良率`,
|
||||
value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
|
||||
},
|
||||
{
|
||||
label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
|
||||
value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
|
||||
},
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `去年${month}月${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `去年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `上周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `去年${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
{ label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `${lastMonth}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
{ label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year}年良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
{ label: `${year}年目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
|
||||
];
|
||||
}
|
||||
return items
|
||||
// [
|
||||
// {
|
||||
// label:
|
||||
// this.period == "月"
|
||||
// ? `${year - 1}年${month}月良率`
|
||||
// : `${year - 1}年良率`,
|
||||
// value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
|
||||
// },
|
||||
// {
|
||||
// label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
|
||||
// value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
|
||||
// },
|
||||
// ];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
@ -163,7 +218,9 @@ export default {
|
||||
// width: 290px;
|
||||
align-self: stretch;
|
||||
// flex: 1 1 auto;
|
||||
// padding: 0 10%;
|
||||
align-items: center;
|
||||
// margin:0 auto;
|
||||
// padding: 0 10%;;
|
||||
/* margin: 10%; */
|
||||
/* min-width: 300px; */
|
||||
height: 200px;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="progress-bar" :data-title="titleYear" :data-rate="number">
|
||||
<div class="progress-bar" :data-title="title" :data-rate="value + '%'">
|
||||
<div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
|
||||
</div>
|
||||
</template>
|
||||
@ -20,52 +20,25 @@ export default {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
target: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
goodNumber: {
|
||||
type: Number,
|
||||
default:0
|
||||
},
|
||||
componentYield: {
|
||||
type: Number,
|
||||
default:0
|
||||
},
|
||||
period: {
|
||||
type: String,
|
||||
default:'日',
|
||||
},
|
||||
// total: {
|
||||
// type: Number,
|
||||
// default: 0,
|
||||
// },
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
city: {
|
||||
type: String,
|
||||
default:""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
number: 0,
|
||||
titleYear:'',
|
||||
};
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
dataRate() {
|
||||
if ((this.period === '年' || this.period === '月') && this.target != 0) {
|
||||
// console.log(this.componentYield)
|
||||
this.titleYear = this.title + ' ' + `${(this.target * 100).toFixed(0)}%`
|
||||
} else {
|
||||
this.titleYear = this.title
|
||||
}
|
||||
this.number = this.value == 0
|
||||
? "-"
|
||||
: `${(this.value * 100).toFixed(0)}%`
|
||||
// console.log(this.period)
|
||||
return this.value == 0
|
||||
? "-"
|
||||
: this.value >1 ? 100 + '%' :`${(this.value * 100).toFixed(0)}%`
|
||||
: this.value > 1
|
||||
? 100 + '%'
|
||||
: `${(parseFloat(this.value)).toFixed(0)}%`;
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
@ -95,7 +68,7 @@ export default {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: -200%;
|
||||
right: 10px;
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -104,6 +77,7 @@ export default {
|
||||
color: #11eae3;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&:after {
|
||||
color: #0e65fd;
|
||||
@ -116,17 +90,20 @@ export default {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(to right,
|
||||
#004c5e11 10%,
|
||||
#004c5e,
|
||||
#0ac0c0,
|
||||
#11eae3);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.progress-bar__rate {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
background: linear-gradient(to right,
|
||||
#004c5e11 10%,
|
||||
#004c5e,
|
||||
#0ac0c0,
|
||||
#11eae3
|
||||
);
|
||||
#11eae3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:25:10
|
||||
* @LastEditTime: 2024-05-20 09:46:19
|
||||
* @LastEditTime: 2024-05-29 17:03:00
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -11,28 +11,30 @@
|
||||
<CityName :value="city.name" />
|
||||
<div class="std-rate-item__value">
|
||||
<ProgressBar :period="period" :title="title" :value="city.current" />
|
||||
<!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
|
||||
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="period == '周'" class="std-rate-item">
|
||||
<CityName :value="city.name" />
|
||||
<div class="std-rate-item__value">
|
||||
<ProgressBar :period="period" :title="title" :value="city.current" />
|
||||
<!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
|
||||
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="period == '月'" class="std-rate-item">
|
||||
<CityName :value="city.name" />
|
||||
<div class="std-rate-item__value">
|
||||
<ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
|
||||
<ProgressBar :period="period" :title="title" :value="city.previous" />
|
||||
<ProgressBar :period="period" :title="titleTarget" :value="city.target" />
|
||||
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
|
||||
<ProgressBar :period="period" :title="title" :value="city.current" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else="period == '年'" class="std-rate-item">
|
||||
<CityName :value="city.name" />
|
||||
<div class="std-rate-item__value">
|
||||
<ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
|
||||
<ProgressBar :period="period" :title="title" :value="city.previous" />
|
||||
<ProgressBar :period="period" :title="titleTarget" :value="city.target" />
|
||||
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
|
||||
<ProgressBar :period="period" :title="title" :value="city.current" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -52,7 +54,11 @@ export default {
|
||||
period: {
|
||||
type: String,
|
||||
default: "日",
|
||||
}
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -60,45 +66,66 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
return "今日"
|
||||
case "周":
|
||||
return "本周"
|
||||
case "月":
|
||||
const year = new Date().getFullYear();
|
||||
titlePre() {
|
||||
console.log(this.city);
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
const today = new Date().getDate();
|
||||
const month = new Date().getMonth() + 1;
|
||||
return `${year - 1}年${month}月累计`
|
||||
case "年": {
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
// return [
|
||||
return `${year - 1}年累计`
|
||||
// ];
|
||||
}
|
||||
default:
|
||||
return "今日"
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
return `去年${month}月${today}日`
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
return `${yesterday}日`
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
return `去年本周`
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
return `上周`
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
return `去年${month}月`
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
return `${lastMonth}月`
|
||||
} else {
|
||||
return `${year - 1}年`
|
||||
}
|
||||
},
|
||||
titleEnd() {
|
||||
switch (this.period) {
|
||||
// case "日":
|
||||
// return "今日"
|
||||
// case "周":
|
||||
// return "本周"
|
||||
case "月":
|
||||
const year = new Date().getFullYear();
|
||||
title() {
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
const today = new Date().getDate();
|
||||
const month = new Date().getMonth() + 1;
|
||||
return `${year}年${month}月目标`
|
||||
case "年": {
|
||||
const year = new Date().getFullYear();
|
||||
// return [
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
return `${month}月${today}日`
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
return `${month}月${today}日`
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
return `本周`
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
return `本周`
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
return `${month}月`
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
return `${month}月`
|
||||
} else {
|
||||
return `${year}年`
|
||||
}
|
||||
},
|
||||
titleTarget() {
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
const today = new Date().getDate();
|
||||
const month = new Date().getMonth() + 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === '月') {
|
||||
return `${month}月目标`
|
||||
} else if (this.period === '年') {
|
||||
return `${year}年目标`
|
||||
// ];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:04:53
|
||||
* @LastEditTime: 2024-05-17 17:05:36
|
||||
* @LastEditTime: 2024-05-29 14:24:48
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -9,16 +9,16 @@
|
||||
<template>
|
||||
<div class="efficiency-copilot">
|
||||
<Container title="芯片良率" icon="chip2">
|
||||
<ChipRate :period="period" />
|
||||
<ChipRate :period="period" :than="than" />
|
||||
</Container>
|
||||
<Container title="标准组件良率" icon="std">
|
||||
<StdRate :period="period" />
|
||||
<StdRate :period="period" :than="than" />
|
||||
</Container>
|
||||
<Container title="芯片OEE" icon="chip">
|
||||
<ChipOee :period="period" />
|
||||
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
|
||||
</Container>
|
||||
<Container title="转化效率" icon="cube">
|
||||
<TransformRate :period="period" />
|
||||
<TransformRate :transformRate="transformRate" :period="period" :than="than" />
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
@ -44,25 +44,45 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
chipOeeRate: {},
|
||||
transformRate:{}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
period: {
|
||||
handler(val) {
|
||||
val && this.fetchData(val);
|
||||
val && this.fetchData(val,this.than);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
than: {
|
||||
handler(val) {
|
||||
console.log(val)
|
||||
val && this.fetchData(this.period, val);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fetchData(period = "日") {
|
||||
fetchData(period = "日",than) {
|
||||
console.log(`效率驾驶舱，获取${period}数据`);
|
||||
this.$store.dispatch("copilot/initCopilot", {
|
||||
period,
|
||||
source: "efficiency",
|
||||
});
|
||||
than
|
||||
}).then(() => {
|
||||
this.$nextTick(() => {
|
||||
this.chipOeeRate = this.$store.getters.copilot.efficiency.chipOeeRate
|
||||
this.transformRate = this.$store.getters.copilot.efficiency.transformRate
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -6,7 +6,7 @@ export default ({
|
||||
targetSum,
|
||||
}) => ({
|
||||
grid: {
|
||||
left: 0,
|
||||
left: '50%',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
|
||||
@ -1,18 +1,19 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-20 16:04:18
|
||||
* @LastEditTime: 2024-05-21 09:09:10
|
||||
* @LastEditTime: 2024-05-29 16:08:31
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<!-- <div class="copilot-layout" ref="copilot-layout"> -->
|
||||
<div class="copilot-layout other" ref="copilot-layout">
|
||||
<CopilotHeaderVue :active="page" :period="period" @update:active="updateActive" @update:period="period = $event" />
|
||||
<CopilotHeaderVue :than="than" :active="page" :period="period" @update:active="updateActive"
|
||||
@update:period="period = $event" @update:than="updateThan" />
|
||||
|
||||
<!-- <YieldCopilot v-if="page == '产量'" :period="period" /> -->
|
||||
<!-- <EnergyCopilot v-if="page == '综合'" :period="period" /> -->
|
||||
<EfficiencyCopilot :period="period" />
|
||||
<EfficiencyCopilot :period="period" :than="than" />
|
||||
<div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -27,18 +28,22 @@ export default {
|
||||
name: "CopilotContainer",
|
||||
components: {
|
||||
CopilotHeaderVue,
|
||||
// YieldCopilot,
|
||||
// EnergyCopilot,
|
||||
EfficiencyCopilot,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
than:'同比',
|
||||
page: "效率",
|
||||
period: "日",
|
||||
currentsStyles: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateActive(val, oldVal) {
|
||||
console.log(val)
|
||||
if (val === '效率') {
|
||||
@ -109,7 +114,7 @@ export default {
|
||||
height: calc(100% + 38px);
|
||||
}
|
||||
.other {
|
||||
height: calc(100% + 240px);
|
||||
height: calc(100% + 490px);
|
||||
}
|
||||
.copilot-footer {
|
||||
/** position: absolute;
|
||||
|
||||
143
src/views/copilot/factoryData/bbIndex.vue
Normal file
143
src/views/copilot/factoryData/bbIndex.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 10:13:48
|
||||
* @LastEditTime: 2024-05-24 15:03:11
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 6,
|
||||
than: '同比',
|
||||
companyName: "蚌埠中建材光电材料有限公司",
|
||||
period: 1,
|
||||
show:true,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
factorys: [this.companyId],
|
||||
date: this.period,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.prodOutPut = res.data.prodOutputMonitorShDO || [];
|
||||
this.prodFto = res.data.prodOutputFtoDO || [];
|
||||
this.stock = res.data.stockDO || {};
|
||||
this.energyCockpits = res.data.energyCockpitsDO || [];
|
||||
this.prodOrder = res.data.prodOrderMonitorDO || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
src/views/copilot/factoryData/cdIndex.vue
Normal file
143
src/views/copilot/factoryData/cdIndex.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 10:13:36
|
||||
* @LastEditTime: 2024-05-24 15:03:16
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 4,
|
||||
companyName: "成都中建材光电材料有限公司",
|
||||
period: 1,
|
||||
than: '同比',
|
||||
show: true,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
factorys: [this.companyId],
|
||||
date: this.period,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.prodOutPut = res.data.prodOutputMonitorShDO || [];
|
||||
this.prodFto = res.data.prodOutputFtoDO || [];
|
||||
this.stock = res.data.stockDO || {};
|
||||
this.energyCockpits = res.data.energyCockpitsDO || [];
|
||||
this.prodOrder = res.data.prodOrderMonitorDO || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
399
src/views/copilot/factoryData/components/BarChartBase.vue
Normal file
399
src/views/copilot/factoryData/components/BarChartBase.vue
Normal file
@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<div class="left-chart-base">
|
||||
<!-- <div class="legend">
|
||||
<span v-for="item in legend" :key="item.label" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }">{{ item.label }}</span>
|
||||
</div> -->
|
||||
<div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "Energy",
|
||||
props: {
|
||||
// legend: {
|
||||
// type: Array,
|
||||
// required: true,
|
||||
// },
|
||||
energyCockpits: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullscreen: false,
|
||||
actualOptions: null,
|
||||
chart: "",
|
||||
options: {
|
||||
color: ["#FFD160", "#2760FF", "#12FFF5"],
|
||||
grid: {
|
||||
left: "7%",
|
||||
right: "7%",
|
||||
bottom: "8%",
|
||||
top: "15%",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位/片",
|
||||
nameTextStyle: {
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 12,
|
||||
align: "right",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
// {
|
||||
// name: "",
|
||||
// data: [],
|
||||
// type: "line",
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: "#FFD160" + "80" },
|
||||
// { offset: 0.5, color: "#FFD160" + "20" },
|
||||
// { offset: 1, color: "#FFD160" + "00" },
|
||||
// ]),
|
||||
// },
|
||||
// lineStyle: {
|
||||
// width: 2,
|
||||
// },
|
||||
// symbol: "circle",
|
||||
// symbolSize: 8,
|
||||
// emphasis: {
|
||||
// focus: "series",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: "",
|
||||
// data: [],
|
||||
// type: "line",
|
||||
// yAxisIndex: 1,
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: "#2760FF" + "80" },
|
||||
// { offset: 0.5, color: "#2760FF" + "20" },
|
||||
// { offset: 1, color: "#2760FF" + "00" },
|
||||
// ]),
|
||||
// },
|
||||
// lineStyle: {
|
||||
// width: 2,
|
||||
// },
|
||||
// symbol: "circle",
|
||||
// symbolSize: 8,
|
||||
// emphasis: {
|
||||
// focus: "series",
|
||||
// },
|
||||
// },
|
||||
{
|
||||
name: "",
|
||||
data: [],
|
||||
type: "bar",
|
||||
// yAxisIndex: 1,
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: "#12FFF5" + "80" },
|
||||
// { offset: 0.5, color: "#12FFF5" + "20" },
|
||||
// { offset: 1, color: "#12FFF5" + "00" },
|
||||
// ]),
|
||||
// },
|
||||
barWidth: '18',
|
||||
itemStyle: {
|
||||
// barWidth: 2,
|
||||
color: '#12FFF5'
|
||||
},
|
||||
symbol: "circle",
|
||||
symbolSize: 8,
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isOpen() {
|
||||
return this.$store.getters.sidebar.opened;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
// isFullscreen(val) {
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// this.initOptions(this.actualOptions);
|
||||
// },
|
||||
// series(val) {
|
||||
// if (!val) {
|
||||
// this.initOptions(this.options);
|
||||
// return;
|
||||
// }
|
||||
// const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||
// actualOptions.series[0].data = val[0].data;
|
||||
// actualOptions.series[0].name = val[0].name;
|
||||
// actualOptions.series[1].data = val[1].data;
|
||||
// actualOptions.series[1].name = val[1].name;
|
||||
// actualOptions.series[2].data = val[2].data;
|
||||
// actualOptions.series[2].name = val[2].name;
|
||||
// this.actualOptions = actualOptions;
|
||||
// this.initOptions(actualOptions);
|
||||
// },
|
||||
energyCockpits() {
|
||||
this.initChart();
|
||||
},
|
||||
isOpen(val) {
|
||||
this.canvasReset();
|
||||
},
|
||||
},
|
||||
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() {
|
||||
let orderXAxis = ['目标产量', '计划投入量', '实际投入量', '实际产出量', '废品数量', '待再加工数量'];
|
||||
// let n = 0;
|
||||
let seriesArr =[]
|
||||
seriesArr[0] = this.energyCockpits[0].targetProduction ? this.energyCockpits[0].targetProduction :0
|
||||
seriesArr[1] = this.energyCockpits[0].plannedInvestment ? this.energyCockpits[0].plannedInvestment : 0
|
||||
seriesArr[2] = this.energyCockpits[0].actualInvestment ? this.energyCockpits[0].actualInvestment : 0
|
||||
seriesArr[3] = this.energyCockpits[0].actualProduction ? this.energyCockpits[0].actualProduction : 0
|
||||
seriesArr[4] = this.energyCockpits[0].wasteNum ? this.energyCockpits[0].wasteNum : 0
|
||||
seriesArr[5] = this.energyCockpits[0].reworkNum ? this.energyCockpits[0].reworkNum : 0
|
||||
console.log(seriesArr);
|
||||
|
||||
// let seriesArr = [
|
||||
// {
|
||||
// name: "水",
|
||||
// energyType: 1,
|
||||
// data: [],
|
||||
// },
|
||||
// {
|
||||
// name: "电",
|
||||
// energyType: 2,
|
||||
// data: [],
|
||||
// },
|
||||
// {
|
||||
// name: "气",
|
||||
// energyType: 3,
|
||||
// data: [],
|
||||
// },
|
||||
// ];
|
||||
// if (this.energyCockpits.length > 0) {
|
||||
// let dataArr = this.energyCockpits.map((item) => {
|
||||
// return item.groupName;
|
||||
// });
|
||||
// energyxAxis = Array.from(new Set(dataArr));
|
||||
// n = energyxAxis.length;
|
||||
// seriesArr[0].data = Array.from({ length: n }, () => 0);
|
||||
// seriesArr[1].data = Array.from({ length: n }, () => 0);
|
||||
// seriesArr[2].data = Array.from({ length: n }, () => 0);
|
||||
// for (let i = 0; i < this.energyCockpits.length; i++) {
|
||||
// for (let j = 0; j < energyxAxis.length; j++) {
|
||||
// if (this.energyCockpits[i].groupName === energyxAxis[j]) {
|
||||
// if (this.energyCockpits[i].energyType === 1) {
|
||||
// seriesArr[0].data[j] = this.energyCockpits[i].totalEnergyValue;
|
||||
// } else if (this.energyCockpits[i].energyType === 2) {
|
||||
// seriesArr[1].data[j] = this.energyCockpits[i].totalEnergyValue;
|
||||
// } else if (this.energyCockpits[i].energyType === 3) {
|
||||
// seriesArr[2].data[j] = this.energyCockpits[i].totalEnergyValue;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
|
||||
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||
actualOptions.xAxis.data = orderXAxis;
|
||||
actualOptions.series[0].data = seriesArr;
|
||||
// actualOptions.series[0].name = seriesArr[0].name;
|
||||
// actualOptions.series[1].data = seriesArr[1].data;
|
||||
// actualOptions.series[1].name = seriesArr[1].name;
|
||||
// actualOptions.series[2].data = seriesArr[2].data;
|
||||
// actualOptions.series[2].name = seriesArr[2].name;
|
||||
this.actualOptions = actualOptions;
|
||||
this.chart.setOption(actualOptions);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.left-chart-base {
|
||||
// position: relative;
|
||||
height: 100%;
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 5.2vh;
|
||||
right: 4vw;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
position: relative;
|
||||
// font-size: 12px;
|
||||
margin-right: 1.34vw;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
width: 0.531vw;
|
||||
height: 0.531vw;
|
||||
background-color: #ccc;
|
||||
border-radius: 2px;
|
||||
margin-right: 0.22vw;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-item:nth-child(1):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 0.638vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #ffd160;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -0.851vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(1):after {
|
||||
background-color: #ffd160;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
// width: 6px;
|
||||
// height: 6px;
|
||||
width: 0.3191vw;
|
||||
height: 0.3191vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -0.851vw;
|
||||
// left: -16px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(2):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 0.638vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #2760ff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -0.851vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(2):after {
|
||||
background-color: #2760ff;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
// width: 6px;
|
||||
// height: 6px;
|
||||
width: 0.3191vw;
|
||||
height: 0.3191vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -0.851vw;
|
||||
// left: -16px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(3):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 0.638vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #12fff5;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -0.851vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(3):after {
|
||||
background-color: #12fff5;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
// width: 6px;
|
||||
// height: 6px;
|
||||
width: 0.3191vw;
|
||||
height: 0.3191vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -0.851vw;
|
||||
// left: -16px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
282
src/views/copilot/factoryData/components/ChipOee.vue
Normal file
282
src/views/copilot/factoryData/components/ChipOee.vue
Normal file
@ -0,0 +1,282 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-29 14:48:06
|
||||
* @LastEditTime: 2024-05-29 14:58:51
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<BarChartBase
|
||||
:legend="legend"
|
||||
:series="series"
|
||||
:xAxis="xAxis"
|
||||
in="chipOEE"
|
||||
class="chip-oee"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
|
||||
export default {
|
||||
name: "ChipOEE",
|
||||
components: { BarChartBase },
|
||||
props: {
|
||||
period: {
|
||||
type: Number,
|
||||
default:1,
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default:{}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// 城市数组的顺序必须是固定的
|
||||
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
|
||||
return {
|
||||
xAxis: cities,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
legend() {
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === 1 && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period ===1 && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === 2 && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年本周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === 2 && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `上周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === 3 && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else if (this.period === 3 && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${lastMonth}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
|
||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||
];
|
||||
}
|
||||
return items
|
||||
// switch (this.period) {
|
||||
// case "日":
|
||||
// return [{ label: "昨日", color: "#12f7f1" }];
|
||||
// case "周":
|
||||
// return [{ label: "本周", color: "#12f7f1" }];
|
||||
// case "月": {
|
||||
// const year = new Date().getFullYear();
|
||||
// const month = new Date().getMonth() + 1;
|
||||
// return [
|
||||
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
// { label: `${year}年${month}月`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// case "年": {
|
||||
// const year = new Date().getFullYear();
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// default:
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
},
|
||||
// chipOeeRate() {
|
||||
// return this.$store.getters.copilot.efficiency.chipOeeRate
|
||||
// },
|
||||
series() {
|
||||
// console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
|
||||
const chipOeeRate = this.chipOeeRate
|
||||
// console.log('chipOee', chipOeeRate)
|
||||
let dataList = null
|
||||
switch (this.period) {
|
||||
case 1:
|
||||
dataList = [];
|
||||
dataList[0] = chipOeeRate?.previous;
|
||||
dataList[1] = chipOeeRate?.current;
|
||||
case 2:
|
||||
dataList = [];
|
||||
dataList[0] = chipOeeRate?.previous;
|
||||
dataList[1] = chipOeeRate?.current;
|
||||
default:
|
||||
dataList = [];
|
||||
dataList[0] = chipOeeRate?.previous;
|
||||
dataList[1] = chipOeeRate?.current
|
||||
dataList[2] = chipOeeRate?.target
|
||||
}
|
||||
console.log(dataList)
|
||||
return getTemplate(this.period, dataList,this.than);
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
|
||||
function getTemplate(period, dataList, than) {
|
||||
// console.log('dataList',dataList);
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (period === 1 && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月${today}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period ===1 && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === 2 && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === 2&& than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `上周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === 3 && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
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)),
|
||||
},
|
||||
];
|
||||
} else if (period === 3 && 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}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{
|
||||
name: `${year - 1}年`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${year}年`,
|
||||
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
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@ -18,19 +18,11 @@ import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "Energy",
|
||||
props: {
|
||||
vHeight: {
|
||||
type: Number,
|
||||
default: 34,
|
||||
},
|
||||
legend: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
series: {
|
||||
energyCockpits: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
@ -43,11 +35,10 @@ export default {
|
||||
options: {
|
||||
color: ["#FFD160", "#2760FF", "#12FFF5"],
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "0",
|
||||
left: "7%",
|
||||
right: "7%",
|
||||
bottom: "8%",
|
||||
top: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
@ -65,7 +56,7 @@ export default {
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: this.xAxis,
|
||||
data: [],
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
@ -190,6 +181,11 @@ export default {
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isOpen() {
|
||||
return this.$store.getters.sidebar.opened;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
// isFullscreen(val) {
|
||||
@ -216,6 +212,12 @@ export default {
|
||||
// this.actualOptions = actualOptions;
|
||||
// this.initOptions(actualOptions);
|
||||
// },
|
||||
energyCockpits() {
|
||||
this.initChart();
|
||||
},
|
||||
isOpen(val) {
|
||||
this.canvasReset();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// if (screenfull.isEnabled) {
|
||||
@ -241,17 +243,60 @@ export default {
|
||||
}, 500)();
|
||||
},
|
||||
initChart() {
|
||||
let energyxAxis = [];
|
||||
let n = 0;
|
||||
let seriesArr = [
|
||||
{
|
||||
name: "水",
|
||||
energyType: 1,
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "电",
|
||||
energyType: 2,
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "气",
|
||||
energyType: 3,
|
||||
data: [],
|
||||
},
|
||||
];
|
||||
if (this.energyCockpits.length > 0) {
|
||||
let dataArr = this.energyCockpits.map((item) => {
|
||||
return item.groupName;
|
||||
});
|
||||
energyxAxis = Array.from(new Set(dataArr));
|
||||
n = energyxAxis.length;
|
||||
seriesArr[0].data = Array.from({ length: n }, () => 0);
|
||||
seriesArr[1].data = Array.from({ length: n }, () => 0);
|
||||
seriesArr[2].data = Array.from({ length: n }, () => 0);
|
||||
for (let i = 0; i < this.energyCockpits.length; i++) {
|
||||
for (let j = 0; j < energyxAxis.length; j++) {
|
||||
if (this.energyCockpits[i].groupName === energyxAxis[j]) {
|
||||
if (this.energyCockpits[i].energyType === 1) {
|
||||
seriesArr[0].data[j] = this.energyCockpits[i].totalEnergyValue;
|
||||
} else if (this.energyCockpits[i].energyType === 2) {
|
||||
seriesArr[1].data[j] = this.energyCockpits[i].totalEnergyValue;
|
||||
} else if (this.energyCockpits[i].energyType === 3) {
|
||||
seriesArr[2].data[j] = this.energyCockpits[i].totalEnergyValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
|
||||
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||
actualOptions.series[0].data = this.series[0].data;
|
||||
actualOptions.series[0].name = this.series[0].name;
|
||||
actualOptions.series[1].data = this.series[1].data;
|
||||
actualOptions.series[1].name = this.series[1].name;
|
||||
actualOptions.series[2].data = this.series[2].data;
|
||||
actualOptions.series[2].name = this.series[2].name;
|
||||
actualOptions.xAxis.data = energyxAxis;
|
||||
actualOptions.series[0].data = seriesArr[0].data;
|
||||
actualOptions.series[0].name = seriesArr[0].name;
|
||||
actualOptions.series[1].data = seriesArr[1].data;
|
||||
actualOptions.series[1].name = seriesArr[1].name;
|
||||
actualOptions.series[2].data = seriesArr[2].data;
|
||||
actualOptions.series[2].name = seriesArr[2].name;
|
||||
this.actualOptions = actualOptions;
|
||||
this.chart.setOption(actualOptions);
|
||||
},
|
||||
|
||||
@ -1,77 +1,189 @@
|
||||
<template>
|
||||
<dv-scroll-board
|
||||
v-if="aa"
|
||||
:config="config"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
<div class="order-container">
|
||||
<div class="table">
|
||||
<dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%" ref="orderScrollBoard" />
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="chart-title">
|
||||
<span class="title">生产情况</span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
<barChartBase :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import barChartBase from './BarChartBase'
|
||||
export default {
|
||||
name: "Order",
|
||||
components: {
|
||||
barChartBase,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
aa: true,
|
||||
showTable: true,
|
||||
config: {
|
||||
header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
|
||||
header: ["工单号", "工单状态", "计划投入", "实际投入", "目标产量", "实际产量", "生产进度"],
|
||||
headerBGC: "rgba(0, 106, 205, 0.22)",
|
||||
oddRowBGC: "rgba(0, 106, 205, 0.22)",
|
||||
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
|
||||
data: [],
|
||||
rowNum: 12,
|
||||
waitTime: 3000,
|
||||
columnWidth: [50],
|
||||
columnWidth: [100],
|
||||
align: ["center"],
|
||||
carousel: "page",
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getTableList();
|
||||
props: {
|
||||
prodOrder: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isOpen() {
|
||||
return this.$store.getters.sidebar.opened;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isOpen(val) {
|
||||
this.tableReset();
|
||||
},
|
||||
prodOrder() {
|
||||
this.getTableList();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("resize", this.tableReset);
|
||||
},
|
||||
methods: {
|
||||
tableReset() {
|
||||
this.aa = false;
|
||||
this.showTable = false;
|
||||
debounce(() => {
|
||||
this.initTable();
|
||||
}, 500)();
|
||||
},
|
||||
initTable() {
|
||||
this.aa = true;
|
||||
this.showTable = true;
|
||||
},
|
||||
getTableList() {
|
||||
let _this = this;
|
||||
setTimeout(
|
||||
(function name() {
|
||||
_this.config.data = [
|
||||
["1", "行1列1", "行1列2", "行1列3", "50%"],
|
||||
["2", "行2列1", "行2列2", "行2列3", "50%"],
|
||||
["3", "行3列1", "行3列2", "行3列3", "50%"],
|
||||
["4", "行4列1", "行4列2", "行4列3", "50%"],
|
||||
["5", "行5列1", "行5列2", "行5列3", "50%"],
|
||||
["6", "行6列1", "行6列2", "行6列3", "50%"],
|
||||
["7", "行7列1", "行7列2", "行7列3", "50%"],
|
||||
["8", "行8列1", "行8列2", "行8列3", "50%"],
|
||||
["9", "行9列1", "行9列2", "行9列3", "50%"],
|
||||
["10", "行10列1", "行10列2", "行10列3", "50%"],
|
||||
["11", "行11列1", "行11列2", "行11列3", "50%"],
|
||||
["12", "行12列1", "行12列2", "行12列3", "50%"],
|
||||
["13", "行13列1", "行13列2", "行13列3", "50%"],
|
||||
["14", "行14列1", "行14列2", "行14列3", "50%"],
|
||||
["15", "行15列1", "行15列2", "行15列3", "50%"],
|
||||
["16", "行16列1", "行16列2", "行16列3", "50%"],
|
||||
["17", "行17列1", "行17列2", "行17列3", "50%"],
|
||||
["18", "行18列1", "行18列2", "行18列3", "50%"],
|
||||
["19", "行19列1", "行19列2", "行19列3", "50%"],
|
||||
["20", "行20列1", "行20列2", "行20列3", "50%"],
|
||||
];
|
||||
})(),
|
||||
2000
|
||||
let outArr = [];
|
||||
if (this.prodOrder.length > 0) {
|
||||
for (let i = 0; i < this.prodOrder.length; i++) {
|
||||
let arr = [];
|
||||
// arr.push(i + 1);
|
||||
arr.push(
|
||||
`<span title=${this.prodOrder[i].workOrderNumber || ""}>${
|
||||
this.prodOrder[i].workOrderNumber || ""
|
||||
}</span>`
|
||||
);
|
||||
this.initTable();
|
||||
arr.push(
|
||||
`<span title=${this.prodOrder[i].inStatus || ""}>${
|
||||
this.prodOrder[i].inStatus || ""
|
||||
}</span>`
|
||||
);
|
||||
arr.push(
|
||||
`<span title=${this.prodOrder[i].plannedInvestment || ""}>${
|
||||
this.prodOrder[i].plannedInvestment || ""
|
||||
}</span>`
|
||||
);
|
||||
arr.push(
|
||||
`<span title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
|
||||
}</span>`
|
||||
);
|
||||
arr.push(
|
||||
`<span title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
|
||||
}</span>`
|
||||
);
|
||||
arr.push(
|
||||
`<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
|
||||
}</span>`
|
||||
);
|
||||
arr.push(`<span style="display:inline-block;width:45px;">${
|
||||
this.prodOrder[i].productionProgress
|
||||
? this.prodOrder[i].productionProgress.toFixed(0) + "%"
|
||||
: "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">
|
||||
<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(0) *
|
||||
37.68 *
|
||||
0.01 +
|
||||
"," +
|
||||
(1 -
|
||||
this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
|
||||
37.68
|
||||
: 0 + "," + 37.68
|
||||
}"/>
|
||||
</svg>
|
||||
</div>`);
|
||||
outArr.push(arr);
|
||||
}
|
||||
this.config.data = outArr;
|
||||
} else {
|
||||
this.config.data = [];
|
||||
}
|
||||
this.$refs["orderScrollBoard"].updateRows(outArr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.order-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.table{
|
||||
flex: 1;
|
||||
}
|
||||
.chart {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// gap: 6px;
|
||||
.chart-title {
|
||||
margin-top: 5px;
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<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"
|
||||
/>
|
||||
<img src="./../assets/images/fto.png" alt="" style="width: 2.1875vw; height: 2.2875vw" />
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<span class="type">玻璃类型</span>
|
||||
@ -14,16 +12,12 @@
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<span class="type">投入数量</span>
|
||||
<span class="num">8391222</span>
|
||||
<span class="num">{{ prodFto[0] ? prodFto[0].chipInput : 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"
|
||||
/>
|
||||
<img src="./../assets/images/std.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
@ -33,7 +27,9 @@
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">740</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -41,22 +37,20 @@
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">783</span>
|
||||
<span class="num">{{
|
||||
msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num">96%</span>
|
||||
<span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 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"
|
||||
/>
|
||||
<img src="./../assets/images/chip.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
@ -66,7 +60,9 @@
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">740</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,22 +70,20 @@
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">783</span>
|
||||
<span class="num">{{
|
||||
msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num">96%</span>
|
||||
<span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bipv-box">
|
||||
<div class="bipv-box" v-if="showBipv">
|
||||
<div class="icon">
|
||||
<img
|
||||
src="./../assets/images/bipv.png"
|
||||
alt=""
|
||||
style="width: 2.1875vw; height: 2.1875vw"
|
||||
/>
|
||||
<img src="./../assets/images/bipv.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
@ -99,7 +93,9 @@
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">740</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -107,25 +103,147 @@
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">783</span>
|
||||
<span class="num">{{
|
||||
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num">96%</span>
|
||||
<span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="chart-title">
|
||||
<span class="title">生产情况</span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
<barChartBase :than="than" :period="period" :data="data" ref="barChart" style="height: 0;flex:1"></barChartBase>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import barChartBase from './ChipOee'
|
||||
|
||||
export default {
|
||||
name: "ProdMonitor",
|
||||
components: {
|
||||
barChartBase,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bipvVis:false,
|
||||
msgObj: {
|
||||
stand: {},
|
||||
chip: {},
|
||||
bipv: {},
|
||||
},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
period: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: '同比',
|
||||
},
|
||||
prodOutPut: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
prodFto: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
showBipv: {
|
||||
type: Boolean,
|
||||
default:true,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
prodOutPut() {
|
||||
this.makeData();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.makeData();
|
||||
},
|
||||
methods: {
|
||||
makeData() {
|
||||
console.log('msgObj', this.msgObj);
|
||||
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: 5px;
|
||||
// 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;
|
||||
@ -137,18 +255,22 @@ export default {
|
||||
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;
|
||||
@ -159,6 +281,7 @@ export default {
|
||||
letter-spacing: 2px;
|
||||
width: 6.25vw;
|
||||
}
|
||||
|
||||
.type1 {
|
||||
display: inline-block;
|
||||
font-size: 0.9375vw;
|
||||
@ -171,6 +294,7 @@ export default {
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.type-name {
|
||||
font-size: 1.042vw;
|
||||
color: #fff;
|
||||
@ -178,22 +302,21 @@ export default {
|
||||
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,
|
||||
border-image: linear-gradient(180deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1)
|
||||
)
|
||||
2 2;
|
||||
rgba(31, 143, 255, 1)) 2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 1.042vw;
|
||||
color: #fff;
|
||||
@ -201,52 +324,53 @@ export default {
|
||||
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,
|
||||
border-image: linear-gradient(180deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1)
|
||||
)
|
||||
2 2;
|
||||
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,
|
||||
border-image: linear-gradient(135deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1),
|
||||
rgba(31, 143, 255, 0)
|
||||
)
|
||||
2 2;
|
||||
rgba(31, 143, 255, 0)) 2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.std-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
|
||||
.chip-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
|
||||
.bipv-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
|
||||
.std-box,
|
||||
.chip-box,
|
||||
.bipv-box {
|
||||
@ -256,17 +380,16 @@ export default {
|
||||
width: 1px;
|
||||
height: 3.125vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
135deg,
|
||||
border-image: linear-gradient(135deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1),
|
||||
rgba(31, 143, 255, 0)
|
||||
)
|
||||
2 2;
|
||||
rgba(31, 143, 255, 0)) 2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
342
src/views/copilot/factoryData/components/ProdMonitorOld.vue
Normal file
342
src/views/copilot/factoryData/components/ProdMonitorOld.vue
Normal file
@ -0,0 +1,342 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 14:25:19
|
||||
* @LastEditTime: 2024-05-21 14:25:19
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="prod-monitor">
|
||||
<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 : 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 : 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 : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num"
|
||||
>{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 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 : 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 : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num"
|
||||
>{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bipv-box">
|
||||
<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 : 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 : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num"
|
||||
>{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "ProdMonitor",
|
||||
data() {
|
||||
return {
|
||||
msgObj: {
|
||||
stand: {},
|
||||
chip: {},
|
||||
bipv: {},
|
||||
},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
prodOutPut: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
prodFto: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
prodOutPut() {
|
||||
this.makeData();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.makeData();
|
||||
},
|
||||
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;
|
||||
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.3;
|
||||
}
|
||||
.chip-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
.bipv-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
.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>
|
||||
@ -7,17 +7,14 @@ import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "Store",
|
||||
props: {
|
||||
vHeight: {
|
||||
type: Number,
|
||||
default: 34,
|
||||
},
|
||||
xAxis: {
|
||||
type: Array,
|
||||
stock: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
computed: {
|
||||
isOpen() {
|
||||
return this.$store.getters.sidebar.opened;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
@ -27,11 +24,10 @@ export default {
|
||||
chart: "",
|
||||
options: {
|
||||
grid: {
|
||||
left: "3%",
|
||||
left: "8%",
|
||||
right: "1%",
|
||||
bottom: "0",
|
||||
top: "10%",
|
||||
containLabel: true,
|
||||
bottom: "8%",
|
||||
top: "15%",
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
@ -47,7 +43,7 @@ export default {
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: this.xAxis,
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/片",
|
||||
@ -116,18 +112,11 @@ export default {
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
series(val) {
|
||||
if (!val) {
|
||||
this.initOptions(this.options);
|
||||
return;
|
||||
}
|
||||
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||
actualOptions.series[0].data = val[0].data;
|
||||
actualOptions.series[0].name = val[0].name;
|
||||
actualOptions.series[1].data = val[1].data;
|
||||
actualOptions.series[1].name = val[1].name;
|
||||
this.actualOptions = actualOptions;
|
||||
this.initOptions(actualOptions);
|
||||
stock(val) {
|
||||
this.initChart();
|
||||
},
|
||||
isOpen(val) {
|
||||
this.canvasReset();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
@ -154,13 +143,20 @@ export default {
|
||||
}, 500)();
|
||||
},
|
||||
initChart() {
|
||||
let xAxis = Object.keys(this.stock) || [];
|
||||
let data = [];
|
||||
if (xAxis.length > 0) {
|
||||
data = xAxis.map((item) => {
|
||||
return this.stock[item].total;
|
||||
});
|
||||
}
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById("factoryStoreChart"));
|
||||
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||
actualOptions.series[0].data = this.series[0].data;
|
||||
actualOptions.series[0].name = this.series[0].name;
|
||||
actualOptions.xAxis.data = xAxis;
|
||||
actualOptions.series[0].data = data;
|
||||
this.actualOptions = actualOptions;
|
||||
this.chart.setOption(actualOptions);
|
||||
},
|
||||
|
||||
143
src/views/copilot/factoryData/hdIndex.vue
Normal file
143
src/views/copilot/factoryData/hdIndex.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 09:25:42
|
||||
* @LastEditTime: 2024-05-24 15:03:21
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 1,
|
||||
companyName: "邯郸中建材光电材料有限公司",
|
||||
period: 1,
|
||||
than: '同比',
|
||||
show: true,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
factorys: [this.companyId],
|
||||
date: this.period,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.prodOutPut = res.data.prodOutputMonitorShDO || [];
|
||||
this.prodFto = res.data.prodOutputFtoDO || [];
|
||||
this.stock = res.data.stockDO || {};
|
||||
this.energyCockpits = res.data.energyCockpitsDO || [];
|
||||
this.prodOrder = res.data.prodOrderMonitorDO || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,33 +1,25 @@
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader
|
||||
:companyName="companyName"
|
||||
:companyId="companyId"
|
||||
:period="period"
|
||||
@updateCompany="updateCompany"
|
||||
@update:period="period = $event"
|
||||
/>
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor />
|
||||
<prod-monitor :than="than" :period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto"
|
||||
:showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="仓库监控.当前" icon="store">
|
||||
<store :series="series" :xAxis="xAxis" />
|
||||
</db-container>
|
||||
</section>
|
||||
<section class="bottom flex">
|
||||
<db-container title="能源监控" icon="energy">
|
||||
<energy
|
||||
:legend="energyLegend"
|
||||
:series="energySeries"
|
||||
:xAxis="energyxAxis"
|
||||
/>
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order />
|
||||
<db-container title="工单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
<!-- <section class="bottom flex"> -->
|
||||
<!-- <db-container title="" icon="energy"> -->
|
||||
<!-- <energy :legend="energyLegend" :energyCockpits="energyCockpits" /> -->
|
||||
<!-- </db-container> -->
|
||||
<!-- </section> -->
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
@ -36,106 +28,72 @@
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
// import Store from "./components/Store.vue";
|
||||
// import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "FactoryData",
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
// Store,
|
||||
// Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
const year = new Date().getFullYear();
|
||||
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
|
||||
return {
|
||||
companyId: "1",
|
||||
companyId: 0,
|
||||
companyName: "瑞昌中建材光电材料有限公司",
|
||||
period: "日",
|
||||
|
||||
period: 1,
|
||||
show:false,
|
||||
than: '同比',
|
||||
data:{},
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
energyxAxis: [3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7],
|
||||
|
||||
legend: [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
],
|
||||
xAxis: cities,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
energySeries() {
|
||||
return [
|
||||
{
|
||||
name: "电",
|
||||
data: Array.from({ length: 7 }, () =>
|
||||
Math.floor(Math.random() * 1000)
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "水",
|
||||
data: Array.from({ length: 7 }, () =>
|
||||
Math.floor(Math.random() * 1000)
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "气",
|
||||
data: Array.from({ length: 7 }, () =>
|
||||
Math.floor(Math.random() * 1000)
|
||||
),
|
||||
},
|
||||
];
|
||||
},
|
||||
series() {
|
||||
// const ftoInvest = this.$store.getters.home.ftoInvest;
|
||||
// if (!ftoInvest || !ftoInvest.current || !ftoInvest.previous) {
|
||||
return [
|
||||
{
|
||||
name: "2023年",
|
||||
data: Array.from({ length: 7 }, () =>
|
||||
Math.floor(Math.random() * 1000)
|
||||
),
|
||||
},
|
||||
];
|
||||
// }
|
||||
|
||||
// return [
|
||||
// {
|
||||
// name: `${new Date().getFullYear() - 1}年`,
|
||||
// data: ftoInvest.previous,
|
||||
// },
|
||||
// {
|
||||
// name: `${new Date().getFullYear()}年`,
|
||||
// data: ftoInvest.current,
|
||||
// },
|
||||
// ];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getMes1();
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
getMes1() {
|
||||
// cockpitDataMonitor({
|
||||
// factorys: ["1"],
|
||||
// date: 4,
|
||||
// }).then((res) => {
|
||||
// console.log(res);
|
||||
// });
|
||||
cockpitDataMonitor().then((res) => {});
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
factorys: [this.companyId],
|
||||
date: this.period,
|
||||
mode:this.than === '同比' ? 0 : 1
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.prodOutPut = res.data.prodOutputMonitorShDO || [];
|
||||
this.prodFto = res.data.prodOutputFtoDO || [];
|
||||
this.stock = res.data.stockDO || {};
|
||||
this.energyCockpits = res.data.energyCockpitsDO || [];
|
||||
this.prodOrder = res.data.prodWorkOrderDO || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
143
src/views/copilot/factoryData/jmsIndex.vue
Normal file
143
src/views/copilot/factoryData/jmsIndex.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 10:13:30
|
||||
* @LastEditTime: 2024-05-24 15:03:26
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 3,
|
||||
companyName: "佳木斯中建材光电材料有限公司",
|
||||
period: 1,
|
||||
than: '同比',
|
||||
show: true,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
factorys: [this.companyId],
|
||||
date: this.period,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.prodOutPut = res.data.prodOutputMonitorShDO || [];
|
||||
this.prodFto = res.data.prodOutputFtoDO || [];
|
||||
this.stock = res.data.stockDO || {};
|
||||
this.energyCockpits = res.data.energyCockpitsDO || [];
|
||||
this.prodOrder = res.data.prodOrderMonitorDO || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
src/views/copilot/factoryData/ksIndex.vue
Normal file
143
src/views/copilot/factoryData/ksIndex.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 10:13:45
|
||||
* @LastEditTime: 2024-05-24 15:03:31
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 5,
|
||||
companyName: "凯盛中建材光电材料有限公司",
|
||||
period: 1,
|
||||
than: '同比',
|
||||
show: true,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
factorys: [this.companyId],
|
||||
date: this.period,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.prodOutPut = res.data.prodOutputMonitorShDO || [];
|
||||
this.prodFto = res.data.prodOutputFtoDO || [];
|
||||
this.stock = res.data.stockDO || {};
|
||||
this.energyCockpits = res.data.energyCockpitsDO || [];
|
||||
this.prodOrder = res.data.prodOrderMonitorDO || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
146
src/views/copilot/factoryData/oldIndex.vue
Normal file
146
src/views/copilot/factoryData/oldIndex.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 13:24:03
|
||||
* @LastEditTime: 2024-05-21 13:24:03
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader
|
||||
:companyName="companyName"
|
||||
:companyId="companyId"
|
||||
:period="period"
|
||||
@updateCompany="updateCompany"
|
||||
@update:period="updatePeriod"
|
||||
/>
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" />
|
||||
</db-container>
|
||||
<db-container title="仓库监控.当前" icon="store">
|
||||
<store :stock="stock" />
|
||||
</db-container>
|
||||
</section>
|
||||
<section class="bottom flex">
|
||||
<db-container title="能源监控" icon="energy">
|
||||
<energy :legend="energyLegend" :energyCockpits="energyCockpits" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 0,
|
||||
companyName: "邯郸中建材光电材料有限公司",
|
||||
period: 1,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
factorys: [this.companyId],
|
||||
date: this.period,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.prodOutPut = res.data.prodOutputMonitorShDO || [];
|
||||
this.prodFto = res.data.prodOutputFtoDO || [];
|
||||
this.stock = res.data.stockDO || {};
|
||||
this.energyCockpits = res.data.energyCockpitsDO || [];
|
||||
this.prodOrder = res.data.prodOrderMonitorDO || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
src/views/copilot/factoryData/zzIndex.vue
Normal file
143
src/views/copilot/factoryData/zzIndex.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 09:47:21
|
||||
* @LastEditTime: 2024-05-24 15:03:37
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 2,
|
||||
companyName: "株洲中建材光电材料有限公司",
|
||||
period: 1,
|
||||
than: '同比',
|
||||
show: true,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
factorys: [this.companyId],
|
||||
date: this.period,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
this.prodOutPut = res.data.prodOutputMonitorShDO || [];
|
||||
this.prodFto = res.data.prodOutputFtoDO || [];
|
||||
this.stock = res.data.stockDO || {};
|
||||
this.energyCockpits = res.data.energyCockpitsDO || [];
|
||||
this.prodOrder = res.data.prodOrderMonitorDO || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,28 +1,37 @@
|
||||
<!--
|
||||
filename: BipvOutput.vue
|
||||
author: liubin
|
||||
date: 2024-04-17 09:55:12
|
||||
description:
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:04:53
|
||||
* @LastEditTime: 2024-05-29 13:17:38
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<DoubleRingWrapperVue data-source="BIPV产出" :period="period" />
|
||||
<noDoubleRingWrapper data-source="BIPV产出" :period="period" :than="than" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
|
||||
// import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
|
||||
import noDoubleRingWrapper from "./sub/ring/noDoubleRingWrapper.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "BipvOutput",
|
||||
components: { DoubleRingWrapperVue },
|
||||
components: { noDoubleRingWrapper },
|
||||
props: {
|
||||
period: {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -33,74 +33,215 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
legend() {
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
return [{ label: "昨日", color: "#12f7f1" }];
|
||||
case "周":
|
||||
return [{ label: "本周", color: "#12f7f1" }];
|
||||
case "月": {
|
||||
const year = new Date().getFullYear();
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
return [
|
||||
{ label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${year}年${month}月`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
case "年": {
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
return [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
default:
|
||||
return [
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年本周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `上周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${lastMonth}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||
];
|
||||
}
|
||||
return items
|
||||
// switch (this.period) {
|
||||
// case "日":
|
||||
// return [{ label: "昨日", color: "#12f7f1" }];
|
||||
// case "周":
|
||||
// return [{ label: "本周", color: "#12f7f1" }];
|
||||
// case "月": {
|
||||
// const year = new Date().getFullYear();
|
||||
// const month = new Date().getMonth() + 1;
|
||||
// return [
|
||||
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
// { label: `${year}年${month}月`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// case "年": {
|
||||
// const year = new Date().getFullYear();
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// default:
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
},
|
||||
series() {
|
||||
const { chipInvest } = this.$store.getters.copilot.yield;
|
||||
let dataList = null;
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
dataList = [];
|
||||
dataList[0] = chipInvest?.previous;
|
||||
dataList[1] = chipInvest?.current;
|
||||
case "周":
|
||||
dataList = chipInvest?.current;
|
||||
dataList = []
|
||||
dataList[0] = chipInvest?.previous;
|
||||
dataList[1] = chipInvest?.current;
|
||||
break;
|
||||
default:
|
||||
dataList = [];
|
||||
dataList[0] = chipInvest?.previous;
|
||||
dataList[1] = chipInvest?.current;
|
||||
}
|
||||
return getTemplate(this.period, dataList);
|
||||
return getTemplate(this.period, dataList,this.than);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function getTemplate(period, dataList) {
|
||||
const year = new Date().getFullYear();
|
||||
function getTemplate(period, dataList,than) {
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
return period == "日" || period == "周"
|
||||
? [
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: period == "日" ? "昨日" : "本周",
|
||||
data: dataList ?? [],
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
|
||||
name: `去年${month}月${today}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: period == "年" ? `${year}年` : `${year}年${month}月`,
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `上周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : 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)),
|
||||
},
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{
|
||||
name: `${year - 1}年`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${year}年`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
}
|
||||
return items
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<!--
|
||||
filename: ChipOutput.vue
|
||||
author: liubin
|
||||
date: 2024-04-17 09:55:12
|
||||
description:
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:04:53
|
||||
* @LastEditTime: 2024-05-27 16:36:29
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<DoubleRingWrapperVue data-source="芯片产出" :period="period" />
|
||||
<DoubleRingWrapperVue data-source="芯片产出" :period="period" :than="than" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -20,6 +21,10 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
|
||||
import BarChartBase from "@/views/copilot/components/ftoBarChartBase.vue";
|
||||
|
||||
export default {
|
||||
name: "FtoInvest",
|
||||
@ -33,77 +33,217 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
legend() {
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
return [{ label: "昨日", color: "#12f7f1" }];
|
||||
case "周":
|
||||
return [{ label: "本周", color: "#12f7f1" }];
|
||||
case "月": {
|
||||
const year = new Date().getFullYear();
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
return [
|
||||
{ label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${year}年${month}月`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
case "年": {
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
return [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
default:
|
||||
return [
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年本周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `上周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${lastMonth}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||
];
|
||||
}
|
||||
return items
|
||||
// switch (this.period) {
|
||||
// case "日":
|
||||
// return [{ label: "昨日", color: "#12f7f1" }];
|
||||
// case "周":
|
||||
// return [{ label: "本周", color: "#12f7f1" }];
|
||||
// case "月": {
|
||||
// const year = new Date().getFullYear();
|
||||
// const month = new Date().getMonth() + 1;
|
||||
// return [
|
||||
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
// { label: `${year}年${month}月`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// case "年": {
|
||||
// const year = new Date().getFullYear();
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// default:
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
},
|
||||
series() {
|
||||
const { ftoInvest } = this.$store.getters.copilot.yield;
|
||||
console.log('ftoInvest', this.$store.getters.copilot.yield);
|
||||
// console.log('ftoInvest', this.$store.getters.copilot.yield);
|
||||
let dataList = null;
|
||||
|
||||
// console.log(ftoInvest)
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
dataList = [];
|
||||
dataList[0] = ftoInvest?.previous;
|
||||
dataList[1] = ftoInvest?.current;
|
||||
case "周":
|
||||
dataList = ftoInvest?.current;
|
||||
dataList = [];
|
||||
dataList[0] = ftoInvest?.previous;
|
||||
dataList[1] = ftoInvest?.current;
|
||||
break;
|
||||
default:
|
||||
dataList = [];
|
||||
dataList[0] = ftoInvest?.previous;
|
||||
dataList[1] = ftoInvest?.current;
|
||||
}
|
||||
|
||||
return getTemplate(this.period, dataList);
|
||||
return getTemplate(this.period, dataList,this.than);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function getTemplate(period, dataList) {
|
||||
const year = new Date().getFullYear();
|
||||
function getTemplate(period, dataList,than) {
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
return period == "日" || period == "周"
|
||||
? [
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: period == "日" ? "昨日" : "本周",
|
||||
data: dataList ?? [],
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
|
||||
name: `去年${month}月${today}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: period == "年" ? `${year}年` : `${year}年${month}月`,
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `上周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : 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)),
|
||||
},
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{
|
||||
name: `${year - 1}年`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${year}年`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
}
|
||||
return items
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<!--
|
||||
filename: StdOutput.vue
|
||||
author: liubin
|
||||
date: 2024-04-17 09:55:12
|
||||
description:
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:04:53
|
||||
* @LastEditTime: 2024-05-27 14:25:57
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<DoubleRingWrapperVue data-source="标准组件产出" :period="period" />
|
||||
<DoubleRingWrapperVue data-source="标准组件产出" :period="period" :than="than" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -20,6 +21,10 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<!--
|
||||
filename: DoubleRingChart.vue
|
||||
author: liubin
|
||||
date: 2024-04-17 11:01:55
|
||||
description:
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-20 13:32:59
|
||||
* @LastEditTime: 2024-05-29 09:31:49
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
@ -45,6 +46,10 @@ export default {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -89,27 +94,83 @@ export default {
|
||||
},
|
||||
|
||||
options() {
|
||||
const today = new Date().getDate();
|
||||
const year = new Date().getFullYear();
|
||||
const month = new Date().getMonth() + 1;
|
||||
const vt = this.valueTuple;
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
// const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
// const month = new Date().getMonth() + 1;
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
// const year = new Date().getFullYear();
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月${today}日累计`,},
|
||||
{ label: `去年${month}月${today}日累计` },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${month}月${today}日累计`},
|
||||
{ label: `${yesterday}日累计`},
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `本周累计`,},
|
||||
{ label: `去年本周累计`},
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `本周累计`,},
|
||||
{ label: `上周累计`,},
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月累计`,},
|
||||
{ label: `去年${month}月累计`, },
|
||||
{ label: `${month}月目标`,},
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${month}月累计`, },
|
||||
{ label: `${lastMonth}月累计`,},
|
||||
{ label: `${month}月目标`, },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year}年累计`, },
|
||||
{ label: `${year - 1}年累计` },
|
||||
{ label: `${year}年目标` },
|
||||
];
|
||||
}
|
||||
let titleValue =
|
||||
vt[0] != null && vt[2] != null && vt[2] !== 0
|
||||
? `${vt[1] / vt[2]}%`
|
||||
: "0%",
|
||||
subtitle =
|
||||
this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
|
||||
|
||||
this.period == "日" ? `${month}月${today}日累计` : this.period == "周" ? `本周` : this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
|
||||
console.log(this.valueTuple[0], this.valueTuple[1], this.valueTuple[2],)
|
||||
console.log(items)
|
||||
return getOptions({
|
||||
titleValue,
|
||||
subtitle,
|
||||
currentName: items[0].label,
|
||||
preName: items[1].label,
|
||||
previousSum: this.valueTuple[0],
|
||||
currentSum: this.valueTuple[1],
|
||||
targetSum: this.valueTuple[2],
|
||||
targetSum: this.valueTuple[2] ? this.valueTuple[2] :0 ,
|
||||
});
|
||||
},
|
||||
|
||||
legendItems() {
|
||||
return calculateItems(this.period, this.valueTuple);
|
||||
return calculateItems(this.period, this.valueTuple,this.than);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
@ -142,39 +203,68 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
function calculateItems(period, valueTuple) {
|
||||
function calculateItems(period, valueTuple,than) {
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 -1;
|
||||
const year = new Date().getFullYear();
|
||||
switch (period) {
|
||||
case "日":
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月${today}日累计`, value: valueTuple[1] },
|
||||
{ label: `去年${month}月${today}日累计`, value: valueTuple[0] },
|
||||
];
|
||||
break;
|
||||
case "周":
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{ label: `${month}月${today}日累计`, value: valueTuple[1] },
|
||||
{ label: `${yesterday}日累计`, value: valueTuple[0] },
|
||||
];
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{ label: `本周累计`, value: valueTuple[1] },
|
||||
{ label: `去年本周累计`, value: valueTuple[0] },
|
||||
];
|
||||
break;
|
||||
case "月":
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{ label: `本周累计`, value: valueTuple[1] },
|
||||
{ label: `上周累计`, value: valueTuple[0] },
|
||||
];
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月累计`, value: valueTuple[1] },
|
||||
{ label: `去年${month}月累计`, value: valueTuple[0] },
|
||||
{ label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
break;
|
||||
case "年":
|
||||
} else if (period === '月' && than === '环比') {
|
||||
items = [
|
||||
{ label: `${month}月累计`, value: valueTuple[1] },
|
||||
{ label: `${lastMonth}月累计`, value: valueTuple[0] },
|
||||
{ label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year}年累计`, value: valueTuple[1] },
|
||||
{ label: `${year - 1}年累计`, value: valueTuple[0] },
|
||||
{ label: `${year}年目标`, value: valueTuple[2] },
|
||||
];
|
||||
break;
|
||||
}
|
||||
// switch (period) {
|
||||
// case "年":
|
||||
// items = [
|
||||
// { label: `${year}年累计`, value: valueTuple[1] },
|
||||
// { label: `${year - 1}年累计`, value: valueTuple[0] },
|
||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||
// ];
|
||||
// break;
|
||||
// }
|
||||
return items;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -7,22 +7,12 @@
|
||||
|
||||
<template>
|
||||
<div class="double-ring-wrapper">
|
||||
<template v-if="period == '月' || period == '年'">
|
||||
<copilot-select
|
||||
@update:active="handleActiveUpdate"
|
||||
:options="cityOptions"
|
||||
/>
|
||||
<template>
|
||||
<copilot-select @update:active="handleActiveUpdate" :options="cityOptions" />
|
||||
<div class="flex-1 stretch">
|
||||
<DoubleRingChartVue
|
||||
:data-source="dataSource"
|
||||
:period="period"
|
||||
:factoryId="factoryId"
|
||||
/>
|
||||
<DoubleRingChartVue :data-source="dataSource" :period="period" :than="than" :factoryId="factoryId" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<CityData :data-source="dataSource" :period="period" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -43,6 +33,10 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -0,0 +1,91 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-24 15:15:00
|
||||
* @LastEditTime: 2024-05-28 08:42:36
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="double-ring-wrapper">
|
||||
<template >
|
||||
<copilot-select
|
||||
@update:active="handleActiveUpdate"
|
||||
:options="cityOptions"
|
||||
/>
|
||||
<div class="flex-1 stretch">
|
||||
<DoubleRingChartVue
|
||||
:data-source="dataSource"
|
||||
:than="than"
|
||||
:period="period"
|
||||
:factoryId="factoryId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <template v-else>
|
||||
<CityData :data-source="dataSource" :period="period" />
|
||||
</template> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CopilotSelect from "@/views/copilot/components/select.vue";
|
||||
import DoubleRingChartVue from "./DoubleRingChart.vue";
|
||||
import CityData from "../city/CityData.vue";
|
||||
|
||||
export default {
|
||||
name: "DoubleRingWrapper",
|
||||
components: { CopilotSelect, DoubleRingChartVue, CityData },
|
||||
props: {
|
||||
dataSource: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
period: {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
factoryId: 4, // 默认成都
|
||||
cityOptions: [
|
||||
"成都",
|
||||
"邯郸",
|
||||
"株洲",
|
||||
"佳木斯",
|
||||
"凯盛光伏",
|
||||
"蚌埠兴科",
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleActiveUpdate(index) {
|
||||
this.factoryId = index;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.double-ring-wrapper {
|
||||
height: 100%;
|
||||
padding: 12px 24px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
@ -1,29 +1,30 @@
|
||||
<!--
|
||||
filename: index.vue
|
||||
author: liubin
|
||||
date: 2024-04-16 14:40:15
|
||||
description: 产量驾驶舱
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-10 11:10:54
|
||||
* @LastEditTime: 2024-05-28 13:36:07
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="yield-copilot">
|
||||
<section class="top flex">
|
||||
<db-container class="std-yield" title="标准组件产出" icon="std">
|
||||
<std-output :period="period" />
|
||||
<std-output v-if="show" :period="period" :than="than" />
|
||||
</db-container>
|
||||
<db-container class="chip-yield" title="芯片产出" icon="chip2">
|
||||
<chip-output :period="period" />
|
||||
<chip-output v-if="show" :period="period" :than="than" />
|
||||
</db-container>
|
||||
<db-container class="bipv-yield" title="BIPV产出" icon="bipv">
|
||||
<bipv-output :period="period" />
|
||||
<bipv-output v-if="show" :period="period" :than="than" />
|
||||
</db-container>
|
||||
</section>
|
||||
<section class="bottom flex">
|
||||
<db-container class="fto-involve" title="FTO投入">
|
||||
<fto-invest :period="period" />
|
||||
<fto-invest :period="period" :than="than" />
|
||||
</db-container>
|
||||
<db-container class="chip-involve" title="芯片投入" icon="chip">
|
||||
<chip-invest :period="period" />
|
||||
<chip-invest :period="period" :than="than" />
|
||||
</db-container>
|
||||
</section>
|
||||
</div>
|
||||
@ -52,22 +53,40 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
show:false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
period: {
|
||||
handler(val) {
|
||||
val && this.fetchData(val);
|
||||
val && this.fetchData(val,this.than);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
than: {
|
||||
handler(val) {
|
||||
console.log(val)
|
||||
val && this.fetchData(this.period,val);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fetchData(period = "日") {
|
||||
fetchData(period = "日", than) {
|
||||
// this.$store.commit('copilot/clearState')
|
||||
console.log(`产量驾驶舱，获取${period}数据`);
|
||||
this.$store.dispatch("copilot/initCopilot", { period, source: "yield" });
|
||||
this.$store.dispatch("copilot/initCopilot", { period, source: "yield", than }).then(() => {
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -4,6 +4,8 @@ export default ({
|
||||
previousSum,
|
||||
currentSum,
|
||||
targetSum,
|
||||
currentName,
|
||||
preName,
|
||||
}) => ({
|
||||
grid: {
|
||||
left: 0,
|
||||
@ -57,7 +59,7 @@ export default ({
|
||||
data: [
|
||||
{
|
||||
value: currentSum,
|
||||
name: "当前累计产出",
|
||||
name: currentName,
|
||||
selected: false,
|
||||
itemStyle: {
|
||||
borderJoin: "round",
|
||||
@ -108,7 +110,7 @@ export default ({
|
||||
data: [
|
||||
{
|
||||
value: previousSum,
|
||||
name: "上期累计产出",
|
||||
name: preName,
|
||||
selected: false,
|
||||
itemStyle: {
|
||||
borderJoin: "round",
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="company-info" :style="styles">
|
||||
<div class="company-info" @click="handleChangeRoute()" :style="styles">
|
||||
<div class="corner bl"></div>
|
||||
<div class="corner br"></div>
|
||||
<h2>{{ info.companyName }}</h2>
|
||||
@ -31,7 +31,7 @@ export default {
|
||||
position: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({ x: 0, y: 0 }),
|
||||
default: () => ({ tx: 0, ty: 0 }),
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
@ -49,12 +49,18 @@ export default {
|
||||
computed: {
|
||||
styles() {
|
||||
return {
|
||||
left: `${this.position.x}%`,
|
||||
top: `${this.position.y}%`,
|
||||
left: `${this.position.tx}%`,
|
||||
top: `${this.position.ty}%`,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
methods: {
|
||||
handleChangeRoute() {
|
||||
this.$router.push({
|
||||
path: this.position.path
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -71,6 +77,7 @@ export default {
|
||||
z-index: 9999;
|
||||
// padding: 14px;
|
||||
padding: 0.745vw;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(2px);
|
||||
border-radius: 4px;
|
||||
transform: translate(-50%, -100%);
|
||||
|
||||
@ -1,60 +1,47 @@
|
||||
<template>
|
||||
<div class="dashboard-factory-all">
|
||||
<div id="map-container">
|
||||
<div v-if="visible" class="cdLine"></div>
|
||||
<div v-if="visible" class="zzLine"></div>
|
||||
<div v-if="visible" class="rcLine"></div>
|
||||
<div v-if="visible" class="rcLineTwo"></div>
|
||||
<div v-if="visible" class="hdLine"></div>
|
||||
<div v-if="visible" class="ksLine"></div>
|
||||
<div v-if="visible" class="bbLine"></div>
|
||||
<div v-if="visible" class="bbLineTwo"></div>
|
||||
<div v-if="visible" class="bbLineThree"></div>
|
||||
<div class="databoard">
|
||||
<db-header class="db-header"></db-header>
|
||||
<div class="db-body">
|
||||
<div class="db-left">
|
||||
<db-container
|
||||
icon="cube"
|
||||
title="FTO投入"
|
||||
@refresh="() => (ftoKey = Math.random())"
|
||||
>
|
||||
<db-container icon="cube" title="FTO投入" @refresh="() => (ftoKey = Math.random())">
|
||||
<fto-chart :key="ftoKey" />
|
||||
</db-container>
|
||||
<db-container
|
||||
icon="chip2"
|
||||
title="芯片投入"
|
||||
@refresh="() => (chipInvestKey = Math.random())"
|
||||
>
|
||||
<db-container icon="chip2" title="芯片投入" @refresh="() => (chipInvestKey = Math.random())">
|
||||
<chip-invest-chart :key="chipInvestKey" />
|
||||
</db-container>
|
||||
</div>
|
||||
<div class="db-right">
|
||||
<db-container
|
||||
side="right"
|
||||
icon="chip"
|
||||
title="芯片产出"
|
||||
@refresh="() => (chipYieldKey = Math.random())"
|
||||
>
|
||||
<db-container side="right" icon="chip" title="芯片产出" @refresh="() => (chipYieldKey = Math.random())">
|
||||
<chip-yield-chart :key="chipYieldKey" />
|
||||
</db-container>
|
||||
<db-container
|
||||
side="right"
|
||||
icon="std"
|
||||
title="标准组件产出"
|
||||
@refresh="() => (stdKey = Math.random())"
|
||||
>
|
||||
<db-container side="right" icon="std" title="标准组件产出" @refresh="() => (stdKey = Math.random())">
|
||||
<std-chart :key="stdKey" />
|
||||
</db-container>
|
||||
<db-container
|
||||
side="right"
|
||||
icon="bipv"
|
||||
title="BIPV产出"
|
||||
@refresh="() => (bipvKey = Math.random())"
|
||||
>
|
||||
<db-container side="right" icon="bipv" title="BIPV产出" @refresh="() => (bipvKey = Math.random())">
|
||||
<bipv-chart :key="bipvKey" />
|
||||
</db-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<company-info
|
||||
v-if="visible"
|
||||
:info="info"
|
||||
:position="hintPosition"
|
||||
@close="closeHint"
|
||||
/>
|
||||
<company-info v-if="visible" :info="info" :position="rcHintPosition" />
|
||||
<ks-company-info v-if="visible" :info="ksInfo" :position="ksHintPosition" />
|
||||
<jms-company-info v-if="visible" :info="jmsInfo" :position="jmsHintPosition" />
|
||||
<hd-company-info v-if="visible" :info="hdInfo" :position="hdHintPosition" />
|
||||
<bb-company-info v-if="visible" :info="bbInfo" :position="bbHintPosition" />
|
||||
<cd-company-info v-if="visible" :info="cdInfo" :position="cdHintPosition" />
|
||||
<zz-company-info v-if="visible" :info="zzInfo" :position="zzHintPosition" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -71,25 +58,31 @@ import StdChart from "./dashboard/charts/StdChart.vue";
|
||||
|
||||
const LOCATIONS = [
|
||||
// 佳木斯
|
||||
{ x: 67, y: 20 },
|
||||
{ x: 67, y: 20, tx: 67, ty: 26, path: 'copilot/jmsIndex' },
|
||||
// 成都
|
||||
{ x: 46, y: 56 },
|
||||
{ x: 46, y: 56,tx:40,ty:93, path: 'copilot/cdIndex' },
|
||||
// 蚌埠1
|
||||
{ x: 60, y: 52 },
|
||||
{ x: 60, y: 52, tx: 33, ty: 48.3, path: 'copilot/bbIndex' },
|
||||
// 蚌埠2
|
||||
{ x: 61, y: 53 },
|
||||
{ x: 61, y: 53,tx:34,ty:68, path: 'copilot/ksIndex' },
|
||||
// 江西 瑞昌
|
||||
{ x: 60, y: 58 },
|
||||
{ x: 60, y: 58, tx: 68, ty: 52, path: 'copilot/factory-data' },
|
||||
// 湖南 株洲
|
||||
{ x: 56, y: 60 },
|
||||
{ x: 56, y: 60, tx: 60, ty: 95, path: 'copilot/zzIndex' },
|
||||
// 邯郸
|
||||
{ x: 58, y: 45 },
|
||||
{ x: 58, y: 45, tx: 49, ty: 34, path: 'copilot/hdIndex' },
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
CompanyInfo,
|
||||
ksCompanyInfo: CompanyInfo,
|
||||
hdCompanyInfo: CompanyInfo,
|
||||
bbCompanyInfo: CompanyInfo,
|
||||
cdCompanyInfo: CompanyInfo,
|
||||
zzCompanyInfo: CompanyInfo,
|
||||
jmsCompanyInfo: CompanyInfo,
|
||||
DbHeader: DashboardHeader,
|
||||
DbContainer: Container,
|
||||
FtoChart,
|
||||
@ -100,8 +93,15 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// homeStore:undefined,
|
||||
visible: false,
|
||||
hintPosition: null,
|
||||
zzHintPosition: null,
|
||||
ksHintPosition: null,
|
||||
bbHintPosition: null,
|
||||
hdHintPosition: null,
|
||||
cdHintPosition: null,
|
||||
jmsHintPosition: null,
|
||||
ftoKey: Math.random(),
|
||||
chipInvestKey: Math.random(),
|
||||
chipYieldKey: Math.random(),
|
||||
@ -109,15 +109,20 @@ export default {
|
||||
bipvKey: Math.random(),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
homeStore() {
|
||||
return this.$store.getters.home
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch("copilot/initHome");
|
||||
|
||||
this.$store.dispatch("copilot/initHome").then((res) => {
|
||||
this.$nextTick(() => {
|
||||
this.initPins();
|
||||
|
||||
// 调整 echarts 大小
|
||||
window.onresize = () => { };
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
beforeRouteEnter(to, from, next) {
|
||||
next((vm) => {
|
||||
@ -126,17 +131,25 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initPins() {
|
||||
|
||||
// console.log(" this.homeStore", this.$store.getters.home);
|
||||
LOCATIONS.map((loc) => {
|
||||
console.log("loc", loc);
|
||||
const pin = document.createElement("div");
|
||||
pin.className = "pin";
|
||||
pin.style.left = `${loc.x}%`;
|
||||
pin.style.top = `${loc.y}%`;
|
||||
pin.addEventListener("mouseenter", () => {
|
||||
// pin.addEventListener("mouseenter", () => {
|
||||
this.showHint(loc);
|
||||
});
|
||||
pin.addEventListener("mouseleave", () => {
|
||||
this.closeHint();
|
||||
});
|
||||
// });
|
||||
// pin.addEventListener("mouseleave", () => {
|
||||
// this.closeHint();
|
||||
// });
|
||||
// pin.addEventListener("click", () => {
|
||||
// this.$router.push({
|
||||
// path:loc.path
|
||||
// })
|
||||
// });
|
||||
document.getElementById("map-container").appendChild(pin);
|
||||
});
|
||||
},
|
||||
@ -145,8 +158,6 @@ export default {
|
||||
this.hintPosition = null;
|
||||
},
|
||||
showHint(position) {
|
||||
const homeStore = this.$store.getters.home;
|
||||
this.hintPosition = position;
|
||||
const templateInfo = {
|
||||
companyName: "",
|
||||
items: [
|
||||
@ -156,53 +167,63 @@ export default {
|
||||
{ label: "标准组件产出", value: 0 }, // Math.floor(Math.random() * 1000000) },
|
||||
],
|
||||
};
|
||||
|
||||
if (position === LOCATIONS[0]) {
|
||||
templateInfo.companyName = "佳木斯中建材光电材料有限公司";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[3];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[3];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[3];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[3];
|
||||
this.jmsHintPosition = position;
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest.current[3];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[3];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput.current[3];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[3];
|
||||
this.jmsInfo = templateInfo;
|
||||
} else if (position === LOCATIONS[1]) {
|
||||
this.cdHintPosition = position;
|
||||
templateInfo.companyName = "成都中建材光电材料有限公司";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[4];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[4];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[4];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[4];
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[4];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[4];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput.current[4];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[4];
|
||||
this.cdInfo = templateInfo;
|
||||
} else if (position === LOCATIONS[2]) {
|
||||
this.bbHintPosition = position;
|
||||
templateInfo.companyName = "蚌埠兴科玻璃有限公司";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[6];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[6];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[6];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[6];
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[6];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[6];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput?.current[6];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[6];
|
||||
this.bbInfo = templateInfo;
|
||||
} else if (position === LOCATIONS[3]) {
|
||||
this.ksHintPosition = position;
|
||||
templateInfo.companyName = "凯盛光伏材料有限公司（本部）";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[5];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[5];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[5];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[5];
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[5];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[5];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput.current[5];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[5];
|
||||
this.ksInfo = templateInfo;
|
||||
} else if (position === LOCATIONS[4]) {
|
||||
this.rcHintPosition = position;
|
||||
templateInfo.companyName = "瑞昌中建材光电材料有限公司";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[0];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[0];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[0];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[0];
|
||||
} else if (position === LOCATIONS[5]) {
|
||||
templateInfo.companyName = "中建材（株洲）光电材料有限公司";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[2];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[2];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[2];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[2];
|
||||
} else if (position === LOCATIONS[6]) {
|
||||
templateInfo.companyName = "中建材（邯郸）光电材料有限公司";
|
||||
templateInfo.items[0].value = homeStore.ftoInvest.current[1];
|
||||
templateInfo.items[2].value = homeStore.chipInvest.current[1];
|
||||
templateInfo.items[1].value = homeStore.chipOutput.current[1];
|
||||
templateInfo.items[3].value = homeStore.stdOutput.current[1];
|
||||
}
|
||||
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[0];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[0];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput.current[0];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[0];
|
||||
this.info = templateInfo;
|
||||
|
||||
} else if (position === LOCATIONS[5]) {
|
||||
this.zzHintPosition = position;
|
||||
templateInfo.companyName = "中建材（株洲）光电材料有限公司";
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[2];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[2];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput.current[2];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[2];
|
||||
this.zzInfo = templateInfo;
|
||||
} else if (position === LOCATIONS[6]) {
|
||||
this.hdHintPosition = position;
|
||||
templateInfo.companyName = "中建材（邯郸）光电材料有限公司";
|
||||
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[1];
|
||||
templateInfo.items[2].value = this.homeStore.chipInvest.current[1];
|
||||
templateInfo.items[1].value = this.homeStore.chipOutput.current[1];
|
||||
templateInfo.items[3].value = this.homeStore.stdOutput.current[1];
|
||||
this.hdInfo = templateInfo
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.visible = true;
|
||||
});
|
||||
@ -225,8 +246,88 @@ export default {
|
||||
#map-container {
|
||||
height: 100%;
|
||||
background: url(../assets/bgearth.png) no-repeat 0 0 / 100% 100%;
|
||||
// background-size: cover;
|
||||
position: relative;
|
||||
|
||||
.cdLine{
|
||||
position: absolute;
|
||||
left: 46.71%;
|
||||
width: 2px;
|
||||
top: 59%;
|
||||
height: 148px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.zzLine {
|
||||
position: absolute;
|
||||
left: 56.8%;
|
||||
width: 2px;
|
||||
top: 60.8%;
|
||||
// x: 60, y: 58,
|
||||
height: 148px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.rcLine {
|
||||
position: absolute;
|
||||
left: 61%;
|
||||
width: 100px;
|
||||
top: 61.5%;
|
||||
// x: 60, y: 58,
|
||||
height: 1px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.rcLineTwo {
|
||||
position: absolute;
|
||||
left: 66.8%;
|
||||
width: 1px;
|
||||
top: 52%;
|
||||
// x: 60, y: 58,
|
||||
height: 90px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.hdLine {
|
||||
position: absolute;
|
||||
left: 58.7%;
|
||||
width: 1px;
|
||||
top: 34%;
|
||||
// x: 60, y: 58,
|
||||
height: 100px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.ksLine {
|
||||
position: absolute;
|
||||
left: 43.2%;
|
||||
width: 350px;
|
||||
top: 56.8%;
|
||||
// x: 60, y: 58,
|
||||
height: 1px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.bbLine{
|
||||
position: absolute;
|
||||
left: 42.4%;
|
||||
width: 350px;
|
||||
top: 55.5%;
|
||||
// x: 60, y: 58,
|
||||
height: 1px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.bbLineTwo{
|
||||
position: absolute;
|
||||
left: 42.4%;
|
||||
width: 1px;
|
||||
top: 48%;
|
||||
// x: 60, y: 58,
|
||||
height: 70px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.bbLineThree{
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
width: 40px;
|
||||
top: 48%;
|
||||
// x: 60, y: 58,
|
||||
height: 1px;
|
||||
border: 2px dashed #FFCF00;
|
||||
}
|
||||
.databoard {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-11-06 15:15:30
|
||||
* @LastEditTime: 2024-05-07 09:31:54
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-05-13 15:43:45
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-drawer class="drawer" :visible.sync="visible" size="50%">
|
||||
<el-drawer class="drawer" :visible.sync="visible" size="55%" @closed="$emit('destroy')">
|
||||
<small-title slot="title" :no-padding="true">
|
||||
{{ '碲化镉工厂生产数据详情' }}
|
||||
</small-title>
|
||||
@ -14,15 +14,15 @@
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8">
|
||||
<p class="title">工厂名称</p>
|
||||
<p class="text">{{ }}</p>
|
||||
<p class="text">{{ dataForm.factory }}</p>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<p class="title">时间维度</p>
|
||||
<p class="text">{{ dataForm.code }}</p>
|
||||
<p class="text">{{ date }}</p>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<p class="title">时间</p>
|
||||
<p class="text">{{ dataForm.productName }}</p>
|
||||
<p class="text">{{ dataForm.reportDate.length > 0 ? dataForm.reportDate[0] + '年' + dataForm.reportDate[1] + '月' + dataForm.reportDate[2] + '日' : '' }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
@ -36,43 +36,43 @@
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="title">芯片良率</p>
|
||||
<p class="text">{{ dataForm.code }}</p>
|
||||
<p class="text">{{ dataForm.yieldRate }}</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="title">芯片良率</p>
|
||||
<p class="text">{{ dataForm.productName }}</p>
|
||||
<p class="title">芯片BOM</p>
|
||||
<p class="text">{{ dataForm.bom }}</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="title">芯片总功率</p>
|
||||
<p class="text">{{ dataForm.productName }}</p>
|
||||
<p class="text">{{ dataForm.totalPower }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="6">
|
||||
<p class="title">FTO投入量</p>
|
||||
<p class="text">{{ }}</p>
|
||||
<p class="text">{{ dataForm.chipInput }}</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="title">CSS稼动率</p>
|
||||
<p class="text">{{ dataForm.code }}</p>
|
||||
<p class="text">{{ dataForm.marriageRate }}</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="title">芯片段OEE</p>
|
||||
<p class="text">{{ dataForm.productName }}</p>
|
||||
<p class="text">{{ dataForm.oee }}</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="title">芯片平均功率</p>
|
||||
<p class="text">{{ dataForm.productName }}</p>
|
||||
<p class="text">{{ dataForm.averagePower }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="6">
|
||||
<p class="title">芯片人均产量</p>
|
||||
<p class="text">{{ }}</p>
|
||||
<p class="text">{{ dataForm.annualAverageProduction }}</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="title">芯片产能利用率</p>
|
||||
<p class="text">{{ dataForm.code }}</p>
|
||||
<p class="text">{{ dataForm.capacityUtilizationRate }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
|
||||
@ -81,19 +81,20 @@
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="6">
|
||||
<p class="title">封装BOM</p>
|
||||
<p class="text">{{ }}</p>
|
||||
<!-- 没参数 -->
|
||||
<!-- <p class="text">{{ dataForm.bom }}</p> -->
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="title">封装线OEE</p>
|
||||
<p class="text">{{ dataForm.code }}</p>
|
||||
<!-- <p class="text">{{ dataForm.code }}</p> -->
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="title">标准组件良率</p>
|
||||
<p class="text">{{ dataForm.productName }}</p>
|
||||
<!-- <p class="text">{{ dataForm.productName }}</p> -->
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="title">标准组件产量</p>
|
||||
<p class="text">{{ dataForm.productName }}</p>
|
||||
<!-- <p class="text">{{ dataForm.productName }}</p> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
@ -103,15 +104,15 @@
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="title">封装产能利用率</p>
|
||||
<p class="text">{{ dataForm.code }}</p>
|
||||
<!-- <p class="text">{{ dataForm.code }}</p> -->
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="title">标准组件人均产量</p>
|
||||
<p class="text">{{ dataForm.productName }}</p>
|
||||
<!-- <p class="text">{{ dataForm.productName }}</p> -->
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p class="title">标准组件人均产量</p>
|
||||
<p class="text">{{ dataForm.productName }}</p>
|
||||
<!-- <p class="text">{{ dataForm.productName }}</p> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
|
||||
@ -166,6 +167,12 @@ export default {
|
||||
SmallTitle,
|
||||
},
|
||||
// mixins: [basicAdd],
|
||||
props: {
|
||||
date: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
@ -224,8 +231,12 @@ export default {
|
||||
methods: {
|
||||
init(id) {
|
||||
this.visible = true
|
||||
console.log('打印', id)
|
||||
if (id) {
|
||||
getProduceDataDetail()
|
||||
getProduceDataDetail(id).then(res => {
|
||||
this.dataForm = res.data
|
||||
console.log('你好', res.data)
|
||||
})
|
||||
}
|
||||
},
|
||||
// getCurrentTime() {
|
||||
|
||||
@ -1,53 +1,53 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-15 10:49:13
|
||||
* @LastEditTime: 2024-05-07 09:18:01
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-05-16 14:15:46
|
||||
* @LastEditors: DY
|
||||
* @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;">
|
||||
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
|
||||
<el-form-item label="时间维度" prop="reportTime">
|
||||
<el-select clearable v-model="listQuery.date" placeholder="请选择">
|
||||
<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 === 0" label="时间范围" prop="reportTime">
|
||||
<el-date-picker clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
|
||||
start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDayTime" end-placeholder="结束日期">
|
||||
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
|
||||
start-placeholder="开始日期" value-format="timestamp" @change="changeDayTime" end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.date === 1" label="时间范围" prop="reportTime">
|
||||
<el-date-picker clearable v-model="listQuery.reportTime[0]" type="week" format="yyyy 第 WW 周" placeholder="选择周"
|
||||
<el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
|
||||
style="width: 180px" @change="onValueChange">
|
||||
</el-date-picker>
|
||||
至
|
||||
<el-date-picker clearable v-model="listQuery.reportTime[1]" type="week" format="yyyy 第 WW 周" placeholder="选择周"
|
||||
<el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
|
||||
style="width: 180px" @change="onValueChange">
|
||||
</el-date-picker>
|
||||
<span v-if="listQuery.reportTime[0] && listQuery.reportTime[1]" style="margin-left: 10px">
|
||||
<span v-if="listQuery.start && listQuery.end" style="margin-left: 10px">
|
||||
{{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
|
||||
<el-date-picker clearable v-model="listQuery.reportTime" type="monthrange" range-separator="至"
|
||||
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="monthrange" value-format="timestamp" range-separator="至"
|
||||
start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.date === 3" label="时间范围" prop="reportTime">
|
||||
<el-date-picker clearable v-model="listQuery.reportTime[0]" value-format="yyyy" type="year"
|
||||
<el-date-picker size="small" clearable v-model="listQuery.start" value-format="timestamp" type="year"
|
||||
placeholder="开始时间">
|
||||
</el-date-picker>
|
||||
~
|
||||
<el-date-picker clearable v-model="listQuery.reportTime[1]" value-format="yyyy" type="year" placeholder="结束时间"
|
||||
<el-date-picker size="small" clearable v-model="listQuery.end" value-format="timestamp" type="year" placeholder="结束时间"
|
||||
@change="getYear">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="工厂名称" prop="factorys">
|
||||
<el-select clearable v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple >
|
||||
<el-select size="small" clearable v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple >
|
||||
<el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
@ -59,7 +59,7 @@
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="玻璃类型" prop="type">
|
||||
<el-select clearable v-model="listQuery.type" placeholder="请选择玻璃类型">
|
||||
<el-select size="small" clearable 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>
|
||||
@ -69,23 +69,32 @@
|
||||
<el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="app-container" style="margin-top: 8px;padding: 16px; height: auto; flex-grow: 1;">
|
||||
<!-- <el-row :gutter="24"> -->
|
||||
<!-- <el-col :span="12" v-for="item in dataList" :key="item.id"> -->
|
||||
<search-bar :formConfigs="formConfig1" ref="searchBarForm1" style="margin-bottom: 0" />
|
||||
<line-chart 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> -->
|
||||
</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"
|
||||
<div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto; padding: 16px;">
|
||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" style="margin-bottom: 0" />
|
||||
<base-table :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size"
|
||||
: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.size"
|
||||
:page.sync="listQuery.current"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList"
|
||||
/>
|
||||
</div>
|
||||
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @refreshDataList="successSubmit" />
|
||||
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
|
||||
<!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
|
||||
:type="listQuery.reportType" @refreshDataList="getDataList" /> -->
|
||||
<!-- <pagination
|
||||
@ -98,7 +107,7 @@
|
||||
|
||||
<script>
|
||||
// import { parseTime } from '../../core/mixins/code-filter';
|
||||
import { getProduceDataPage } from '@/api/produceData';
|
||||
import { getProduceDataPage, exportOutPutExcel } from '@/api/produceData';
|
||||
// import inputTable from './inputTable.vue';
|
||||
import lineChart from './lineChart';
|
||||
import moment from 'moment'
|
||||
@ -114,7 +123,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
listQuery: {
|
||||
size: 10,
|
||||
size: 20,
|
||||
current: 1,
|
||||
factorys: [],
|
||||
total: 0,
|
||||
@ -177,88 +186,16 @@ export default {
|
||||
// getDataListURL: getGlassPage,
|
||||
// exportURL: exportGlasscExcel
|
||||
},
|
||||
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: '生产数据管理',
|
||||
label: '工厂信息',
|
||||
},
|
||||
],
|
||||
formConfig1: [
|
||||
{
|
||||
type: 'title',
|
||||
label: '良品数量',
|
||||
},
|
||||
],
|
||||
timeList: [
|
||||
@ -281,24 +218,52 @@ export default {
|
||||
],
|
||||
factoryList: [
|
||||
{
|
||||
name: '测试',
|
||||
name: '瑞昌中建材光电材料有限公司',
|
||||
id: 0
|
||||
},
|
||||
{
|
||||
name: '邯郸中建材光电材料有限公司',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
name: '中建材株洲光电材料有限公司',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
name: '佳木斯中建材光电材料有限公司',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
name: '成都中建材光电材料有限公司',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
name: '凯盛光伏材料有限公司',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
name: '蚌埠兴科玻璃有限公司',
|
||||
id: 6
|
||||
}
|
||||
],
|
||||
tableProps: [
|
||||
{
|
||||
prop: 'createTime',
|
||||
prop: 'tableTime',
|
||||
label: '日期',
|
||||
minWidth: 100,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'factory',
|
||||
label: '工厂名称',
|
||||
filter: (val) => ['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'][val]
|
||||
filter: (val) => ['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'][val],
|
||||
minWidth: 200,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'glassType',
|
||||
label: '玻璃类型',
|
||||
filter: (val) => ['玻璃芯片', '标准组件', 'BIPV'][val]
|
||||
filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
|
||||
},
|
||||
{
|
||||
prop: 'inputNumber',
|
||||
@ -340,32 +305,39 @@ export default {
|
||||
this.$refs.detailOrUpdate.init(val.data.id);
|
||||
});
|
||||
},
|
||||
buttonClick() {
|
||||
// buttonClick() {
|
||||
|
||||
},
|
||||
// },
|
||||
getYear(e) {
|
||||
if (this.listQuery.reportTime[0] && e - this.listQuery.reportTime[0] > 10) {
|
||||
if (this.listQuery.reportTime[1] - this.listQuery.reportTime[0] > 10*365*24*60*60*1000) {
|
||||
this.$message({
|
||||
message: '年份起止时间不能超过十年',
|
||||
type: 'warning'
|
||||
});
|
||||
this.listQuery.reportTime = []
|
||||
// console.log();
|
||||
} else {
|
||||
this.listQuery.beginTime = this.listQuery.reportTime[0]
|
||||
this.listQuery.endTime = this.listQuery.reportTime[1]
|
||||
}
|
||||
// console.log(e);
|
||||
},
|
||||
onValueChange(picker, k) { // 选中近k周后触发的操作
|
||||
// console.log(this.listQuery.reportTime[0], this.listQuery.reportTime[1])
|
||||
if (this.listQuery.reportTime[0] && this.listQuery.reportTime[1]) {
|
||||
console.log(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000)
|
||||
console.log(this.listQuery.reportTime)
|
||||
this.date1 = moment(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
// this.onValueChange() // 这里为我们希望value改变时触发的方法
|
||||
this.date2 = moment(this.listQuery.reportTime[1].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) {
|
||||
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'
|
||||
});
|
||||
// this.onValueChange()
|
||||
} else {
|
||||
this.listQuery.beginTime = this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000
|
||||
this.listQuery.endTime = this.listQuery.reportTime[1].getTime() + 5 * 24 * 60 * 60 * 1000
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -374,97 +346,37 @@ export default {
|
||||
// this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss');
|
||||
// this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss');
|
||||
console.log(this.listQuery.reportTime[1])
|
||||
const numDays = (new Date(this.listQuery.reportTime[1]).getTime() - new Date(this.listQuery.reportTime[0]).getTime()) / (24 * 3600 * 1000); if (numDays > 30) {
|
||||
const numDays = (this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 3600 * 1000);
|
||||
if (numDays > 30) {
|
||||
this.$message({
|
||||
message: '时间范围不能超过30天',
|
||||
type: 'warning'
|
||||
});
|
||||
this.listQuery.reportTime = [];
|
||||
} else {
|
||||
this.listQuery.beginTime = this.listQuery.reportTime[0]
|
||||
this.listQuery.endTime = this.listQuery.reportTime[1]
|
||||
}
|
||||
} else {
|
||||
}
|
||||
},
|
||||
changeTime(value) {
|
||||
if (this.listQuery.reportTime) {
|
||||
const timeStamp = this.listQuery.reportTime[1].getMonth(); //标准时间转为时间戳，毫秒级别
|
||||
const fullyear = this.listQuery.reportTime[1].getFullYear()
|
||||
let days = 0
|
||||
switch (timeStamp) {
|
||||
case 0:
|
||||
case 2:
|
||||
case 4:
|
||||
case 6:
|
||||
case 7:
|
||||
case 9:
|
||||
case 11:
|
||||
days = 31
|
||||
break
|
||||
case 3:
|
||||
case 4:
|
||||
case 8:
|
||||
case 10:
|
||||
days = 30
|
||||
break
|
||||
case 1:
|
||||
if ((fullyear % 400 === 0) || (fullyear % 4 === 0 && fullyear % 100 !== 0)) {
|
||||
days = 29
|
||||
} else {
|
||||
days = 28
|
||||
}
|
||||
break
|
||||
}
|
||||
let startTime = moment(new Date(this.listQuery.reportTime[0]).setDate(1, 0, 0, 0)).format('YYYY-MM-DD HH:mm:ss')
|
||||
// this.startTimeStamp = this.timeFun(new Date(fullyear, timeStamp, 1, 7, 0, 1).getTime()); //开始时间
|
||||
let endTime = this.timeFun(new Date(fullyear, timeStamp, days).getTime()) + ' 23:59:59'; //结束时间
|
||||
// console.log(endTimeStamp);
|
||||
// let endTime = moment(this.listQuery.reportTime[1]).month(monthNum - 1).date(1).endOf("month").format("YYYY-MM-DD");
|
||||
// console.log(endTime);
|
||||
// console.log(moment(new Date(this.listQuery.reportTime[1]).setDate(31, 23, 59, 59)).format('YYYY-MM-DD HH:mm:ss'))
|
||||
// console.log(moment(new Date(this.listQuery.reportTime[1]).getTime()).format('YYYY-MM-DD HH:mm:ss'))
|
||||
|
||||
// this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss');
|
||||
// this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss');
|
||||
const numDays = (new Date(endTime).getTime() - new Date(startTime).getTime()) / (24 * 3600 * 1000); if (numDays > 730) {
|
||||
const numDays = this.listQuery.reportTime[1] - this.listQuery.reportTime[0];
|
||||
if (numDays > 2*365*24*60*60*1000) {
|
||||
this.$message({
|
||||
message: '时间范围不能超过24个月',
|
||||
type: 'warning'
|
||||
});
|
||||
this.listQuery.reportTime = [];
|
||||
} else {
|
||||
this.listQuery.reportTime[0] = startTime
|
||||
this.listQuery.reportTime[1] = endTime
|
||||
this.listQuery.beginTime = this.listQuery.reportTime[0]
|
||||
this.listQuery.endTime = this.listQuery.reportTime[1]
|
||||
}
|
||||
} else {
|
||||
console.log(this.listQuery.reportTime[0])
|
||||
}
|
||||
},
|
||||
// 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()
|
||||
// 产线列表
|
||||
@ -498,6 +410,10 @@ export default {
|
||||
const res = await getProduceDataPage(this.listQuery)
|
||||
console.log(res)
|
||||
this.tableData = res.data.records
|
||||
this.tableData.forEach(item => {
|
||||
item.tableTime = item?.reportDate?.length > 0 ? item.reportDate[0] + '年' + item.reportDate[1] + '月' + item.reportDate[2] + '日' : '--'
|
||||
})
|
||||
this.listQuery.total = res.data.total
|
||||
},
|
||||
add0(m) {
|
||||
return m < 10 ? '0' + m : m
|
||||
@ -526,8 +442,8 @@ export default {
|
||||
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.current = 1;
|
||||
this.listQuery.size = 20;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
@ -539,6 +455,17 @@ export default {
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.$modal.confirm('是否确认导出生产数据?').then(() => {
|
||||
// 处理查询参数
|
||||
let params = {...this.listQuery};
|
||||
params.current = 1;
|
||||
params.size = 999;
|
||||
this.exportLoading = true;
|
||||
return exportOutPutExcel(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '生产数据.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => {});
|
||||
// 处理查询参数
|
||||
// var xlsxParam = { raw: true };
|
||||
// /* 从表生成工作簿对象 */
|
||||
@ -591,7 +518,7 @@ export default {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.app-container {
|
||||
margin: 0 16px 0;
|
||||
margin: 0 0px 0;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px 16px 0;
|
||||
|
||||
@ -1,40 +1,49 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-17 16:31:51
|
||||
* @LastEditTime: 2024-04-17 17:01:14
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-05-17 14:48:57
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-drawer class="drawer" :visible.sync="visible" size="50%">
|
||||
<el-drawer class="drawer" :visible.sync="visible" size="55%" @closed="$emit('destroy')">
|
||||
<small-title slot="title" :no-padding="true">
|
||||
{{ '新增' }}
|
||||
{{ dataForm.id ? '编辑' : '新增' }}
|
||||
</small-title>
|
||||
<div class="detailBox">
|
||||
<el-form ref="form" :model="dataForm" label-width="80px" label-position="top">
|
||||
<el-row :gutter="24" style="padding: 0 32px;">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="工厂名称" prop="factoryId">
|
||||
<el-select v-model="dataForm.factoryId" placeholder="请选择工厂名称" multiple="true" clearable>
|
||||
<el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
|
||||
<el-form-item v-if="ftype === 0" label="工厂名称" prop="factory">
|
||||
<el-select v-model="dataForm.factory" placeholder="请选择工厂名称" clearable>
|
||||
<el-option v-for="(item, index) in dhgfactoryList" :key="index" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-else label="工厂名称" prop="factory">
|
||||
<el-select v-model="dataForm.factory" placeholder="请选择工厂名称" clearable>
|
||||
<el-option v-for="(item, index) in tyjxfactoryList" :key="index" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="工厂名称" prop="factoryId">
|
||||
<el-select v-model="dataForm.factoryId" placeholder="请选择工厂名称" multiple="true" clearable>
|
||||
<el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
<el-form-item label="时间维度" prop="targetType">
|
||||
<el-select v-model="dataForm.targetType" placeholder="请选择时间维度" clearable @change="clearTime">
|
||||
<!-- <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"> -->
|
||||
<el-option label="月" :value="0" />
|
||||
<el-option label="年" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="工厂名称" prop="factoryId">
|
||||
<el-select v-model="dataForm.factoryId" placeholder="请选择工厂名称" multiple="true" clearable>
|
||||
<el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-form-item v-show="dataForm.targetType !== 1" label="时间" prop="reportTime">
|
||||
<el-date-picker v-model="dataForm.reportTime" value-format="yyyy-MM" type="month" placeholder="选择月份">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="dataForm.targetType === 1" label="时间" prop="targetYear">
|
||||
<el-date-picker clearable v-model="dataForm.showYear" value-format="yyyy" type="year" placeholder="开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -44,59 +53,57 @@
|
||||
</small-title>
|
||||
<el-row :gutter="24" style="padding: 0 32px;">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="芯片产量" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入芯片产量"></el-input>
|
||||
<el-form-item label="芯片产量" prop="chipYield">
|
||||
<el-input-number v-model="dataForm.chipYield" :precision="0" controls-position="right" placeholder="请输入芯片产量" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="芯片良率" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入芯片良率"></el-input>
|
||||
|
||||
<el-form-item label="芯片良率" prop="chipYieldRate">
|
||||
<el-input-number v-model="dataForm.chipYieldRate" :precision="2" :max="100" controls-position="right" placeholder="请输入芯片良率" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="芯片BOM" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入芯片BOM"></el-input>
|
||||
<el-form-item label="芯片BOM" prop="chipBom">
|
||||
<el-input-number v-model="dataForm.chipBom" :precision="2" controls-position="right" placeholder="请输入芯片BOM" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="芯片总功率" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入芯片总功率"></el-input>
|
||||
<el-form-item label="芯片总功率" prop="chipTotalPower">
|
||||
<el-input-number v-model="dataForm.chipTotalPower" :precision="2" controls-position="right" placeholder="请输入芯片总功率" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" style="padding: 0 32px;">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="FTO投入量" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入FTO投入量"></el-input>
|
||||
<el-form-item label="FTO投入量" prop="ftoInput">
|
||||
<el-input-number v-model="dataForm.ftoInput" :precision="0" controls-position="right" placeholder="请输入FTO投入量" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="CSS稼动率" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入CSS稼动率"></el-input>
|
||||
|
||||
<el-form-item label="CSS稼动率" prop="chipCssMarriageRate">
|
||||
<el-input-number v-model="dataForm.chipCssMarriageRate" :precision="2" controls-position="right" placeholder="请输入CSS稼动率" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="芯片段OEE" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入芯片段OEE"></el-input>
|
||||
<el-form-item label="芯片段OEE" prop="chipOee">
|
||||
<el-input-number v-model="dataForm.chipOee" :precision="2" controls-position="right" placeholder="请输入芯片段OEE" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="芯片平均功率" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入芯片平均功率"></el-input>
|
||||
<el-form-item label="芯片平均功率" prop="chipAveragePower">
|
||||
<el-input-number v-model="dataForm.chipAveragePower" :precision="2" controls-position="right" placeholder="请输入芯片平均功率" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" style="padding: 0 32px;">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="芯片人均产量" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入芯片人均产量"></el-input>
|
||||
<el-form-item label="芯片人均产量" prop="chipAnnualAverageProduction">
|
||||
<el-input-number v-model="dataForm.chipAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入芯片人均产量" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="芯片人均产量" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入芯片人均产量"></el-input>
|
||||
<el-form-item label="芯片产能利用率" prop="chipCapacityUtilizationRate">
|
||||
<el-input-number v-model="dataForm.chipCapacityUtilizationRate" :precision="2" controls-position="right" placeholder="请输入芯片产能利用率" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -106,45 +113,45 @@
|
||||
</small-title>
|
||||
<el-row :gutter="24" style="padding: 0 32px;">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="封装BOM" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入封装BOM"></el-input>
|
||||
<el-form-item label="封装BOM" prop="componentBom">
|
||||
<el-input-number v-model="dataForm.componentBom" :precision="2" controls-position="right" placeholder="请输入封装BOM" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="封装线OEE" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入封装线OEE"></el-input>
|
||||
<el-form-item label="封装线OEE" prop="componentOee">
|
||||
<el-input-number v-model="dataForm.componentOee" :precision="2" controls-position="right" placeholder="请输入封装线OEE" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="标准组件良率" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入标准组件良率"></el-input>
|
||||
<el-form-item label="标准组件良率" prop="componentYieldRate">
|
||||
<el-input-number v-model="dataForm.componentYieldRate" :precision="2" controls-position="right" placeholder="请输入标准组件良率" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="标准组件良率" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入标准组件良率"></el-input>
|
||||
<el-form-item label="标准组件产量" prop="componentYield">
|
||||
<el-input-number v-model="dataForm.componentYield" :precision="0" controls-position="right" placeholder="请输入标准组件产量" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" style="padding: 0 32px;">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="标准组件总功率" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入标准组件总功率"></el-input>
|
||||
<el-form-item label="标准组件总功率" prop="componentTotalPower">
|
||||
<el-input-number v-model="dataForm.componentTotalPower" :precision="2" controls-position="right" placeholder="请输入标准组件总功率" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="标准组件总功率" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入标准组件总功率"></el-input>
|
||||
<el-form-item label="封装产能利用率" prop="componentCapacityUtilizationRate">
|
||||
<el-input-number v-model="dataForm.componentCapacityUtilizationRate" :precision="2" controls-position="right" placeholder="请输入封装产能利用率" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="标准组件人均产量" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入标准组件人均产量"></el-input>
|
||||
<el-form-item label="标准组件人均产量" prop="componentAnnualAverageProduction">
|
||||
<el-input-number v-model="dataForm.componentAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入标准组件人均产量" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="标准组件平均功率" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入标准组件平均功率"></el-input>
|
||||
<el-form-item label="标准组件平均功率" prop="componentAveragePower">
|
||||
<el-input-number v-model="dataForm.componentAveragePower" :precision="2" controls-position="right" placeholder="请输入标准组件平均功率" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -155,47 +162,47 @@
|
||||
</small-title>
|
||||
<el-row :gutter="24" style="padding: 0 32px;">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="产品产量" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入产品产量"></el-input>
|
||||
<el-form-item label="产品产量" prop="bipvProductOutput">
|
||||
<el-input-number v-model="dataForm.bipvProductOutput" :precision="0" controls-position="right" placeholder="请输入产品产量" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="人均产量" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入人均产量"></el-input>
|
||||
<el-form-item label="人均产量" prop="bipvAnnualAverageProduction">
|
||||
<el-input-number v-model="dataForm.bipvAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入人均产量" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="芯片使用量" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入芯片使用量"></el-input>
|
||||
<el-form-item label="芯片使用量" prop="bipvChipUsage">
|
||||
<el-input-number v-model="dataForm.bipvChipUsage" :precision="0" controls-position="right" placeholder="请输入芯片使用量" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="芯片利用率" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入芯片利用率"></el-input>
|
||||
<el-form-item label="芯片利用率" prop="bipvChipUtilizationRate">
|
||||
<el-input-number v-model="dataForm.bipvChipUtilizationRate" :precision="2" controls-position="right" placeholder="请输入芯片利用率" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" style="padding: 0 32px;">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="内部材料成本" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入内部材料成本"></el-input>
|
||||
<el-form-item label="内部材料成本" prop="bipvInsideMaterialCost">
|
||||
<el-input-number v-model="dataForm.bipvInsideMaterialCost" :precision="2" controls-position="right" placeholder="请输入内部材料成本" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="OEM及委外材料成本" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入OEM及委外材料成本"></el-input>
|
||||
<el-form-item label="OEM及委外材料成本" prop="bipvOeeMaterialCost">
|
||||
<el-input-number v-model="dataForm.bipvOeeMaterialCost" :precision="2" controls-position="right" placeholder="请输入OEM及委外材料成本" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="综合材料成本" prop="factoryId">
|
||||
<el-input v-model="dataForm.factoryId" placeholder="请输入综合材料成本"></el-input>
|
||||
<el-form-item label="综合材料成本" prop="bipvComprehensiveMaterialCost">
|
||||
<el-input-number v-model="dataForm.bipvComprehensiveMaterialCost" :precision="2" controls-position="right" placeholder="请输入综合材料成本" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<el-button @click="cancelForm">取 消</el-button>
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleClose()">确 定</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
@ -210,20 +217,25 @@
|
||||
// } from "@/api/base/qualityScrapLog";
|
||||
// import { getList, } from "@/api/base/qualityScrapType";
|
||||
import SmallTitle from './SmallTitle';
|
||||
import { createProduce, getProduceTargetDetail, updateProduceTarget } from '@/api/produceData';
|
||||
import { factoryList, tyjxfactoryList, dhgfactoryList } from "@/utils/constants";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SmallTitle,
|
||||
},
|
||||
// mixins: [basicAdd],
|
||||
props: {
|
||||
ftype: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
isGetCode: false,
|
||||
// codeURL: getCode,
|
||||
// createURL: createQualityScrapLog,
|
||||
// updateURL: updateQualityScrapLog,
|
||||
// infoURL: getQualityScrapLog,
|
||||
},
|
||||
factoryList,
|
||||
dhgfactoryList,
|
||||
tyjxfactoryList,
|
||||
lineList: [],
|
||||
typeList: [],
|
||||
workOrderList: [],
|
||||
@ -239,138 +251,165 @@ export default {
|
||||
name: '自动',
|
||||
}
|
||||
],
|
||||
factoryList:[],
|
||||
// factoryList: [
|
||||
// {
|
||||
// name: '瑞昌中建材光电材料有限公司',
|
||||
// id: 0
|
||||
// },
|
||||
// {
|
||||
// name: '邯郸中建材光电材料有限公司',
|
||||
// id: 1
|
||||
// },
|
||||
// {
|
||||
// name: '中建材株洲光电材料有限公司',
|
||||
// id: 2
|
||||
// },
|
||||
// {
|
||||
// name: '佳木斯中建材光电材料有限公司',
|
||||
// id: 3
|
||||
// },
|
||||
// {
|
||||
// name: '成都中建材光电材料有限公司',
|
||||
// id: 4
|
||||
// },
|
||||
// {
|
||||
// name: '凯盛光伏材料有限公司',
|
||||
// id: 5
|
||||
// },
|
||||
// {
|
||||
// name: '蚌埠兴科玻璃有限公司',
|
||||
// id: 6
|
||||
// }
|
||||
// ],
|
||||
sectionList: [],
|
||||
visible: false,
|
||||
dataForm: {
|
||||
factoryType: 0,
|
||||
id: undefined,
|
||||
logTime: undefined,
|
||||
source: 1,
|
||||
detId: undefined,
|
||||
workOrderId: null,
|
||||
teamId: undefined,
|
||||
num: undefined,
|
||||
lineId: undefined,
|
||||
description: undefined,
|
||||
// description: undefined,
|
||||
remark: undefined,
|
||||
reportTime: undefined, // 月时间
|
||||
factory: undefined,
|
||||
targetType: undefined,
|
||||
targetYear: undefined,
|
||||
showYear: undefined,
|
||||
targetMonth: undefined,
|
||||
chipYield: undefined,
|
||||
chipYieldRate: undefined,
|
||||
chipBom: undefined,
|
||||
chipTotalPower: undefined,
|
||||
ftoInput: undefined,
|
||||
chipCssMarriageRate: undefined,
|
||||
chipOee: undefined,
|
||||
chipAveragePower: undefined,
|
||||
chipAnnualAverageProduction: undefined,
|
||||
chipCapacityUtilizationRate: undefined,
|
||||
componentBom: undefined,
|
||||
componentOee: undefined,
|
||||
componentYieldRate: undefined,
|
||||
componentYield: undefined,
|
||||
componentTotalPower: undefined,
|
||||
componentCapacityUtilizationRate: undefined,
|
||||
componentAnnualAverageProduction: undefined,
|
||||
componentAveragePower: undefined,
|
||||
bipvProductOutput: undefined,
|
||||
bipvAnnualAverageProduction: undefined,
|
||||
bipvChipUsage: undefined,
|
||||
bipvChipUtilizationRate: undefined,
|
||||
bipvInsideMaterialCost: undefined,
|
||||
bipvOeeMaterialCost: undefined,
|
||||
bipvComprehensiveMaterialCost: undefined
|
||||
},
|
||||
// materialList: [],
|
||||
dataRule: {
|
||||
// materialId: [{ required: true, message: "", trigger: "blur" }],
|
||||
workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }],
|
||||
num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
|
||||
detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }],
|
||||
// workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }],
|
||||
// num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
|
||||
// detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }],
|
||||
|
||||
logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }],
|
||||
// logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }],
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getDict()
|
||||
console.log('我看看', this.dataForm)
|
||||
this.dataForm.factoryType = this.ftype
|
||||
// this.getCurrentTime()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.visible = true
|
||||
formClear() {
|
||||
if (this.$refs.dataForm !== undefined) {
|
||||
this.$refs.dataForm.resetFields()
|
||||
}
|
||||
},
|
||||
// getCurrentTime() {
|
||||
// // new Date().Format("yyyy-MM-dd HH:mm:ss")
|
||||
// this.dataForm.logTime = new Date()
|
||||
// // this.dataForm.logTime = year + "-" + month + "-" + day;
|
||||
// console.log(this.dataForm.logTime);
|
||||
// },
|
||||
async getDict() {
|
||||
// // 物料列表
|
||||
// const res = await getList()
|
||||
// this.typeList = res.data
|
||||
// getWorkOrderList().then((res) => {
|
||||
// console.log(res);
|
||||
// // console.log(response);
|
||||
// this.workOrderList = res.data.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// id: item.id
|
||||
// }
|
||||
// })
|
||||
// // console.log(this.formConfig[0].selectOptions);
|
||||
// // this.listQuery.total = response.data.total;
|
||||
// })
|
||||
// getLineList().then((res) => {
|
||||
// console.log(res);
|
||||
// // console.log(response);
|
||||
// this.lineList = res.data.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// id: item.id
|
||||
// }
|
||||
// })
|
||||
// // console.log(this.formConfig[0].selectOptions);
|
||||
// // this.listQuery.total = response.data.total;
|
||||
// })
|
||||
// getDetList().then((res) => {
|
||||
// console.log(res);
|
||||
// // console.log(response);
|
||||
// this.detList = res.data.map((item) => {
|
||||
// return {
|
||||
// name: item.content,
|
||||
// id: item.id
|
||||
// }
|
||||
// })
|
||||
// // console.log(this.formConfig[0].selectOptions);
|
||||
// // this.listQuery.total = response.data.total;
|
||||
// })
|
||||
// getTeamList().then((res) => {
|
||||
// console.log(res);
|
||||
// // console.log(response);
|
||||
// this.teamList = res.data.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// id: item.id
|
||||
// }
|
||||
// })
|
||||
// // console.log(this.formConfig[0].selectOptions);
|
||||
// // this.listQuery.total = response.data.total;
|
||||
// })
|
||||
// },
|
||||
// async getWorksectionById(lineId) {
|
||||
// if (lineId) {
|
||||
// const { code, data } = await this.$axios({
|
||||
// url: '/base/core-workshop-section/listByParentId',
|
||||
// method: 'get',
|
||||
// params: {
|
||||
// id: lineId,
|
||||
// },
|
||||
// });
|
||||
// if (code == 0) {
|
||||
// console.log(data)
|
||||
// this.sectionList = data.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// id: item.id,
|
||||
// };
|
||||
// });
|
||||
// }
|
||||
clearTime() {
|
||||
this.dataForm.targetYear = undefined
|
||||
this.dataForm.targetMonth = undefined
|
||||
},
|
||||
handleClose() {
|
||||
// 新增
|
||||
if (this.dataForm.targetType === 0) {
|
||||
const timeArray = this.dataForm.reportTime.split('-')
|
||||
this.dataForm.targetYear = Number(timeArray[0])
|
||||
this.dataForm.targetMonth = Number(timeArray[1])
|
||||
}
|
||||
if (this.dataForm.targetType === 1) {
|
||||
this.dataForm.targetYear = Number(this.dataForm.showYear)
|
||||
}
|
||||
// if (this.dataForm.factory === 5) {
|
||||
// this.dataForm.factoryType = 1
|
||||
// } else {
|
||||
// this.$axios({
|
||||
// url: '/base/core-workshop-section/listAll',
|
||||
// method: 'get',
|
||||
// // params: {
|
||||
// // id: lineId,
|
||||
// // },
|
||||
// }).then((res) => {
|
||||
// // console.log(data)
|
||||
// this.sectionList = res.data.map((item) => {
|
||||
// return {
|
||||
// name: item.name,
|
||||
// id: item.id,
|
||||
// };
|
||||
// });
|
||||
// })
|
||||
// this.dataForm.factoryType = 0
|
||||
// }
|
||||
if (this.dataForm.id) {
|
||||
// 修改
|
||||
updateProduceTarget({
|
||||
...this.dataForm,
|
||||
showYear: undefined,
|
||||
reportTime: undefined
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success('修改成功！')
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 新增
|
||||
createProduce({
|
||||
...this.dataForm,
|
||||
showYear: undefined,
|
||||
reportTime: undefined
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success('新增成功！')
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
init(id) {
|
||||
this.dataForm.id = id || undefined
|
||||
this.visible = true
|
||||
if (this.dataForm.id) {
|
||||
getProduceTargetDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
if (this.dataForm.targetType === 1) {
|
||||
if (this.dataForm.targetYear) {
|
||||
this.$set(this.dataForm, 'showYear', String(this.dataForm.targetYear))
|
||||
}
|
||||
}
|
||||
if (this.dataForm.targetType === 0) {
|
||||
if (this.dataForm.targetYear && this.dataForm.targetMonth !== null) {
|
||||
if (this.dataForm.targetMonth < 10) {
|
||||
this.$set(this.dataForm, 'reportTime', String(this.dataForm.targetYear) + '-0' + String(this.dataForm.targetMonth))
|
||||
} else {
|
||||
this.$set(this.dataForm, 'reportTime', String(this.dataForm.targetYear) + '-' + String(this.dataForm.targetMonth))
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
@ -1,18 +1,30 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-15 10:49:13
|
||||
* @LastEditTime: 2024-04-17 16:37:35
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-05-17 17:54:54
|
||||
* @LastEditors: DY
|
||||
* @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;">
|
||||
<ButtonNav :menus="['碲化镉工厂', '铜铟镓硒工厂']" :button-mode="true" @change="currentMenu = $event">
|
||||
<ButtonNav :menus="['碲化镉工厂', '铜铟镓硒工厂']" :button-mode="true" @change="changeFactory" style="margin-top: -10px">
|
||||
</ButtonNav>
|
||||
<div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;">
|
||||
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
|
||||
<el-form-item label="时间维度" prop="reportTime">
|
||||
<el-select clearable v-model="timeSelect" placeholder="请选择">
|
||||
<el-form-item v-if="facType === 0" label="工厂名称" prop="factorys">
|
||||
<el-select size="small" v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple clearable>
|
||||
<el-option v-for="item in dhgfactoryList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-else label="工厂名称" prop="factorys">
|
||||
<el-select size="small" v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple clearable>
|
||||
<el-option v-for="item in tyjxfactoryList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<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>
|
||||
@ -34,26 +46,20 @@
|
||||
{{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
|
||||
</span>
|
||||
</el-form-item> -->
|
||||
<el-form-item v-show="timeSelect === 'month'" label="时间范围" prop="reportTime">
|
||||
<el-date-picker v-model="listQuery.reportTime" type="monthrange" range-separator="至" start-placeholder="开始月份"
|
||||
<el-form-item v-show="listQuery.date !== 4" label="时间值" prop="reportTime">
|
||||
<el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="timestamp" range-separator="至" start-placeholder="开始月份"
|
||||
end-placeholder="结束月份" @change="changeTime">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="timeSelect === 'year'" label="时间范围" prop="reportTime">
|
||||
<el-date-picker clearable v-model="listQuery.reportTime[0]" value-format="yyyy" type="year"
|
||||
<el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime">
|
||||
<el-date-picker size="small" clearable v-model="start" value-format="timestamp" type="year"
|
||||
placeholder="开始时间">
|
||||
</el-date-picker>
|
||||
~
|
||||
<el-date-picker clearable v-model="listQuery.reportTime[1]" value-format="yyyy" type="year" placeholder="结束时间"
|
||||
<el-date-picker size="small" clearable v-model="end" value-format="timestamp" type="year" placeholder="结束时间"
|
||||
@change="getYear">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="工厂名称" prop="factoryId">
|
||||
<el-select v-model="listQuery.factoryId" placeholder="请选择工厂名称" multiple="true" clearable>
|
||||
<el-option v-for="item in factoryList" :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">
|
||||
@ -68,28 +74,50 @@
|
||||
</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"
|
||||
<base-table :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size"
|
||||
:table-data="tableData">
|
||||
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
|
||||
:method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<detail-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @refreshDataList="successSubmit" />
|
||||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="successSubmit" />
|
||||
|
||||
<!-- <el-row :gutter="24"> -->
|
||||
<!-- <el-col :span="12" v-for="item in dataList" :key="item.id"> -->
|
||||
<!-- <line-chart 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> -->
|
||||
<pagination
|
||||
:limit.sync="listQuery.size"
|
||||
:page.sync="listQuery.current"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList"
|
||||
/>
|
||||
<detail-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @destroy="detailOrUpdateVisible = false" />
|
||||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :ftype="facType" @refreshDataList="getDataList" @destroy="addOrUpdateVisible = false" />
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
||||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
|
||||
:action="upload.url" :disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip text-center" slot="tip">
|
||||
<!-- <div class="el-upload__tip" slot="tip">
|
||||
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
|
||||
</div> -->
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<!-- <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link> -->
|
||||
</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||
<el-button @click="upload.open = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
|
||||
:type="listQuery.reportType" @refreshDataList="getDataList" /> -->
|
||||
<!-- <pagination
|
||||
@ -101,8 +129,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { parseTime } from '../../core/mixins/code-filter';
|
||||
// import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
|
||||
import { parseTime } from '@/utils/ruoyi';
|
||||
import { prodTargetDiPage, prodTargetToPage, exportDiTargetExcel, exportToTargetExcel, delTarget } from '@/api/produceData';
|
||||
// import inputTable from './inputTable.vue';
|
||||
import lineChart from './lineChart';
|
||||
import moment from 'moment'
|
||||
@ -110,6 +138,8 @@ 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 FileSaver from 'file-saver'
|
||||
@ -119,19 +149,41 @@ export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
factoryList,
|
||||
dhgfactoryList,
|
||||
tyjxfactoryList,
|
||||
currentMenu: '碲化镉工厂',
|
||||
start: undefined,
|
||||
end: undefined,
|
||||
listQuery: {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
factoryId: null,
|
||||
size: 10,
|
||||
current: 1,
|
||||
factorys: null,
|
||||
total: 0,
|
||||
type: null,
|
||||
// reportType: 2,
|
||||
date: undefined,
|
||||
beginTime: undefined,
|
||||
endTime: undefined,
|
||||
reportTime: []
|
||||
},
|
||||
detailOrUpdateVisible: false,
|
||||
addOrUpdateVisible:false,
|
||||
date1: undefined,
|
||||
date2: undefined,
|
||||
// 用户导入参数
|
||||
upload: {
|
||||
// 是否显示弹出层（用户导入）
|
||||
open: false,
|
||||
// 弹出层标题（用户导入）
|
||||
title: "导入",
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的用户数据
|
||||
// updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: getBaseHeader(),
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + '/ip/prod-target/di-target-import-excel'
|
||||
},
|
||||
tableBtn: [
|
||||
{
|
||||
type: 'detail',
|
||||
@ -144,7 +196,7 @@ export default {
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: '删除',
|
||||
},
|
||||
}
|
||||
].filter((v) => v),
|
||||
typeList: [
|
||||
{
|
||||
@ -159,27 +211,6 @@ export default {
|
||||
name: 'BIPV产品',
|
||||
id: 2,
|
||||
},
|
||||
],
|
||||
// weekNum: undefined,
|
||||
dataList: [
|
||||
{
|
||||
id:'first',
|
||||
},
|
||||
{
|
||||
id: 'second',
|
||||
},
|
||||
{
|
||||
id: 'third',
|
||||
},
|
||||
{
|
||||
id: 'fourth',
|
||||
},
|
||||
{
|
||||
id: 'fifth',
|
||||
},
|
||||
{
|
||||
id: 'sixth',
|
||||
},
|
||||
],
|
||||
urlOptions: {
|
||||
// getDataListURL: getGlassPage,
|
||||
@ -270,120 +301,106 @@ export default {
|
||||
},
|
||||
],
|
||||
timeList: [
|
||||
// {
|
||||
// value: 'day',
|
||||
// label: '日'
|
||||
// },
|
||||
// {
|
||||
// value: 'week',
|
||||
// label: '周'
|
||||
// },
|
||||
{
|
||||
value: 'month',
|
||||
value: 3,
|
||||
label:'月'
|
||||
},
|
||||
{
|
||||
value: 'year',
|
||||
value: 4,
|
||||
label: '年'
|
||||
}
|
||||
],
|
||||
factoryList: [
|
||||
{
|
||||
name: '测试',
|
||||
id:1
|
||||
},
|
||||
{
|
||||
name: '测试2',
|
||||
id: 2
|
||||
}
|
||||
],
|
||||
tableProps: [
|
||||
// {
|
||||
// prop: 'createTime',
|
||||
// label: '添加时间',
|
||||
// fixed: true,
|
||||
// width: 180,
|
||||
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
|
||||
// },
|
||||
|
||||
{
|
||||
prop: 'nickName',
|
||||
prop: 'factory',
|
||||
label: '工厂名称',
|
||||
filter: (val) => factoryList[val],
|
||||
minWidth: 200,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'userName',
|
||||
prop: 'tagertTime',
|
||||
label: '目标时间',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
prop: 'createTime',
|
||||
label: '提交时间',
|
||||
filter: parseTime,
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'inNum',
|
||||
prop: 'molybdenumElectrodeInput',
|
||||
label: '钼电极投入量(片)',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'putNum',
|
||||
prop: 'chipYield',
|
||||
label: '芯片产量(片)',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'goodNum',
|
||||
prop: 'chipAveragePower',
|
||||
label: '芯片平均功率(W)',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'goodYelid',
|
||||
prop: 'chipYieldRate',
|
||||
label: '芯片良率(%)',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'goodYelid',
|
||||
prop: 'chipTotalPower',
|
||||
label: '芯片总功率(KW)',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'goodYelid',
|
||||
label: 'PID6稼动率(%)',
|
||||
prop: 'chipCssMarriageRate',
|
||||
label: 'CSS稼动率(%)',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'goodYelid',
|
||||
prop: 'chipOee',
|
||||
label: '芯片段OEE(%)',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'goodYelid',
|
||||
prop: 'chipCapacityUtilizationRate',
|
||||
label: '芯片产能利用率(%)',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'goodYelid',
|
||||
prop: 'chipAnnualAverageProduction',
|
||||
label: '芯片人均产量（片/人）',
|
||||
minWidth: 180,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'goodYelid',
|
||||
prop: 'chipBom',
|
||||
label: '芯片BOM',
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
],
|
||||
timeSelect:'month',
|
||||
// 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
|
||||
}
|
||||
],
|
||||
tableData: [],
|
||||
facType: 0
|
||||
// proLineList: [],
|
||||
// all: {}
|
||||
};
|
||||
@ -394,11 +411,60 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getDict()
|
||||
// this.getDict()
|
||||
// this.getCurrentYearFirst()
|
||||
// this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
handleImport() {
|
||||
this.upload.title = "生产目标导入";
|
||||
this.upload.open = true;
|
||||
},
|
||||
// 文件上传中处理
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
if (response.code !== 0) {
|
||||
this.$modal.msgError(response.msg)
|
||||
return;
|
||||
}
|
||||
this.upload.open = false;
|
||||
this.upload.isUploading = false;
|
||||
this.$refs.upload.clearFiles();
|
||||
// 拼接提示语
|
||||
// let data = response.data;
|
||||
// let text = '创建成功数量：' + data.createUsernames.length;
|
||||
// for (const username of data.createUsernames) {
|
||||
// text += '<br /> ' + username;
|
||||
// }
|
||||
// text += '<br />更新成功数量：' + data.updateUsernames.length;
|
||||
// for (const username of data.updateUsernames) {
|
||||
// text += '<br /> ' + username;
|
||||
// }
|
||||
// text += '<br />更新失败数量：' + Object.keys(data.failureUsernames).length;
|
||||
// for (const username in data.failureUsernames) {
|
||||
// text += '<br /> ' + username + '：' + data.failureUsernames[username];
|
||||
// }
|
||||
this.$message.success('导入成功！');
|
||||
this.getDataList();
|
||||
},
|
||||
// 提交上传文件
|
||||
submitFileForm() {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
addFactory() {
|
||||
this.addOrUpdateVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init();
|
||||
});
|
||||
},
|
||||
changeFactory($event) {
|
||||
this.currentMenu = $event
|
||||
this.facType = this.currentMenu === '碲化镉工厂' ? 0 : 1
|
||||
this.getDataList()
|
||||
},
|
||||
handleClick(val) {
|
||||
if (val.type === "edit") {
|
||||
this.addOrUpdateVisible = true;
|
||||
@ -407,11 +473,33 @@ export default {
|
||||
this.$refs.addOrUpdate.init(val.data.id);
|
||||
});
|
||||
} else if (val.type === "delete") {
|
||||
this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex)
|
||||
console.log('啊啊', val)
|
||||
this.deleteHandle(val.data.id, val.data.factory, val.data._pageIndex)
|
||||
} else {
|
||||
this.otherMethods(val)
|
||||
}
|
||||
},
|
||||
// 删除
|
||||
deleteHandle(id, name, index) {
|
||||
this.$confirm('是否确认删除工厂名称为' + factoryList[name] + '的数据项?', "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
delTarget(id).then(({ data }) => {
|
||||
this.$message({
|
||||
message: "操作成功",
|
||||
type: "success",
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getDataList();
|
||||
},
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(() => { });
|
||||
},
|
||||
otherMethods(val) {
|
||||
this.detailOrUpdateVisible = true;
|
||||
this.addOrEditTitle = "详情";
|
||||
@ -423,133 +511,34 @@ export default {
|
||||
|
||||
},
|
||||
getYear(e) {
|
||||
if (this.listQuery.reportTime[0] && e - this.listQuery.reportTime[0] > 10) {
|
||||
if (this.end && e - this.start > 10 * 365*24*60*60*1000) {
|
||||
this.$message({
|
||||
message: '年份起止时间不能超过十年',
|
||||
type: 'warning'
|
||||
});
|
||||
// console.log();
|
||||
} else {
|
||||
if (this.end < this.start) {
|
||||
this.$message({
|
||||
message: '结束年份不能小于开始年份',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
}
|
||||
// console.log(e);
|
||||
},
|
||||
onValueChange(picker, k) { // 选中近k周后触发的操作
|
||||
if (this.listQuery.reportTime[0] && this.listQuery.reportTime[1]) {
|
||||
console.log(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000)
|
||||
this.date1 = moment(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
// this.onValueChange() // 这里为我们希望value改变时触发的方法
|
||||
this.date2 = moment(this.listQuery.reportTime[1].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'
|
||||
});
|
||||
// this.onValueChange()
|
||||
}
|
||||
}
|
||||
},
|
||||
changeDayTime() {
|
||||
changeTime() {
|
||||
if (this.listQuery.reportTime) {
|
||||
// this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss');
|
||||
// this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss');
|
||||
console.log(this.listQuery.reportTime[1])
|
||||
const numDays = (new Date(this.listQuery.reportTime[1]).getTime() - new Date(this.listQuery.reportTime[0]).getTime()) / (24 * 3600 * 1000); if (numDays > 30) {
|
||||
this.$message({
|
||||
message: '时间范围不能超过30天',
|
||||
type: 'warning'
|
||||
});
|
||||
this.listQuery.reportTime = [];
|
||||
}
|
||||
} else {
|
||||
}
|
||||
},
|
||||
changeTime(value) {
|
||||
if (this.listQuery.reportTime) {
|
||||
const timeStamp = this.listQuery.reportTime[1].getMonth(); //标准时间转为时间戳，毫秒级别
|
||||
const fullyear = this.listQuery.reportTime[1].getFullYear()
|
||||
let days = 0
|
||||
switch (timeStamp) {
|
||||
case 0:
|
||||
case 2:
|
||||
case 4:
|
||||
case 6:
|
||||
case 7:
|
||||
case 9:
|
||||
case 11:
|
||||
days = 31
|
||||
break
|
||||
case 3:
|
||||
case 4:
|
||||
case 8:
|
||||
case 10:
|
||||
days = 30
|
||||
break
|
||||
case 1:
|
||||
if ((fullyear % 400 === 0) || (fullyear % 4 === 0 && fullyear % 100 !== 0)) {
|
||||
days = 29
|
||||
} else {
|
||||
days = 28
|
||||
}
|
||||
break
|
||||
}
|
||||
let startTime = moment(new Date(this.listQuery.reportTime[0]).setDate(1, 0, 0, 0)).format('YYYY-MM-DD HH:mm:ss')
|
||||
// this.startTimeStamp = this.timeFun(new Date(fullyear, timeStamp, 1, 7, 0, 1).getTime()); //开始时间
|
||||
let endTime = this.timeFun(new Date(fullyear, timeStamp, days).getTime()) + ' 23:59:59'; //结束时间
|
||||
// console.log(endTimeStamp);
|
||||
// let endTime = moment(this.listQuery.reportTime[1]).month(monthNum - 1).date(1).endOf("month").format("YYYY-MM-DD");
|
||||
// console.log(endTime);
|
||||
// console.log(moment(new Date(this.listQuery.reportTime[1]).setDate(31, 23, 59, 59)).format('YYYY-MM-DD HH:mm:ss'))
|
||||
// console.log(moment(new Date(this.listQuery.reportTime[1]).getTime()).format('YYYY-MM-DD HH:mm:ss'))
|
||||
|
||||
// this.createStartDate = moment(new Date(this.listQuery.reportTime[0]), 'yyyy-MM-dd hh:mm:ss');
|
||||
// this.createEndDate = moment(new Date(this.listQuery.reportTime[1]), 'yyyy-MM-dd hh:mm:ss');
|
||||
const numDays = (new Date(endTime).getTime() - new Date(startTime).getTime()) / (24 * 3600 * 1000); if (numDays > 730) {
|
||||
const numDays = this.listQuery.reportTime[1] - this.listQuery.reportTime[0]
|
||||
if (numDays > 2*365*24*60*60*1000) {
|
||||
this.$message({
|
||||
message: '时间范围不能超过24个月',
|
||||
type: 'warning'
|
||||
});
|
||||
this.listQuery.reportTime = [];
|
||||
} else {
|
||||
this.listQuery.reportTime[0] = startTime
|
||||
this.listQuery.reportTime[1] = endTime
|
||||
}
|
||||
} else {
|
||||
console.log(this.listQuery.reportTime[0])
|
||||
}
|
||||
},
|
||||
// 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 getCorePLList();
|
||||
// this.proLineList = res.data;
|
||||
},
|
||||
// 获取数据列表
|
||||
multipliedByHundred(str) {
|
||||
console.log(str);
|
||||
@ -574,36 +563,50 @@ export default {
|
||||
|
||||
},
|
||||
async getDataList() {
|
||||
},
|
||||
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
|
||||
},
|
||||
//时间戳转为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)
|
||||
if (this.listQuery.date === 3) {
|
||||
if (this.listQuery.reportTime?.length > 0) {
|
||||
this.listQuery.beginTime = this.listQuery.reportTime[0] ? this.listQuery.reportTime[0] : undefined
|
||||
this.listQuery.endTime = this.listQuery.reportTime[1] ? this.listQuery.reportTime[1] : undefined
|
||||
}
|
||||
}
|
||||
if (this.listQuery.date === 4) {
|
||||
if (this.listQuery.reportTime?.length > 0) {
|
||||
this.listQuery.beginTime = this.start ? this.start : undefined
|
||||
this.listQuery.endTime = this.end ? this.end : undefined
|
||||
}
|
||||
}
|
||||
if (this.currentMenu === '碲化镉工厂') {
|
||||
await prodTargetDiPage(this.listQuery).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.records
|
||||
this.tableData.forEach(item => {
|
||||
const year = item.targetYear ? item.targetYear + '年' : ''
|
||||
const month = item.targetMonth ? item.targetMonth + '月' : ''
|
||||
item.tagertTime = year + month
|
||||
})
|
||||
this.listQuery.total = res.data.total
|
||||
}
|
||||
})
|
||||
} else {
|
||||
await prodTargetToPage(this.listQuery).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.records
|
||||
this.tableData.forEach(item => {
|
||||
const year = item.targetYear ? item.targetYear + '年' : ''
|
||||
const month = item.targetMonth ? item.targetMonth + '月' : ''
|
||||
item.tagertTime = year + month
|
||||
})
|
||||
this.listQuery.total = res.data.total
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
buttonClick(val) {
|
||||
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.current = 1;
|
||||
this.listQuery.size = 10;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
@ -615,38 +618,27 @@ export default {
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
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;
|
||||
queryParams.current = 1
|
||||
queryParams.size = 999
|
||||
if (this.facType === 0) {
|
||||
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
|
||||
this.exportLoading = true;
|
||||
return exportDiTargetExcel(queryParams);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '碲化镉工厂生产目标数据.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => {});
|
||||
} else {
|
||||
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
|
||||
this.exportLoading = true;
|
||||
return exportToTargetExcel(queryParams);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '铜铟镓硒工厂生产目标数据.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -667,7 +659,7 @@ export default {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.app-container {
|
||||
margin: 0 16px 0;
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px 16px 0;
|
||||
|
||||
38
src/views/system/components/statusBtn.vue
Normal file
38
src/views/system/components/statusBtn.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<span class="dot" :class="injectData.status === 1 ? 'red' : 'green'"></span>
|
||||
<span>{{ state }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "StatusBtn",
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
state() {
|
||||
return this.injectData.status === 1 ? "停用" : "启用";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.green {
|
||||
background: #10dc76;
|
||||
}
|
||||
.red {
|
||||
background: #ff5656;
|
||||
}
|
||||
</style>
|
||||
@ -2,63 +2,138 @@
|
||||
<div class="app-container">
|
||||
<doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="登录地址" prop="userIp">
|
||||
<el-input v-model="queryParams.userIp" placeholder="请输入登录地址" clearable style="width: 240px;"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
<el-input
|
||||
v-model="queryParams.userIp"
|
||||
placeholder="请输入登录地址"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="username">
|
||||
<el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable style="width: 240px;"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
<el-input
|
||||
v-model="queryParams.username"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="结果" clearable style="width: 240px">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="结果"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option :key="true" label="成功" :value="true" />
|
||||
<el-option :key="false" label="失败" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
||||
v-hasPermi="['system:login-log:export']">导出</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['system:login-log:export']"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="访问编号" align="center" prop="id" />
|
||||
<el-table-column label="日志类型" align="center" prop="logType" width="120">
|
||||
<el-table-column
|
||||
label="日志类型"
|
||||
align="center"
|
||||
prop="logType"
|
||||
width="120"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="scope.row.logType" />
|
||||
<dict-tag
|
||||
:type="DICT_TYPE.SYSTEM_LOGIN_TYPE"
|
||||
:value="scope.row.logType"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户名称" align="center" prop="username" />
|
||||
<el-table-column label="登录地址" align="center" prop="userIp" width="130" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="userAgent" align="center" prop="userAgent" width="400" :show-overflow-tooltip="true" />
|
||||
<el-table-column
|
||||
label="登录地址"
|
||||
align="center"
|
||||
prop="userIp"
|
||||
width="130"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="userAgent"
|
||||
align="center"
|
||||
prop="userAgent"
|
||||
width="400"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column label="结果" align="center" prop="status">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="scope.row.result" />
|
||||
<dict-tag
|
||||
:type="DICT_TYPE.SYSTEM_LOGIN_RESULT"
|
||||
:value="scope.row.result"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="登录日期" align="center" prop="loginTime" width="180">
|
||||
<el-table-column
|
||||
label="登录日期"
|
||||
align="center"
|
||||
prop="loginTime"
|
||||
width="180"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -86,8 +161,8 @@ export default {
|
||||
userIp: undefined,
|
||||
username: undefined,
|
||||
status: undefined,
|
||||
createTime: []
|
||||
}
|
||||
createTime: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -97,12 +172,11 @@ export default {
|
||||
/** 查询登录日志列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
list(this.queryParams).then(response => {
|
||||
list(this.queryParams).then((response) => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
@ -116,19 +190,31 @@ export default {
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.$modal.confirm('是否确认导出所有操作日志数据项?').then(() => {
|
||||
this.$modal
|
||||
.confirm("是否确认导出所有操作日志数据项?")
|
||||
.then(() => {
|
||||
// 处理查询参数
|
||||
let params = { ...this.queryParams };
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
this.exportLoading = true;
|
||||
return exportLoginLog(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '登录日志.xls');
|
||||
})
|
||||
.then((response) => {
|
||||
this.$download.excel(response, "登录日志.xls");
|
||||
this.exportLoading = false;
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 120px - 8px);
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,59 +1,146 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
|
||||
<doc-alert
|
||||
title="功能权限"
|
||||
url="https://doc.iocoder.cn/resource-permission"
|
||||
/>
|
||||
<doc-alert title="菜单路由" url="https://doc.iocoder.cn/vue2/route/" />
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
>
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入菜单名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
|
||||
<el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="菜单状态"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in statusDictDatas"
|
||||
:key="parseInt(dict.value)"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['system:menu:create']">新增</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:menu:create']"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
icon="el-icon-sort"
|
||||
size="mini"
|
||||
@click="toggleExpandAll"
|
||||
>展开/折叠</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="id" :default-expand-all="isExpandAll"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
|
||||
<el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="250"></el-table-column>
|
||||
<el-table
|
||||
v-if="refreshTable"
|
||||
v-loading="loading"
|
||||
:data="menuList"
|
||||
row-key="id"
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="菜单名称"
|
||||
:show-overflow-tooltip="true"
|
||||
width="250"
|
||||
></el-table-column>
|
||||
<el-table-column prop="icon" label="图标" align="center" width="100">
|
||||
<template v-slot="scope">
|
||||
<svg-icon :icon-class="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" width="60"></el-table-column>
|
||||
<el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="componentName" label="组件名称" :show-overflow-tooltip="true" />
|
||||
<el-table-column
|
||||
prop="permission"
|
||||
label="权限标识"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="component"
|
||||
label="组件路径"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="componentName"
|
||||
label="组件名称"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column prop="status" label="状态" width="80">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:menu:update']">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
|
||||
v-hasPermi="['system:menu:create']">新增</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:menu:delete']">删除</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:menu:update']"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-plus"
|
||||
@click="handleAdd(scope.row)"
|
||||
v-hasPermi="['system:menu:create']"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:menu:delete']"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -64,26 +151,55 @@
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="上级菜单">
|
||||
<treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true"
|
||||
placeholder="选择上级菜单"/>
|
||||
<treeselect
|
||||
v-model="form.parentId"
|
||||
:options="menuOptions"
|
||||
:normalizer="normalizer"
|
||||
:show-count="true"
|
||||
placeholder="选择上级菜单"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="菜单类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio v-for="dict in menuTypeDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
|
||||
{{dict.label}}</el-radio>
|
||||
<el-radio
|
||||
v-for="dict in menuTypeDictDatas"
|
||||
:key="parseInt(dict.value)"
|
||||
:label="parseInt(dict.value)"
|
||||
>
|
||||
{{ dict.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item v-if="form.type !== 3" label="菜单图标">
|
||||
<el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
width="460"
|
||||
trigger="click"
|
||||
@show="$refs['iconSelect'].reset()"
|
||||
>
|
||||
<IconSelect ref="iconSelect" @selected="selected" />
|
||||
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
|
||||
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon"
|
||||
style="height: 32px;width: 16px;"/>
|
||||
<i v-else slot="prefix" class="el-icon-search el-input__icon" />
|
||||
<el-input
|
||||
slot="reference"
|
||||
v-model="form.icon"
|
||||
placeholder="点击选择图标"
|
||||
readonly
|
||||
>
|
||||
<svg-icon
|
||||
v-if="form.icon"
|
||||
slot="prefix"
|
||||
:icon-class="form.icon"
|
||||
class="el-input__icon"
|
||||
style="height: 32px; width: 16px"
|
||||
/>
|
||||
<i
|
||||
v-else
|
||||
slot="prefix"
|
||||
class="el-icon-search el-input__icon"
|
||||
/>
|
||||
</el-input>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
@ -95,13 +211,20 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="显示排序" prop="sort">
|
||||
<el-input-number v-model="form.sort" controls-position="right" :min="0" />
|
||||
<el-input-number
|
||||
v-model="form.sort"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="form.type !== 3" label="路由地址" prop="path">
|
||||
<span slot="label">
|
||||
<el-tooltip content="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头" placement="top">
|
||||
<el-tooltip
|
||||
content="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
|
||||
placement="top"
|
||||
>
|
||||
<i class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
路由地址
|
||||
@ -112,42 +235,65 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="form.type !== 1" label="权限标识">
|
||||
<span slot="label">
|
||||
<el-tooltip content="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)" placement="top">
|
||||
<el-tooltip
|
||||
content="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
|
||||
placement="top"
|
||||
>
|
||||
<i class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
权限字符
|
||||
</span>
|
||||
<el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
|
||||
<el-input
|
||||
v-model="form.permission"
|
||||
placeholder="请权限标识"
|
||||
maxlength="50"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="form.type === 2">
|
||||
<el-form-item label="组件路径" prop="component">
|
||||
<el-input v-model="form.component" placeholder="例如说：system/user/index" />
|
||||
<el-input
|
||||
v-model="form.component"
|
||||
placeholder="例如说：system/user/index"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="form.type === 2">
|
||||
<el-form-item label="组件名称" prop="componentName">
|
||||
<el-input v-model="form.componentName" placeholder="例如说：SystemUser" />
|
||||
<el-input
|
||||
v-model="form.componentName"
|
||||
placeholder="例如说：SystemUser"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单状态" prop="status">
|
||||
<span slot="label">
|
||||
<el-tooltip content="选择停用时，路由将不会出现在侧边栏，也不能被访问" placement="top">
|
||||
<el-tooltip
|
||||
content="选择停用时，路由将不会出现在侧边栏，也不能被访问"
|
||||
placement="top"
|
||||
>
|
||||
<i class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
菜单状态
|
||||
</span>
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
|
||||
<el-radio
|
||||
v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="parseInt(dict.value)"
|
||||
>{{ dict.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="form.type !== 3" label="显示状态">
|
||||
<span slot="label">
|
||||
<el-tooltip content="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问" placement="top">
|
||||
<el-tooltip
|
||||
content="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"
|
||||
placement="top"
|
||||
>
|
||||
<i class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
是否显示
|
||||
@ -161,7 +307,10 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="form.type !== 3" label="总是显示">
|
||||
<span slot="label">
|
||||
<el-tooltip content="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单" placement="top">
|
||||
<el-tooltip
|
||||
content="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单"
|
||||
placement="top"
|
||||
>
|
||||
<i class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
总是显示
|
||||
@ -175,7 +324,10 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="form.type === 2" label="是否缓存">
|
||||
<span slot="label">
|
||||
<el-tooltip content="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段" placement="top">
|
||||
<el-tooltip
|
||||
content="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段"
|
||||
placement="top"
|
||||
>
|
||||
<i class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
是否缓存
|
||||
@ -197,13 +349,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
|
||||
import {
|
||||
listMenu,
|
||||
getMenu,
|
||||
delMenu,
|
||||
addMenu,
|
||||
updateMenu,
|
||||
} from "@/api/system/menu";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import IconSelect from "@/components/IconSelect";
|
||||
|
||||
import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
|
||||
import { getDictDatas, DICT_TYPE } from '@/utils/dict'
|
||||
import { SystemMenuTypeEnum, CommonStatusEnum } from "@/utils/constants";
|
||||
import { getDictDatas, DICT_TYPE } from "@/utils/dict";
|
||||
import { isExternal } from "@/utils/validate";
|
||||
|
||||
export default {
|
||||
@ -230,24 +388,22 @@ export default {
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
name: undefined,
|
||||
visible: undefined
|
||||
visible: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "菜单名称不能为空", trigger: "blur" }
|
||||
{ required: true, message: "菜单名称不能为空", trigger: "blur" },
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "菜单顺序不能为空", trigger: "blur" }
|
||||
{ required: true, message: "菜单顺序不能为空", trigger: "blur" },
|
||||
],
|
||||
path: [
|
||||
{ required: true, message: "路由地址不能为空", trigger: "blur" }
|
||||
{ required: true, message: "路由地址不能为空", trigger: "blur" },
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: "状态不能为空", trigger: "blur" }
|
||||
]
|
||||
status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
|
||||
},
|
||||
|
||||
// 枚举
|
||||
@ -255,7 +411,7 @@ export default {
|
||||
CommonStatusEnum: CommonStatusEnum,
|
||||
// 数据字典
|
||||
menuTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_MENU_TYPE),
|
||||
statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
|
||||
statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -269,7 +425,7 @@ export default {
|
||||
/** 查询菜单列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listMenu(this.queryParams).then(response => {
|
||||
listMenu(this.queryParams).then((response) => {
|
||||
this.menuList = this.handleTree(response.data, "id");
|
||||
this.loading = false;
|
||||
});
|
||||
@ -282,14 +438,14 @@ export default {
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
children: node.children
|
||||
children: node.children,
|
||||
};
|
||||
},
|
||||
/** 查询菜单下拉树结构 */
|
||||
getTreeselect() {
|
||||
listMenu().then(response => {
|
||||
listMenu().then((response) => {
|
||||
this.menuOptions = [];
|
||||
const menu = { id: 0, name: '主类目', children: [] };
|
||||
const menu = { id: 0, name: "主类目", children: [] };
|
||||
menu.children = this.handleTree(response.data, "id");
|
||||
this.menuOptions.push(menu);
|
||||
});
|
||||
@ -348,7 +504,7 @@ export default {
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
this.getTreeselect();
|
||||
getMenu(row.id).then(response => {
|
||||
getMenu(row.id).then((response) => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改菜单";
|
||||
@ -356,34 +512,36 @@ export default {
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate(valid => {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
// 若权限类型为目录或者菜单时，进行 path 的校验，避免后续拼接出来的路由无法跳转
|
||||
if (this.form.type === SystemMenuTypeEnum.DIR
|
||||
|| this.form.type === SystemMenuTypeEnum.MENU) {
|
||||
if (
|
||||
this.form.type === SystemMenuTypeEnum.DIR ||
|
||||
this.form.type === SystemMenuTypeEnum.MENU
|
||||
) {
|
||||
// 如果是外链，则不进行校验
|
||||
const path = this.form.path
|
||||
const path = this.form.path;
|
||||
if (!isExternal(path)) {
|
||||
// 父权限为根节点，path 必须以 / 开头
|
||||
if (this.form.parentId === 0 && path.charAt(0) !== '/') {
|
||||
this.$modal.msgSuccess('前端必须以 / 开头')
|
||||
return
|
||||
} else if (this.form.parentId !== 0 && path.charAt(0) === '/') {
|
||||
this.$modal.msgSuccess('前端不能以 / 开头')
|
||||
return
|
||||
if (this.form.parentId === 0 && path.charAt(0) !== "/") {
|
||||
this.$modal.msgSuccess("前端必须以 / 开头");
|
||||
return;
|
||||
} else if (this.form.parentId !== 0 && path.charAt(0) === "/") {
|
||||
this.$modal.msgSuccess("前端不能以 / 开头");
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提交
|
||||
if (this.form.id !== undefined) {
|
||||
updateMenu(this.form).then(response => {
|
||||
updateMenu(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addMenu(this.form).then(response => {
|
||||
addMenu(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
@ -394,13 +552,26 @@ export default {
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function() {
|
||||
this.$modal
|
||||
.confirm('是否确认删除名称为"' + row.name + '"的数据项?')
|
||||
.then(function () {
|
||||
return delMenu(row.id);
|
||||
}).then(() => {
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 120px - 8px);
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,62 +1,143 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
|
||||
<!-- <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" /> -->
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick"
|
||||
/>
|
||||
<!-- <el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="系统模块" prop="module">
|
||||
<el-input v-model="queryParams.module" placeholder="请输入系统模块" clearable style="width: 240px;"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
<el-input
|
||||
v-model="queryParams.module"
|
||||
placeholder="请输入系统模块"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人员" prop="userNickname">
|
||||
<el-input v-model="queryParams.userNickname" placeholder="请输入操作人员" clearable style="width: 240px;"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
<el-input
|
||||
v-model="queryParams.userNickname"
|
||||
placeholder="请输入操作人员"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="操作类型" clearable style="width: 240px">
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_OPERATE_TYPE)" :key="parseInt(dict.value)"
|
||||
:label="dict.label" :value="parseInt(dict.value)"/>
|
||||
<el-select
|
||||
v-model="queryParams.type"
|
||||
placeholder="操作类型"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_OPERATE_TYPE)"
|
||||
:key="parseInt(dict.value)"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.success" placeholder="操作状态" clearable style="width: 240px">
|
||||
<el-select
|
||||
v-model="queryParams.success"
|
||||
placeholder="操作状态"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option :key="true" label="成功" :value="true" />
|
||||
<el-option :key="false" label="失败" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作时间" prop="startTime">
|
||||
<el-date-picker v-model="queryParams.startTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
<el-date-picker
|
||||
v-model="queryParams.startTime"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-form> -->
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<!-- <el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
||||
v-hasPermi="['system:operate-log:export']">导出</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['system:operate-log:export']"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row> -->
|
||||
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
:max-height="tableH"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="230"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<!-- <el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="日志编号" align="center" prop="id" />
|
||||
<el-table-column label="操作模块" align="center" prop="module" />
|
||||
<el-table-column label="操作名" align="center" prop="name" width="180" />
|
||||
<el-table-column label="操作类型" align="center" prop="type">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="scope.row.type"/>
|
||||
<dict-tag
|
||||
:type="DICT_TYPE.SYSTEM_OPERATE_TYPE"
|
||||
:value="scope.row.type"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作人" align="center" prop="userNickname" />
|
||||
<el-table-column label="操作结果" align="center" prop="status">
|
||||
<template v-slot="scope">
|
||||
<span>{{ scope.row.resultCode === 0 ? '成功' : '失败' }}</span>
|
||||
<span>{{ scope.row.resultCode === 0 ? "成功" : "失败" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作日期" align="center" prop="startTime" width="180">
|
||||
<el-table-column
|
||||
label="操作日期"
|
||||
align="center"
|
||||
prop="startTime"
|
||||
width="180"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.startTime) }}</span>
|
||||
</template>
|
||||
@ -66,19 +147,38 @@
|
||||
<span>{{ scope.row.duration }} ms</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row,scope.index)"
|
||||
v-hasPermi="['system:operate-log:query']">详细</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-view"
|
||||
@click="handleView(scope.row, scope.index)"
|
||||
v-hasPermi="['system:operate-log:query']"
|
||||
>详细</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-table> -->
|
||||
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
<pagination
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 操作日志详细 -->
|
||||
<el-dialog title="访问日志详细" :visible.sync="open" width="700px" append-to-body>
|
||||
<el-dialog
|
||||
title="访问日志详细"
|
||||
:visible.sync="open"
|
||||
width="700px"
|
||||
append-to-body
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="100px" size="mini">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
@ -88,24 +188,35 @@
|
||||
<el-form-item label="链路追踪：">{{ form.traceId }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="用户信息：">{{ form.userId }} | {{ form.userNickname }} | {{ form.userIp }} | {{ form.userAgent}} </el-form-item>
|
||||
<el-form-item label="用户信息："
|
||||
>{{ form.userId }} | {{ form.userNickname }} | {{ form.userIp }} |
|
||||
{{ form.userAgent }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="操作信息：">
|
||||
{{ form.module }} | {{ form.name }}
|
||||
<dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="form.type"/>
|
||||
<br /> {{ form.content }}
|
||||
<br /> {{ form.exts }}
|
||||
<dict-tag
|
||||
:type="DICT_TYPE.SYSTEM_OPERATE_TYPE"
|
||||
:value="form.type"
|
||||
/>
|
||||
<br />
|
||||
{{ form.content }} <br />
|
||||
{{ form.exts }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="请求信息：">{{ form.requestMethod }} | {{ form.requestUrl }} </el-form-item>
|
||||
<el-form-item label="请求信息："
|
||||
>{{ form.requestMethod }} | {{ form.requestUrl }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="方法名：">{{ form.javaMethod }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="方法参数：">{{ form.javaMethodArgs }}</el-form-item>
|
||||
<el-form-item label="方法参数：">{{
|
||||
form.javaMethodArgs
|
||||
}}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="开始时间：">
|
||||
@ -114,8 +225,12 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作结果：">
|
||||
<div v-if="form.resultCode === 0">正常 | {{ form.resultData}} </div>
|
||||
<div v-else-if="form.resultCode > 0">失败 | {{ form.resultCode }} || {{ form.resultMsg}}</div>
|
||||
<div v-if="form.resultCode === 0">
|
||||
正常 | {{ form.resultData }}
|
||||
</div>
|
||||
<div v-else-if="form.resultCode > 0">
|
||||
失败 | {{ form.resultCode }} || {{ form.resultMsg }}
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -129,11 +244,100 @@
|
||||
|
||||
<script>
|
||||
import { listOperateLog, exportOperateLog } from "@/api/system/operatelog";
|
||||
|
||||
import tableHeightMixin from "@/mixins/tableHeightMixin";
|
||||
const tableProps = [
|
||||
{
|
||||
prop: "code",
|
||||
label: "角色编码",
|
||||
minWidth: 140,
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
{
|
||||
prop: "name",
|
||||
label: "角色名称",
|
||||
minWidth: 140,
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
// {
|
||||
// prop: "status",
|
||||
// label: "状态",
|
||||
// minWidth: 100,
|
||||
// subcomponent: statusBtn,
|
||||
// },
|
||||
{
|
||||
prop: "remark",
|
||||
label: "角色描述",
|
||||
minWidth: 140,
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: "SystemOperateLog",
|
||||
mixins: [tableHeightMixin],
|
||||
data() {
|
||||
return {
|
||||
formConfig: [
|
||||
{
|
||||
type: "input",
|
||||
label: "系统模块",
|
||||
placeholder: "系统模块",
|
||||
param: "module",
|
||||
},
|
||||
{
|
||||
type: "input",
|
||||
label: "操作人员",
|
||||
placeholder: "操作人员",
|
||||
param: "userNickname",
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
label: "类型",
|
||||
selectOptions: this.getDictDatas(this.DICT_TYPE.SYSTEM_OPERATE_TYPE),
|
||||
labelField: "label",
|
||||
valueField: "value",
|
||||
param: "type",
|
||||
},
|
||||
{
|
||||
type: "select",
|
||||
label: "状态",
|
||||
selectOptions: [
|
||||
{ id: true, name: "成功" },
|
||||
{ id: false, name: "失败" },
|
||||
],
|
||||
param: "success",
|
||||
},
|
||||
{
|
||||
type: "datePicker",
|
||||
label: "操作时间",
|
||||
dateType: "daterange",
|
||||
format: "yyyy-MM-dd",
|
||||
valueFormat: "yyyy-MM-dd HH:mm:ss",
|
||||
rangeSeparator: "-",
|
||||
startPlaceholder: "开始日期",
|
||||
endPlaceholder: "结束日期",
|
||||
param: "startTime",
|
||||
defaultSelect: [],
|
||||
defaultTime: ["00:00:00", "23:59:59"],
|
||||
width: 250,
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
btnName: "查询",
|
||||
name: "search",
|
||||
color: "primary",
|
||||
},
|
||||
{
|
||||
type: "separate",
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
btnName: "导出",
|
||||
name: "export",
|
||||
color: "primary",
|
||||
plain: true,
|
||||
},
|
||||
],
|
||||
tableProps,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 导出遮罩层
|
||||
@ -144,6 +348,12 @@ export default {
|
||||
total: 0,
|
||||
// 表格数据
|
||||
list: [],
|
||||
tableBtn: [
|
||||
{
|
||||
type: "detail",
|
||||
btnName: "详情",
|
||||
},
|
||||
],
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 类型数据字典
|
||||
@ -153,12 +363,12 @@ export default {
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
pageSize: 20,
|
||||
module: undefined,
|
||||
userNickname: undefined,
|
||||
businessType: undefined,
|
||||
status: undefined,
|
||||
startTime: []
|
||||
success: undefined,
|
||||
startTime: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
@ -169,12 +379,11 @@ export default {
|
||||
/** 查询登录日志 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listOperateLog(this.queryParams).then( response => {
|
||||
listOperateLog(this.queryParams).then((response) => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
@ -193,19 +402,46 @@ export default {
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.$modal.confirm('是否确认导出所有操作日志数据项?').then(() => {
|
||||
this.$modal
|
||||
.confirm("是否确认导出所有操作日志数据项?")
|
||||
.then(() => {
|
||||
// 处理查询参数
|
||||
let params = { ...this.queryParams };
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
this.exportLoading = true;
|
||||
return exportOperateLog(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '操作日志.xls');
|
||||
})
|
||||
.then((response) => {
|
||||
this.$download.excel(response, "操作日志.xls");
|
||||
this.exportLoading = false;
|
||||
}).catch(() => {});
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
buttonClick(val) {
|
||||
if (val.btnName === "search") {
|
||||
this.queryParams.module = val.module;
|
||||
this.queryParams.userNickname = val.userNickname;
|
||||
this.queryParams.type = val.type;
|
||||
this.queryParams.success = val.success;
|
||||
this.queryParams.startTime = val.startTime;
|
||||
this.getList();
|
||||
} else {
|
||||
this.handleExport();
|
||||
}
|
||||
},
|
||||
handleClick(val) {
|
||||
this.handleView(val.data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 120px - 8px);
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/views/system/post/assets/images/Qian.png
Normal file
BIN
src/views/system/post/assets/images/Qian.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 612 B |
BIN
src/views/system/post/assets/images/arrow.png
Normal file
BIN
src/views/system/post/assets/images/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 B |
BIN
src/views/system/post/assets/images/factory-icon.png
Normal file
BIN
src/views/system/post/assets/images/factory-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 710 B |
BIN
src/views/system/post/assets/images/tree-icon-2.png
Normal file
BIN
src/views/system/post/assets/images/tree-icon-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
445
src/views/system/post/components/InPageLeftNav.vue
Normal file
445
src/views/system/post/components/InPageLeftNav.vue
Normal file
@ -0,0 +1,445 @@
|
||||
<template>
|
||||
<div class="in-page-left-nav" style="overflow: hidden">
|
||||
<div
|
||||
class="factory-list__selector"
|
||||
style="margin: 20px 12px"
|
||||
title="株洲中建材光电材料有限公司"
|
||||
@mouseenter="factoryListOpen = true"
|
||||
@mouseleave="factoryListOpen = false"
|
||||
>
|
||||
<img src="./../assets/images/arrow.png" class="arrow" alt="" />
|
||||
<div class="factory-list__content">{{ currentFactory.label }}</div>
|
||||
<div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
|
||||
<ul
|
||||
class="factory-list"
|
||||
v-if="sidebarContent.length"
|
||||
@click.capture="factoryClickHandler"
|
||||
>
|
||||
<li
|
||||
v-for="fc in sidebarContent"
|
||||
:key="fc.id"
|
||||
class="factory-list__item"
|
||||
:class="{ 'is-current': fc.id == currentFactory?.id }"
|
||||
>
|
||||
<span :data-value="fc.id">
|
||||
{{ fc.label }}
|
||||
</span>
|
||||
<svg-icon
|
||||
v-if="fc.id == currentFactory?.id"
|
||||
icon-class="Confirm"
|
||||
style="height: 14px; width: 14px"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else style="color: #0008; width: 128px; text-align: center">
|
||||
- 无 -
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- side bar -->
|
||||
<div class="side-bar__left" style="width: 100%; height: 100%">
|
||||
<!-- <el-tree
|
||||
class="custom-tree-class"
|
||||
:data="currentFactory?.children"
|
||||
:props="treeProps"
|
||||
:empty-text="''"
|
||||
icon-class="custom-icon-class"
|
||||
@node-click="handleSidebarItemClick"
|
||||
>
|
||||
</el-tree> -->
|
||||
<el-menu
|
||||
default-active="2"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<svg-icon
|
||||
style="
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
"
|
||||
icon-class="orgTreeIcon"
|
||||
/>
|
||||
<span>导航一</span>
|
||||
</template>
|
||||
<el-menu-item index="1-1"
|
||||
><svg-icon
|
||||
style="
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
"
|
||||
icon-class="orgTreeIcon2"
|
||||
/>选项1</el-menu-item
|
||||
>
|
||||
<el-menu-item index="1-2"
|
||||
><svg-icon
|
||||
style="
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
"
|
||||
icon-class="orgTreeIcon2"
|
||||
/>选项2</el-menu-item
|
||||
>
|
||||
<el-menu-item index="1-3"
|
||||
><svg-icon
|
||||
style="
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
"
|
||||
icon-class="orgTreeIcon2"
|
||||
/>选项3</el-menu-item
|
||||
>
|
||||
<el-submenu index="1-4">
|
||||
<template slot="title">
|
||||
<svg-icon
|
||||
style="
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
"
|
||||
icon-class="orgTreeIcon"
|
||||
/>选项4</template
|
||||
>
|
||||
<el-menu-item index="1-4-1">
|
||||
<svg-icon
|
||||
style="
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
"
|
||||
icon-class="orgTreeIcon2"
|
||||
/>选项1</el-menu-item
|
||||
>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2">
|
||||
<svg-icon
|
||||
style="font-size: 18px; margin-right: 10px; vertical-align: middle"
|
||||
icon-class="orgTreeIcon"
|
||||
/>
|
||||
<span slot="title">导航二</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "InpageLeftNav",
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
factoryListOpen: false,
|
||||
currentFactory: {
|
||||
label: "点我选择设备",
|
||||
id: null,
|
||||
children: [],
|
||||
},
|
||||
treeProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
sidebarContent: [
|
||||
{
|
||||
id: 1,
|
||||
label: "招商局",
|
||||
children: [
|
||||
{
|
||||
label: "招商局地产",
|
||||
children: [
|
||||
{
|
||||
label: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "招商局商业",
|
||||
},
|
||||
{
|
||||
label: "招商局物流",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "株洲中建材光电材料有限公司",
|
||||
children: [
|
||||
{
|
||||
label: "保利地产",
|
||||
},
|
||||
{
|
||||
label: "保利投资",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: "中国建材集团",
|
||||
children: [
|
||||
{
|
||||
label: "凯盛集团",
|
||||
},
|
||||
{
|
||||
label: "蚌埠研究院",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
queryParams: {
|
||||
equipmentId: null,
|
||||
lineId: null,
|
||||
sectionId: null,
|
||||
productId: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
/** 暴露给外部，用于更新sidebarContent */
|
||||
async updateSidebarContent(id, url) {
|
||||
// TODO
|
||||
const { code, data } = await this.$axios({
|
||||
url: (url || "/api/quality/deviceParameters") + `/${id}`,
|
||||
method: "get",
|
||||
});
|
||||
if (code === 0) {
|
||||
this.getTree(data);
|
||||
}
|
||||
},
|
||||
/** 点击工厂名称 */
|
||||
factoryClickHandler(event) {
|
||||
this.currentFactory = {
|
||||
label: "加载中...",
|
||||
id: null,
|
||||
children: [],
|
||||
};
|
||||
this.factoryListOpen = false;
|
||||
const fcId = event.target.dataset.value;
|
||||
this.handleSidebarItemClick({ id: fcId, type: "工厂" });
|
||||
this.currentFactory = this.sidebarContent.find((item) => item.id == fcId);
|
||||
},
|
||||
/** 点击某一具体工厂或产线，或工段或设备 */
|
||||
handleSidebarItemClick({ label, id, type }) {
|
||||
this.equipmentId = id;
|
||||
console.log("label clicked!", label, id, type);
|
||||
switch (type) {
|
||||
case "设备":
|
||||
this.queryParams.equipmentId = id;
|
||||
break;
|
||||
case "工段":
|
||||
this.queryParams.equipmentId = null;
|
||||
this.queryParams.sectionId = id;
|
||||
break;
|
||||
case "产线":
|
||||
this.queryParams.equipmentId = null;
|
||||
this.queryParams.sectionId = null;
|
||||
this.queryParams.lineId = id;
|
||||
break;
|
||||
case "工厂":
|
||||
this.queryParams.equipmentId = null;
|
||||
this.queryParams.sectionId = null;
|
||||
this.queryParams.lineId = null;
|
||||
break;
|
||||
}
|
||||
},
|
||||
buildTree(data) {
|
||||
data.forEach((factory) => {
|
||||
this.$set(factory, "label", factory.name);
|
||||
this.$set(factory, "type", "工厂");
|
||||
delete factory.name;
|
||||
factory.children?.forEach((line) => {
|
||||
this.$set(line, "label", line.name);
|
||||
this.$set(line, "type", "产线");
|
||||
delete line.name;
|
||||
line.children?.forEach((ws) => {
|
||||
this.$set(ws, "label", ws.name);
|
||||
this.$set(ws, "type", "工段");
|
||||
delete ws.name;
|
||||
ws.children?.forEach((eq) => {
|
||||
this.$set(eq, "label", eq.name);
|
||||
this.$set(eq, "type", "设备");
|
||||
delete eq.name;
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
async getTree(data) {
|
||||
// '@/api/quality/deviceParameters'
|
||||
// const res = await getTreeData({ id: id });
|
||||
this.buildTree(data);
|
||||
this.sidebarContent = data;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.in-page-left-nav {
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
height: calc(100vh - 120px - 8px);
|
||||
width: 256px;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.factory-list__selector {
|
||||
position: relative;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
padding-left: 28px;
|
||||
background: url(../assets/images/factory-icon.png) 0px 4px no-repeat;
|
||||
background-size: 26px 26px;
|
||||
padding-right: 16px;
|
||||
.arrow {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.factory-list__selector:hover {
|
||||
cursor: pointer;
|
||||
color: #0008;
|
||||
}
|
||||
|
||||
.factory-list__selector::after {
|
||||
/* content: ''; */
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 12px;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
/* background: #5c5c5c; */
|
||||
border-color: #000;
|
||||
border-width: 4px;
|
||||
border-style: solid;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.factory-list__selector:hover::after {
|
||||
/* cursor: pointer; */
|
||||
border-left-color: #0008;
|
||||
}
|
||||
.factory-list__content {
|
||||
height: 36px;
|
||||
overflow: hidden; /* 确保超出容器的内容会被隐藏 */
|
||||
white-space: nowrap; /* 防止文本自动换行 */
|
||||
text-overflow: ellipsis; /* 使用省略号表示文本被截断 */
|
||||
}
|
||||
.factory-list__wrapper {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 32px 10px #0002;
|
||||
border-radius: 8px;
|
||||
top: 36px;
|
||||
// left: 90px;
|
||||
/* max-width: 128px; */
|
||||
height: auto;
|
||||
width: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
/* transition: all 0.3s ease-out; */
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.factory-list__wrapper.open {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.factory-list {
|
||||
color: #0008;
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.factory-list__item {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
padding: 8px 16px 8px 16px;
|
||||
min-width: 128px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.factory-list__item:hover,
|
||||
.factory-list__item.is-current {
|
||||
background: #e3efff;
|
||||
color: #0b58ff;
|
||||
}
|
||||
|
||||
/* .factory-list__item.is-current::after {
|
||||
content: '√';
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 16px;
|
||||
font-weight: bold;
|
||||
} */
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.custom-tree-class .el-tree-node__content {
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
|
||||
.custom-tree-class .el-tree-node__content:hover {
|
||||
background: #e3efff;
|
||||
}
|
||||
|
||||
.custom-tree-class .el-tree-node__children .el-tree-node__content {
|
||||
padding: 8px 18px !important;
|
||||
}
|
||||
|
||||
.custom-tree-class
|
||||
.el-tree-node__children
|
||||
.el-tree-node__children
|
||||
.el-tree-node__content {
|
||||
padding: 8px 24px !important;
|
||||
}
|
||||
|
||||
.custom-icon-class {
|
||||
margin-right: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url("../assets/images/Qian.png") center center / contain no-repeat;
|
||||
}
|
||||
|
||||
.custom-icon-class.el-tree-node__expand-icon.expanded {
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.el-tree-node__children .custom-icon-class {
|
||||
background: url("../assets/images/tree-icon-2.png") 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.el-tree-node__children .el-tree-node__children .custom-icon-class {
|
||||
background: unset;
|
||||
}
|
||||
</style>
|
||||
78
src/views/system/post/components/SearchBarTop.vue
Normal file
78
src/views/system/post/components/SearchBarTop.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="search-bar-top">
|
||||
<el-form :inline="true">
|
||||
<span class="blue-block"></span>
|
||||
<span class="org-name">组织名称</span>
|
||||
<el-form-item label="用户名">
|
||||
<el-input placeholder="用户名" size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="onSearch"
|
||||
>查询</el-button
|
||||
>
|
||||
<span class="separateStyle"></span>
|
||||
<el-button type="success" size="small" plain @click="addNew"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "SearchBarTop",
|
||||
data() {
|
||||
return {
|
||||
userName: "",
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
onSearch() {
|
||||
console.log("查询");
|
||||
this.$emit("emitFun", { btn: "onSearch", userName: this.userName });
|
||||
},
|
||||
addNew() {
|
||||
console.log("新增");
|
||||
this.$emit("emitFun", { btn: "addNew" });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.search-bar-top {
|
||||
font-size: 14px;
|
||||
.blue-block {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
background-color: #0b58ff;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.org-name {
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 700;
|
||||
}
|
||||
.el-form--inline .el-form-item {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
vertical-align: top;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.separateStyle {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: #e8e8e8;
|
||||
vertical-align: middle;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
162
src/views/system/post/index2.vue
Normal file
162
src/views/system/post/index2.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div class="user-manager">
|
||||
<InPageLeftNav />
|
||||
<div
|
||||
class="table-area"
|
||||
:class="{
|
||||
'table-area-w': sidebar.opened,
|
||||
'table-area-ws': !sidebar.opened,
|
||||
}"
|
||||
>
|
||||
<SearchBarTop @emitFun="emitFun" />
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
:max-height="tableH"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="120"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import InPageLeftNav from "./components/InPageLeftNav";
|
||||
import SearchBarTop from "./components/SearchBarTop";
|
||||
import tableHeightMixin from "@/mixins/tableHeightMixin";
|
||||
import { listUser } from "@/api/system/user";
|
||||
const tableProps = [
|
||||
{
|
||||
prop: "username",
|
||||
label: "用户名",
|
||||
minWidth: 120,
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
{
|
||||
prop: "email",
|
||||
label: "邮箱",
|
||||
minWidth: 150,
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
{
|
||||
prop: "mobile",
|
||||
label: "手机号",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
prop: "deptName",
|
||||
label: "组织",
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
prop: "role",
|
||||
label: "角色名称",
|
||||
},
|
||||
{
|
||||
prop: "workno",
|
||||
label: "工号",
|
||||
},
|
||||
{
|
||||
prop: "status",
|
||||
label: "状态",
|
||||
},
|
||||
{
|
||||
prop: "remark",
|
||||
label: "备注",
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: "SystemPost",
|
||||
components: { InPageLeftNav, SearchBarTop },
|
||||
mixins: [tableHeightMixin],
|
||||
computed: {
|
||||
...mapGetters(["sidebar"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
name: null,
|
||||
status: null,
|
||||
planFinishTime: [],
|
||||
},
|
||||
total: 0,
|
||||
tableProps,
|
||||
list: [{ username: "111" }],
|
||||
tableBtn: [
|
||||
{
|
||||
type: "authorization",
|
||||
btnName: "授权",
|
||||
},
|
||||
{
|
||||
type: "edit",
|
||||
btnName: "编辑",
|
||||
},
|
||||
{
|
||||
type: "delete",
|
||||
btnName: "删除",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询用户列表 */
|
||||
getList() {
|
||||
listUser(this.queryParams).then((response) => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
});
|
||||
},
|
||||
emitFun(val) {
|
||||
if (val.btn === "onSearch") {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
} else {
|
||||
}
|
||||
},
|
||||
handleClick() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.user-manager {
|
||||
display: flex;
|
||||
.table-area {
|
||||
display: inline-block;
|
||||
height: calc(100vh - 120px - 8px);
|
||||
background-color: #fff;
|
||||
margin-left: 8px;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
.table-area-w {
|
||||
width: calc(100vw - 542px);
|
||||
}
|
||||
.table-area-ws {
|
||||
width: calc(100vw - 348px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
162
src/views/system/role/components/dataAuth.vue
Normal file
162
src/views/system/role/components/dataAuth.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<el-form :model="form" label-width="80px">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input v-model="form.name" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识">
|
||||
<el-input v-model="form.code" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="权限范围">
|
||||
<el-select v-model="form.dataScope" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in dataScopeDictDatas"
|
||||
:key="parseInt(item.value)"
|
||||
:label="item.label"
|
||||
:value="parseInt(item.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="数据权限"
|
||||
v-show="form.dataScope === SysDataScopeEnum.DEPT_CUSTOM"
|
||||
>
|
||||
<el-checkbox
|
||||
:checked="!form.deptCheckStrictly"
|
||||
@change="handleCheckedTreeConnect($event, 'dept')"
|
||||
>父子联动(选中父节点，自动选择子节点)</el-checkbox
|
||||
>
|
||||
<el-checkbox
|
||||
v-model="deptExpand"
|
||||
@change="handleCheckedTreeExpand($event, 'dept')"
|
||||
>展开/折叠</el-checkbox
|
||||
>
|
||||
<el-checkbox
|
||||
v-model="deptNodeAll"
|
||||
@change="handleCheckedTreeNodeAll($event, 'dept')"
|
||||
>全选/全不选</el-checkbox
|
||||
>
|
||||
<el-tree
|
||||
class="tree-border"
|
||||
:data="deptOptions"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
ref="dept"
|
||||
node-key="id"
|
||||
:check-strictly="form.deptCheckStrictly"
|
||||
empty-text="加载中，请稍后"
|
||||
:props="defaultProps"
|
||||
></el-tree>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import { SystemDataScopeEnum } from "@/utils/constants";
|
||||
import { getRole } from "@/api/system/role";
|
||||
import { listSimpleDepts } from "@/api/system/dept";
|
||||
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
|
||||
import { assignRoleDataScope } from "@/api/system/permission";
|
||||
export default {
|
||||
name: "DataAuth",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
deptIds: [],
|
||||
dataScope: undefined,
|
||||
deptCheckStrictly: false,
|
||||
},
|
||||
deptExpand: true,
|
||||
deptNodeAll: false,
|
||||
// 部门列表
|
||||
deptOptions: [], // 部门属性结构
|
||||
depts: [], // 部门列表
|
||||
defaultProps: {
|
||||
label: "name",
|
||||
children: "children",
|
||||
},
|
||||
// 枚举
|
||||
SysDataScopeEnum: SystemDataScopeEnum,
|
||||
// 数据字典
|
||||
dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.form.id = id;
|
||||
getRole(id).then((res) => {
|
||||
this.form.name = res.data.name;
|
||||
this.form.code = res.data.code;
|
||||
this.form.dataScope = res.data.dataScope;
|
||||
// 获得部门列表
|
||||
listSimpleDepts().then((response) => {
|
||||
// 处理 deptOptions 参数
|
||||
this.deptOptions = [];
|
||||
this.deptOptions.push(...this.handleTree(response.data, "id"));
|
||||
this.depts = response.data;
|
||||
this.$refs.dept.setCheckedKeys(res.data.dataScopeDeptIds, false);
|
||||
});
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
if (this.form.id !== undefined) {
|
||||
assignRoleDataScope({
|
||||
roleId: this.form.id,
|
||||
dataScope: this.form.dataScope,
|
||||
dataScopeDeptIds:
|
||||
this.form.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM
|
||||
? []
|
||||
: this.$refs.dept.getCheckedKeys(),
|
||||
}).then((response) => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.$emit("successSubmitd");
|
||||
});
|
||||
}
|
||||
},
|
||||
formClear() {
|
||||
this.deptExpand = true;
|
||||
this.deptNodeAll = false;
|
||||
this.form = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
deptIds: [],
|
||||
dataScope: undefined,
|
||||
deptCheckStrictly: false,
|
||||
};
|
||||
},
|
||||
// 树权限（父子联动）
|
||||
handleCheckedTreeConnect(value, type) {
|
||||
if (type === "menu") {
|
||||
this.form.menuCheckStrictly = value;
|
||||
} else if (type === "dept") {
|
||||
this.form.deptCheckStrictly = !value;
|
||||
}
|
||||
},
|
||||
// 树权限（展开/折叠）
|
||||
handleCheckedTreeExpand(value, type) {
|
||||
if (type === "menu") {
|
||||
let treeList = this.menuOptions;
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
|
||||
}
|
||||
} else if (type === "dept") {
|
||||
let treeList = this.deptOptions;
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 树权限（全选/全不选）
|
||||
handleCheckedTreeNodeAll(value, type) {
|
||||
if (type === "menu") {
|
||||
this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
|
||||
} else if (type === "dept") {
|
||||
// this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
|
||||
this.$refs.dept.setCheckedNodes(value ? this.depts : []);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
146
src/views/system/role/components/menuAuth.vue
Normal file
146
src/views/system/role/components/menuAuth.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<el-form :model="form" label-width="80px">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input v-model="form.name" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识">
|
||||
<el-input v-model="form.code" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单权限">
|
||||
<el-checkbox
|
||||
v-model="menuExpand"
|
||||
@change="handleCheckedTreeExpand($event, 'menu')"
|
||||
>展开/折叠</el-checkbox
|
||||
>
|
||||
<el-checkbox
|
||||
v-model="menuNodeAll"
|
||||
@change="handleCheckedTreeNodeAll($event, 'menu')"
|
||||
>全选/全不选</el-checkbox
|
||||
>
|
||||
<el-tree
|
||||
class="tree-border"
|
||||
:data="menuOptions"
|
||||
show-checkbox
|
||||
ref="menu"
|
||||
node-key="id"
|
||||
:check-strictly="form.menuCheckStrictly"
|
||||
empty-text="加载中，请稍后"
|
||||
:props="defaultProps"
|
||||
></el-tree>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import { getRole } from "@/api/system/role";
|
||||
import { SystemDataScopeEnum } from "@/utils/constants";
|
||||
import { assignRoleMenu, listRoleMenus } from "@/api/system/permission";
|
||||
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
|
||||
import { listSimpleMenus } from "@/api/system/menu";
|
||||
export default {
|
||||
name: "MenuAuth",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
menuIds: [],
|
||||
menuCheckStrictly: true,
|
||||
},
|
||||
// 菜单列表
|
||||
menuOptions: [],
|
||||
menuExpand: false,
|
||||
menuNodeAll: false,
|
||||
SysDataScopeEnum: SystemDataScopeEnum,
|
||||
// 数据字典
|
||||
dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE),
|
||||
defaultProps: {
|
||||
label: "name",
|
||||
children: "children",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.form.id = id;
|
||||
getRole(id).then((res) => {
|
||||
this.form.name = res.data.name;
|
||||
this.form.code = res.data.code;
|
||||
listSimpleMenus().then((response) => {
|
||||
// 处理 menuOptions 参数
|
||||
this.menuOptions = [];
|
||||
this.menuOptions.push(...this.handleTree(response.data, "id"));
|
||||
// 获取角色拥有的菜单权限
|
||||
listRoleMenus(id).then((response) => {
|
||||
// 设置为严格，避免设置父节点自动选中子节点，解决半选中问题
|
||||
this.form.menuCheckStrictly = true;
|
||||
// 设置选中
|
||||
this.$refs.menu.setCheckedKeys(response.data);
|
||||
// 设置为非严格，继续使用半选中
|
||||
this.form.menuCheckStrictly = false;
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
if (this.form.id !== undefined) {
|
||||
assignRoleMenu({
|
||||
roleId: this.form.id,
|
||||
menuIds: [
|
||||
...this.$refs.menu.getCheckedKeys(),
|
||||
...this.$refs.menu.getHalfCheckedKeys(),
|
||||
],
|
||||
}).then((response) => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.$emit("successSubmitm");
|
||||
});
|
||||
}
|
||||
},
|
||||
formClear() {
|
||||
if (this.$refs.menu !== undefined) {
|
||||
this.$refs.menu.setCheckedKeys([]);
|
||||
}
|
||||
this.menuExpand = false;
|
||||
this.menuNodeAll = false;
|
||||
this.form = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
menuIds: [],
|
||||
menuCheckStrictly: true,
|
||||
};
|
||||
},
|
||||
// 树权限（父子联动）
|
||||
handleCheckedTreeConnect(value, type) {
|
||||
if (type === "menu") {
|
||||
this.form.menuCheckStrictly = value;
|
||||
} else if (type === "dept") {
|
||||
this.form.deptCheckStrictly = !value;
|
||||
}
|
||||
},
|
||||
// 树权限（展开/折叠）
|
||||
handleCheckedTreeExpand(value, type) {
|
||||
if (type === "menu") {
|
||||
let treeList = this.menuOptions;
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
|
||||
}
|
||||
} else if (type === "dept") {
|
||||
let treeList = this.deptOptions;
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 树权限（全选/全不选）
|
||||
handleCheckedTreeNodeAll(value, type) {
|
||||
if (type === "menu") {
|
||||
this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
|
||||
} else if (type === "dept") {
|
||||
// this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
|
||||
this.$refs.dept.setCheckedNodes(value ? this.depts : []);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
129
src/views/system/role/components/roleAdd.vue
Normal file
129
src/views/system/role/components/roleAdd.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<el-form ref="form" :rules="rules" label-width="100px" :model="form">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="角色编码" prop="code">
|
||||
<el-input v-model="form.code"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="角色顺序" prop="sort">
|
||||
<el-input-number
|
||||
v-model="form.sort"
|
||||
controls-position="right"
|
||||
:min="1"
|
||||
:max="999999999"
|
||||
style="width: 100%"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status" v-if="isEdit">
|
||||
<el-switch v-model="form.status"> </el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import { addRole, getRole, updateRole } from "@/api/system/role";
|
||||
export default {
|
||||
name: "RoleAdd",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: "",
|
||||
code: "",
|
||||
name: "",
|
||||
sort: 1,
|
||||
status: 0,
|
||||
remark: "",
|
||||
},
|
||||
isEdit: false, //是否是编辑
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: "角色编码不能为空", trigger: "blur" },
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: "角色名称不能为空", trigger: "blur" },
|
||||
],
|
||||
sort: [{ required: true }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
if (id) {
|
||||
this.isEdit = true;
|
||||
this.form.id = id;
|
||||
getRole(id).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.form.id = res.data.id;
|
||||
this.form.code = res.data.code;
|
||||
this.form.name = res.data.name;
|
||||
this.form.sort = res.data.sort;
|
||||
this.form.remark = res.data.remark;
|
||||
this.form.status = res.data.status ? false : true;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.isEdit = false;
|
||||
this.form.id = "";
|
||||
}
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.isEdit) {
|
||||
//编辑
|
||||
updateRole({
|
||||
id: this.form.id,
|
||||
code: this.form.code,
|
||||
name: this.form.name,
|
||||
sort: this.form.sort,
|
||||
remark: this.form.remark,
|
||||
status: this.form.status ? 0 : 1,
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
this.$emit("successSubmit");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
addRole({
|
||||
code: this.form.code,
|
||||
name: this.form.name,
|
||||
sort: this.form.sort,
|
||||
remark: this.form.remark,
|
||||
status: 0,
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
this.$emit("successSubmit");
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
formClear() {
|
||||
this.$refs.form.resetFields();
|
||||
this.isEdit = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,250 +1,174 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
|
||||
<doc-alert title="数据权限" url="https://doc.iocoder.cn/data-permission" />
|
||||
<el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入角色名称" clearable size="small" style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识" prop="code">
|
||||
<el-input v-model="queryParams.code" placeholder="请输入角色标识" clearable size="small" style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="角色状态" clearable size="small" style="width: 240px">
|
||||
<el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- <doc-alert
|
||||
title="功能权限"
|
||||
url="https://doc.iocoder.cn/resource-permission"
|
||||
/>
|
||||
<doc-alert title="数据权限" url="https://doc.iocoder.cn/data-permission" /> -->
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick"
|
||||
/>
|
||||
<!-- 列表 -->
|
||||
<base-table
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
:max-height="tableH"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="230"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['system:role:create']">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
||||
v-hasPermi="['system:role:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="roleList">
|
||||
<el-table-column label="角色编号" prop="id" width="120" />
|
||||
<el-table-column label="角色名称" prop="name" :show-overflow-tooltip="true" width="150" />
|
||||
<el-table-column label="角色标识" prop="code" :show-overflow-tooltip="true" width="150" />
|
||||
<el-table-column label="角色类型" prop="type" width="80">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.SYSTEM_ROLE_TYPE" :value="scope.row.type"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="显示顺序" prop="sort" width="100" />
|
||||
<el-table-column label="状态" align="center" width="100">
|
||||
<template v-slot="scope">
|
||||
<el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:role:update']">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleMenu(scope.row)"
|
||||
v-hasPermi="['system:permission:assign-role-menu']">菜单权限</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleDataScope(scope.row)"
|
||||
v-hasPermi="['system:permission:assign-role-data-scope']">数据权限</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:role:delete']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
<!-- 添加或修改角色配置对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入角色名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入角色标识" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色顺序" prop="sort">
|
||||
<el-input-number v-model="form.sort" controls-position="right" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 分配角色的数据权限对话框 -->
|
||||
<el-dialog title="分配数据权限" :visible.sync="openDataScope" width="500px" append-to-body>
|
||||
<el-form :model="form" label-width="80px">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input v-model="form.name" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识">
|
||||
<el-input v-model="form.code" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="权限范围">
|
||||
<el-select v-model="form.dataScope">
|
||||
<el-option
|
||||
v-for="item in dataScopeDictDatas"
|
||||
:key="parseInt(item.value)"
|
||||
:label="item.label"
|
||||
:value="parseInt(item.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据权限" v-show="form.dataScope === SysDataScopeEnum.DEPT_CUSTOM">
|
||||
<el-checkbox :checked="!form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动(选中父节点，自动选择子节点)</el-checkbox>
|
||||
<el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
|
||||
<el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
|
||||
<el-tree
|
||||
class="tree-border"
|
||||
:data="deptOptions"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
ref="dept"
|
||||
node-key="id"
|
||||
:check-strictly="form.deptCheckStrictly"
|
||||
empty-text="加载中，请稍后"
|
||||
:props="defaultProps"
|
||||
></el-tree>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitDataScope">确 定</el-button>
|
||||
<el-button @click="cancelDataScope">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 分配角色的菜单权限对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="openMenu" width="500px" append-to-body>
|
||||
<el-form :model="form" label-width="80px">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input v-model="form.name" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识">
|
||||
<el-input v-model="form.code" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单权限">
|
||||
<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
|
||||
<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
|
||||
<el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id"
|
||||
:check-strictly="form.menuCheckStrictly" empty-text="加载中，请稍后" :props="defaultProps"></el-tree>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitMenu">确 定</el-button>
|
||||
<el-button @click="cancelMenu">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 新增&编辑 -->
|
||||
<base-dialog
|
||||
:dialogTitle="addOrEditTitle"
|
||||
:dialogVisible="centervisible"
|
||||
@cancel="handleCancel"
|
||||
@confirm="handleConfirm"
|
||||
:before-close="handleCancel"
|
||||
width="50%"
|
||||
>
|
||||
<role-add ref="roleAdd" @successSubmit="successSubmit" />
|
||||
</base-dialog>
|
||||
<!-- 菜单权限 -->
|
||||
<base-dialog
|
||||
dialogTitle="分配菜单权限"
|
||||
:dialogVisible="menuVisible"
|
||||
@cancel="handleCancelm"
|
||||
@confirm="handleConfirmm"
|
||||
:before-close="handleCancelm"
|
||||
width="50%"
|
||||
>
|
||||
<menu-auth ref="menuAuth" @successSubmitm="successSubmitm" />
|
||||
</base-dialog>
|
||||
<!-- 数据权限 -->
|
||||
<base-dialog
|
||||
dialogTitle="分配数据权限"
|
||||
:dialogVisible="dataVisible"
|
||||
@cancel="handleCanceld"
|
||||
@confirm="handleConfirmd"
|
||||
:before-close="handleCanceld"
|
||||
width="50%"
|
||||
>
|
||||
<data-auth ref="dataAuth" @successSubmitd="successSubmitd" />
|
||||
</base-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
addRole,
|
||||
changeRoleStatus,
|
||||
delRole,
|
||||
exportRole,
|
||||
getRole,
|
||||
listRole,
|
||||
updateRole
|
||||
} from "@/api/system/role";
|
||||
import {listSimpleMenus} from "@/api/system/menu";
|
||||
import {assignRoleMenu, listRoleMenus, assignRoleDataScope} from "@/api/system/permission";
|
||||
import {listSimpleDepts} from "@/api/system/dept";
|
||||
import {CommonStatusEnum, SystemDataScopeEnum} from "@/utils/constants";
|
||||
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
||||
|
||||
import { delRole, listRole } from "@/api/system/role";
|
||||
import tableHeightMixin from "@/mixins/tableHeightMixin";
|
||||
import RoleAdd from "./components/roleAdd";
|
||||
import MenuAuth from "./components/menuAuth";
|
||||
import DataAuth from "./components/dataAuth";
|
||||
import statusBtn from "./../components/statusBtn.vue";
|
||||
const tableProps = [
|
||||
{
|
||||
prop: "code",
|
||||
label: "角色编码",
|
||||
minWidth: 140,
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
{
|
||||
prop: "name",
|
||||
label: "角色名称",
|
||||
minWidth: 140,
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
{
|
||||
prop: "status",
|
||||
label: "状态",
|
||||
minWidth: 100,
|
||||
subcomponent: statusBtn,
|
||||
},
|
||||
{
|
||||
prop: "remark",
|
||||
label: "角色描述",
|
||||
minWidth: 140,
|
||||
showOverflowtooltip: true,
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: "SystemRole",
|
||||
mixins: [tableHeightMixin],
|
||||
components: { RoleAdd, MenuAuth, DataAuth },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 导出遮罩层
|
||||
exportLoading: false,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 角色表格数据
|
||||
roleList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否显示弹出层（数据权限）
|
||||
openDataScope: false,
|
||||
// 是否显示弹出层（菜单权限）
|
||||
openMenu: false,
|
||||
menuExpand: false,
|
||||
menuNodeAll: false,
|
||||
deptExpand: true,
|
||||
deptNodeAll: false,
|
||||
// 菜单列表
|
||||
menuOptions: [],
|
||||
// 部门列表
|
||||
deptOptions: [], // 部门属性结构
|
||||
depts: [], // 部门列表
|
||||
// 查询参数
|
||||
formConfig: [
|
||||
{
|
||||
type: "input",
|
||||
label: "角色名称",
|
||||
placeholder: "角色名称",
|
||||
param: "name",
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
btnName: "查询",
|
||||
name: "search",
|
||||
color: "primary",
|
||||
},
|
||||
{
|
||||
type: "separate",
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
btnName: "新增",
|
||||
name: "add",
|
||||
color: "success",
|
||||
plain: true,
|
||||
},
|
||||
],
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
status: undefined,
|
||||
createTime: []
|
||||
pageSize: 20,
|
||||
name: "",
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
defaultProps: {
|
||||
label: "name",
|
||||
children: "children"
|
||||
tableProps,
|
||||
list: [],
|
||||
tableBtn: [
|
||||
{
|
||||
type: "menuAuth",
|
||||
btnName: "菜单权限",
|
||||
// showTip: "新增工单",
|
||||
},
|
||||
{
|
||||
type: "dataAuth",
|
||||
btnName: "数据权限",
|
||||
// showTip: "新增工单",
|
||||
},
|
||||
{
|
||||
type: "edit",
|
||||
btnName: "编辑",
|
||||
},
|
||||
{
|
||||
type: "delete",
|
||||
btnName: "删除",
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "角色名称不能为空", trigger: "blur" }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: "角色标识不能为空", trigger: "blur" }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: "角色顺序不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
|
||||
// 枚举
|
||||
SysCommonStatusEnum: CommonStatusEnum,
|
||||
SysDataScopeEnum: SystemDataScopeEnum,
|
||||
// 数据字典
|
||||
roleTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_ROLE_TYPE),
|
||||
statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
|
||||
dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE)
|
||||
addOrEditTitle: "",
|
||||
centervisible: false,
|
||||
// 菜单权限
|
||||
menuVisible: false,
|
||||
// 数据权限
|
||||
dataVisible: false,
|
||||
// 总条数
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -253,243 +177,109 @@ export default {
|
||||
methods: {
|
||||
/** 查询角色列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listRole(this.queryParams).then(
|
||||
response => {
|
||||
this.roleList = response.data.list;
|
||||
listRole(this.queryParams).then((response) => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
// 角色状态修改
|
||||
handleStatusChange(row) {
|
||||
// 此时，row 已经变成目标状态了，所以可以直接提交请求和提示
|
||||
let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.name + '"角色吗?').then(function() {
|
||||
return changeRoleStatus(row.id, row.status);
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess(text + "成功");
|
||||
}).catch(function() {
|
||||
// 异常时，需要将 row.status 状态重置回之前的
|
||||
row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
|
||||
: CommonStatusEnum.ENABLE;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 取消按钮（数据权限）
|
||||
cancelDataScope() {
|
||||
this.openDataScope = false;
|
||||
this.reset();
|
||||
},
|
||||
// 取消按钮（菜单权限）
|
||||
cancelMenu() {
|
||||
this.openMenu = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
if (this.$refs.menu !== undefined) {
|
||||
this.$refs.menu.setCheckedKeys([]);
|
||||
}
|
||||
this.menuExpand = false;
|
||||
this.menuNodeAll = false;
|
||||
this.deptExpand = true;
|
||||
this.deptNodeAll = false;
|
||||
this.form = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
sort: 0,
|
||||
deptIds: [],
|
||||
menuIds: [],
|
||||
dataScope: undefined,
|
||||
deptCheckStrictly: false,
|
||||
menuCheckStrictly: true,
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
buttonClick(val) {
|
||||
console.log(val);
|
||||
if (val.btnName === "search") {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 树权限（展开/折叠）
|
||||
handleCheckedTreeExpand(value, type) {
|
||||
if (type === 'menu') {
|
||||
let treeList = this.menuOptions;
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
|
||||
}
|
||||
} else if (type === 'dept') {
|
||||
let treeList = this.deptOptions;
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 树权限（全选/全不选）
|
||||
handleCheckedTreeNodeAll(value, type) {
|
||||
if (type === 'menu') {
|
||||
this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
|
||||
} else if (type === 'dept') {
|
||||
// this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
|
||||
this.$refs.dept.setCheckedNodes(value ? this.depts: []);
|
||||
}
|
||||
},
|
||||
// 树权限（父子联动）
|
||||
handleCheckedTreeConnect(value, type) {
|
||||
if (type === 'menu') {
|
||||
this.form.menuCheckStrictly = value;
|
||||
} else if (type === 'dept') {
|
||||
this.form.deptCheckStrictly = !value;
|
||||
}
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加角色";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id
|
||||
getRole(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改角色";
|
||||
});
|
||||
},
|
||||
/** 分配菜单权限操作 */
|
||||
handleMenu(row) {
|
||||
this.reset();
|
||||
const id = row.id
|
||||
// 处理了 form 的角色 name 和 code 的展示
|
||||
this.form.id = id;
|
||||
this.form.name = row.name;
|
||||
this.form.code = row.code;
|
||||
// 打开弹窗
|
||||
this.openMenu = true;
|
||||
// 获得菜单列表
|
||||
listSimpleMenus().then(response => {
|
||||
// 处理 menuOptions 参数
|
||||
this.menuOptions = [];
|
||||
this.menuOptions.push(...this.handleTree(response.data, "id"));
|
||||
// 获取角色拥有的菜单权限
|
||||
listRoleMenus(id).then(response => {
|
||||
// 设置为严格，避免设置父节点自动选中子节点，解决半选中问题
|
||||
this.form.menuCheckStrictly = true
|
||||
// 设置选中
|
||||
this.$refs.menu.setCheckedKeys(response.data);
|
||||
// 设置为非严格，继续使用半选中
|
||||
this.form.menuCheckStrictly = false
|
||||
})
|
||||
});
|
||||
|
||||
},
|
||||
/** 分配数据权限操作 */
|
||||
handleDataScope(row) {
|
||||
this.reset();
|
||||
// 处理了 form 的角色 name 和 code 的展示
|
||||
this.form.id = row.id;
|
||||
this.form.name = row.name;
|
||||
this.form.code = row.code;
|
||||
// 打开弹窗
|
||||
this.openDataScope = true;
|
||||
// 获得部门列表
|
||||
listSimpleDepts().then(response => {
|
||||
// 处理 deptOptions 参数
|
||||
this.deptOptions = [];
|
||||
this.deptOptions.push(...this.handleTree(response.data, "id"));
|
||||
this.depts = response.data;
|
||||
// this.deptIds = response.data.map(x => x.id);
|
||||
// 获得角色拥有的数据权限
|
||||
getRole(row.id).then(response => {
|
||||
this.form.dataScope = response.data.dataScope;
|
||||
this.$refs.dept.setCheckedKeys(response.data.dataScopeDeptIds, false);
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id !== undefined) {
|
||||
updateRole(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addRole(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 提交按钮（数据权限） */
|
||||
submitDataScope: function() {
|
||||
if (this.form.id !== undefined) {
|
||||
assignRoleDataScope({
|
||||
roleId: this.form.id,
|
||||
dataScope: this.form.dataScope,
|
||||
dataScopeDeptIds: this.form.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM ? [] :
|
||||
this.$refs.dept.getCheckedKeys()
|
||||
}).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.openDataScope = false;
|
||||
this.getList();
|
||||
this.addOrEditTitle = "新增";
|
||||
this.centervisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.roleAdd.init();
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 提交按钮（菜单权限） */
|
||||
submitMenu: function() {
|
||||
if (this.form.id !== undefined) {
|
||||
assignRoleMenu({
|
||||
roleId: this.form.id,
|
||||
menuIds: [...this.$refs.menu.getCheckedKeys(), ...this.$refs.menu.getHalfCheckedKeys()]
|
||||
}).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.openMenu = false;
|
||||
this.getList();
|
||||
handleClick(val) {
|
||||
switch (val.type) {
|
||||
case "edit":
|
||||
this.addOrEditTitle = "编辑";
|
||||
this.centervisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.roleAdd.init(val.data.id);
|
||||
});
|
||||
break;
|
||||
case "delete":
|
||||
this.handleDelete(val.data);
|
||||
break;
|
||||
case "menuAuth":
|
||||
this.menuVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.menuAuth.init(val.data.id);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
this.dataVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataAuth.init(val.data.id);
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除角色编号为"' + ids + '"的数据项?').then(function() {
|
||||
return delRole(ids);
|
||||
}).then(() => {
|
||||
this.$modal
|
||||
.confirm('是否确认删除角色名称为"' + row.name + '"的数据项?')
|
||||
.then(function () {
|
||||
return delRole(row.id);
|
||||
})
|
||||
.then(() => {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
// 新增取消
|
||||
handleCancel() {
|
||||
this.$refs.roleAdd.formClear();
|
||||
this.centervisible = false;
|
||||
this.addOrEditTitle = "";
|
||||
},
|
||||
handleConfirm() {
|
||||
this.$refs.roleAdd.submitForm();
|
||||
},
|
||||
successSubmit() {
|
||||
this.handleCancel();
|
||||
this.getList();
|
||||
},
|
||||
// 菜单权限
|
||||
handleCancelm() {
|
||||
this.$refs.menuAuth.formClear();
|
||||
this.menuVisible = false;
|
||||
},
|
||||
handleConfirmm() {
|
||||
this.$refs.menuAuth.submitForm();
|
||||
},
|
||||
successSubmitm() {
|
||||
this.handleCancelm();
|
||||
this.getList();
|
||||
},
|
||||
// 数据权限
|
||||
handleCanceld() {
|
||||
this.$refs.dataAuth.formClear();
|
||||
this.dataVisible = false;
|
||||
},
|
||||
handleConfirmd() {
|
||||
this.$refs.dataAuth.submitForm();
|
||||
},
|
||||
successSubmitd() {
|
||||
this.handleCanceld();
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$modal.confirm('是否确认导出所有角色数据项?').then(function() {
|
||||
this.exportLoading = true;
|
||||
return exportRole(queryParams);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '角色数据.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 120px - 8px);
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,99 +2,275 @@
|
||||
<div class="app-container">
|
||||
<doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
|
||||
<doc-alert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
|
||||
<doc-alert title="Excel 导入导出" url="https://doc.iocoder.cn/excel-import-and-export/" />
|
||||
<doc-alert
|
||||
title="Excel 导入导出"
|
||||
url="https://doc.iocoder.cn/excel-import-and-export/"
|
||||
/>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-row :gutter="20">
|
||||
<!--部门数据-->
|
||||
<el-col :span="4" :xs="24">
|
||||
<div class="head-container">
|
||||
<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px"/>
|
||||
<el-input
|
||||
v-model="deptName"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
size="small"
|
||||
prefix-icon="el-icon-search"
|
||||
style="margin-bottom: 20px"
|
||||
/>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
|
||||
ref="tree" default-expand-all highlight-current @node-click="handleNodeClick"/>
|
||||
<el-tree
|
||||
:data="deptOptions"
|
||||
:props="defaultProps"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
default-expand-all
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<!--用户数据-->
|
||||
<el-col :span="20" :xs="24">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="用户名称" prop="username">
|
||||
<el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
<el-input
|
||||
v-model="queryParams.username"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="mobile">
|
||||
<el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
<el-input
|
||||
v-model="queryParams.mobile"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
|
||||
<el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="用户状态"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in statusDictDatas"
|
||||
:key="parseInt(dict.value)"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['system:user:create']">新增</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:user:create']"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
|
||||
v-hasPermi="['system:user:import']">导入</el-button>
|
||||
<el-button
|
||||
type="info"
|
||||
icon="el-icon-upload2"
|
||||
size="mini"
|
||||
@click="handleImport"
|
||||
v-hasPermi="['system:user:import']"
|
||||
>导入</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
||||
v-hasPermi="['system:user:export']">导出</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['system:user:export']"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
:columns="columns"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="userList">
|
||||
<el-table-column label="用户编号" align="center" key="id" prop="id" v-if="columns[0].visible" />
|
||||
<el-table-column label="用户名称" align="center" key="username" prop="username" v-if="columns[1].visible" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="用户昵称" align="center" key="nickname" prop="nickname" v-if="columns[2].visible" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="部门" align="center" key="deptName" prop="dept.name" v-if="columns[3].visible" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="手机号码" align="center" key="mobile" prop="mobile" v-if="columns[4].visible" width="120" />
|
||||
<el-table-column label="状态" key="status" v-if="columns[5].visible" align="center">
|
||||
<el-table-column
|
||||
label="用户编号"
|
||||
align="center"
|
||||
key="id"
|
||||
prop="id"
|
||||
v-if="columns[0].visible"
|
||||
/>
|
||||
<el-table-column
|
||||
label="用户名称"
|
||||
align="center"
|
||||
key="username"
|
||||
prop="username"
|
||||
v-if="columns[1].visible"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="用户昵称"
|
||||
align="center"
|
||||
key="nickname"
|
||||
prop="nickname"
|
||||
v-if="columns[2].visible"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="部门"
|
||||
align="center"
|
||||
key="deptName"
|
||||
prop="dept.name"
|
||||
v-if="columns[3].visible"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="手机号码"
|
||||
align="center"
|
||||
key="mobile"
|
||||
prop="mobile"
|
||||
v-if="columns[4].visible"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
label="状态"
|
||||
key="status"
|
||||
v-if="columns[5].visible"
|
||||
align="center"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)" />
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="0"
|
||||
:inactive-value="1"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
v-if="columns[6].visible"
|
||||
width="160"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
width="160"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:user:update']">修改</el-button>
|
||||
<el-dropdown @command="(command) => handleCommand(command, scope.$index, scope.row)"
|
||||
v-hasPermi="['system:user:delete', 'system:user:update-password', 'system:permission:assign-user-role']">
|
||||
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:user:update']"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-dropdown
|
||||
@command="
|
||||
(command) => handleCommand(command, scope.$index, scope.row)
|
||||
"
|
||||
v-hasPermi="[
|
||||
'system:user:delete',
|
||||
'system:user:update-password',
|
||||
'system:permission:assign-user-role',
|
||||
]"
|
||||
>
|
||||
<el-button size="mini" type="text" icon="el-icon-d-arrow-right"
|
||||
>更多</el-button
|
||||
>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="handleDelete" v-if="scope.row.id !== 1" size="mini" type="text" icon="el-icon-delete"
|
||||
v-hasPermi="['system:user:delete']">删除</el-dropdown-item>
|
||||
<el-dropdown-item command="handleResetPwd" size="mini" type="text" icon="el-icon-key"
|
||||
v-hasPermi="['system:user:update-password']">重置密码</el-dropdown-item>
|
||||
<el-dropdown-item command="handleRole" size="mini" type="text" icon="el-icon-circle-check"
|
||||
v-hasPermi="['system:permission:assign-user-role']">分配角色</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
command="handleDelete"
|
||||
v-if="scope.row.id !== 1"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
v-hasPermi="['system:user:delete']"
|
||||
>删除</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item
|
||||
command="handleResetPwd"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-key"
|
||||
v-hasPermi="['system:user:update-password']"
|
||||
>重置密码</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item
|
||||
command="handleRole"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-circle-check"
|
||||
v-hasPermi="['system:permission:assign-user-role']"
|
||||
>分配角色</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@ -109,32 +285,59 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="归属部门" prop="deptId">
|
||||
<treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" :clearable="false"
|
||||
placeholder="请选择归属部门" :normalizer="normalizer"/>
|
||||
<treeselect
|
||||
v-model="form.deptId"
|
||||
:options="deptOptions"
|
||||
:show-count="true"
|
||||
:clearable="false"
|
||||
placeholder="请选择归属部门"
|
||||
:normalizer="normalizer"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="手机号码" prop="mobile">
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机号码" maxlength="11" />
|
||||
<el-input
|
||||
v-model="form.mobile"
|
||||
placeholder="请输入手机号码"
|
||||
maxlength="11"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
|
||||
<el-input
|
||||
v-model="form.email"
|
||||
placeholder="请输入邮箱"
|
||||
maxlength="50"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="form.id === undefined" label="用户名称" prop="username">
|
||||
<el-form-item
|
||||
v-if="form.id === undefined"
|
||||
label="用户名称"
|
||||
prop="username"
|
||||
>
|
||||
<el-input v-model="form.username" placeholder="请输入用户名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="form.id === undefined" label="用户密码" prop="password">
|
||||
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" show-password />
|
||||
<el-form-item
|
||||
v-if="form.id === undefined"
|
||||
label="用户密码"
|
||||
prop="password"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
placeholder="请输入用户密码"
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -142,7 +345,12 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户性别">
|
||||
<el-select v-model="form.sex" placeholder="请选择">
|
||||
<el-option v-for="dict in sexDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
|
||||
<el-option
|
||||
v-for="dict in sexDictDatas"
|
||||
:key="parseInt(dict.value)"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -162,7 +370,11 @@
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
placeholder="请输入内容"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -174,18 +386,39 @@
|
||||
</el-dialog>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
||||
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
|
||||
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||
<el-dialog
|
||||
:title="upload.title"
|
||||
:visible.sync="upload.open"
|
||||
width="400px"
|
||||
append-to-body
|
||||
>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
accept=".xlsx, .xls"
|
||||
:headers="upload.headers"
|
||||
:action="upload.url + '?updateSupport=' + upload.updateSupport"
|
||||
:disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip text-center" slot="tip">
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
|
||||
<el-checkbox v-model="upload.updateSupport" />
|
||||
是否更新已经存在的用户数据
|
||||
</div>
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
@click="importTemplate"
|
||||
>下载模板</el-link
|
||||
>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
@ -195,7 +428,12 @@
|
||||
</el-dialog>
|
||||
|
||||
<!-- 分配角色 -->
|
||||
<el-dialog title="分配角色" :visible.sync="openRole" width="500px" append-to-body>
|
||||
<el-dialog
|
||||
title="分配角色"
|
||||
:visible.sync="openRole"
|
||||
width="500px"
|
||||
append-to-body
|
||||
>
|
||||
<el-form :model="form" label-width="80px">
|
||||
<el-form-item label="用户名称">
|
||||
<el-input v-model="form.username" :disabled="true" />
|
||||
@ -219,7 +457,6 @@
|
||||
<el-button @click="cancelRole">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -233,7 +470,7 @@ import {
|
||||
importTemplate,
|
||||
listUser,
|
||||
resetUserPwd,
|
||||
updateUser
|
||||
updateUser,
|
||||
} from "@/api/system/user";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
@ -282,7 +519,7 @@ export default {
|
||||
form: {},
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "name"
|
||||
label: "name",
|
||||
},
|
||||
// 用户导入参数
|
||||
upload: {
|
||||
@ -297,7 +534,7 @@ export default {
|
||||
// 设置上传的请求头部
|
||||
headers: getBaseHeader(),
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + '/admin-api/system/user/import'
|
||||
url: process.env.VUE_APP_BASE_API + "/admin-api/system/user/import",
|
||||
},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
@ -307,7 +544,7 @@ export default {
|
||||
mobile: undefined,
|
||||
status: undefined,
|
||||
deptId: undefined,
|
||||
createTime: []
|
||||
createTime: [],
|
||||
},
|
||||
// 列信息
|
||||
columns: [
|
||||
@ -317,33 +554,34 @@ export default {
|
||||
{ key: 3, label: `部门`, visible: true },
|
||||
{ key: 4, label: `手机号码`, visible: true },
|
||||
{ key: 5, label: `状态`, visible: true },
|
||||
{ key: 6, label: `创建时间`, visible: true }
|
||||
{ key: 6, label: `创建时间`, visible: true },
|
||||
],
|
||||
// 表单校验
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: "用户名称不能为空", trigger: "blur" }
|
||||
{ required: true, message: "用户名称不能为空", trigger: "blur" },
|
||||
],
|
||||
nickname: [
|
||||
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
|
||||
{ required: true, message: "用户昵称不能为空", trigger: "blur" },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "用户密码不能为空", trigger: "blur" }
|
||||
{ required: true, message: "用户密码不能为空", trigger: "blur" },
|
||||
],
|
||||
email: [
|
||||
{
|
||||
type: "email",
|
||||
message: "'请输入正确的邮箱地址",
|
||||
trigger: ["blur", "change"]
|
||||
}
|
||||
trigger: ["blur", "change"],
|
||||
},
|
||||
],
|
||||
mobile: [
|
||||
{
|
||||
pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
|
||||
pattern:
|
||||
/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
// 是否显示弹出层（角色权限）
|
||||
openRole: false,
|
||||
@ -359,7 +597,7 @@ export default {
|
||||
// 根据名称筛选部门树
|
||||
deptName(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
@ -372,16 +610,16 @@ export default {
|
||||
// 更多操作
|
||||
handleCommand(command, index, row) {
|
||||
switch (command) {
|
||||
case 'handleUpdate':
|
||||
case "handleUpdate":
|
||||
this.handleUpdate(row); //修改客户信息
|
||||
break;
|
||||
case 'handleDelete':
|
||||
case "handleDelete":
|
||||
this.handleDelete(row); //红号变更
|
||||
break;
|
||||
case 'handleResetPwd':
|
||||
case "handleResetPwd":
|
||||
this.handleResetPwd(row);
|
||||
break;
|
||||
case 'handleRole':
|
||||
case "handleRole":
|
||||
this.handleRole(row);
|
||||
break;
|
||||
default:
|
||||
@ -391,21 +629,20 @@ export default {
|
||||
/** 查询用户列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listUser(this.queryParams).then(response => {
|
||||
listUser(this.queryParams).then((response) => {
|
||||
this.userList = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
/** 查询部门下拉树结构 + 岗位下拉 */
|
||||
getTreeselect() {
|
||||
listSimpleDepts().then(response => {
|
||||
listSimpleDepts().then((response) => {
|
||||
// 处理 deptOptions 参数
|
||||
this.deptOptions = [];
|
||||
this.deptOptions.push(...this.handleTree(response.data, "id"));
|
||||
});
|
||||
listSimplePosts().then(response => {
|
||||
listSimplePosts().then((response) => {
|
||||
// 处理 postOptions 参数
|
||||
this.postOptions = [];
|
||||
this.postOptions.push(...response.data);
|
||||
@ -424,12 +661,18 @@ export default {
|
||||
// 用户状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
|
||||
this.$modal.confirm('确认要"' + text + '""' + row.username + '"用户吗?').then(function() {
|
||||
this.$modal
|
||||
.confirm('确认要"' + text + '""' + row.username + '"用户吗?')
|
||||
.then(function () {
|
||||
return changeUserStatus(row.id, row.status);
|
||||
}).then(() => {
|
||||
})
|
||||
.then(() => {
|
||||
this.$modal.msgSuccess(text + "成功");
|
||||
}).catch(function() {
|
||||
row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
|
||||
})
|
||||
.catch(function () {
|
||||
row.status =
|
||||
row.status === CommonStatusEnum.ENABLE
|
||||
? CommonStatusEnum.DISABLE
|
||||
: CommonStatusEnum.ENABLE;
|
||||
});
|
||||
},
|
||||
@ -457,7 +700,7 @@ export default {
|
||||
status: "0",
|
||||
remark: undefined,
|
||||
postIds: [],
|
||||
roleIds: []
|
||||
roleIds: [],
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
@ -486,7 +729,7 @@ export default {
|
||||
this.reset();
|
||||
this.getTreeselect();
|
||||
const id = row.id;
|
||||
getUser(id).then(response => {
|
||||
getUser(id).then((response) => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改用户";
|
||||
@ -496,17 +739,19 @@ export default {
|
||||
handleResetPwd(row) {
|
||||
this.$prompt('请输入"' + row.username + '"的新密码', "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消"
|
||||
}).then(({ value }) => {
|
||||
resetUserPwd(row.id, value).then(response => {
|
||||
cancelButtonText: "取消",
|
||||
})
|
||||
.then(({ value }) => {
|
||||
resetUserPwd(row.id, value).then((response) => {
|
||||
this.$modal.msgSuccess("修改成功，新密码是：" + value);
|
||||
});
|
||||
}).catch(() => {});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/** 分配用户角色操作 */
|
||||
handleRole(row) {
|
||||
this.reset();
|
||||
const id = row.id
|
||||
const id = row.id;
|
||||
// 处理了 form 的用户 username 和 nickname 的展示
|
||||
this.form.id = id;
|
||||
this.form.username = row.username;
|
||||
@ -514,29 +759,29 @@ export default {
|
||||
// 打开弹窗
|
||||
this.openRole = true;
|
||||
// 获得角色列表
|
||||
listSimpleRoles().then(response => {
|
||||
listSimpleRoles().then((response) => {
|
||||
// 处理 roleOptions 参数
|
||||
this.roleOptions = [];
|
||||
this.roleOptions.push(...response.data);
|
||||
});
|
||||
// 获得角色拥有的菜单集合
|
||||
listUserRoles(id).then(response => {
|
||||
listUserRoles(id).then((response) => {
|
||||
// 设置选中
|
||||
this.form.roleIds = response.data;
|
||||
})
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate(valid => {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.id !== undefined) {
|
||||
updateUser(this.form).then(response => {
|
||||
updateUser(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addUser(this.form).then(response => {
|
||||
addUser(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
@ -551,7 +796,7 @@ export default {
|
||||
assignUserRole({
|
||||
userId: this.form.id,
|
||||
roleIds: this.form.roleIds,
|
||||
}).then(response => {
|
||||
}).then((response) => {
|
||||
this.$modal.msgSuccess("分配角色成功");
|
||||
this.openRole = false;
|
||||
this.getList();
|
||||
@ -561,26 +806,34 @@ export default {
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项?').then(function() {
|
||||
this.$modal
|
||||
.confirm('是否确认删除用户编号为"' + ids + '"的数据项?')
|
||||
.then(function () {
|
||||
return delUser(ids);
|
||||
}).then(() => {
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.$modal.confirm('是否确认导出所有用户数据项?').then(() => {
|
||||
this.$modal
|
||||
.confirm("是否确认导出所有用户数据项?")
|
||||
.then(() => {
|
||||
// 处理查询参数
|
||||
let params = { ...this.queryParams };
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
this.exportLoading = true;
|
||||
return exportUser(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '用户数据.xls');
|
||||
})
|
||||
.then((response) => {
|
||||
this.$download.excel(response, "用户数据.xls");
|
||||
this.exportLoading = false;
|
||||
}).catch(() => {});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/** 导入按钮操作 */
|
||||
handleImport() {
|
||||
@ -589,8 +842,8 @@ export default {
|
||||
},
|
||||
/** 下载模板操作 */
|
||||
importTemplate() {
|
||||
importTemplate().then(response => {
|
||||
this.$download.excel(response, '用户导入模板.xls');
|
||||
importTemplate().then((response) => {
|
||||
this.$download.excel(response, "用户导入模板.xls");
|
||||
});
|
||||
},
|
||||
// 文件上传中处理
|
||||
@ -600,7 +853,7 @@ export default {
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
if (response.code !== 0) {
|
||||
this.$modal.msgError(response.msg)
|
||||
this.$modal.msgError(response.msg);
|
||||
return;
|
||||
}
|
||||
this.upload.open = false;
|
||||
@ -608,17 +861,22 @@ export default {
|
||||
this.$refs.upload.clearFiles();
|
||||
// 拼接提示语
|
||||
let data = response.data;
|
||||
let text = '创建成功数量：' + data.createUsernames.length;
|
||||
let text = "创建成功数量：" + data.createUsernames.length;
|
||||
for (const username of data.createUsernames) {
|
||||
text += '<br /> ' + username;
|
||||
text += "<br /> " + username;
|
||||
}
|
||||
text += '<br />更新成功数量：' + data.updateUsernames.length;
|
||||
text += "<br />更新成功数量：" + data.updateUsernames.length;
|
||||
for (const username of data.updateUsernames) {
|
||||
text += '<br /> ' + username;
|
||||
text += "<br /> " + username;
|
||||
}
|
||||
text += '<br />更新失败数量：' + Object.keys(data.failureUsernames).length;
|
||||
text +=
|
||||
"<br />更新失败数量：" + Object.keys(data.failureUsernames).length;
|
||||
for (const username in data.failureUsernames) {
|
||||
text += '<br /> ' + username + '：' + data.failureUsernames[username];
|
||||
text +=
|
||||
"<br /> " +
|
||||
username +
|
||||
"：" +
|
||||
data.failureUsernames[username];
|
||||
}
|
||||
this.$alert(text, "导入结果", { dangerouslyUseHTMLString: true });
|
||||
this.getList();
|
||||
@ -632,9 +890,18 @@ export default {
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
children: node.children
|
||||
}
|
||||
}
|
||||
}
|
||||
children: node.children,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 120px - 8px);
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user