大屏需求修改

src/api/bigScreen/index.ts

@@ -120,3 +120,10 @@ export function getOnline3DInfo() {
     method: "post",
   });
 }
+//获取温湿度监控
+export function getWsdState() {
+  return request({
+    url: "/api/v1/process/census/station/wsdState",
+    method: "post",
+  });
+}

src/views/pro/traceability/components/mediaCom.vue

@@ -12,20 +12,22 @@
       :option="option"
       v-model:page="page"
     >
-      <template #menu="{row,index,type}">
-        <el-button @click="openDialog(row)"
-                   icon="el-icon-link"
-                   text
-                   type="primary"
-        >查看</el-button>
+      <template #menu="{ row, index, type }">
+        <el-button
+          @click="openDialog(row)"
+          icon="el-icon-link"
+          text
+          type="primary"
+          >查看</el-button
+        >
       </template>
     </avue-crud>
     <el-dialog
-        v-model="dialog.visible"
-        :title="dialog.title"
-        width="60%"
-        @close="dialog.visible = false"
-    ><el-image :src="url" fit="none" />
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="60%"
+      @close="dialog.visible = false"
+      ><el-image :src="url" fit="contain" />
     </el-dialog>
   </div>
 </template>
@@ -42,7 +44,7 @@ const dialog = reactive({
   title: "图片预览",
   visible: false,
 });
