|
@@ -11,26 +11,94 @@
|
|
|
class="saveCont"
|
|
|
ref="saveCont"
|
|
|
>
|
|
|
- <div class="videoWrap">
|
|
|
- <div class="co2Wrap sco2">
|
|
|
- 减排<span class="value">{{ lastAllEnergyRes.cdmCo2 }}Kg</span>CO2
|
|
|
+ <div class="saveCenterCont">
|
|
|
+ <div class="centerOval">
|
|
|
+ <img
|
|
|
+ class="round1"
|
|
|
+ src="@/assets/image/horImg/round1.png"
|
|
|
+ /><img
|
|
|
+ class="round2"
|
|
|
+ src="@/assets/image/horImg/round2.png"
|
|
|
+ /> <img
|
|
|
+ class="round3"
|
|
|
+ src="@/assets/image/horImg/round3.png"
|
|
|
+ /><img
|
|
|
+ class="round4"
|
|
|
+ src="@/assets/image/horImg/round4.png"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="round5"
|
|
|
+ src="@/assets/image/horImg/round5.png"
|
|
|
+ />
|
|
|
+ <div class="electWrap">
|
|
|
+ <div>节约电</div>
|
|
|
+ <div class="value">
|
|
|
+ <span class="num">{{ lastAllEnergyRes.energySaving }}</span>度
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="co2Wrap scarbon">
|
|
|
- 减排<span class="value">{{ lastAllEnergyRes.cdmC }}Kg</span>碳
|
|
|
+ <canvas
|
|
|
+ id="co2Canvas"
|
|
|
+ class="co2Canvas"
|
|
|
+ width="800"
|
|
|
+ height="300"
|
|
|
+ ></canvas>
|
|
|
+ <canvas
|
|
|
+ id="circleCanvas1"
|
|
|
+ class="circleCanvas1"
|
|
|
+ width="800"
|
|
|
+ height="300"
|
|
|
+ ></canvas>
|
|
|
+ <div class="outOval outOvalCo2">
|
|
|
+ <div class="inOval">
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ class="saveLight"
|
|
|
+ src="@/assets/image/horImg/saveLight.png"
|
|
|
+ /><img
|
|
|
+ class="saveCo2"
|
|
|
+ src="@/assets/image/horImg/saveCo2.png"
|
|
|
+ />
|
|
|
+ <div class="co2Wrap sco2">
|
|
|
+ 减排<span class="value">{{ lastAllEnergyRes.cdmCo2 }}Kg</span>CO2
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="co2Wrap stree">
|
|
|
- 为国家种<span class="value">{{
|
|
|
- lastAllEnergyRes.cdmTree
|
|
|
- }}</span>棵树
|
|
|
+
|
|
|
+ <div class="outOval outOvalCarbon">
|
|
|
+ <div class="inOval">
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ class="saveLight"
|
|
|
+ src="@/assets/image/horImg/saveLight.png"
|
|
|
+ /><img
|
|
|
+ class="saveCo2"
|
|
|
+ src="@/assets/image/horImg/saveCarbon.png"
|
|
|
+ />
|
|
|
+ <div class="co2Wrap sco2">
|
|
|
+ 减排<span class="value">{{ lastAllEnergyRes.cdmC }}Kg</span>碳
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="electWrap">
|
|
|
- <div>节约电</div>
|
|
|
- <div class="value">
|
|
|
- {{ lastAllEnergyRes.energySaving }}度
|
|
|
+
|
|
|
+ <div class="outOval outOvalTree">
|
|
|
+ <div class="inOval">
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ class="saveLight"
|
|
|
+ src="@/assets/image/horImg/saveLight.png"
|
|
|
+ /><img
|
|
|
+ class="saveCo2"
|
|
|
+ src="@/assets/image/horImg/saveTree.png"
|
|
|
+ />
|
|
|
+ <div class="co2Wrap sco2">
|
|
|
+ 为国家种<span class="value">{{
|
|
|
+ lastAllEnergyRes.cdmTree
|
|
|
+ }}</span>棵树
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<video
|
|
|
+ style="display:none"
|
|
|
class="svideo"
|
|
|
autoplay
|
|
|
loop
|
|
@@ -76,6 +144,32 @@ export default defineComponent({
|
|
|
videoLeft: 0,
|
|
|
});
|
|
|
|
|
|
+ let uniformX = 200; // x 初始位置
|
|
|
+ let uniformSpeed = 1;
|
|
|
+ function circleMove(circtx) {
|
|
|
+ window.requestAnimationFrame(() => {
|
|
|
+ circleMove(circtx);
|
|
|
+ });
|
|
|
+ circtx.clearRect(0, 0, 800, 300);
|
|
|
+ circtx.fillStyle = "#0000ff";
|
|
|
+ drawCircle(circtx, uniformX, 200, 5, "green"); // 画圆,uniformX是 x 的坐标
|
|
|
+
|
|
|
+ if (uniformX < 500) {
|
|
|
+ uniformX += uniformSpeed;
|
|
|
+ } else {
|
|
|
+ uniformX = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 画实体圆(小球)
|
|
|
+ function drawCircle(circtx, x, y, radius, color) {
|
|
|
+ // circtx.save();
|
|
|
+ circtx.beginPath();
|
|
|
+ circtx.arc(x, y, radius, 0, Math.PI * 2);
|
|
|
+ circtx.closePath();
|
|
|
+ circtx.fill();
|
|
|
+ // circtx.restore();
|
|
|
+ }
|
|
|
onMounted(() => {
|
|
|
nextTick(() => {
|
|
|
//videoWrap :style="{ width: videoWidth + 'px', left: videoLeft + 'px' }"
|
|
@@ -91,21 +185,52 @@ export default defineComponent({
|
|
|
// svideo.value.offsetWidth,
|
|
|
// svideo.value.offsetHeight,
|
|
|
// );
|
|
|
- // 2116 × 692
|
|
|
+
|
|
|
+ var c = document.getElementById("co2Canvas");
|
|
|
+ var ctx = c.getContext("2d");
|
|
|
+ ctx.moveTo(20, 120);
|
|
|
+ ctx.lineTo(110, 120);
|
|
|
+ ctx.lineTo(173, 173);
|
|
|
+ ctx.lineWidth = 1;
|
|
|
+ ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
|
|
|
+ ctx.setLineDash([2, 3]);
|
|
|
+ ctx.stroke();
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(676, 50);
|
|
|
+ ctx.lineTo(590, 150);
|
|
|
+ ctx.lineTo(515, 150);
|
|
|
+ ctx.lineWidth = 1;
|
|
|
+ ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
|
|
|
+ ctx.setLineDash([2, 3]);
|
|
|
+ ctx.stroke();
|
|
|
+
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(756, 250);
|
|
|
+ ctx.lineTo(670, 210);
|
|
|
+ ctx.lineTo(512, 210);
|
|
|
+ ctx.lineWidth = 1;
|
|
|
+ ctx.strokeStyle = "rgba(247, 230, 205, 0.4)";
|
|
|
+ ctx.setLineDash([2, 3]);
|
|
|
+ ctx.stroke();
|
|
|
+
|
|
|
+ var circ = document.getElementById("circleCanvas1");
|
|
|
+ var circtx = circ.getContext("2d");
|
|
|
+ // circleMove(circtx);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
const projectStore = useProjectStore();
|
|
|
- const { lastAllEnergy } = storeToRefs(projectStore);
|
|
|
+ // const { lastAllEnergy } = storeToRefs(projectStore);
|
|
|
|
|
|
projectStore.$subscribe((mutation, state) => {
|
|
|
+ //订阅store的变化
|
|
|
const lastAllEnergy = state.lastAllEnergy || {};
|
|
|
allData.lastAllEnergyRes = {
|
|
|
cdmCo2: lastAllEnergy.cdmCo2
|
|
|
? lastAllEnergy.cdmCo2.toFixed(2)
|
|
|
: lastAllEnergy.cdmCo2,
|
|
|
cdmTree: lastAllEnergy.cdmTree
|
|
|
- ? lastAllEnergy.cdmTree.toFixed(2)
|
|
|
+ ? lastAllEnergy.cdmTree.toFixed(0)
|
|
|
: lastAllEnergy.cdmTree,
|
|
|
cdmC: lastAllEnergy.cdmC
|
|
|
? lastAllEnergy.cdmC.toFixed(2)
|
|
@@ -144,6 +269,140 @@ export default defineComponent({
|
|
|
//height: 100%;
|
|
|
width: 100%;
|
|
|
}
|
|
|
+ .saveCenterCont {
|
|
|
+ position: relative;
|
|
|
+ width: 1px;
|
|
|
+ height: 1px;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ }
|
|
|
+ .centerOval {
|
|
|
+ width: 1px;
|
|
|
+ height: 1px;
|
|
|
+ position: absolute;
|
|
|
+ left: -50px;
|
|
|
+ top: 30px;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ .round1 {
|
|
|
+ position: absolute;
|
|
|
+ width: 275px;
|
|
|
+ left: 50%;
|
|
|
+ top: -68px;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ .round2 {
|
|
|
+ position: absolute;
|
|
|
+ width: 275px;
|
|
|
+ left: 50%;
|
|
|
+ top: -46px;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ .round3 {
|
|
|
+ position: absolute;
|
|
|
+ width: 295px;
|
|
|
+ left: 50%;
|
|
|
+ top: -25px;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ .round4 {
|
|
|
+ position: absolute;
|
|
|
+ width: 340px;
|
|
|
+ left: 50%;
|
|
|
+ top: -10px;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ .round5 {
|
|
|
+ position: absolute;
|
|
|
+ width: 376px;
|
|
|
+ left: 50%;
|
|
|
+ top: 0px;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ .electWrap {
|
|
|
+ position: absolute;
|
|
|
+ top: -168px;
|
|
|
+ left: 50%;
|
|
|
+ font-size: 30px;
|
|
|
+ white-space: nowrap;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ color: #f7e6cd;
|
|
|
+ text-align: center;
|
|
|
+ .value {
|
|
|
+ margin-top: 5px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 32px;
|
|
|
+ //font-size: 2vw;
|
|
|
+ // line-height: 58px;
|
|
|
+ text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4);
|
|
|
+ .num {
|
|
|
+ font-size: 48px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-right: 4px;
|
|
|
+ font-family: Persagy;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .outOval {
|
|
|
+ width: 152px;
|
|
|
+ height: 58px;
|
|
|
+ border: 1px dashed rgba(224, 194, 155, 0.26);
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ .inOval {
|
|
|
+ width: 112px;
|
|
|
+ height: 40px;
|
|
|
+ margin: auto;
|
|
|
+ border: 1px dashed rgba(224, 194, 155, 0.36);
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .saveLight {
|
|
|
+ font-size: 0;
|
|
|
+ width: 70px;
|
|
|
+ position: absolute;
|
|
|
+ top: 4px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+ .saveCo2 {
|
|
|
+ font-size: 0;
|
|
|
+ width: 70px;
|
|
|
+ position: absolute;
|
|
|
+ top: -50px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+ .co2Wrap {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 22px;
|
|
|
+ white-space: nowrap;
|
|
|
+ .value {
|
|
|
+ padding: 0 8px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-family: Persagy;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sco2 {
|
|
|
+ top: -80px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .outOvalCo2 {
|
|
|
+ left: -400px;
|
|
|
+ top: -30px;
|
|
|
+ }
|
|
|
+ .outOvalCarbon {
|
|
|
+ left: 300px;
|
|
|
+ top: -100px;
|
|
|
+ }
|
|
|
+ .outOvalTree {
|
|
|
+ left: 380px;
|
|
|
+ top: 100px;
|
|
|
+ }
|
|
|
.videoWrap {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
@@ -155,51 +414,18 @@ export default defineComponent({
|
|
|
// left: 0;
|
|
|
// right: 0;
|
|
|
}
|
|
|
- .co2Wrap {
|
|
|
+ .co2Canvas {
|
|
|
position: absolute;
|
|
|
- font-size: 22px;
|
|
|
- //font-size: 1.1vw;
|
|
|
- .value {
|
|
|
- padding: 0 8px;
|
|
|
- font-size: 24px;
|
|
|
- //font-size: 1.2vw;
|
|
|
- }
|
|
|
- .co2Img {
|
|
|
- width: 58px;
|
|
|
- }
|
|
|
- }
|
|
|
- .sco2 {
|
|
|
- top: 16%;
|
|
|
- //top: 62px;
|
|
|
- left: 5%;
|
|
|
- }
|
|
|
- .scarbon {
|
|
|
- top: -3%;
|
|
|
- right: 14%;
|
|
|
- }
|
|
|
- .stree {
|
|
|
- top: 52%;
|
|
|
- right: 4%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ // border: 1px solid red;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
}
|
|
|
- .electWrap {
|
|
|
+ .circleCanvas1 {
|
|
|
position: absolute;
|
|
|
- top: 21%;
|
|
|
- left: 32%;
|
|
|
- width: 28%;
|
|
|
- font-size: 30px;
|
|
|
- //font-size: 1.4vw;
|
|
|
- // line-height: 45px;
|
|
|
- text-align: center;
|
|
|
- white-space: nowrap;
|
|
|
- color: #f7e6cd;
|
|
|
- .value {
|
|
|
- margin-top: 5px;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 46px;
|
|
|
- //font-size: 2vw;
|
|
|
- // line-height: 58px;
|
|
|
- text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4);
|
|
|
- }
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
}
|
|
|
}
|
|
|
}
|