feat: 安全态势车间列表修改

src/views/institute-safety/components/CardMapAndAlert.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="map-alert">
     <CompanyHome />
-    <WorkshopList />
+    <!-- <WorkshopList /> -->
   </div>
 </template>
 
 <script setup lang="ts">
   import CompanyHome from '@/views/institute-safety/modules/safety-company-home/CompanyHome.vue';
-  import WorkshopList from '@/views/institute-safety/modules/safety-workshop-list/WorkshopList.vue';
+  // import WorkshopList from '@/views/institute-safety/modules/safety-workshop-list/WorkshopList.vue';
 </script>
 
 <style scoped>

src/views/institute-safety/modules/safety-company-home/CompanyHome.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="company-home" id="company-home">
     <RealtimeSurveillance v-if="curCamera?.code" />
-    <img v-else style="width: 100%" src="@/assets/images/sfy.jpg" alt="" />
+    <img v-else style="width: 100%" src="@/assets/images/institute-safety/sfy.jpg" alt="" />
     <CompanyRating v-if="!curCamera?.code" />
-    <ControlTab @open-surveillance-list="showSurveillanceList = true" @open-question-list="handleOpenQuestionList" />
+    <ControlTab
+      @open-surveillance-list="showSurveillanceList = true"
+      @open-workshop-list="showWorkshopList = true"
+      @open-question-list="handleOpenQuestionList"
+    />
     <SurveillanceList v-if="showSurveillanceList" @close="showSurveillanceList = false" />
+    <WorkshopList v-if="showWorkshopList" @close="showWorkshopList = false" />
 
     <QuestionList v-if="showQuestionList" @close="handleQuestionListClose" />
   </div>
@@ -13,8 +18,10 @@
 <script setup lang="ts">
   import CompanyRating from './components/CompanyRating.vue';
   import ControlTab from './components/ControlTab.vue';
-  import SurveillanceList from './components/SurveillanceList.vue';
   import RealtimeSurveillance from './components/RealtimeSurveillance.vue';
+  import SurveillanceList from './components/SurveillanceList.vue';
+  import WorkshopList from './components/WorkshopList.vue';
+
   import QuestionList from '../safety-question-list/QuestionList.vue';
 
   import useQuestionListStore from '@/views/institute-safety/modules/safety-company-home/stores/use-question-list';
@@ -23,9 +30,10 @@
   import useCameraStore from './stores/use-camera-store';
   import { nextTick, onUnmounted, ref } from 'vue';
   import { storeToRefs } from 'pinia';
-  import { WORKSHOP_INFOS } from '../safety-workshop-list/constants';
+  import { WORKSHOP_INFOS } from './constants';
 
   const showSurveillanceList = ref(false);
+  const showWorkshopList = ref(false);
 
   useViolationNoticeCompany();
 
@@ -51,6 +59,7 @@
       questionListStore.openList();
     });
   }
+
   function handleQuestionListClose() {
     questionListStore.closeList();
   }

src/views/institute-safety/modules/safety-company-home/apis/index.ts

@@ -43,3 +43,19 @@ export function updateReadIssueId(issueId: number) {
     method: 'post',
   });
 }
+
+// 查询车间今日是否有异常状态
+export function getWorkshopTodayExceptionStatus(list: string[]) {
+  return http.request<
+    {
+      workshopCode: string;
+      exceptionStatus: boolean;
+    }[]
+  >({
+    url: '/issue/queryWorkshopTodayExceptionStatus',
+    method: 'post',
+    data: {
+      workshopCodeList: list,
+    },
+  });
+}

src/views/institute-safety/modules/safety-company-home/components/ControlTab.vue

@@ -17,6 +17,10 @@
         <img src="@/assets/images/institute-safety/alert-white.png" alt="" />
         <div class="tab-text">今日异常告警</div>
       </div>
+      <div class="tab-button" @click="emit('open-workshop-list')">
+        <img src="@/assets/images/institute-safety/workshop-list.png" alt="" />
+        <div class="tab-text">监控区域列表</div>
+      </div>
     </div>
   </div>
 </template>
@@ -26,6 +30,7 @@
 
   const emit = defineEmits<{
     (e: 'open-surveillance-list'): void;
+    (e: 'open-workshop-list'): void;
     (e: 'open-question-list'): void;
   }>();
 