-const url = ref(null)
+const url = ref(null);
 // 传入一个url，后面不带/
 const {
   form,
@@ -63,12 +65,15 @@ const { selectionChange, multipleDelete } = Methords; //选中和批量删除事
 const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
 
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
-const openDialog = (row) =>{
-  dialog.visible = true
-  url.value =  import.meta.env.VITE_APP_UPLOAD_URL + row.filePath
-}
+const openDialog = (row) => {
+  dialog.visible = true;
+  url.value = import.meta.env.VITE_APP_UPLOAD_URL + row.filePath;
+};
 const refreshTra = (row) => {
-  commonConfig.value.params = { seqNo: row.seqNo,workOrderCode: row.workOrderCode };
+  commonConfig.value.params = {
+    seqNo: row.seqNo,
+    workOrderCode: row.workOrderCode,
+  };
   dataList();
 };
 defineExpose({ refreshTra });
@@ -86,7 +91,7 @@ option.value = Object.assign(option.value, {
   menu: true,
   editBtn: false,
   delBtn: false,
-  viewBtn:false,
+  viewBtn: false,
   header: false,
   column: [
     {
@@ -99,7 +104,7 @@ option.value = Object.assign(option.value, {
       prop: "creator",
       type: "select",
       dicData: dicts.user_name_list,
-      props: {"label": "dictLabel","value":"dictValue"},
+      props: { label: "dictLabel", value: "dictValue" },
       search: false,
     },
     {

src/views/report/statistics/screens/tasks/index.vue

@@ -5,99 +5,79 @@
     @click.stop="animationState = !animationState"
   >
     <common-header title="工位任务分布/防静电监控" />
-    <!-- <div
-      style="
-        width: 100vw;
-        height: 92vh;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-      "
-    >
-      <dv-border-box1
-        ref="borderRef"
-        style="width: 66.6%; height: 66.6%; position: absolute"
-        :style="{ transform: 'scale(' + 1.5 + ')' }"
-      />
-    </div> -->
     <div v-if="animationState" class="screen-content">
-      <!-- <TransitionGroup class="rowbox" name="list1" tag="ul">
-        <div v-for="(item, index) in showdatas1" :key="item" class="grid-item">
-          <title-header :title="item.stationName" />
-          <div class="grid-bottom">
-            <div class="left-info">
-              <div
-                class="box"
-                style="
-                  display: flex;
-                  flex-direction: column;
-                  justify-content: center;
-                "
-              >
-                <div class="title">{{ item.materialName }}</div>
-                <div class="code">{{ item.materialModel }}</div>
-              </div>
-              <div class="box">
-                <div style="display: flex; align-items: center">
-                  <dv-digital-flop
-                    :config="completeNumConfigs[index]"
-                    class="flop"
-                  />
-                  <span class="plan-num">/</span>
-                  <dv-digital-flop
-                    :config="taskNumConfigs[index]"
-                    class="flop"
-                  />
-                </div>
-                <div class="desc">完成数量 / 计划数量</div>
-              </div>
+      <div style="height: 100%">
+        <TransitionGroup class="rowboxYb itemBackgroud" name="list1" tag="ul">
+          <title-header :title="'防静电监控'" />
+          <div class="chartsCarouselBox">
+            <div class="carouselHeader tableStyle">
+              <div class="left center1Text">工位名称</div>
+              <div class="right center1Text">状态</div>
             </div>
-            <div class="right-chart">
-              <dv-water-level-pond
-                :config="{
-                  data: [setPondNumber(item.rate)],
-                  shape: 'round',
-                }"
-                :key="sum1"
-                style="width: 16vh; height: 16vh"
-              />
+            <div class="carouselBody">
+              <TransitionGroup name="list" tag="ul">
+                <li
+                  class="carouselItem tableStyle"
+                  :key="item"
+                  v-for="item in showData1"
+                >
+                  <div class="left infoBackgroud centerText textComent">
+                    {{ item.stationName }}
+                  </div>
+                  <div
+                    :class="{
+                      outline: item.state === '离线',
+                      error: item.state === '故障',
+                    }"
+                    class="right infoBackgroud centerText textComent"
+                    style="font-weight: bolder"
+                  >
+                    {{ item.state }}
+                  </div>
+                </li>
+              </TransitionGroup>
             </div>
           </div>
-        </div>
-      </TransitionGroup> -->
-      <TransitionGroup class="rowbox itemBackgroud" name="list1" tag="ul">
-        <title-header :title="'防静电监控'" />
-        <div class="chartsCarouselBox">
-          <div class="carouselHeader tableStyle">
-            <div class="left center1Text">工位名称</div>
-            <div class="right center1Text">状态</div>
-          </div>
-          <div class="carouselBody">
-            <TransitionGroup name="list" tag="ul">
-              <li
-                class="carouselItem tableStyle"
-                :key="item"
-                v-for="item in showData1"
-              >
-                <div class="left infoBackgroud centerText textComent">
-                  {{ item.stationName }}
-                </div>
-                <div
-                  :class="{
-                    outline: item.state === '离线',
-                    error: item.state === '故障',
-                  }"
-                  class="right infoBackgroud centerText textComent"
-                  style="font-weight: bolder"
+        </TransitionGroup>
+        <TransitionGroup
+          class="rowboxYb itemBackgroud"
+          style="margin-top: 2vh"
+          name="list1"
+          tag="ul"
+        >
+          <title-header :title="'温湿度监控'" />
+          <div class="chartsCarouselBox">
+            <div class="carouselHeader tableStyle">
+              <div class="left center1Text">工位名称</div>
+              <div class="right center1Text">状态</div>
+            </div>
+            <div class="carouselBody">
+              <TransitionGroup name="list" tag="ul">
+                <li
+                  class="carouselItem tableStyle"
+                  :key="item"
+                  v-for="item in showData2"
                 >
-                  {{ item.state }}
-                </div>
-              </li>
-            </TransitionGroup>
+                  <div class="left infoBackgroud centerText textComent">
+                    {{ item.stationName }}
+                  </div>
+                  <div
+                    :class="{
+                      outline: item.state === '离线',
+                      error: item.state === '故障',
+                    }"
+                    class="right infoBackgroud centerText textComent"
+                    style="font-weight: bolder"
+                  >
+                    {{ item.state }}
+                  </div>
+                </li>
+              </TransitionGroup>
+            </div>
           </div>
-        </div>
-      </TransitionGroup>
+        </TransitionGroup>
+      </div>
+
       <TransitionGroup class="rowbox" name="list2" tag="ul">
         <div v-for="(item, index) in showdatas2" :key="item" class="grid-item">
           <title-header :title="item.stationName" />
@@ -188,78 +168,73 @@
       </TransitionGroup>
     </div>
     <div v-else class="screen-content">
-      <!-- <TransitionGroup class="rowbox" name="list1" tag="ul">
-        <div v-for="(item, index) in showdatas1" :key="item" class="grid-item">
-          <title-header :title="item.stationName" />
-          <div class="grid-bottom">
-            <div class="left-info">
-              <div
-                class="box"
-                style="
-                  display: flex;
-                  flex-direction: column;
-                  justify-content: center;
-                "
-              >
-                <div class="title">{{ item.materialName }}</div>
-                <div class="code">{{ item.materialModel }}</div>
-              </div>
-              <div class="box">
-                <div style="display: flex; align-items: center">
-                  <dv-digital-flop
-                    :config="completeNumConfigs[index]"
-                    class="flop"
-                  />
-                  <span class="plan-num">/</span>
-                  <dv-digital-flop
-                    :config="taskNumConfigs[index]"
-                    class="flop"
-                  />
-                </div>
-                <div class="desc">完成数量 / 计划数量</div>
-              </div>
+      <div style="height: 100%">
+        <div class="rowboxYb itemBackgroud" name="list1" tag="ul">
+          <title-header :title="'防静电监控'" />
+          <div class="chartsCarouselBox">
+            <div class="carouselHeader tableStyle">
+              <div class="left center1Text">工位名称</div>
+              <div class="right center1Text">状态</div>
             </div>
-            <div class="right-chart">
-              <dv-water-level-pond
-                :config="{
-                  data: [setPondNumber(item.rate)],
-                  shape: 'round',
-                }"
-                :key="sum1"
-                style="width: 16vh; height: 16vh"
-              />
+            <div class="carouselBody">
+              <div name="list" tag="ul">
+                <li
+                  class="carouselItem tableStyle"
+                  :key="item"
+                  v-for="item in showData1"
+                >
+                  <div class="left infoBackgroud centerText textComent">
+                    {{ item.stationName }}
+                  </div>
+                  <div
+                    :class="{
+                      outline: item.state === '离线',
+                      error: item.state === '故障',
+                    }"
+                    class="right infoBackgroud centerText textComent"
+                    style="font-weight: bolder"
+                  >
+                    {{ item.state }}
+                  </div>
+                </li>
+              </div>
             </div>
           </div>
         </div>
-      </TransitionGroup> -->
-      <div class="rowbox itemBackgroud" name="list1" tag="ul">
-        <title-header :title="'防静电监控'" />
-        <div class="chartsCarouselBox">
-          <div class="carouselHeader tableStyle">
-            <div class="left center1Text">工位名称</div>
-            <div class="right center1Text">状态</div>
-          </div>
-          <div class="carouselBody">
-            <div name="list" tag="ul">
-              <li
-                class="carouselItem tableStyle"
-                :key="item"
-                v-for="item in showData1"
-              >
-                <div class="left infoBackgroud centerText textComent">
-                  {{ item.stationName }}
-                </div>
-                <div
-                  :class="{
-                    outline: item.state === '离线',
-                    error: item.state === '故障',
-                  }"
-                  class="right infoBackgroud centerText textComent"
-                  style="font-weight: bolder"
+        <div
+          class="rowboxYb itemBackgroud"
+          style="margin-top: 2vh"
+          name="list1"
+          tag="ul"
+        >
+          <title-header :title="'温湿度监控'" />
+          <div class="chartsCarouselBox">
+            <div class="carouselHeader tableStyle">
+              <div class="left center1Text">工位名称</div>
+              <div class="right center1Text">状态</div>
+            </div>
+            <div class="carouselBody">
+              <div name="list" tag="ul">
+                <li
+                  class="carouselItem tableStyle"
+                  :key="item"
+                  v-for="item in showData2"
                 >
