警情通报

src/utils/request.js

@@ -7,8 +7,8 @@ const request = axios.create({
   //baseURL: 'http://172.18.113.50:8080/zhapi',
   //baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
   //baseURL: 'http://192.168.0.188:8888/zhapi',
-  //baseURL: 'http://121.41.91.94:12002/zhapi',
+  baseURL: 'http://121.41.91.94:12002/zhapi',
-  baseURL: `http://${window.location.host}/zhapi`,
+  //baseURL: `http://${window.location.host}/zhapi`,
   timeout: 50000,
   headers: { 'content-type': 'application/json' },
 })

src/views/compositeIndex/components/endanger.vue

@@ -0,0 +1,70 @@
+<!-- 危化物品 -->
+<template>
+  <div class="endanger_box">
+    <!-- 模块标题 -->
+    <div class="title">
+      <div class="img_box">
+        <!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
+      </div>
+      <div class="title_text">危化物品</div>
+    </div>
+    <!-- 危化物品表 -->
+    <div class="chart_box">
+        <div id="barchart"></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Endanger",
+  data() {
+    return {};
+  },
+  methods:{
+  },
+};
+</script>
+<style lang="less" scoped>
+.endanger_box {
+  margin-top: 10px;
+  width: 24vw;
+  height: 28vh;
+  // border: 0.1px solid #495e70;
+  background: url("~@/assets/safetyIndex/back001.png") no-repeat;
+  background-size: 100% 100%;
+  /* 盒子标题 */
+  .title {
+    width: 24vw;
+    height: 2.7vh;
+    display: flex;
+    font-size: 16px;
+    color: #d9e7ff;
+    font-weight: 500;
+    /* 图片盒子 */
+    .img_box {
+      width: 1.5vw;
+      height: 2.7vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .title_text {
+      width: 4vw;
+      height: 3.2vh;
+      line-height: 3.2vh;
+      text-align: right;
+    }
+  }
+  .chart_box {
+    margin-top: 1vh;
+    margin-left: 1vw;
+    width: 22vw;
+    height: 22vh;
+    border: 0.1px solid #495e70;
+  }
+}
+</style>

src/views/compositeIndex/components/notification.vue

@@ -4,17 +4,66 @@
     <!-- 模块标题 -->
     <div class="title">
       <div class="img_box">
-        <!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
       </div>
       <div class="title_text">警情通报</div>
     </div>
+    <div class="carousel_box">
+      <ul class="marquee-list" :class="{ 'animate-up': animateUp }">
+        <li v-for="(item, index) in this.notification_list" :key="index">
+          <!-- {{ item.caseAddress }} -->
+          <div class="icon_box">
+            <div class="icon_item"></div>
+          </div>
+          <div class="message_box">
+            <div class="top_message">
+              {{ item.caseName }}
+            </div>
+            <div class="bottom_message">
+              <div class="bottom_message_company">企业名称：{{ item.caseAddress }}</div>
+              <div class="bottom_message_time">时间：{{ item.registerTime }}</div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 <script>
+import { caseList } from "@/api/safetyIndex";
 export default {
   name: "Notification",
   data() {
-    return {};
+    return {
+      animateUp: false,
+      notification_list: [],
+      timer: null,
+    };
+  },
+  created() {
+    this.getList();
+  },
+  mounted() {
+    this.timer = setInterval(this.scrollAnimate, 1500);
+  },
+  methods: {
+    getList() {
+      caseList().then((res) => {
+        this.notification_list = res.data;
+        console.log("this.notification_list", this.notification_list);
+      });
+    },
+    // 滚动
+    scrollAnimate() {
+      this.animateUp = true;
+      setTimeout(() => {
+        this.notification_list.push(this.notification_list[0]);
+        this.notification_list.shift();
+        this.animateUp = false;
+      }, 500);
+    },
+    destroyed() {
+      clearInterval(this.timer);
+    },
   },
 };
 </script>
@@ -48,10 +97,87 @@ export default {
     }
     .title_text {
       width: 4vw;
-      height: 3.2vh;
+      height: 3.5vh;
-      line-height: 3.2vh;
+      line-height: 3.5vh;
       text-align: right;
     }
   }
+  .carousel_box {
+    width: 22vw;
+    height: 25vh;
+    margin-top: 2vh;
+    margin-left: 1vw;
+    overflow: hidden;
+    .marquee-list {
+      padding: 10px;
+      height: 25vh;
+      margin: 0px;
+      li {
+        width: 100%;
+        height: 7vh;
+        margin-bottom: 1vh;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        list-style: none;
+        line-height: 40px;
+        text-align: center;
+        color: #fff;
+        font-size: 18px;
+        font-weight: 400;
+        display: flex;
+        .icon_box {
+          width: 3vw;
+          height: 7vh;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .icon_item {
+            width: 2.5vw;
+            height: 5vh;
+            background: url("~@/assets/safetyIndex/red02.png") no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .message_box {
+          width: 18vw;
+          height: 7vh;
+          .top_message {
+            width: 18vw;
+            height: 3.5vh;
+            line-height: 3.5vh;
+            color: #d9e7ff;
+            text-align: left;
+            font-size: 16px;
+            font-weight: 600;
+          }
+          .bottom_message {
+            width: 18vw;
+            height: 3.5vh;
+            display: flex;
+            .bottom_message_company {
+              width: 11vw;
+              height: 3.5vh;
+              text-align: left;
+              line-height: 3.5vh;
+              color: #fff;
+              font-size: 14px;
+            }
+            .bottom_message_time {
+              width: 7vw;
+              height: 3.5vh;
+              color: #fff;
+              font-size: 14px;
+              line-height: 3.5vh;
+            }
+          }
+        }
+      }
+    }
+    .animate-up {
+      transition: all 0.5s ease-in-out;
+      transform: translateY(-7vh);
+    }
+  }
 }
 </style>

src/views/compositeIndex/index.vue

@@ -16,6 +16,8 @@
         <CompanyService ref="companyService"></CompanyService>
         <!-- 警情通报 -->
         <Notification ref="notification"></Notification>
+        <!-- 危化物品 -->
+        <Endanger ref="endanger"></Endanger>
       </div>
     </div>
   </div>
@@ -25,7 +27,8 @@ import CompanyNum from "./components/companyNum";
 import Employee from "./components/employee";
 import CompanyCar from "./components/companyCar";
 import CompanyService from "./components/companyService";
-import Notification from "./components/notification"
+import Notification from "./components/notification";
+import Endanger from "./components/endanger"
 export default {
   name: "CompositeIndex",
   components: {
@@ -33,7 +36,8 @@ export default {
     Employee,
     CompanyCar,
     CompanyService,
-    Notification
+    Notification,
+    Endanger
   },
   data() {
     return {};