修改
This commit is contained in:
parent
1e3ba8c9d0
commit
69f953fb0c
@ -96,7 +96,7 @@ const actions = {
|
|||||||
let preData = dataArr.previousProdOutputOutDO
|
let preData = dataArr.previousProdOutputOutDO
|
||||||
let preFtoData = dataArr.previousProdOutputFtoDO
|
let preFtoData = dataArr.previousProdOutputFtoDO
|
||||||
// const targetArr = await getHomeInfo();
|
// const targetArr = await getHomeInfo();
|
||||||
const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetDO,dataArr.prodOutputFtoDO,preData,preFtoData);
|
const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetOutputDO,dataArr.prodOutputFtoDO,dataArr.previousProdOutputOutDO,preData,preFtoData);
|
||||||
commit("SET_HOME_INFO", payload);
|
commit("SET_HOME_INFO", payload);
|
||||||
},
|
},
|
||||||
/** 初始化驾驶舱数据 */
|
/** 初始化驾驶舱数据 */
|
||||||
@ -345,7 +345,7 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
|
|||||||
if (preData && preData[0] != null) {
|
if (preData && preData[0] != null) {
|
||||||
for (const factory of preData) {
|
for (const factory of preData) {
|
||||||
const fId = getPreFactoryId(factory);
|
const fId = getPreFactoryId(factory);
|
||||||
chipInvest.previous[fId] = factory.previousYearInputNumber;
|
// chipInvest.previous[fId] = factory.previousYearInputNumber;
|
||||||
// chipOeeRate.current[fId] = factory.oee;
|
// chipOeeRate.current[fId] = factory.oee;
|
||||||
chipOeeRate.previous[fId] = factory.previousYearOee;
|
chipOeeRate.previous[fId] = factory.previousYearOee;
|
||||||
// 转化效率
|
// 转化效率
|
||||||
|
@ -83,6 +83,7 @@ export default {
|
|||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
align: "right",
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
|
@ -7,9 +7,13 @@
|
|||||||
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
|
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
|
||||||
@click="() => $emit('update:than', i)" />
|
@click="() => $emit('update:than', i)" />
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button type="button" class="export-btn" @click="handleExport" />
|
<el-tooltip class="item" effect="dark" content="导出" placement="top">
|
||||||
<button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
|
<button type="button" class="export-btn" @click="handleExport" />
|
||||||
@click="toggleFullScreen" />
|
</el-tooltip>
|
||||||
|
<el-tooltip class="item" effect="dark" :content="isFullscreen === false ? '退出全屏' : '全屏'" placement="top">
|
||||||
|
<button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
|
||||||
|
@click="toggleFullScreen" />
|
||||||
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<div class="page-title">{{ companyName }}</div>
|
<div class="page-title">{{ companyName }}</div>
|
||||||
@ -46,7 +50,8 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isFullscreen: false,
|
// isFullscreen: false,
|
||||||
|
content:'全屏',
|
||||||
dataList: [
|
dataList: [
|
||||||
{ id: 1, name: "日" },
|
{ id: 1, name: "日" },
|
||||||
{ id: 2, name: "周" },
|
{ id: 2, name: "周" },
|
||||||
@ -61,6 +66,7 @@ export default {
|
|||||||
exportFactoryDataExcel({
|
exportFactoryDataExcel({
|
||||||
factoryId: this.companyId,
|
factoryId: this.companyId,
|
||||||
timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
|
timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
|
||||||
|
compare: this.than === '同比' ? 1 : 2
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
this.$download.excel(response, `${this.companyName}生产数据.xls`);
|
this.$download.excel(response, `${this.companyName}生产数据.xls`);
|
||||||
// this.exportLoading = false;
|
// this.exportLoading = false;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-23 15:49:14
|
* @Date: 2024-05-23 15:49:14
|
||||||
* @LastEditTime: 2024-05-31 16:06:50
|
* @LastEditTime: 2024-06-04 08:54:10
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -84,6 +84,7 @@ export default {
|
|||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
align: "right",
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
|
234
src/views/copilot/components/leftContainer.vue
Normal file
234
src/views/copilot/components/leftContainer.vue
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zhp
|
||||||
|
* @Date: 2024-06-05 09:43:51
|
||||||
|
* @LastEditTime: 2024-06-05 09:43:52
|
||||||
|
* @LastEditors: zhp
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="copilot-container">
|
||||||
|
<!-- refresh btn -->
|
||||||
|
<button
|
||||||
|
v-if="false"
|
||||||
|
style="
|
||||||
|
appearance: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
"
|
||||||
|
@click="$emit('refresh')"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
style="width: 24px; height: 24px"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<!-- decoration -->
|
||||||
|
<div class="corner tl"></div>
|
||||||
|
<div class="corner tr"></div>
|
||||||
|
<div class="corner bl"></div>
|
||||||
|
<div class="corner br"></div>
|
||||||
|
<!-- content -->
|
||||||
|
<div
|
||||||
|
class="container-head"
|
||||||
|
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
|
||||||
|
>
|
||||||
|
<Icon :icon="icon"></Icon>
|
||||||
|
<h2 class="container-title">{{ title }}</h2>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="container-body"
|
||||||
|
:class="[
|
||||||
|
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ContainerIconVue from "./ContainerIcon.vue";
|
||||||
|
export default {
|
||||||
|
name: "DashboardContainer",
|
||||||
|
components: {
|
||||||
|
Icon: ContainerIconVue,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
side: {
|
||||||
|
type: String,
|
||||||
|
default: "left",
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: "cube",
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "Default Title",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.copilot-container {
|
||||||
|
height: 0;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: inset 0 0 20px 1px #fff1;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
width: 0.11415vw;
|
||||||
|
border-radius: 2px;
|
||||||
|
top: 0%;
|
||||||
|
left: 0;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle at center,
|
||||||
|
#024798 2%,
|
||||||
|
#024798 30%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
width: 60%;
|
||||||
|
height: 0.31415vh;
|
||||||
|
border-radius: 2px;
|
||||||
|
left: 8%;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(to right, #024798, transparent);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-head {
|
||||||
|
// height: 40px;
|
||||||
|
height: 3.8vh;
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.container-title {
|
||||||
|
font-size: 1.18vw;
|
||||||
|
line-height: 1.39vw;
|
||||||
|
font-weight: normal;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-body {
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner {
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
// width: 16px;
|
||||||
|
// height: 16px;
|
||||||
|
width: 0.95vw;
|
||||||
|
height: 0.95vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.tl {
|
||||||
|
border-top: 2px solid #0175dc;
|
||||||
|
border-left: 2px solid #0175dc;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.tr {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
border-top: 2px solid #0175dc;
|
||||||
|
border-right: 2px solid #0175dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.bl {
|
||||||
|
// width: 20px;
|
||||||
|
// height: 20px;
|
||||||
|
width: 1.064vw;
|
||||||
|
height: 1.064vw;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
// border-left: 10px solid #0175dc;
|
||||||
|
// border-bottom: 10px solid #0175dc;
|
||||||
|
// border-top: 10px solid transparent;
|
||||||
|
// border-right: 10px solid transparent;
|
||||||
|
border-left: 0.532vw solid transparent;
|
||||||
|
border-bottom: .6vw solid #0175dc;
|
||||||
|
border-top: 0.532vw solid transparent;
|
||||||
|
border-right: 0.532vw solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.br {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
// width: 20px;
|
||||||
|
// height: 20px;
|
||||||
|
width: 1.064vw;
|
||||||
|
height: 1.064vw;
|
||||||
|
border-left: 0.532vw solid transparent;
|
||||||
|
border-bottom: 0.532vw solid #0175dc;
|
||||||
|
border-top: 0.532vw solid transparent;
|
||||||
|
border-right: 0.532vw solid #0175dc;
|
||||||
|
// border-left: 10px solid transparent;
|
||||||
|
// border-bottom: 10px solid #0175dc;
|
||||||
|
// border-top: 10px solid transparent;
|
||||||
|
// border-right: 10px solid #0175dc;
|
||||||
|
// transform: rotate(-90deg);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-to-right {
|
||||||
|
background: linear-gradient(to right, #0c3f68cc, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-to-left {
|
||||||
|
background: linear-gradient(to left, #0c3f68cc, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-gradient-to-right {
|
||||||
|
background: linear-gradient(to right, #0003, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-gradient-to-left {
|
||||||
|
background: linear-gradient(to left, #0003, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,8 +1,8 @@
|
|||||||
<!--
|
<!--
|
||||||
filename: Container.vue
|
filename: Container.vue
|
||||||
author: liubin
|
author: liubin
|
||||||
date: 2024-04-09 10:44:09
|
date: 2024-04-09 10:44:09
|
||||||
description:
|
description:
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -41,8 +41,8 @@
|
|||||||
<!-- decoration -->
|
<!-- decoration -->
|
||||||
<div class="corner tl"></div>
|
<div class="corner tl"></div>
|
||||||
<div class="corner tr"></div>
|
<div class="corner tr"></div>
|
||||||
<div v-if="side == 'left'" class="corner bl"></div>
|
<div class="corner bl"></div>
|
||||||
<div v-if="side == 'right'" class="corner br"></div>
|
<div class="corner br"></div>
|
||||||
<!-- content -->
|
<!-- content -->
|
||||||
<div
|
<div
|
||||||
class="container-head"
|
class="container-head"
|
||||||
@ -207,10 +207,11 @@ export default {
|
|||||||
// border-bottom: 10px solid #0175dc;
|
// border-bottom: 10px solid #0175dc;
|
||||||
// border-top: 10px solid transparent;
|
// border-top: 10px solid transparent;
|
||||||
// border-right: 10px solid #0175dc;
|
// border-right: 10px solid #0175dc;
|
||||||
|
// transform: rotate(-90deg);
|
||||||
border-left: 0.532vw solid transparent;
|
border-left: 0.532vw solid transparent;
|
||||||
border-bottom: 0.532vw solid #0175dc;
|
border-bottom: .6vw solid #0175dc;
|
||||||
border-top: 0.532vw solid transparent;
|
border-top: 0.532vw solid transparent;
|
||||||
border-right: 0.532vw solid #0175dc;
|
border-right: 0.532vw solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient-to-right {
|
.gradient-to-right {
|
239
src/views/copilot/components/twoContainer.vue
Normal file
239
src/views/copilot/components/twoContainer.vue
Normal file
@ -0,0 +1,239 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zhp
|
||||||
|
* @Date: 2024-06-05 09:48:37
|
||||||
|
* @LastEditTime: 2024-06-05 09:53:49
|
||||||
|
* @LastEditors: zhp
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
filename: Container.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2024-04-09 10:44:09
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="copilot-container">
|
||||||
|
<!-- refresh btn -->
|
||||||
|
<button
|
||||||
|
v-if="0"
|
||||||
|
style="
|
||||||
|
appearance: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
"
|
||||||
|
@click="$emit('refresh')"
|
||||||
|
>rotate
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
style="width: 24px; height: 24px"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<!-- decoration -->
|
||||||
|
<div class="corner tl"></div>
|
||||||
|
<div class="corner tr"></div>
|
||||||
|
<div class="corner bl"></div>
|
||||||
|
<div class="corner br"></div>
|
||||||
|
<!-- content -->
|
||||||
|
<div
|
||||||
|
class="container-head"
|
||||||
|
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
|
||||||
|
>
|
||||||
|
<Icon :icon="icon"></Icon>
|
||||||
|
<h2 class="container-title">{{ title }}</h2>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="container-body"
|
||||||
|
:class="[
|
||||||
|
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ContainerIconVue from "./ContainerIcon.vue";
|
||||||
|
export default {
|
||||||
|
name: "DashboardContainer",
|
||||||
|
components: {
|
||||||
|
Icon: ContainerIconVue,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
side: {
|
||||||
|
type: String,
|
||||||
|
default: "left",
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: "cube",
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "Default Title",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.copilot-container {
|
||||||
|
height: 0;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: inset 0 0 20px 1px #fff1;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
width: 0.11415vw;
|
||||||
|
border-radius: 2px;
|
||||||
|
top: 0%;
|
||||||
|
left: 0;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle at center,
|
||||||
|
#024798 2%,
|
||||||
|
#024798 30%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
width: 60%;
|
||||||
|
height: 0.31415vh;
|
||||||
|
border-radius: 2px;
|
||||||
|
left: 8%;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(to right, #024798, transparent);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-head {
|
||||||
|
// height: 40px;
|
||||||
|
height: 3.8vh;
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.container-title {
|
||||||
|
font-size: 1.18vw;
|
||||||
|
line-height: 1.39vw;
|
||||||
|
font-weight: normal;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-body {
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner {
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
// width: 16px;
|
||||||
|
// height: 16px;
|
||||||
|
width: 0.95vw;
|
||||||
|
height: 0.95vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.tl {
|
||||||
|
border-top: 2px solid #0175dc;
|
||||||
|
border-left: 2px solid #0175dc;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.tr {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
border-top: 2px solid #0175dc;
|
||||||
|
border-right: 2px solid #0175dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.bl {
|
||||||
|
// width: 20px;
|
||||||
|
// height: 20px;
|
||||||
|
width: 1.064vw;
|
||||||
|
height: 1.064vw;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
// border-left: 10px solid #0175dc;
|
||||||
|
// border-bottom: 10px solid #0175dc;
|
||||||
|
// border-top: 10px solid transparent;
|
||||||
|
// border-right: 10px solid transparent;
|
||||||
|
border-left: 0.532vw solid #0175dc;
|
||||||
|
border-bottom: 0.532vw solid #0175dc;
|
||||||
|
border-top: 0.532vw solid transparent;
|
||||||
|
border-right: 0.532vw solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.br {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
// width: 20px;
|
||||||
|
// height: 20px;
|
||||||
|
width: 1.064vw;
|
||||||
|
height: 1.064vw;
|
||||||
|
// border-left: 10px solid transparent;
|
||||||
|
// border-bottom: 10px solid #0175dc;
|
||||||
|
// border-top: 10px solid transparent;
|
||||||
|
// border-right: 10px solid #0175dc;
|
||||||
|
border-left: 0.532vw solid transparent;
|
||||||
|
border-bottom: 0.532vw solid #0175dc;
|
||||||
|
border-top: 0.532vw solid transparent;
|
||||||
|
border-right: 0.532vw solid #0175dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-to-right {
|
||||||
|
background: linear-gradient(to right, #0c3f68cc, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-to-left {
|
||||||
|
background: linear-gradient(to left, #0c3f68cc, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-gradient-to-right {
|
||||||
|
background: linear-gradient(to right, #0003, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-gradient-to-left {
|
||||||
|
background: linear-gradient(to left, #0003, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -25,7 +25,7 @@ import YieldCopilot from "./yield/index.vue";
|
|||||||
// import EfficiencyCopilot from "./efficiency/index.vue";
|
// import EfficiencyCopilot from "./efficiency/index.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "CopilotContainer",
|
name: "copilotContainer",
|
||||||
components: {
|
components: {
|
||||||
CopilotHeaderVue,
|
CopilotHeaderVue,
|
||||||
YieldCopilot,
|
YieldCopilot,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 10:25:10
|
* @Date: 2024-05-07 10:25:10
|
||||||
* @LastEditTime: 2024-06-03 16:40:45
|
* @LastEditTime: 2024-06-04 14:18:52
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -33,7 +33,15 @@ export default {
|
|||||||
default: "同比",
|
default: "同比",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// data: null
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
data() {
|
||||||
|
return this.$store.getters.copilot.efficiency.stdRate
|
||||||
|
},
|
||||||
cities() {
|
cities() {
|
||||||
console.log('ztl', this.$store.getters.copilot.efficiency.stdRate)
|
console.log('ztl', this.$store.getters.copilot.efficiency.stdRate)
|
||||||
// let getterName = "";
|
// let getterName = "";
|
||||||
@ -57,22 +65,22 @@ export default {
|
|||||||
{ name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
|
{ name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
|
||||||
{ name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
|
{ name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
|
||||||
]
|
]
|
||||||
if (this.$store.getters.copilot?.efficiency.stdRate?.previous) {
|
if (this.data?.previous) {
|
||||||
this.$store.getters.copilot?.efficiency.stdRate?.previous.forEach(
|
this.data?.previous.forEach(
|
||||||
(v, idx) => {
|
(v, idx) => {
|
||||||
_cities[idx].previous = v ?? 0;
|
_cities[idx].previous = v ?? 0;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (this.$store.getters.copilot?.efficiency.stdRate?.target) {
|
if (this.data?.target) {
|
||||||
this.$store.getters.copilot?.efficiency.stdRate?.target.forEach(
|
this.data?.target.forEach(
|
||||||
(v, idx) => {
|
(v, idx) => {
|
||||||
_cities[idx].target = v ?? 0;
|
_cities[idx].target = v ?? 0;
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
if (this.$store.getters.copilot?.efficiency.stdRate?.current) {
|
if (this.data?.current) {
|
||||||
this.$store.getters.copilot?.efficiency.stdRate?.current.forEach(
|
this.data?.current.forEach(
|
||||||
(v, idx) => {
|
(v, idx) => {
|
||||||
_cities[idx].current = v ?? 0;
|
_cities[idx].current = v ?? 0;
|
||||||
}
|
}
|
||||||
@ -86,19 +94,24 @@ export default {
|
|||||||
return arr;
|
return arr;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data() {
|
watch: {
|
||||||
return {
|
period() {
|
||||||
// cities: [
|
this.data = this.$store.getters.copilot.efficiency.stdRate
|
||||||
// { name: "瑞昌", target: 100, total: 200, current: 20 },
|
}
|
||||||
// { name: "邯郸", target: 200, total: 300, current: 20 },
|
|
||||||
// { name: "株洲", target: 300, total: 400, current: 20 },
|
|
||||||
// { name: "佳木斯", target: 400, total: 500, current: 20 },
|
|
||||||
// { name: "成都", target: 500, total: 600, current: 20 },
|
|
||||||
// { name: "凯盛光伏", target: 400, total: 500, current: 20 },
|
|
||||||
// { name: "蚌埠", target: 500, total: 600, current: 20 },
|
|
||||||
// ],
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
|
// data() {
|
||||||
|
// return {
|
||||||
|
// // cities: [
|
||||||
|
// // { name: "瑞昌", target: 100, total: 200, current: 20 },
|
||||||
|
// // { name: "邯郸", target: 200, total: 300, current: 20 },
|
||||||
|
// // { name: "株洲", target: 300, total: 400, current: 20 },
|
||||||
|
// // { name: "佳木斯", target: 400, total: 500, current: 20 },
|
||||||
|
// // { name: "成都", target: 500, total: 600, current: 20 },
|
||||||
|
// // { name: "凯盛光伏", target: 400, total: 500, current: 20 },
|
||||||
|
// // { name: "蚌埠", target: 500, total: 600, current: 20 },
|
||||||
|
// // ],
|
||||||
|
// };
|
||||||
|
// },
|
||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 10:04:53
|
* @Date: 2024-05-07 10:04:53
|
||||||
* @LastEditTime: 2024-06-03 16:08:27
|
* @LastEditTime: 2024-06-05 09:45:47
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -12,17 +12,17 @@
|
|||||||
<Container title="芯片良率" icon="chip2">
|
<Container title="芯片良率" icon="chip2">
|
||||||
<ChipRate :period="period" :than="than" />
|
<ChipRate :period="period" :than="than" />
|
||||||
</Container>
|
</Container>
|
||||||
<Container title="标准组件良率" icon="std">
|
<left-container title="标准组件良率" icon="std">
|
||||||
<StdRate :period="period" :than="than" />
|
<StdRate :period="period" :than="than" />
|
||||||
</Container>
|
</left-container>
|
||||||
</section>
|
</section>
|
||||||
<section class="bottom flex">
|
<section class="bottom flex">
|
||||||
<Container title="芯片OEE" icon="chip">
|
<Container title="芯片OEE" icon="chip">
|
||||||
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
|
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
|
||||||
</Container>
|
</Container>
|
||||||
<Container title="转化效率" icon="cube">
|
<left-container title="转化效率" icon="cube">
|
||||||
<TransformRate :transformRate="transformRate" :period="period" :than="than" />
|
<TransformRate :transformRate="transformRate" :period="period" :than="than" />
|
||||||
</Container>
|
</left-container>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -30,7 +30,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Container from "@/views/copilot/components/Container.vue";
|
import Container from "@/views/copilot/components/rightContainer.vue";
|
||||||
|
import leftContainer from "@/views/copilot/components/leftContainer.vue";
|
||||||
import ChipOeeVue from "./components/ChipOee.vue";
|
import ChipOeeVue from "./components/ChipOee.vue";
|
||||||
import ChipRateVue from "./components/ChipRate.vue";
|
import ChipRateVue from "./components/ChipRate.vue";
|
||||||
import StdRateVue from "./components/StdRate.vue";
|
import StdRateVue from "./components/StdRate.vue";
|
||||||
@ -40,6 +41,7 @@ export default {
|
|||||||
name: "efficiencyCopilot",
|
name: "efficiencyCopilot",
|
||||||
components: {
|
components: {
|
||||||
Container,
|
Container,
|
||||||
|
leftContainer,
|
||||||
ChipOee: ChipOeeVue,
|
ChipOee: ChipOeeVue,
|
||||||
ChipRate: ChipRateVue,
|
ChipRate: ChipRateVue,
|
||||||
StdRate: StdRateVue,
|
StdRate: StdRateVue,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-20 16:04:18
|
* @Date: 2024-05-20 16:04:18
|
||||||
* @LastEditTime: 2024-06-03 15:45:58
|
* @LastEditTime: 2024-06-03 16:46:11
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -25,7 +25,7 @@ import CopilotHeaderVue from "./components/CopilotHeader.vue";
|
|||||||
import EfficiencyCopilot from "./efficiency/index.vue";
|
import EfficiencyCopilot from "./efficiency/index.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "CopilotContainer",
|
name: "copilotEfficiencyContainer",
|
||||||
components: {
|
components: {
|
||||||
CopilotHeaderVue,
|
CopilotHeaderVue,
|
||||||
EfficiencyCopilot,
|
EfficiencyCopilot,
|
||||||
|
@ -8,9 +8,9 @@
|
|||||||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
||||||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||||
</db-container>
|
</db-container>
|
||||||
<db-container title="工单监控" icon="order">
|
<left-container title="工单监控" icon="order">
|
||||||
<order :prodOrder="prodOrder" />
|
<order :prodOrder="prodOrder" />
|
||||||
</db-container>
|
</left-container>
|
||||||
<!-- <db-container title="" icon="store"> -->
|
<!-- <db-container title="" icon="store"> -->
|
||||||
<!-- <store :stock="stock" /> -->
|
<!-- <store :stock="stock" /> -->
|
||||||
<!-- </db-container> -->
|
<!-- </db-container> -->
|
||||||
@ -26,7 +26,8 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||||
import Container from "./components/Container.vue";
|
import Container from "./components/rightContainer.vue";
|
||||||
|
import leftContainer from "./components/leftContainer.vue";
|
||||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||||
import { deepClone } from "@/utils";
|
import { deepClone } from "@/utils";
|
||||||
// import Store from "./components/Store.vue";
|
// import Store from "./components/Store.vue";
|
||||||
@ -38,6 +39,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
FactoryDataHeader,
|
FactoryDataHeader,
|
||||||
DbContainer: Container,
|
DbContainer: Container,
|
||||||
|
LeftContainer: leftContainer,
|
||||||
ProdMonitor,
|
ProdMonitor,
|
||||||
// Store,
|
// Store,
|
||||||
// Energy,
|
// Energy,
|
||||||
|
@ -8,9 +8,9 @@
|
|||||||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
||||||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||||
</db-container>
|
</db-container>
|
||||||
<db-container title="工单监控" icon="order">
|
<left-container title="工单监控" icon="order">
|
||||||
<order :prodOrder="prodOrder" />
|
<order :prodOrder="prodOrder" />
|
||||||
</db-container>
|
</left-container>
|
||||||
<!-- <db-container title="" icon="store"> -->
|
<!-- <db-container title="" icon="store"> -->
|
||||||
<!-- <store :stock="stock" /> -->
|
<!-- <store :stock="stock" /> -->
|
||||||
<!-- </db-container> -->
|
<!-- </db-container> -->
|
||||||
@ -26,7 +26,8 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||||
import Container from "./components/Container.vue";
|
import Container from "./components/rightContainer.vue";
|
||||||
|
import leftContainer from "./components/leftContainer.vue";
|
||||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||||
import { deepClone } from "@/utils";
|
import { deepClone } from "@/utils";
|
||||||
// import Store from "./components/Store.vue";
|
// import Store from "./components/Store.vue";
|
||||||
@ -38,6 +39,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
FactoryDataHeader,
|
FactoryDataHeader,
|
||||||
DbContainer: Container,
|
DbContainer: Container,
|
||||||
|
LeftContainer: leftContainer,
|
||||||
ProdMonitor,
|
ProdMonitor,
|
||||||
// Store,
|
// Store,
|
||||||
// Energy,
|
// Energy,
|
||||||
|
@ -231,7 +231,13 @@ export default {
|
|||||||
console.log("this.energyCockpits", this.energyCockpits);
|
console.log("this.energyCockpits", this.energyCockpits);
|
||||||
let orderXAxis = ['目标产量', '计划投入量', '实际投入量', '实际产出量', '废品数量', '待再加工数量'];
|
let orderXAxis = ['目标产量', '计划投入量', '实际投入量', '实际产出量', '废品数量', '待再加工数量'];
|
||||||
// let n = 0;
|
// let n = 0;
|
||||||
let seriesArr =[]
|
let seriesArr = []
|
||||||
|
// let arr = []
|
||||||
|
// if (this.energyCockpits) {
|
||||||
|
// this.energyCockpits.forEach(ele => {
|
||||||
|
// arr.push()
|
||||||
|
// });
|
||||||
|
// }
|
||||||
seriesArr[0] = this.energyCockpits.length != 0 && this.energyCockpits[0].targetProduction ? this.energyCockpits[0].targetProduction :0
|
seriesArr[0] = this.energyCockpits.length != 0 && this.energyCockpits[0].targetProduction ? this.energyCockpits[0].targetProduction :0
|
||||||
seriesArr[1] = this.energyCockpits.length != 0 && this.energyCockpits[0].plannedInvestment ? this.energyCockpits[0].plannedInvestment : 0
|
seriesArr[1] = this.energyCockpits.length != 0 && this.energyCockpits[0].plannedInvestment ? this.energyCockpits[0].plannedInvestment : 0
|
||||||
seriesArr[2] = this.energyCockpits.length != 0 && this.energyCockpits[0].actualInvestment ? this.energyCockpits[0].actualInvestment : 0
|
seriesArr[2] = this.energyCockpits.length != 0 && this.energyCockpits[0].actualInvestment ? this.energyCockpits[0].actualInvestment : 0
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-30 08:58:39
|
* @Date: 2024-05-30 08:58:39
|
||||||
* @LastEditTime: 2024-05-31 15:52:28
|
* @LastEditTime: 2024-06-05 09:15:03
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -83,6 +83,7 @@ export default {
|
|||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
align: "right",
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
@ -173,32 +174,11 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "", // "2024年目标值",
|
name: "", // "2024年目标值",
|
||||||
type: "bar",
|
type: "line",
|
||||||
barWidth: 12,
|
barWidth: 12,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderRadius: [10, 10, 0, 0],
|
borderRadius: [10, 10, 0, 0],
|
||||||
color: {
|
color:'#f3c000'
|
||||||
type: "linear",
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: "#f3c000", // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "#f3c00033",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: "transparent", // 100% 处的颜色
|
|
||||||
},
|
|
||||||
],
|
|
||||||
global: false, // 缺省为 false
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data: [], // this.series[0].data,
|
data: [], // this.series[0].data,
|
||||||
},
|
},
|
||||||
@ -336,8 +316,33 @@ export default {
|
|||||||
.legend-item:nth-child(2):before {
|
.legend-item:nth-child(2):before {
|
||||||
background-color: #58adfa;
|
background-color: #58adfa;
|
||||||
}
|
}
|
||||||
.legend-item:nth-child(3):before {
|
.legend-item:nth-child(3):before {
|
||||||
background-color: #f3c000;
|
// 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>
|
</style>
|
||||||
|
@ -23,7 +23,7 @@
|
|||||||
<div class="separate">
|
<div class="separate">
|
||||||
<div>
|
<div>
|
||||||
<span class="type">玻璃类型</span>
|
<span class="type">玻璃类型</span>
|
||||||
<span class="type-name">标准组检产量</span>
|
<span class="type-name">标准组件产量</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="type">良品数量</span>
|
<span class="type">良品数量</span>
|
||||||
|
241
src/views/copilot/factoryData/components/leftContainer.vue
Normal file
241
src/views/copilot/factoryData/components/leftContainer.vue
Normal file
@ -0,0 +1,241 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zhp
|
||||||
|
* @Date: 2024-06-05 09:36:07
|
||||||
|
* @LastEditTime: 2024-06-05 09:38:23
|
||||||
|
* @LastEditors: zhp
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
filename: Container.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2024-04-09 10:44:09
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="copilot-container">
|
||||||
|
<!-- refresh btn -->
|
||||||
|
<button
|
||||||
|
v-if="false"
|
||||||
|
style="
|
||||||
|
appearance: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
"
|
||||||
|
@click="$emit('refresh')"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
style="width: 24px; height: 24px"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<!-- decoration -->
|
||||||
|
<div class="corner tl"></div>
|
||||||
|
<div class="corner tr"></div>
|
||||||
|
<div class="corner bl"></div>
|
||||||
|
<div class="corner br"></div>
|
||||||
|
<!-- content -->
|
||||||
|
<div
|
||||||
|
class="container-head"
|
||||||
|
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
|
||||||
|
>
|
||||||
|
<Icon :icon="icon"></Icon>
|
||||||
|
<h2 class="container-title">{{ title }}</h2>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="container-body"
|
||||||
|
:class="[
|
||||||
|
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ContainerIconVue from "./ContainerIcon.vue";
|
||||||
|
export default {
|
||||||
|
name: "DashboardContainer",
|
||||||
|
components: {
|
||||||
|
Icon: ContainerIconVue,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
side: {
|
||||||
|
type: String,
|
||||||
|
default: "left",
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: "cube",
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "Default Title",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.copilot-container {
|
||||||
|
height: 0;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: inset 0 0 20px 1px #fff1;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
width: 0.11415vw;
|
||||||
|
border-radius: 2px;
|
||||||
|
top: 0%;
|
||||||
|
left: 0;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle at center,
|
||||||
|
#024798 2%,
|
||||||
|
#024798 30%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
width: 60%;
|
||||||
|
height: 0.31415vh;
|
||||||
|
border-radius: 2px;
|
||||||
|
left: 8%;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(to right, #024798, transparent);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-head {
|
||||||
|
// height: 40px;
|
||||||
|
height: 3.8vh;
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.container-title {
|
||||||
|
font-size: 1.18vw;
|
||||||
|
line-height: 1.39vw;
|
||||||
|
font-weight: normal;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-body {
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner {
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
// width: 16px;
|
||||||
|
// height: 16px;
|
||||||
|
width: 0.95vw;
|
||||||
|
height: 0.95vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.tl {
|
||||||
|
border-top: 2px solid #0175dc;
|
||||||
|
border-left: 2px solid #0175dc;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.tr {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
border-top: 2px solid #0175dc;
|
||||||
|
border-right: 2px solid #0175dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.bl {
|
||||||
|
// width: 20px;
|
||||||
|
// height: 20px;
|
||||||
|
width: 1.064vw;
|
||||||
|
height: 1.064vw;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
// border-left: 10px solid #0175dc;
|
||||||
|
// border-bottom: 10px solid #0175dc;
|
||||||
|
// border-top: 10px solid transparent;
|
||||||
|
// border-right: 10px solid transparent;
|
||||||
|
border-left: 0.532vw solid transparent;
|
||||||
|
border-bottom: .6vw solid #0175dc;
|
||||||
|
border-top: 0.532vw solid transparent;
|
||||||
|
border-right: 0.532vw solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.br {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
// width: 20px;
|
||||||
|
// height: 20px;
|
||||||
|
width: 1.064vw;
|
||||||
|
height: 1.064vw;
|
||||||
|
border-left: 0.532vw solid transparent;
|
||||||
|
border-bottom: 0.532vw solid #0175dc;
|
||||||
|
border-top: 0.532vw solid transparent;
|
||||||
|
border-right: 0.532vw solid #0175dc;
|
||||||
|
// border-left: 10px solid transparent;
|
||||||
|
// border-bottom: 10px solid #0175dc;
|
||||||
|
// border-top: 10px solid transparent;
|
||||||
|
// border-right: 10px solid #0175dc;
|
||||||
|
// transform: rotate(-90deg);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-to-right {
|
||||||
|
background: linear-gradient(to right, #0c3f68cc, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-to-left {
|
||||||
|
background: linear-gradient(to left, #0c3f68cc, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-gradient-to-right {
|
||||||
|
background: linear-gradient(to right, #0003, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-gradient-to-left {
|
||||||
|
background: linear-gradient(to left, #0003, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
233
src/views/copilot/factoryData/components/rightContainer.vue
Normal file
233
src/views/copilot/factoryData/components/rightContainer.vue
Normal file
@ -0,0 +1,233 @@
|
|||||||
|
<!--
|
||||||
|
filename: Container.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2024-04-09 10:44:09
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="copilot-container">
|
||||||
|
<!-- refresh btn -->
|
||||||
|
<button
|
||||||
|
v-if="false"
|
||||||
|
style="
|
||||||
|
appearance: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
"
|
||||||
|
@click="$emit('refresh')"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
style="width: 24px; height: 24px"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<!-- decoration -->
|
||||||
|
<div class="corner tl"></div>
|
||||||
|
<div class="corner tr"></div>
|
||||||
|
<div class="corner bl"></div>
|
||||||
|
<div class="corner br"></div>
|
||||||
|
<!-- content -->
|
||||||
|
<div
|
||||||
|
class="container-head"
|
||||||
|
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
|
||||||
|
>
|
||||||
|
<Icon :icon="icon"></Icon>
|
||||||
|
<h2 class="container-title">{{ title }}</h2>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="container-body"
|
||||||
|
:class="[
|
||||||
|
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ContainerIconVue from "./ContainerIcon.vue";
|
||||||
|
export default {
|
||||||
|
name: "DashboardContainer",
|
||||||
|
components: {
|
||||||
|
Icon: ContainerIconVue,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
side: {
|
||||||
|
type: String,
|
||||||
|
default: "left",
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: "cube",
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "Default Title",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.copilot-container {
|
||||||
|
height: 0;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: inset 0 0 20px 1px #fff1;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
width: 0.11415vw;
|
||||||
|
border-radius: 2px;
|
||||||
|
top: 0%;
|
||||||
|
left: 0;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle at center,
|
||||||
|
#024798 2%,
|
||||||
|
#024798 30%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
width: 60%;
|
||||||
|
height: 0.31415vh;
|
||||||
|
border-radius: 2px;
|
||||||
|
left: 8%;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(to right, #024798, transparent);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-head {
|
||||||
|
// height: 40px;
|
||||||
|
height: 3.8vh;
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.container-title {
|
||||||
|
font-size: 1.18vw;
|
||||||
|
line-height: 1.39vw;
|
||||||
|
font-weight: normal;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-body {
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner {
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
// width: 16px;
|
||||||
|
// height: 16px;
|
||||||
|
width: 0.95vw;
|
||||||
|
height: 0.95vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.tl {
|
||||||
|
border-top: 2px solid #0175dc;
|
||||||
|
border-left: 2px solid #0175dc;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.tr {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
border-top: 2px solid #0175dc;
|
||||||
|
border-right: 2px solid #0175dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.bl {
|
||||||
|
// width: 20px;
|
||||||
|
// height: 20px;
|
||||||
|
width: 1.064vw;
|
||||||
|
height: 1.064vw;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
// border-left: 10px solid #0175dc;
|
||||||
|
// border-bottom: 10px solid #0175dc;
|
||||||
|
// border-top: 10px solid transparent;
|
||||||
|
// border-right: 10px solid transparent;
|
||||||
|
border-left: 0.532vw solid #0175dc;
|
||||||
|
border-bottom: 0.532vw solid #0175dc;
|
||||||
|
border-top: 0.532vw solid transparent;
|
||||||
|
border-right: 0.532vw solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.corner.br {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
// width: 20px;
|
||||||
|
// height: 20px;
|
||||||
|
width: 1.064vw;
|
||||||
|
height: 1.064vw;
|
||||||
|
// border-left: 10px solid transparent;
|
||||||
|
// border-bottom: 10px solid #0175dc;
|
||||||
|
// border-top: 10px solid transparent;
|
||||||
|
// border-right: 10px solid #0175dc;
|
||||||
|
// transform: rotate(-90deg);
|
||||||
|
border-left: 0.532vw solid transparent;
|
||||||
|
border-bottom: .6vw solid #0175dc;
|
||||||
|
border-top: 0.532vw solid transparent;
|
||||||
|
border-right: 0.532vw solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-to-right {
|
||||||
|
background: linear-gradient(to right, #0c3f68cc, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-to-left {
|
||||||
|
background: linear-gradient(to left, #0c3f68cc, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-gradient-to-right {
|
||||||
|
background: linear-gradient(to right, #0003, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-gradient-to-left {
|
||||||
|
background: linear-gradient(to left, #0003, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -8,9 +8,9 @@
|
|||||||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
||||||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||||
</db-container>
|
</db-container>
|
||||||
<db-container title="工单监控" icon="order">
|
<left-container title="工单监控" icon="order">
|
||||||
<order :prodOrder="prodOrder" />
|
<order :prodOrder="prodOrder" />
|
||||||
</db-container>
|
</left-container>
|
||||||
<!-- <db-container title="" icon="store"> -->
|
<!-- <db-container title="" icon="store"> -->
|
||||||
<!-- <store :stock="stock" /> -->
|
<!-- <store :stock="stock" /> -->
|
||||||
<!-- </db-container> -->
|
<!-- </db-container> -->
|
||||||
@ -26,7 +26,8 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||||
import Container from "./components/Container.vue";
|
import Container from "./components/rightContainer.vue";
|
||||||
|
import leftContainer from "./components/leftContainer.vue";
|
||||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||||
import { deepClone } from "@/utils";
|
import { deepClone } from "@/utils";
|
||||||
// import Store from "./components/Store.vue";
|
// import Store from "./components/Store.vue";
|
||||||
@ -38,6 +39,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
FactoryDataHeader,
|
FactoryDataHeader,
|
||||||
DbContainer: Container,
|
DbContainer: Container,
|
||||||
|
LeftContainer: leftContainer,
|
||||||
ProdMonitor,
|
ProdMonitor,
|
||||||
// Store,
|
// Store,
|
||||||
// Energy,
|
// Energy,
|
||||||
|
@ -8,9 +8,9 @@
|
|||||||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
||||||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||||
</db-container>
|
</db-container>
|
||||||
<db-container title="工单监控" icon="order">
|
<left-container title="工单监控" icon="order">
|
||||||
<order :prodOrder="prodOrder" />
|
<order :prodOrder="prodOrder" />
|
||||||
</db-container>
|
</left-container>
|
||||||
<!-- <db-container title="" icon="store"> -->
|
<!-- <db-container title="" icon="store"> -->
|
||||||
<!-- <store :stock="stock" /> -->
|
<!-- <store :stock="stock" /> -->
|
||||||
<!-- </db-container> -->
|
<!-- </db-container> -->
|
||||||
@ -26,7 +26,9 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||||
import Container from "./components/Container.vue";
|
import Container from "./components/rightContainer.vue";
|
||||||
|
import leftContainer from "./components/leftContainer.vue";
|
||||||
|
|
||||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||||
import { deepClone } from "@/utils";
|
import { deepClone } from "@/utils";
|
||||||
// import Store from "./components/Store.vue";
|
// import Store from "./components/Store.vue";
|
||||||
@ -38,6 +40,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
FactoryDataHeader,
|
FactoryDataHeader,
|
||||||
DbContainer: Container,
|
DbContainer: Container,
|
||||||
|
LeftContainer:leftContainer,
|
||||||
ProdMonitor,
|
ProdMonitor,
|
||||||
// Store,
|
// Store,
|
||||||
// Energy,
|
// Energy,
|
||||||
|
@ -8,9 +8,9 @@
|
|||||||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
||||||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||||
</db-container>
|
</db-container>
|
||||||
<db-container title="工单监控" icon="order">
|
<left-container title="工单监控" icon="order">
|
||||||
<order :prodOrder="prodOrder" />
|
<order :prodOrder="prodOrder" />
|
||||||
</db-container>
|
</left-container>
|
||||||
<!-- <db-container title="" icon="store"> -->
|
<!-- <db-container title="" icon="store"> -->
|
||||||
<!-- <store :stock="stock" /> -->
|
<!-- <store :stock="stock" /> -->
|
||||||
<!-- </db-container> -->
|
<!-- </db-container> -->
|
||||||
@ -26,7 +26,8 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||||
import Container from "./components/Container.vue";
|
import Container from "./components/rightContainer.vue";
|
||||||
|
import leftContainer from "./components/leftContainer.vue";
|
||||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||||
import { deepClone } from "@/utils";
|
import { deepClone } from "@/utils";
|
||||||
// import Store from "./components/Store.vue";
|
// import Store from "./components/Store.vue";
|
||||||
@ -38,6 +39,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
FactoryDataHeader,
|
FactoryDataHeader,
|
||||||
DbContainer: Container,
|
DbContainer: Container,
|
||||||
|
LeftContainer: leftContainer,
|
||||||
ProdMonitor,
|
ProdMonitor,
|
||||||
// Store,
|
// Store,
|
||||||
// Energy,
|
// Energy,
|
||||||
|
@ -8,9 +8,9 @@
|
|||||||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
||||||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||||
</db-container>
|
</db-container>
|
||||||
<db-container title="工单监控" icon="order">
|
<left-container title="工单监控" icon="order">
|
||||||
<order :prodOrder="prodOrder" />
|
<order :prodOrder="prodOrder" />
|
||||||
</db-container>
|
</left-container>
|
||||||
<!-- <db-container title="" icon="store"> -->
|
<!-- <db-container title="" icon="store"> -->
|
||||||
<!-- <store :stock="stock" /> -->
|
<!-- <store :stock="stock" /> -->
|
||||||
<!-- </db-container> -->
|
<!-- </db-container> -->
|
||||||
@ -26,7 +26,8 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||||
import Container from "./components/Container.vue";
|
import Container from "./components/rightContainer.vue";
|
||||||
|
import leftContainer from "./components/leftContainer.vue";
|
||||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||||
import { deepClone } from "@/utils";
|
import { deepClone } from "@/utils";
|
||||||
// import Store from "./components/Store.vue";
|
// import Store from "./components/Store.vue";
|
||||||
@ -38,6 +39,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
FactoryDataHeader,
|
FactoryDataHeader,
|
||||||
DbContainer: Container,
|
DbContainer: Container,
|
||||||
|
LeftContainer: leftContainer,
|
||||||
ProdMonitor,
|
ProdMonitor,
|
||||||
// Store,
|
// Store,
|
||||||
// Energy,
|
// Energy,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-21 13:24:03
|
* @Date: 2024-05-21 13:24:03
|
||||||
* @LastEditTime: 2024-05-21 13:24:03
|
* @LastEditTime: 2024-06-05 09:43:30
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -37,7 +37,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||||
import Container from "./components/Container.vue";
|
// import Container from "./components/Container.vue";
|
||||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||||
import Store from "./components/Store.vue";
|
import Store from "./components/Store.vue";
|
||||||
import Energy from "./components/Energy.vue";
|
import Energy from "./components/Energy.vue";
|
||||||
@ -47,7 +47,7 @@ export default {
|
|||||||
name: "factoryData",
|
name: "factoryData",
|
||||||
components: {
|
components: {
|
||||||
FactoryDataHeader,
|
FactoryDataHeader,
|
||||||
DbContainer: Container,
|
// DbContainer: Container,
|
||||||
ProdMonitor,
|
ProdMonitor,
|
||||||
Store,
|
Store,
|
||||||
Energy,
|
Energy,
|
||||||
|
@ -8,9 +8,9 @@
|
|||||||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
||||||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||||
</db-container>
|
</db-container>
|
||||||
<db-container title="工单监控" icon="order">
|
<left-container title="工单监控" icon="order">
|
||||||
<order :prodOrder="prodOrder" />
|
<order :prodOrder="prodOrder" />
|
||||||
</db-container>
|
</left-container>
|
||||||
<!-- <db-container title="" icon="store"> -->
|
<!-- <db-container title="" icon="store"> -->
|
||||||
<!-- <store :stock="stock" /> -->
|
<!-- <store :stock="stock" /> -->
|
||||||
<!-- </db-container> -->
|
<!-- </db-container> -->
|
||||||
@ -26,7 +26,9 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||||
import Container from "./components/Container.vue";
|
import Container from "./components/rightContainer.vue";
|
||||||
|
import leftContainer from "./components/leftContainer.vue";
|
||||||
|
|
||||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||||
import { deepClone } from "@/utils";
|
import { deepClone } from "@/utils";
|
||||||
// import Store from "./components/Store.vue";
|
// import Store from "./components/Store.vue";
|
||||||
@ -38,6 +40,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
FactoryDataHeader,
|
FactoryDataHeader,
|
||||||
DbContainer: Container,
|
DbContainer: Container,
|
||||||
|
LeftContainer: leftContainer,
|
||||||
ProdMonitor,
|
ProdMonitor,
|
||||||
// Store,
|
// Store,
|
||||||
// Energy,
|
// Energy,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-20 13:32:59
|
* @Date: 2024-05-20 13:32:59
|
||||||
* @LastEditTime: 2024-06-03 16:26:24
|
* @LastEditTime: 2024-06-05 13:43:13
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -115,21 +115,25 @@ export default {
|
|||||||
items = [
|
items = [
|
||||||
{ label: `${month}月${today}日累计`,},
|
{ label: `${month}月${today}日累计`,},
|
||||||
{ label: `去年${month}月${today}日累计` },
|
{ label: `去年${month}月${today}日累计` },
|
||||||
|
{ label: `${month}月${today}日目标`, },
|
||||||
];
|
];
|
||||||
} else if (this.period === '日' && this.than === '环比') {
|
} else if (this.period === '日' && this.than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${month}月${today}日累计`},
|
{ label: `${month}月${today}日累计`},
|
||||||
{ label: `${yesterday}日累计`},
|
{ label: `${yesterday}日累计` },
|
||||||
|
{ label: `${month}月${today}日目标`, },
|
||||||
];
|
];
|
||||||
} else if (this.period === '周' && this.than === '同比') {
|
} else if (this.period === '周' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `本周累计`,},
|
{ label: `本周累计`,},
|
||||||
{ label: `去年本周累计`},
|
{ label: `去年本周累计` },
|
||||||
|
{ label: `本周目标`, },
|
||||||
];
|
];
|
||||||
} else if (this.period === '周' && this.than === '环比') {
|
} else if (this.period === '周' && this.than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `本周累计`,},
|
{ label: `本周累计`,},
|
||||||
{ label: `上周累计`,},
|
{ label: `上周累计`, },
|
||||||
|
{ label: `本周目标`, },
|
||||||
];
|
];
|
||||||
} else if (this.period === '月' && this.than === '同比') {
|
} else if (this.period === '月' && this.than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
@ -156,9 +160,9 @@ export default {
|
|||||||
: (vt[1] != 0 && vt[1] != null) && vt[2] == 0
|
: (vt[1] != 0 && vt[1] != null) && vt[2] == 0
|
||||||
? "100%" : '0%',
|
? "100%" : '0%',
|
||||||
subtitle =
|
subtitle =
|
||||||
this.period == "日" ? `${month}月${today}日累计` : this.period == "周" ? `本周` : 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(this.valueTuple[0], this.valueTuple[1], this.valueTuple[2],)
|
||||||
console.log(items)
|
console.log(this.valueTuple[2]- this.valueTuple[1])
|
||||||
return getOptions({
|
return getOptions({
|
||||||
titleValue,
|
titleValue,
|
||||||
subtitle,
|
subtitle,
|
||||||
@ -166,7 +170,7 @@ export default {
|
|||||||
preName: items[1].label,
|
preName: items[1].label,
|
||||||
previousSum: this.valueTuple[0],
|
previousSum: this.valueTuple[0],
|
||||||
currentSum: this.valueTuple[1],
|
currentSum: this.valueTuple[1],
|
||||||
targetSum: this.valueTuple[2] ? this.valueTuple[2] :0 ,
|
targetSum: this.valueTuple[2] ? this.valueTuple[2] :0,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -213,7 +217,8 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
function calculateItems(period, valueTuple,than) {
|
function calculateItems(period, valueTuple, than) {
|
||||||
|
console.log('valueTuple', valueTuple);
|
||||||
let items = [];
|
let items = [];
|
||||||
var day1 = new Date();
|
var day1 = new Date();
|
||||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||||
@ -231,21 +236,25 @@ function calculateItems(period, valueTuple,than) {
|
|||||||
items = [
|
items = [
|
||||||
{ label: `去年${month}月${today}日累计`, value: valueTuple[0] },
|
{ label: `去年${month}月${today}日累计`, value: valueTuple[0] },
|
||||||
{ label: `${month}月${today}日累计`, value: valueTuple[1] },
|
{ label: `${month}月${today}日累计`, value: valueTuple[1] },
|
||||||
|
{ label: `${month}月${today}日目标`, value: valueTuple[2] },
|
||||||
];
|
];
|
||||||
} else if (period === '日' && than === '环比') {
|
} else if (period === '日' && than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `${yesterday}日累计`, value: valueTuple[0] },
|
{ label: `${yesterday}日累计`, value: valueTuple[0] },
|
||||||
{ label: `${month}月${today}日累计`, value: valueTuple[1] },
|
{ label: `${month}月${today}日累计`, value: valueTuple[1] },
|
||||||
|
{ label: `${month}月${today}日目标`, value: valueTuple[2] },
|
||||||
];
|
];
|
||||||
} else if (period === '周' && than === '同比') {
|
} else if (period === '周' && than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `去年本周累计`, value: valueTuple[0] },
|
{ label: `去年本周累计`, value: valueTuple[0] },
|
||||||
{ label: `本周累计`, value: valueTuple[1] },
|
{ label: `本周累计`, value: valueTuple[1] },
|
||||||
|
{ label: `本周目标`, value: valueTuple[2] },
|
||||||
];
|
];
|
||||||
} else if (period === '周' && than === '环比') {
|
} else if (period === '周' && than === '环比') {
|
||||||
items = [
|
items = [
|
||||||
{ label: `上周累计`, value: valueTuple[0] },
|
{ label: `上周累计`, value: valueTuple[0] },
|
||||||
{ label: `本周累计`, value: valueTuple[1] },
|
{ label: `本周累计`, value: valueTuple[1] },
|
||||||
|
{ label: `本周目标`, value: valueTuple[2] },
|
||||||
];
|
];
|
||||||
} else if (period === '月' && than === '同比') {
|
} else if (period === '月' && than === '同比') {
|
||||||
items = [
|
items = [
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-10 11:10:54
|
* @Date: 2024-05-10 11:10:54
|
||||||
* @LastEditTime: 2024-05-28 13:36:07
|
* @LastEditTime: 2024-06-05 09:49:46
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -9,29 +9,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="yield-copilot">
|
<div class="yield-copilot">
|
||||||
<section class="top flex">
|
<section class="top flex">
|
||||||
<db-container class="std-yield" title="标准组件产出" icon="std">
|
<right-container class="std-yield" title="标准组件产出" icon="std">
|
||||||
<std-output v-if="show" :period="period" :than="than" />
|
<std-output v-if="show" :period="period" :than="than" />
|
||||||
</db-container>
|
</right-container>
|
||||||
<db-container class="chip-yield" title="芯片产出" icon="chip2">
|
<db-container class="chip-yield" title="芯片产出" icon="chip2">
|
||||||
<chip-output v-if="show" :period="period" :than="than" />
|
<chip-output v-if="show" :period="period" :than="than" />
|
||||||
</db-container>
|
</db-container>
|
||||||
<db-container class="bipv-yield" title="BIPV产出" icon="bipv">
|
<left-container class="bipv-yield" title="BIPV产出" icon="bipv">
|
||||||
<bipv-output v-if="show" :period="period" :than="than" />
|
<bipv-output v-if="show" :period="period" :than="than" />
|
||||||
</db-container>
|
</left-container>
|
||||||
</section>
|
</section>
|
||||||
<section class="bottom flex">
|
<section class="bottom flex">
|
||||||
<db-container class="fto-involve" title="FTO投入">
|
<right-container class="fto-involve" title="FTO投入">
|
||||||
<fto-invest :period="period" :than="than" />
|
<fto-invest :period="period" :than="than" />
|
||||||
</db-container>
|
</right-container>
|
||||||
<db-container class="chip-involve" title="芯片投入" icon="chip">
|
<left-container class="chip-involve" title="芯片投入" icon="chip">
|
||||||
<chip-invest :period="period" :than="than" />
|
<chip-invest :period="period" :than="than" />
|
||||||
</db-container>
|
</left-container>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Container from "@/views/copilot/components/Container.vue";
|
import twoContainer from "@/views/copilot/components/twoContainer.vue";
|
||||||
|
import leftContainer from "@/views/copilot/components/leftContainer.vue";
|
||||||
|
import rightContainer from "@/views/copilot/components/rightContainer.vue";
|
||||||
|
|
||||||
import StdOutput from "./components/StdOutput.vue";
|
import StdOutput from "./components/StdOutput.vue";
|
||||||
import ChipOutput from "./components/ChipOutput.vue";
|
import ChipOutput from "./components/ChipOutput.vue";
|
||||||
import FtoInvest from "./components/FtoInvest.vue";
|
import FtoInvest from "./components/FtoInvest.vue";
|
||||||
@ -41,7 +44,9 @@ import ChipInvest from "./components/ChipInvest.vue";
|
|||||||
export default {
|
export default {
|
||||||
name: "YieldCopilot",
|
name: "YieldCopilot",
|
||||||
components: {
|
components: {
|
||||||
DbContainer: Container,
|
DbContainer: twoContainer,
|
||||||
|
leftContainer,
|
||||||
|
rightContainer,
|
||||||
StdOutput,
|
StdOutput,
|
||||||
ChipOutput,
|
ChipOutput,
|
||||||
BipvOutput,
|
BipvOutput,
|
||||||
|
@ -61,6 +61,9 @@ export default ({
|
|||||||
value: currentSum,
|
value: currentSum,
|
||||||
name: currentName,
|
name: currentName,
|
||||||
selected: false,
|
selected: false,
|
||||||
|
tooltip: {
|
||||||
|
formatter: `${currentName} : ${currentSum}`
|
||||||
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderJoin: "round",
|
borderJoin: "round",
|
||||||
borderCap: "round",
|
borderCap: "round",
|
||||||
@ -80,10 +83,11 @@ export default ({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value:currentSum == 0
|
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
|
||||||
? 1
|
name: currentName,
|
||||||
: 0,
|
tooltip: {
|
||||||
name: "未达成累计",
|
formatter: `${currentName} : ${currentSum}`
|
||||||
|
},
|
||||||
itemStyle: { color: "transparent" },
|
itemStyle: { color: "transparent" },
|
||||||
label: { show: false },
|
label: { show: false },
|
||||||
},
|
},
|
||||||
@ -106,6 +110,9 @@ export default ({
|
|||||||
value: previousSum,
|
value: previousSum,
|
||||||
name: preName,
|
name: preName,
|
||||||
selected: false,
|
selected: false,
|
||||||
|
tooltip: {
|
||||||
|
formatter: `${preName} : ${previousSum}`
|
||||||
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderJoin: "round",
|
borderJoin: "round",
|
||||||
borderCap: "round",
|
borderCap: "round",
|
||||||
@ -125,10 +132,12 @@ export default ({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value:previousSum == 0
|
|
||||||
? 1
|
value:previousSum === 0 ? 1 : 0,
|
||||||
: 0,
|
name: preName,
|
||||||
name: "-",
|
tooltip: {
|
||||||
|
formatter: `${preName} : ${previousSum}`
|
||||||
|
},
|
||||||
itemStyle: { color: "transparent" },
|
itemStyle: { color: "transparent" },
|
||||||
label: { show: false },
|
label: { show: false },
|
||||||
},
|
},
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-28 13:42:51
|
* @Date: 2024-04-28 13:42:51
|
||||||
* @LastEditTime: 2024-05-31 16:11:56
|
* @LastEditTime: 2024-06-05 14:12:31
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -98,9 +98,12 @@ export default {
|
|||||||
},
|
},
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 90,
|
value: 0,
|
||||||
name: `${year}累计产出`,
|
name: `${year}累计产出`,
|
||||||
selected: false,
|
selected: false,
|
||||||
|
tooltip: {
|
||||||
|
formatter: null,
|
||||||
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderJoin: "round",
|
borderJoin: "round",
|
||||||
borderCap: "round",
|
borderCap: "round",
|
||||||
@ -120,8 +123,11 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 20,
|
value: 0,
|
||||||
name: "-",
|
name: `${year}目标`,
|
||||||
|
tooltip: {
|
||||||
|
formatter: null,
|
||||||
|
},
|
||||||
itemStyle: { color: "transparent" },
|
itemStyle: { color: "transparent" },
|
||||||
label: { show: false },
|
label: { show: false },
|
||||||
},
|
},
|
||||||
@ -141,9 +147,12 @@ export default {
|
|||||||
},
|
},
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 90,
|
value: 0,
|
||||||
name: `${year - 1}累计产出`,
|
name: `${year - 1}累计产出`,
|
||||||
selected: false,
|
selected: false,
|
||||||
|
tooltip: {
|
||||||
|
formatter: null,
|
||||||
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderJoin: "round",
|
borderJoin: "round",
|
||||||
borderCap: "round",
|
borderCap: "round",
|
||||||
@ -164,7 +173,10 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 0,
|
value: 0,
|
||||||
name: "-",
|
name: `${year - 1}累计产出`,
|
||||||
|
tooltip: {
|
||||||
|
formatter:null,
|
||||||
|
},
|
||||||
itemStyle: { color: "transparent" },
|
itemStyle: { color: "transparent" },
|
||||||
label: { show: false },
|
label: { show: false },
|
||||||
},
|
},
|
||||||
@ -209,7 +221,9 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
actualOptions() {
|
actualOptions() {
|
||||||
|
const year = new Date().getFullYear()
|
||||||
const options = JSON.parse(JSON.stringify(this.options));
|
const options = JSON.parse(JSON.stringify(this.options));
|
||||||
|
// console.log('options', options);
|
||||||
// 标题
|
// 标题
|
||||||
if (!this.output.target) options.title.text = "0%";
|
if (!this.output.target) options.title.text = "0%";
|
||||||
else
|
else
|
||||||
@ -221,20 +235,29 @@ export default {
|
|||||||
this.output.current == 0
|
this.output.current == 0
|
||||||
) {
|
) {
|
||||||
options.series[1].data[0].value = 0;
|
options.series[1].data[0].value = 0;
|
||||||
options.series[1].data[1].value = 100;
|
options.series[1].data[1].value = 1;
|
||||||
|
options.series[1].data[0].tooltip.formatter = year + '累计完成:0';
|
||||||
|
options.series[1].data[1].tooltip.formatter = year + '累计完成:0';
|
||||||
} else {
|
} else {
|
||||||
options.series[1].data[0].value = this.output.current;
|
options.series[1].data[0].value = this.output.current;
|
||||||
options.series[1].data[1].value =
|
options.series[1].data[1].value =
|
||||||
this.output.target - this.output.current;
|
this.output.target - this.output.current;
|
||||||
|
options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current;
|
||||||
|
options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current;
|
||||||
}
|
}
|
||||||
// 内环
|
// 内环
|
||||||
if (this.output.previous == 0) {
|
if (this.output.previous == 0) {
|
||||||
options.series[2].data[0].value = 0;
|
options.series[2].data[0].value = 0;
|
||||||
options.series[2].data[1].value = 100;
|
options.series[2].data[1].value = 1;
|
||||||
|
options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0;
|
||||||
|
options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0;
|
||||||
} else {
|
} else {
|
||||||
options.series[2].data[0].value = this.output.previous;
|
options.series[2].data[0].value = this.output.previous;
|
||||||
options.series[2].data[1].value = 0;
|
options.series[2].data[1].value = 0;
|
||||||
|
options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
|
||||||
|
options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
|
||||||
}
|
}
|
||||||
|
console.log('options', options);
|
||||||
return options;
|
return options;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -86,6 +86,7 @@ export default {
|
|||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
align:'right'
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
@ -113,10 +114,11 @@ export default {
|
|||||||
barWidth: 12,
|
barWidth: 12,
|
||||||
label: {
|
label: {
|
||||||
show: true, //开启显示
|
show: true, //开启显示
|
||||||
|
align: 'right', //在上方显示
|
||||||
position: 'top', //在上方显示
|
position: 'top', //在上方显示
|
||||||
textStyle: { //数值样式
|
textStyle: { //数值样式
|
||||||
color: '#DFF1FE',
|
color: '#DFF1FE',
|
||||||
fontSize: 16
|
fontSize: 12
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
@ -156,10 +158,11 @@ export default {
|
|||||||
barWidth: 12,
|
barWidth: 12,
|
||||||
label: {
|
label: {
|
||||||
show: true, //开启显示
|
show: true, //开启显示
|
||||||
|
align: 'left', //在上方显示
|
||||||
position: 'top', //在上方显示
|
position: 'top', //在上方显示
|
||||||
textStyle: { //数值样式
|
textStyle: { //数值样式
|
||||||
color: '#DFF1FE',
|
color: '#DFF1FE',
|
||||||
fontSize: 16
|
fontSize: 12
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-28 13:42:51
|
* @Date: 2024-04-28 13:42:51
|
||||||
* @LastEditTime: 2024-05-31 16:13:47
|
* @LastEditTime: 2024-06-04 15:35:54
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -92,6 +92,7 @@ export default {
|
|||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
align: 'right'
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
|
@ -5,8 +5,8 @@
|
|||||||
<!-- <div v-if="visible" class="zzLine"></div> -->
|
<!-- <div v-if="visible" class="zzLine"></div> -->
|
||||||
<!-- <div v-if="visible" class="rcLine"></div> -->
|
<!-- <div v-if="visible" class="rcLine"></div> -->
|
||||||
<!-- <div v-if="visible" class="rcLineTwo"></div> -->
|
<!-- <div v-if="visible" class="rcLineTwo"></div> -->
|
||||||
<div v-if="visible" class="hdLine"></div>
|
<!-- <div v-if="visible" class="hdLine"></div> -->
|
||||||
<div v-if="visible" class="hdLineTwo"></div>
|
<!-- <div v-if="visible" class="hdLineTwo"></div> -->
|
||||||
<!-- <div v-if="visible" class="ksLine"></div> -->
|
<!-- <div v-if="visible" class="ksLine"></div> -->
|
||||||
<!-- <div v-if="visible" class="bbLine"></div> -->
|
<!-- <div v-if="visible" class="bbLine"></div> -->
|
||||||
<!-- <div v-if="visible" class="bbLineTwo"></div> -->
|
<!-- <div v-if="visible" class="bbLineTwo"></div> -->
|
||||||
@ -69,11 +69,11 @@ const LOCATIONS = [
|
|||||||
// 蚌埠2
|
// 蚌埠2
|
||||||
// { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
|
// { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
|
||||||
// 江西 瑞昌
|
// 江西 瑞昌
|
||||||
{ x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:68.8,lty:52, path: 'factoryData/factory-data' },
|
{ x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, path: 'factoryData/factory-data' },
|
||||||
// 湖南 株洲
|
// 湖南 株洲
|
||||||
// { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
|
// { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
|
||||||
// 邯郸
|
// 邯郸
|
||||||
{ x: 58, y: 45, tx: 47, ty: 34, lx: 58.7, ly: 34, ltx: 53, lty: 34, path: 'factoryData/hdIndex' },
|
{ x: 58, y: 45, tx: 47.4, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' },
|
||||||
];
|
];
|
||||||
// rcLine.style.left = `66.8%`;
|
// rcLine.style.left = `66.8%`;
|
||||||
// rcLine.style.top = `52%`;
|
// rcLine.style.top = `52%`;
|
||||||
@ -395,9 +395,9 @@ export default {
|
|||||||
|
|
||||||
.hdLine {
|
.hdLine {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 58.7%;
|
/* left: 58.7%; */
|
||||||
width: 1px;
|
width: 1px;
|
||||||
top: 34%;
|
/* top: 34%; */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
/* // x: 60, y: 58, */
|
/* // x: 60, y: 58, */
|
||||||
height: 6vw;
|
height: 6vw;
|
||||||
@ -405,9 +405,9 @@ export default {
|
|||||||
}
|
}
|
||||||
.hdLineTwo {
|
.hdLineTwo {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 53%;
|
/* left: 53%; */
|
||||||
width: 5vw;
|
width: 5vw;
|
||||||
top: 34%;
|
/* top: 34%; */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
/* // x: 60, y: 58, */
|
/* // x: 60, y: 58, */
|
||||||
height: 1px;
|
height: 1px;
|
||||||
|
Loading…
Reference in New Issue
Block a user