-                  {{ item.state }}
-                </div>
-              </li>
+                  <div class="left infoBackgroud centerText textComent">
+                    {{ item.stationName }}
+                  </div>
+                  <div
+                    :class="{
+                      outline: item.state === '离线',
+                      error: item.state === '故障',
+                    }"
+                    class="right infoBackgroud centerText textComent"
+                    style="font-weight: bolder"
+                  >
+                    {{ item.state }}
+                  </div>
+                </li>
+              </div>
             </div>
           </div>
         </div>
@@ -381,9 +356,14 @@
 <script setup>
 import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
 import TitleHeader from "@/views/report/statistics/screens/titleHeader.vue";
-import { getStationTaskInfo, getStationState } from "@/api/bigScreen";
+import {
+  getStationTaskInfo,
+  getStationState,
+  getWsdState,
+} from "@/api/bigScreen";
 const animationState = ref(true);
 const showData1 = ref([]);
+const showData2 = ref([]);
 const fontSize = ref(0);
 const setPondNumber = (str) => {
   const number = Number(str).toFixed(2);
@@ -414,13 +394,20 @@ const getData = async () => {
   // }
 };
 const interval1 = ref(null);
+const interval0 = ref(null);
 const sum1 = ref(1);
+const sum0 = ref(1);
 const sum2 = ref(1);
 const data1 = ref([]);
+const data2 = ref([]);
 const getData1 = async () => {
   const { data } = await getStationState();
   data1.value = data.stationState;
 };
+const getData2 = async () => {
+  const { data } = await getWsdState();
+  data2.value = data;
+};
 const setShowData1 = (num, time) => {
   sum2.value = num;
   if (data1.value.length > num) {
@@ -435,6 +422,20 @@ const setShowData1 = (num, time) => {
     showData1.value = data1.value;
   }
 };
+const setShowData2 = (num, time) => {
+  sum0.value = num;
+  if (data2.value.length > num) {
+    const dataA = JSON.parse(JSON.stringify(data2.value));
+    showData2.value = dataA.splice(0, num);
+    interval0.value = setInterval(async () => {
+      await showData2.value.push(data2.value[sum0.value % data2.value.length]);
+      showData2.value.splice(0, 1);
+      sum0.value = sum0.value + 1;
+    }, time);
+  } else {
+    showData2.value = data2.value;
+  }
+};
 const setShowDatas = async (time) => {
   if (datas.value.length > 6) {
     // const dataA = JSON.parse(JSON.stringify(datas.value));
@@ -607,6 +608,9 @@ onUnmounted(() => {
   if (interval1.value) {
     clearInterval(interval1.value);
   }
+  if (interval0.value) {
+    clearInterval(interval0.value);
+  }
 });
 const checkFullscreen = () => {
   viewKey.value = !viewKey.value;
@@ -616,7 +620,9 @@ onMounted(async () => {
   setFontSize();
   await getData();
   await getData1();
+  await getData2();
   setShowData1(17, 2000);
+  setShowData2(17, 2000);
   setShowDatas(5000);
 });
 onUnmounted(() => {
@@ -685,14 +691,14 @@ onUnmounted(() => {
     margin-bottom: 0.5vh;
   }
   .carouselBody {
-    flex: 1;
+    height: calc(100% - 4.5vh);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     overflow: hidden;
     .carouselItem {
       margin-bottom: 0.5vh;
-      height: 3.9vh;
+      height: 3.15vh;
     }
   }
 }
@@ -812,6 +818,14 @@ onUnmounted(() => {
     align-items: center;
     justify-content: space-between;
   }
+  .rowboxYb {
+    width: 32vw;
+    height: calc(50% - 1vh);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+  }
   .grid-item {
     height: 100%;
     display: flex;