projects/mescc/zhp #103

Merged
juzi merged 3 commits from projects/mescc/zhp into projects/mescc/develop 2024-07-22 08:36:43 +08:00
16 changed files with 54 additions and 42 deletions

View File

@ -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

View File

@ -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>

View File

@ -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 {

View File

@ -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;

View File

@ -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 {

View File

@ -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 {

View File

@ -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>

View File

@ -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 {

View File

@ -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 {

View File

@ -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 {

View File

@ -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);">

View File

@ -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);">

View File

@ -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 {

View File

@ -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 {

View File

@ -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;
} }

View File

@ -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);">