Compare commits
10 Commits
cbae9ef922
...
projects/m
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8da6dc6232 | ||
|
|
3e2661581e | ||
| ec5e47a416 | |||
|
|
99d60a14bd | ||
|
|
6409d2d348 | ||
| 71f548cb3b | |||
|
|
8ecf281f08 | ||
|
|
fa75a2b89f | ||
|
|
c469ca5ebe | ||
| 9b8c090f7e |
@@ -1,10 +1,11 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-06-03 15:38:31
|
* @Date: 2024-07-10 15:17:28
|
||||||
* @LastEditTime: 2024-07-09 15:59:41
|
* @LastEditTime: 2024-07-19 15:18:00
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
filename: ChartContainer.vue
|
filename: ChartContainer.vue
|
||||||
author: liubin
|
author: liubin
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
<chart-container class="bar-chart-base">
|
<chart-container class="bar-chart-base">
|
||||||
<div class="legend">
|
<div class="legend">
|
||||||
<span v-for="item in legend" :key="item.label" class="legend-item"
|
<span v-for="item in legend" :key="item.label" class="legend-item"
|
||||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div ref="chart" style="height:94%;width:100%"></div>
|
<div ref="chart" style="height:94%;width:100%"></div>
|
||||||
</chart-container>
|
</chart-container>
|
||||||
|
|||||||
@@ -73,6 +73,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
.copilot-container {
|
.copilot-container {
|
||||||
height: 0;
|
height: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -142,8 +143,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
// width: 16px;
|
// width: 16px;
|
||||||
// height: 16px;
|
// height: 16px;
|
||||||
width: 0.95vw;
|
width: 0.7vw;
|
||||||
height: 0.95vw;
|
height: 0.7vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.corner.tl {
|
.corner.tl {
|
||||||
|
|||||||
@@ -75,8 +75,8 @@ button {
|
|||||||
.copilot-btn::after {
|
.copilot-btn::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 16px;
|
width: 0.7vw;
|
||||||
height: 16px;
|
height: 0.7vw;
|
||||||
top: 0;
|
top: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-07-09 15:15:00
|
* @Date: 2024-07-09 15:15:00
|
||||||
* @LastEditTime: 2024-07-09 15:36:49
|
* @LastEditTime: 2024-07-19 16:11:37
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -73,6 +73,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
.copilot-container {
|
.copilot-container {
|
||||||
height: 0;
|
height: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -146,8 +147,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
// width: 16px;
|
// width: 16px;
|
||||||
// height: 16px;
|
// height: 16px;
|
||||||
width: 0.95vw;
|
width: 0.7vw;
|
||||||
height: 0.95vw;
|
height: 0.7vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.corner.tl {
|
.corner.tl {
|
||||||
|
|||||||
@@ -74,6 +74,7 @@ export default {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
|
||||||
.copilot-container {
|
.copilot-container {
|
||||||
height: 0;
|
height: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -147,8 +148,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
// width: 16px;
|
// width: 16px;
|
||||||
// height: 16px;
|
// height: 16px;
|
||||||
width: 0.95vw;
|
width: 0.7vw;
|
||||||
height: 0.95vw;
|
height: 0.7vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.corner.tl {
|
.corner.tl {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-23 15:49:14
|
* @Date: 2024-05-23 15:49:14
|
||||||
* @LastEditTime: 2024-07-18 15:43:56
|
* @LastEditTime: 2024-07-19 16:08:27
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
<chart-container class="bar-chart-base">
|
<chart-container class="bar-chart-base">
|
||||||
<div class="legend">
|
<div class="legend">
|
||||||
<span v-for="item in legend" :key="item.label" class="legend-item"
|
<span v-for="item in legend" :key="item.label" class="legend-item"
|
||||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div ref="ftoChart" style="height:94%;width:100%"></div>
|
<div ref="ftoChart" style="height:94%;width:100%"></div>
|
||||||
</chart-container>
|
</chart-container>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-06-05 09:43:51
|
* @Date: 2024-06-05 09:43:51
|
||||||
* @LastEditTime: 2024-07-09 15:35:19
|
* @LastEditTime: 2024-07-19 16:11:59
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -73,6 +73,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
.copilot-container {
|
.copilot-container {
|
||||||
height: 0;
|
height: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -144,8 +145,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
// width: 16px;
|
// width: 16px;
|
||||||
// height: 16px;
|
// height: 16px;
|
||||||
width: 0.95vw;
|
width: 0.7vw;
|
||||||
height: 0.95vw;
|
height: 0.7vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.corner.tl {
|
.corner.tl {
|
||||||
|
|||||||
@@ -74,6 +74,7 @@ export default {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
|
||||||
.copilot-container {
|
.copilot-container {
|
||||||
height: 0;
|
height: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -147,8 +148,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
// width: 16px;
|
// width: 16px;
|
||||||
// height: 16px;
|
// height: 16px;
|
||||||
width: 0.95vw;
|
width: 0.7vw;
|
||||||
height: 0.95vw;
|
height: 0.7vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.corner.tl {
|
.corner.tl {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-06-05 09:48:37
|
* @Date: 2024-06-05 09:48:37
|
||||||
* @LastEditTime: 2024-07-09 15:35:04
|
* @LastEditTime: 2024-07-19 16:14:07
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -100,6 +100,7 @@ export default {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
|
||||||
.copilot-container {
|
.copilot-container {
|
||||||
height: 0;
|
height: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -171,8 +172,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
// width: 16px;
|
// width: 16px;
|
||||||
// height: 16px;
|
// height: 16px;
|
||||||
width: 0.95vw;
|
width: 0.7vw;
|
||||||
height: 0.95vw;
|
height: 0.7vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.corner.tl {
|
.corner.tl {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 13:22:43
|
* @Date: 2024-05-07 13:22:43
|
||||||
* @LastEditTime: 2024-07-19 10:57:26
|
* @LastEditTime: 2024-07-19 16:10:10
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -9,7 +9,7 @@
|
|||||||
<chart-container class="bar-chart-base">
|
<chart-container class="bar-chart-base">
|
||||||
<div class="legend">
|
<div class="legend">
|
||||||
<span v-for="(item,index) in legend" :key="index" 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>
|
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div ref="oeeChart" style="height:94%;width:100%"></div>
|
<div ref="oeeChart" style="height:94%;width:100%"></div>
|
||||||
</chart-container>
|
</chart-container>
|
||||||
@@ -81,13 +81,13 @@ export default {
|
|||||||
res +=
|
res +=
|
||||||
"<br/>" +
|
"<br/>" +
|
||||||
`${params[i].seriesType === "line"
|
`${params[i].seriesType === "line"
|
||||||
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:4.2%;'></span>
|
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
|
||||||
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.8%;left:5.75%;'></span>
|
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
|
||||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
|
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
|
||||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
|
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
|
||||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
|
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
|
||||||
}` +
|
}` +
|
||||||
`<span style='display:inline-block;text-align: right;width:100px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
|
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
|
||||||
}
|
}
|
||||||
const htmlContent = `
|
const htmlContent = `
|
||||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-23 15:50:44
|
* @Date: 2024-05-23 15:50:44
|
||||||
* @LastEditTime: 2024-07-19 10:58:32
|
* @LastEditTime: 2024-07-19 16:10:19
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -9,7 +9,7 @@
|
|||||||
<chart-container class="bar-chart-base">
|
<chart-container class="bar-chart-base">
|
||||||
<div class="legend">
|
<div class="legend">
|
||||||
<span v-for="(item,index) in legend" :key="index" 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>
|
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div ref="oeeChart" style="height:94%;width:100%"></div>
|
<div ref="oeeChart" style="height:94%;width:100%"></div>
|
||||||
</chart-container>
|
</chart-container>
|
||||||
@@ -81,13 +81,13 @@ export default {
|
|||||||
res +=
|
res +=
|
||||||
"<br/>" +
|
"<br/>" +
|
||||||
`${params[i].seriesType === "line"
|
`${params[i].seriesType === "line"
|
||||||
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:4.2%;'></span>
|
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
|
||||||
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.8%;left:5.75%;'></span>
|
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
|
||||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
|
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
|
||||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
|
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
|
||||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
|
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
|
||||||
}` +
|
}` +
|
||||||
`<span style='display:inline-block;text-align: right;width:100px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
|
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
|
||||||
}
|
}
|
||||||
const htmlContent = `
|
const htmlContent = `
|
||||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-06-05 09:36:07
|
* @Date: 2024-06-05 09:36:07
|
||||||
* @LastEditTime: 2024-07-09 16:54:24
|
* @LastEditTime: 2024-07-19 16:16:02
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -81,6 +81,7 @@ export default {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
|
||||||
.copilot-container {
|
.copilot-container {
|
||||||
height: 0;
|
height: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -152,8 +153,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
// width: 16px;
|
// width: 16px;
|
||||||
// height: 16px;
|
// height: 16px;
|
||||||
width: 0.95vw;
|
width: 0.7vw;
|
||||||
height: 0.95vw;
|
height: 0.7vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.corner.tl {
|
.corner.tl {
|
||||||
|
|||||||
@@ -79,6 +79,7 @@ export default {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
|
||||||
.copilot-container {
|
.copilot-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -147,8 +148,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
// width: 16px;
|
// width: 16px;
|
||||||
// height: 16px;
|
// height: 16px;
|
||||||
width: 0.95vw;
|
width: 0.7vw;
|
||||||
height: 0.95vw;
|
height: 0.7vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.corner.tl {
|
.corner.tl {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-20 13:32:59
|
* @Date: 2024-05-20 13:32:59
|
||||||
* @LastEditTime: 2024-07-18 15:27:38
|
* @LastEditTime: 2024-07-19 16:05:46
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -306,6 +306,7 @@ function calculateItems(period, valueTuple, than) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
.double-ring-chart {
|
.double-ring-chart {
|
||||||
height: 98%;
|
height: 98%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -331,6 +332,7 @@ function calculateItems(period, valueTuple, than) {
|
|||||||
|
|
||||||
.legend-item {
|
.legend-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
/* font-size:16px; */
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-28 13:42:51
|
* @Date: 2024-04-28 13:42:51
|
||||||
* @LastEditTime: 2024-07-19 10:49:03
|
* @LastEditTime: 2024-07-19 15:25:37
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@@ -70,6 +70,7 @@ export default {
|
|||||||
color: "rgba(237,237,237,0.5)",
|
color: "rgba(237,237,237,0.5)",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
confine:true,
|
||||||
backgroundColor: 'rgba(50,50,50,0)', // tooltip默认背景为白色,手动置为透明
|
backgroundColor: 'rgba(50,50,50,0)', // tooltip默认背景为白色,手动置为透明
|
||||||
extraCssText: 'padding:0;border-width:0',
|
extraCssText: 'padding:0;border-width:0',
|
||||||
formatter: params => {
|
formatter: params => {
|
||||||
@@ -81,13 +82,13 @@ export default {
|
|||||||
res +=
|
res +=
|
||||||
"<br/>" +
|
"<br/>" +
|
||||||
`${params[i].seriesType === "line"
|
`${params[i].seriesType === "line"
|
||||||
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:4.46%;'></span>
|
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:4%;'></span>
|
||||||
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:38.82%;left:6.3%;'></span>
|
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:38.82%;left:5%;'></span>
|
||||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
|
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
|
||||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
|
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
|
||||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
|
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
|
||||||
}` +
|
}` +
|
||||||
`<span style='width:60px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0 }</span>`;
|
`<span style='width:180px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0 }</span>`;
|
||||||
}
|
}
|
||||||
const htmlContent = `
|
const htmlContent = `
|
||||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-15 10:49:13
|
* @Date: 2024-04-15 10:49:13
|
||||||
* @LastEditTime: 2024-07-17 08:55:15
|
* @LastEditTime: 2024-07-24 14:48:25
|
||||||
* @LastEditors: zhp
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@@ -39,7 +39,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-show="listQuery.type === 3" label="时间范围" prop="reportTime">
|
<el-form-item v-show="listQuery.type === 3" label="时间范围" prop="reportTime">
|
||||||
<el-date-picker size="small" clearable v-model="listQuery.start" value-format="yyyy-MM-dd" type="year"
|
<el-date-picker size="small" clearable v-model="listQuery.start" value-format="yyyy-MM-dd" type="year"
|
||||||
placeholder="开始时间">
|
placeholder="开始时间" @change="getYear">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
~
|
~
|
||||||
<el-date-picker size="small" clearable v-model="listQuery.end" value-format="yyyy-MM-dd" type="year" placeholder="结束时间"
|
<el-date-picker size="small" clearable v-model="listQuery.end" value-format="yyyy-MM-dd" type="year" placeholder="结束时间"
|
||||||
@@ -265,6 +265,8 @@ export default {
|
|||||||
this.listQuery.endDate = null
|
this.listQuery.endDate = null
|
||||||
this.listQuery.startDate = null
|
this.listQuery.startDate = null
|
||||||
this.listQuery.reportTime = null
|
this.listQuery.reportTime = null
|
||||||
|
this.listQuery.start = null
|
||||||
|
this.listQuery.end = null
|
||||||
},
|
},
|
||||||
otherMethods(val) {
|
otherMethods(val) {
|
||||||
this.detailOrUpdateVisible = true;
|
this.detailOrUpdateVisible = true;
|
||||||
@@ -282,20 +284,14 @@ export default {
|
|||||||
this.listQuery.reportTime = []
|
this.listQuery.reportTime = []
|
||||||
this.listQuery.start = undefined
|
this.listQuery.start = undefined
|
||||||
this.listQuery.end = undefined
|
this.listQuery.end = undefined
|
||||||
// console.log();
|
|
||||||
} else {
|
} else {
|
||||||
this.listQuery.startDate = this.listQuery.start
|
this.listQuery.startDate = this.listQuery.start
|
||||||
this.listQuery.endDate = this.listQuery.end
|
this.listQuery.endDate = this.listQuery.end
|
||||||
}
|
}
|
||||||
if (!this.listQuery.start && !this.listQuery.end) {
|
|
||||||
this.listQuery.startDate = undefined
|
|
||||||
this.listQuery.endDate = undefined
|
|
||||||
}
|
|
||||||
// console.log(e);
|
|
||||||
},
|
},
|
||||||
onValueChange(picker, k) { // 选中近k周后触发的操作
|
onValueChange(picker, k) { // 选中近k周后触发的操作
|
||||||
if (this.listQuery.start && this.listQuery.end) {
|
if (this.listQuery.start && this.listQuery.end) {
|
||||||
console.log(this.listQuery.reportTime)
|
// console.log(this.listQuery.start, this.listQuery.end - this.listQuery.start)
|
||||||
this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||||
this.date2 = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
this.date2 = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||||
const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
|
const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
|
||||||
@@ -309,11 +305,15 @@ export default {
|
|||||||
this.listQuery.startDate = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
|
this.listQuery.startDate = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
|
||||||
this.listQuery.endDate = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
|
this.listQuery.endDate = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
|
||||||
}
|
}
|
||||||
}
|
console.log(this.listQuery.startDate, this.listQuery.endDate)
|
||||||
if (!this.listQuery.start && !this.listQuery.end) {
|
} else {
|
||||||
this.listQuery.startDate = undefined
|
this.listQuery.startDate = undefined
|
||||||
this.listQuery.endDate = undefined
|
this.listQuery.endDate = undefined
|
||||||
}
|
}
|
||||||
|
// if (!this.listQuery.start && !this.listQuery.end) {
|
||||||
|
// this.listQuery.startDate = undefined
|
||||||
|
// this.listQuery.endDate = undefined
|
||||||
|
// }
|
||||||
},
|
},
|
||||||
changeDayTime() {
|
changeDayTime() {
|
||||||
if (this.listQuery.reportTime) {
|
if (this.listQuery.reportTime) {
|
||||||
@@ -359,7 +359,7 @@ export default {
|
|||||||
this.$message.warning('请选择时间维度!')
|
this.$message.warning('请选择时间维度!')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (!this.listQuery.startDate) {
|
if (!this.listQuery.startDate || !this.listQuery.endDate) {
|
||||||
this.$message.warning('请选择时间范围!')
|
this.$message.warning('请选择时间范围!')
|
||||||
} else {
|
} else {
|
||||||
await getProduceDataPage(this.listQuery).then(res => {
|
await getProduceDataPage(this.listQuery).then(res => {
|
||||||
@@ -392,8 +392,8 @@ export default {
|
|||||||
// 工厂名称 this.factoryListabbr
|
// 工厂名称 this.factoryListabbr
|
||||||
const factoryNameArray = (this.listQuery.factory.length === 0 || this.listQuery.factory.length === this.factoryListabbr.length) ? [0, 1] : this.listQuery.factory
|
const factoryNameArray = (this.listQuery.factory.length === 0 || this.listQuery.factory.length === this.factoryListabbr.length) ? [0, 1] : this.listQuery.factory
|
||||||
const seriesArray = []
|
const seriesArray = []
|
||||||
typeArray.forEach((type, typeIndex) => {
|
factoryNameArray.forEach((fac, facIndex) => {
|
||||||
factoryNameArray.forEach((fac, facIndex) => {
|
typeArray.forEach((type, typeIndex) => {
|
||||||
const series = {
|
const series = {
|
||||||
data: Array(xAxisData.length).fill(0),
|
data: Array(xAxisData.length).fill(0),
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
@@ -407,27 +407,26 @@ export default {
|
|||||||
seriesArray.push(series)
|
seriesArray.push(series)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
// 构造series的data
|
|
||||||
const seriesDataArray = []
|
// 按工厂分
|
||||||
Object.values(data).forEach((item) => {
|
const arrayByFacArray = Object.groupBy(dataList, (member) => member.factory)
|
||||||
let seriesData = []
|
// const seriesDataArray = []
|
||||||
// item[0].datestr 为日期
|
let n = 0
|
||||||
typeArray.forEach(t => {
|
Object.values(arrayByFacArray).forEach((item) => {
|
||||||
const zidr = ['chipYield', 'componentYield', 'bipvProductOutput'][t]
|
typeArray.forEach(type => {
|
||||||
|
const typeName = ['chipYield', 'componentYield', 'bipvProductOutput'][type]
|
||||||
|
let seriesData = Array(xAxisData.length).fill(0)
|
||||||
item.forEach(it => {
|
item.forEach(it => {
|
||||||
seriesData.push(it[zidr])
|
xAxisData.forEach((x, xindex) => {
|
||||||
|
if (x === it['datestr']) {
|
||||||
|
seriesData[xindex] = it[typeName]
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
seriesArray[n].data = seriesData
|
||||||
|
n ++
|
||||||
})
|
})
|
||||||
seriesDataArray.push(seriesData)
|
|
||||||
})
|
})
|
||||||
for (let y = 0; y < seriesArray.length; y ++) {
|
|
||||||
const days = []
|
|
||||||
seriesDataArray.forEach(a => {
|
|
||||||
days.push(a[y])
|
|
||||||
})
|
|
||||||
// 赋值完成
|
|
||||||
seriesArray[y].data = days
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加工厂
|
// 添加工厂
|
||||||
const validSeriesArray = []
|
const validSeriesArray = []
|
||||||
|
|||||||
Reference in New Issue
Block a user