新增 港口天气/大坝/警告组件

src/components/DamCard.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="dam">
+    <TitleLine icon="info-dark" title="三峡大坝"></TitleLine>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, computed } from "vue";
+import { mapState } from "vuex";
+
+export default {
+  setup() {
+    function init() {}
+    function exchangeUrl(icon) {
+      return `/${icon}.png`;
+    }
+    onMounted(() => {
+      init();
+    });
+    return {
+      init,
+      exchangeUrl,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/components/EnvironmentalModule.vue

@@ -0,0 +1,36 @@
+// 环境中心 右侧组件
+<template>
+  <div class="info-box">
+    <DamCard></DamCard>
+    <IconInfo
+      style="margin-top: 25px"
+      :type="1"
+      :info="damInfo.data"
+    ></IconInfo>
+    <PortsCard class="mt20"></PortsCard>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+import { mapState } from "vuex";
+
+export default {
+  computed: mapState(["damInfo"]),
+  setup() {
+    function init() {}
+    function exchangeUrl(icon) {
+      return `/${icon}.png`;
+    }
+    onMounted(() => {
+      init();
+    });
+    return {
+      init,
+      exchangeUrl,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/components/PortsCard.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="ports-box">
+    <TitleLine icon="info-dark" title="港口"></TitleLine>
+    <div class="bar mt10" style="height: 700px">
+      <div v-for="(item, index) in arr" :key="index" class="ports df aic mb20">
+        <img class="mr10" :src="exchangeUrl('position')" alt="" />
+        <div class="mr50">{{ index + 1 }}小洋山港口</div>
+        <img :src="exchangeUrl(index % 2 == 0 ? 'sunny' : 'cloud')" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, computed } from "vue";
+import { mapState } from "vuex";
+
+export default {
+  setup() {
+    let arr = ref([]);
+    arr.value.length = 50;
+    function init() {}
+    function exchangeUrl(icon) {
+      return `/${icon}.png`;
+    }
+    onMounted(() => {
+      init();
+    });
+    return {
+      init,
+      exchangeUrl,
+      arr,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.ports {
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #e6f7ff;
+  :first-child {
+    width: 32px;
+    height: 32px;
+  }
+  :last-child {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.mr50 {
+  margin-right: 50px;
+}
+</style>

src/components/Warning.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="warning df aic jcc">
+    <img :src="exchangeUrl('warning')" alt="" />
+    <div>预警 :</div>
+    <div>小洋山港进入枯水期</div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, computed } from "vue";
+import { mapState } from "vuex";
+
+export default {
+  setup() {
+    function init() {}
+    function exchangeUrl(icon) {
+      return `/${icon}.png`;
+    }
+    onMounted(() => {
+      init();
+    });
+    return {
+      init,
+      exchangeUrl,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.warning {
+  height: 34px;
+  background: rgba(134, 172, 232, 0.2);
+  border-radius: 2px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #fff3ec;
+  img {
+    height: 25px;
+    width: 23px;
+    margin-right: 14px;
+  }
+}
+</style>

src/main.js

@@ -20,7 +20,13 @@ import IntelligentModule from "comps/IntelligentModule.vue";
 import EnvironmentalModule from "comps/EnvironmentalModule.vue";
 import Radar from "comps/Radar.vue";
 import Swiper from "comps/Swiper.vue";
+import DamCard from "comps/DamCard.vue";
+import PortsCard from "comps/PortsCard.vue";
+import Warning from "comps/Warning.vue";
 
+app.component("Warning", Warning);
+app.component("PortsCard", PortsCard);
+app.component("DamCard", DamCard);
 app.component("Swiper", Swiper);
 app.component("Radar", Radar);
 app.component("EnvironmentalModule", EnvironmentalModule);