src/views/institute-safety/modules/safety-company-home/components/WorkshopList.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="workshop-list">
+    <header class="list-header">
+      <div style="width: 16px"></div>
+      <span> 监控区域列表 </span>
+      <img class="close-btn" src="@/assets/images/institute-safety/close.png" alt="" @click="emits('close')" />
+    </header>
+    <main class="workshop-list-main">
+      <div class="workshop-item" v-for="item in staticWorkshopList" :key="item.id">
+        <span class="item-id">{{ item.id }}</span>
+
+        <el-tooltip placement="top" :content="item.name" :hide-after="0">
+          <span class="item-name"> {{ item.name }} </span>
+        </el-tooltip>
+        <img
+          class="item-icon"
+          v-if="item.status"
+          src="@/assets/images/institute-safety/alert.png"
+          alt=""
+          @click="handleOpenQuestionList(item.workshopCode)"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { nextTick, onMounted, ref } from 'vue';
+  import { ElTooltip } from 'element-plus';
+  import { getWorkshopTodayExceptionStatus } from '../apis';
+  import { WORKSHOP_INFOS } from '../constants';
+
+  import useQuestionListStore from '@/views/institute-safety/modules/safety-company-home/stores/use-question-list';
+
+  const emits = defineEmits<{
+    (e: 'close'): void;
+  }>();
+
+  const questionListStore = useQuestionListStore();
+
+  const staticWorkshopList = ref(WORKSHOP_INFOS);
+
+  function handleOpenQuestionList(code: string) {
+    questionListStore.closeList();
+    questionListStore.clearStore();
+    nextTick(() => {
+      questionListStore.setState({
+        type: 'workshop',
+        workshopCodes: [code],
+      });
+      questionListStore.openList();
+    });
+  }
+
+  onMounted(() => {
+    getWorkshopTodayExceptionStatus(staticWorkshopList.value.map((item) => item.workshopCode)).then((res) => {
+      staticWorkshopList.value.forEach((item) => {
+        item.status = res.find((x) => x.workshopCode === item.workshopCode)!.exceptionStatus;
+      });
+    });
+  });
+</script>
+
+<style scoped>
+  .workshop-list {
+    width: 280px;
+    height: 675px;
+
+    position: absolute;
+    top: 0px;
+    right: 0px;
+
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 12px 4px 4px 12px;
+    backdrop-filter: blur(10px);
+  }
+
+  .list-header {
+    margin: 12px 0;
+    padding: 0 16px;
+
+    font-weight: 500;
+    font-size: 14px;
+    color: #ffffff;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .config-btn,
+  .close-btn {
+    cursor: pointer;
+  }
+  .workshop-list-main {
+    padding: 0 16px;
+    height: 623px;
+    overflow: auto;
+  }
+
+  .workshop-item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-top: 20px;
+  }
+  .item-id {
+    font-family: DIN, DIN;
+    font-weight: bold;
+    font-size: 13px;
+    color: #ffffff;
+    width: 20px;
+    height: 20px;
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 50%;
+    text-align: center;
+  }
+
+  .item-name {
+    margin-left: 8px;
+    max-width: 183px;
+    height: 28px;
+    line-height: 28px;
+    border-radius: 4px;
+
+    padding: 0 10px;
+
+    white-space: nowrap; /* 防止文本换行 */
+    overflow: hidden; /* 隐藏溢出的文本 */
+    text-overflow: ellipsis; /* 显示省略号 */
+
+    font-weight: 400;
+    font-size: 14px;
+    color: #ffffff;
+  }
+
+  .item-icon {
+    margin-right: 8px;
+    margin-left: auto;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+  }
+
+  .camera-name-text {
+    max-width: 200px;
+    white-space: nowrap; /* 防止文本换行 */
+    overflow: hidden; /* 隐藏溢出的文本 */
+    text-overflow: ellipsis; /* 显示省略号 */
+  }
+</style>

src/views/institute-safety/modules/safety-company-home/hooks/use-violation-notice-company.ts

@@ -1,12 +1,11 @@
 // 报警消息实时提醒
