|
@@ -40,8 +40,6 @@
|
|
|
<canvas
|
|
|
id="co2Canvas"
|
|
|
class="co2Canvas"
|
|
|
- width="800"
|
|
|
- height="300"
|
|
|
></canvas>
|
|
|
<canvas
|
|
|
id="circleCanvas1"
|
|
@@ -60,7 +58,7 @@
|
|
|
src="@/assets/image/horImg/saveCo2.png"
|
|
|
/>
|
|
|
<div class="co2Wrap sco2">
|
|
|
- 减排<span class="value">{{ lastAllEnergyRes.cdmCo2 }}Kg</span>CO2
|
|
|
+ 减排<span class="value">{{ lastAllEnergyRes.cdmCo2 }}Kg</span>CO₂
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -125,7 +123,7 @@ import {
|
|
|
import { queryLastEnergy } from "@/api/index";
|
|
|
import useProjectStore from "@/store/useProjectStore";
|
|
|
import { storeToRefs, mapState } from "pinia";
|
|
|
-
|
|
|
+import { getBodySize } from "@/utils/rem";
|
|
|
//import { lastGold, lastGray } from "@/utils/dapingImage";
|
|
|
|
|
|
export default defineComponent({
|
|
@@ -170,6 +168,11 @@ export default defineComponent({
|
|
|
circtx.fill();
|
|
|
// circtx.restore();
|
|
|
}
|
|
|
+ function handleFont(num) {
|
|
|
+ let fontSize = getBodySize();
|
|
|
+ let handleNum = (num / 192) * fontSize;
|
|
|
+ return handleNum;
|
|
|
+ }
|
|
|
onMounted(() => {
|
|
|
nextTick(() => {
|
|
|
//videoWrap :style="{ width: videoWidth + 'px', left: videoLeft + 'px' }"
|
|
@@ -187,30 +190,43 @@ export default defineComponent({
|
|
|
// );
|
|
|
|
|
|
var c = document.getElementById("co2Canvas");
|
|
|
+ c.setAttribute("width", handleFont(800) + "px");
|
|
|
+ c.setAttribute("height", handleFont(300) + "px");
|
|
|
+
|
|
|
var ctx = c.getContext("2d");
|
|
|
- ctx.moveTo(20, 120);
|
|
|
- ctx.lineTo(110, 120);
|
|
|
- ctx.lineTo(173, 173);
|
|
|
+
|
|
|
+ console.log(
|
|
|
+ "sdsd",
|
|
|
+ handleFont(676),
|
|
|
+ handleFont(50),
|
|
|
+ handleFont(590),
|
|
|
+ handleFont(150),
|
|
|
+ handleFont(515),
|
|
|
+ handleFont(150)
|
|
|
+ );
|
|
|
+ ctx.moveTo(handleFont(20), handleFont(120));
|
|
|
+ ctx.lineTo(handleFont(110), handleFont(120));
|
|
|
+ ctx.lineTo(handleFont(173), handleFont(173));
|
|
|
ctx.lineWidth = 1;
|
|
|
ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
|
|
|
- ctx.setLineDash([2, 3]);
|
|
|
+ ctx.setLineDash([handleFont(2), handleFont(3)]);
|
|
|
ctx.stroke();
|
|
|
ctx.beginPath();
|
|
|
- ctx.moveTo(676, 50);
|
|
|
- ctx.lineTo(590, 150);
|
|
|
- ctx.lineTo(515, 150);
|
|
|
+ ctx.moveTo(handleFont(676), handleFont(50));
|
|
|
+ ctx.lineTo(handleFont(590), handleFont(150));
|
|
|
+ ctx.lineTo(handleFont(515), handleFont(150));
|
|
|
ctx.lineWidth = 1;
|
|
|
ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
|
|
|
- ctx.setLineDash([2, 3]);
|
|
|
+ ctx.setLineDash([handleFont(2), handleFont(3)]);
|
|
|
ctx.stroke();
|
|
|
|
|
|
ctx.beginPath();
|
|
|
- ctx.moveTo(756, 250);
|
|
|
- ctx.lineTo(670, 210);
|
|
|
- ctx.lineTo(512, 210);
|
|
|
+ ctx.moveTo(handleFont(756), handleFont(250));
|
|
|
+ ctx.lineTo(handleFont(670), handleFont(210));
|
|
|
+ ctx.lineTo(handleFont(512), handleFont(210));
|
|
|
ctx.lineWidth = 1;
|
|
|
ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
|
|
|
- ctx.setLineDash([2, 3]);
|
|
|
+ ctx.setLineDash([handleFont(2), handleFont(3)]);
|
|
|
ctx.stroke();
|
|
|
|
|
|
var circ = document.getElementById("circleCanvas1");
|
|
@@ -236,7 +252,7 @@ export default defineComponent({
|
|
|
? lastAllEnergy.cdmC.toFixed(2)
|
|
|
: lastAllEnergy.cdmC,
|
|
|
energySaving: lastAllEnergy.energySaving
|
|
|
- ? lastAllEnergy.energySaving.toFixed(2)
|
|
|
+ ? lastAllEnergy.energySaving.toFixed(0)
|
|
|
: lastAllEnergy.energySaving,
|
|
|
};
|
|
|
});
|
|
@@ -345,12 +361,14 @@ export default defineComponent({
|
|
|
}
|
|
|
.outOval {
|
|
|
width: 152px;
|
|
|
- height: 58px;
|
|
|
+ height: 68px;
|
|
|
border: 1px dashed rgba(224, 194, 155, 0.26);
|
|
|
border-radius: 50%;
|
|
|
position: absolute;
|
|
|
display: flex;
|
|
|
transform: translate(-50%, -50%);
|
|
|
+ animation: mycircle 3s linear infinite alternate;
|
|
|
+ -webkit-animation: mycircle 3s linear infinite alternate;
|
|
|
.inOval {
|
|
|
width: 112px;
|
|
|
height: 40px;
|
|
@@ -391,6 +409,19 @@ export default defineComponent({
|
|
|
transform: translate(-50%, 0);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ @keyframes mycircle {
|
|
|
+ from {
|
|
|
+ width: 152px;
|
|
|
+ height: 68px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ width: 200px;
|
|
|
+ height: 98px;
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ }
|
|
|
.outOvalCo2 {
|
|
|
left: -400px;
|
|
|
top: -30px;
|
|
@@ -418,6 +449,8 @@ export default defineComponent({
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
+ // width: 800px;
|
|
|
+ // height: 300px;
|
|
|
// border: 1px solid red;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
@@ -430,8 +463,8 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
.horSaveClass {
|
|
|
- background: rgba(100, 108, 130, 0.06);
|
|
|
backdrop-filter: blur(20px);
|
|
|
+ background: rgba(100, 108, 130, 0.06);
|
|
|
border-radius: 20px;
|
|
|
overflow: hidden;
|
|
|
|