中建四局(双碳管理):晴雨表模块

src/views/projectAdmin/zjsj/carbon/centerBottom.vue

@@ -1,14 +1,133 @@
 <template>
   <Card title="晴雨表">
-    晴雨表
+   <div class="containerBox">
+     <div class="bottom">
+        <div class="bottomInner weatherBox">
+          <div style="overflow:hidden;width:100%">
+          <div
+            class="weatherItem"
+            v-for="(item, index) in weatherList"
+            :key="index"
+          >
+            <p>
+              <span>{{ item.week }}</span>
+              <!-- <span>{{ item.date }}</span> -->
+              <!-- <span>（{{ item.week }}）</span> -->
+            </p>
+            <div style="height: 15%"></div>
+            <div class="imgBox">
+              <img :src="item.url" />
+            </div>
+            <div style="height: 15%"></div>
+            <p class="weather">{{ item.wea }}</p>
+            <p class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</p>
+            <div style="height: 6%"></div>
+            <p>
+              {{ $t("message.environmentalOverview.wind_power") }}
+              {{ item.win_speed }}
+            </p>
+          </div>
+          </div>
+        </div>
+      </div>
+</div>
   </Card>
 </template>
 
 <script>
-import Card from '../components/Card.vue'
+import Card from '../components/Card.vue';
+import { getWeatherDataApi, } from "@/assets/js/api/environmentManage";
 export default {
-  components: { Card }
+  components: { Card },
+  data() {
+    return {
+      weatherList: [],
+    };
+  },
+  mounted(){
+    this.loadWeather();
+  },
+  methods:{
+        loadWeather() {
+      var _this = this;
+      getWeatherDataApi({ cityid: "" }).then((res) => {
+        var json = JSON.parse(res.result);
+        var list = json.data;
+        // 
+        list.forEach((element, index) => {
+          // element.week=getWeek(element.date)
+          // element.date = element.date.substring(5,element.date.length)
+          element.url = require("@/assets/images/weather/" +
+            element.wea_img +
+            ".png");
+          this.weatherList.push(element);
+        });
+        console.log('======',this.weatherList)
+      });
+    },
+  }
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.containerBox {
+  width: 100%;
+  height: 100%;
+
+  .titleTxt {
+    font-size: 18px;
+    color: #6ee4f0;
+    margin-top: 5px;
+    margin-left: 5px;
+  }
+  .weatherBox {
+  font-size: 12px;
+  color: rgba(255, 255, 254, 0.6);
+  width: 100%;
+  margin: 40px  30px 0px;
+  .weatherItem {
+    float: left;
+    width: 13.28%;
+    text-align: center;
+    padding-top: 13px;
+    margin-top: -5px;
+    // margin-bottom: 110px;
+    // height: calc(100% - 13px);
+    height: 205px;
+    padding-bottom: 13px;
+    background: linear-gradient(
+      rgba(21, 25, 33, 0.06),
+      rgba(6, 248, 179, 0.06)
+    );
+    &:nth-child(2n) {
+      background: linear-gradient(
+        rgba(6, 248, 179, 0.06),
+        rgba(21, 25, 33, 0.06)
+      );
+    }
+    &:first-child {
+      background: linear-gradient(
+        rgba(21, 25, 33, 0.12),
+        rgba(6, 248, 179, 0.12)
+      );
+    }
+    .imgBox {
+      height: 36px;
+      display: flex;
+      align-items: center;
+      // margin: 15px 0;
+      justify-content: center;
+    }
+    .weather {
+      font-size: 15px;
+      color: #ffffff;
+      margin-bottom: 3px;
+    }
+    .temp{
+      height: 30px;
+      line-height: 30px;
+    }
+  }
+}
+}
+</style>

src/views/projectAdmin/zjsj/carbon/centerTop.vue

@@ -171,14 +171,17 @@
 
 <script>
 import Card from "../components/Card";
-import echarts from "echarts4";
 import { environmentDevList } from "@/assets/js/api/environmentManage";
 import { getRealTimeDustNoiseDataApi } from "@/assets/js/api/environmentManage";
 export default {
   components: { Card },
   data() {
     return {
-      devList: [],
+      devList: [
+        {deviceName:"设备1"},
+        {deviceName:"设备2"},
+        {deviceName:"设备3"},
+      ],
       currentDevDetail: {},
       onlineDevNum: 0,
       offlineDevNum: 0,
@@ -211,8 +214,8 @@ export default {
       environmentDevList({ projectSn: this.$store.state.projectSn }).then(
         result => {
           console.log("列表", result);
-          this.devList = result.result;
-          console.log(this.devList);
+          // this.devList = result.result;
+          // console.log(this.devList);
           if (result.result.length > 0) {
             this.currentDevDetail = result.result[0];
 

src/views/projectAdmin/zjsj/carbon/index.vue

@@ -56,10 +56,10 @@ export default {
     width: calc(60% - 40px);
     height: 100%;
     .top {
-      height: 70%;
+      height: 66.5%;
     }
     .bottom {
-      height: 30%;
+      height: 33.5%;
     }
   }
 }

src/views/projectAdmin/zjsj/carbon/leftBottom.vue

@@ -136,7 +136,7 @@ export default {
         x: "10%",//x 偏移量
         y: "5%", // y 偏移量
         width: "85%", // 宽度
-        height: "78%"// 高度
+        height: "70%"// 高度
       },
         xAxis: {
           type: "category",