-
 import { getNewIssueList, updateReadIssueId } from '../apis';
 import useViolationNoticeStore, { getPlace, emitter } from '../stores/use-violation-notice-store';
 import { onUnmounted, onMounted, nextTick } from 'vue';
 import dayjs from 'dayjs';
 import { push } from 'notivue';
 import useQuestionListStore from '@/views/institute-safety/modules/safety-company-home/stores/use-question-list';
-import { WORKSHOP_INFOS } from '../../safety-workshop-list/constants';
+import { WORKSHOP_INFOS } from '../constants';
 
 const questionListStore = useQuestionListStore();
 const useViolationRealtimeCompany = () => {

src/views/institute-safety/modules/safety-propaganda/apis/index.ts

@@ -0,0 +1 @@
+import { http } from '@/utils/http/axios';

src/views/institute-safety/modules/safety-workshop-list/WorkshopList.vue

@@ -1,105 +0,0 @@
-<template>
-  <div class="workshop-list">
-    <div class="workshop-list-item" v-for="item in staticWorkshopList" :key="item.id">
-      <div class="workshop-list-item-id">{{ item.id }}</div>
-      <el-tooltip placement="top" :content="item.name">
-        <div class="workshop-list-item-name">{{ item.name }}</div>
-      </el-tooltip>
-      <img
-        class="workshop-list-item-icon"
-        v-if="item.status"
-        src="@/assets/images/institute-safety/alert.png"
-        alt=""
-        @click="handleOpenQuestionList(item.workshopCode)"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { nextTick, onMounted, ref } from 'vue';
-  import { ElTooltip } from 'element-plus';
-  import { getWorkshopTodayExceptionStatus } from './apis';
-  import { WORKSHOP_INFOS } from './constants';
-
-  import useQuestionListStore from '@/views/institute-safety/modules/safety-company-home/stores/use-question-list';
-  // import { storeToRefs } from 'pinia';
-
-  const questionListStore = useQuestionListStore();
-  // const { showQuestionList } = storeToRefs(questionListStore);
-
-  const staticWorkshopList = ref(WORKSHOP_INFOS);
-
-  function handleOpenQuestionList(code: string) {
-    questionListStore.closeList();
-    questionListStore.clearStore();
-    nextTick(() => {
-      questionListStore.setState({
-        type: 'workshop',
-        workshopCodes: [code],
-      });
-      questionListStore.openList();
-    });
-  }
-
-  onMounted(() => {
-    getWorkshopTodayExceptionStatus(staticWorkshopList.value.map((item) => item.workshopCode)).then((res) => {
-      staticWorkshopList.value.forEach((item) => {
-        item.status = res.find((x) => x.workshopCode === item.workshopCode)!.exceptionStatus;
-      });
-    });
-  });
-</script>
-
-<style scoped>
-  .workshop-list {
-    margin-top: 8px;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, 200px);
-  }
-  .workshop-list-item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    width: 200px;
-    height: 40px;
-    border: 1px solid #e8e8e8;
-  }
-  .workshop-list-item:nth-child(n + 12) {
-    border: 1px solid rgba(232, 232, 232, 0.6);
-  }
-  .workshop-list-item:nth-child(n + 30) {
-    border: 1px solid rgba(232, 232, 232, 0.3);
-  }
-
-  .workshop-list-item-id {
-    margin: 0 10px;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background: #e8e8e8;
-    font-size: 13px;
-    color: #666666;
-    font-weight: bold;
-    font-family: DINAlternate;
-    text-align: center;
-    line-height: 20px;
-  }
-
-  .workshop-list-item-name {
-    width: 126px;
-    font-weight: 400;
-    font-size: 14px;
-    color: #666666;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .workshop-list-item-icon {
-    cursor: pointer;
-    margin: 0 8px 0 10px;
-    width: 20px;
-    height: 20px;
-  }
-</style>

src/views/institute-safety/modules/safety-workshop-list/apis/index.ts

@@ -1,17 +0,0 @@
-import { http } from '@/utils/http/axios';
-
-// 查询车间今日是否有异常状态
-export function getWorkshopTodayExceptionStatus(list: string[]) {
-  return http.request<
-    {
-      workshopCode: string;
-      exceptionStatus: boolean;
-    }[]
-  >({
-    url: '/issue/queryWorkshopTodayExceptionStatus',
-    method: 'post',
-    data: {
-      workshopCodeList: list,
-    },
-  });
-}