feature/动画

src/api/bigScreen/index.ts

@@ -60,3 +60,39 @@ export function getStationState() {
     method: "post",
   });
 }
+
+//今日工排产
+export function getMaterialRate() {
+  return request({
+    url: "/api/v1/process/census/taskMaterial/rate",
+    method: "post",
+  });
+}
+//今日任务完成率
+export function getTaskCount() {
+  return request({
+    url: "/api/v1/process/census/task/count",
+    method: "post",
+  });
+}
+//工位任务完成率
+export function getTaskRate() {
+  return request({
+    url: "/api/v1/process/census/taskStation/rate",
+    method: "post",
+  });
+}
+//获取设备列表
+export function getDeviceList() {
+  return request({
+    url: "/api/v1/process/census/device/list",
+    method: "post",
+  });
+}
+//今日报故
+export function getTodayError() {
+  return request({
+    url: "/api/v1/process/census/today/fault",
+    method: "post",
+  });
+}

src/components/ShowScroll/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  scrollRef: {
+    type: [Object, null],
+    required: true,
+  },
+  innerRef: {
+    type: [Object, null],
+    required: true,
+  },
+});
+const now = ref(0);
+const max = ref(0);
+const scrollContainer = ref(null);
+const innerRefs = ref(null);
+const setActive = () => {
+  console.log(props.scrollRef, "11");
+  max.value = innerRefs.value.clientHeight;
+  // inputSlider();
+};
+const inputSlider = () => {
+  const scrollAmountPerSecond = window.innerHeight * 0.07; // 每秒滚动的距离
+  const totalScrollDistance = max.value; // 内容的总高度
+  const duration = (totalScrollDistance / scrollAmountPerSecond) * 1000; // 动画总时长（毫秒）
+  let startTime;
+  function animate(time) {
+    if (!startTime) startTime = time;
+    const elapsed = time - startTime;
+
+    // 计算当前位置
+    const progress = Math.min(elapsed / duration, 1);
+    now.value = progress * totalScrollDistance;
+
+    props.scrollRef.setScrollTop(now.value);
+
+    if (progress < 1) {
+      requestAnimationFrame(animate);
+    } else {
+      now.value = 0; // 动画结束后重置位置
+      props.scrollRef.setScrollTop(now.value);
+      requestAnimationFrame(animate);
+    }
+  }
+  setTimeout(() => {
+    requestAnimationFrame(animate);
+  }, 6000);
+};
+
+nextTick(() => {
+  scrollContainer.value = props.scrollRef;
+  innerRefs.value = props.innerRef;
+});
+defineExpose({
+  setActive,
+});
+</script>
+
+<style scoped></style>

src/views/report/statistics/screens/common-header.vue

@@ -4,13 +4,10 @@
     <div class="right">
       <div class="show-time">
         <div class="time">
-          {{ times.time }}
+          {{ times.date }}
         </div>
         <div class="date">
           <span>
-            {{ times.date }}
-          </span>
-          <span>
             {{ times.week }}
           </span>
         </div>

src/views/report/statistics/screens/common-headerB.vue

@@ -4,13 +4,10 @@
     <div class="right">
       <div class="show-time">
         <div class="time">
-          {{ times.time }}
+          {{ times.date }}
         </div>
         <div class="date">
           <span>
-            {{ times.date }}
-          </span>
-          <span>
             {{ times.week }}
           </span>
         </div>

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

@@ -6,26 +6,32 @@
         <TitleHeaderB title="工位状态" />
         <div class="totalInfo">
           <div class="left">
-            <div class="text">100</div>
+            <div class="text">{{ countData.dayRate }}</div>
           </div>
           <div class="right">
             <div class="big">
               <div class="leftBox">
-                <div class="num">56000</div>
+                <div class="num">{{ countData.dayPlan }}</div>
                 <div class="title">今日计划</div>
               </div>
               <div class="rightBox">
-                <div class="num">56000</div>
+                <div class="num">{{ countData.dayFinish }}</div>
                 <div class="title">今日完成</div>
               </div>
             </div>
             <div class="small">
               <div class="title">本周进度</div>
-              <div class="title">400/ <span class="num">2000</span></div>
+              <div class="title">
+                {{ countData.weekFinish }} &nbsp;/
+                <span class="num">{{ countData.weekPlan }}</span>
+              </div>
             </div>
             <div class="small">
               <div class="title">本月进度</div>
-              <div class="title">400/ <span class="num">2000</span></div>
+              <div class="title">
+                {{ countData.monthFinish }} &nbsp;/
+                <span class="num">{{ countData.monthPlan }}</span>
+              </div>
             </div>
           </div>
         </div>
@@ -35,12 +41,26 @@
             <div class="rightItem">完成率</div>
           </div>
         </div>
-        <el-scrollbar class="scrollbar">
-          <div class="infoItem" v-for="(item, index) in 40" :key="index">
-            <div class="leftItem textComent itembg">dadwadwa</div>
-            <div class="rightItem itembg">123</div>
-          </div>
-        </el-scrollbar>
+        <ShowScroll
+          :ref="(el) => ShowScrollRef.push(el)"
+          :scrollRef="scrollbarRef"
+          :innerRef="innerRef"
+        >
+          <el-scrollbar ref="scrollbarRef" class="scrollbar">
+            <div ref="innerRef">
+              <div
+                class="infoItem"
+                v-for="(item, index) in taskRateArray"
+                :key="index"
+              >
+                <div class="leftItem textComent itembg">
+                  {{ item.stationName }}
+                </div>
+                <div class="rightItem itembg">{{ item.dayRate }}</div>
+              </div>
+            </div>
+          </el-scrollbar>
+        </ShowScroll>
       </div>
       <div class="middle">
         <Middle3D class="item" />
@@ -48,24 +68,50 @@
           <TitleHeaderB title="自动化设备状态" />
           <el-scrollbar class="scrollbar">
             <div class="infoContent">
-              <div class="deviceInfo">
-                <div class="img"></div>
+              <div
+                class="deviceInfo"
+                v-for="(item, index) in deviceArray"
+                :key="index"
+              >
+                <div class="img">
+                  <el-image
+                    :src="`/images/${getRandomLetter()}.png`"
+                    class="img"
+                  />
+                  <div
+                    class="imgbg"
+                    :class="{
+                      outlinebg: item.state == '离线',
+                      errorbg: item.state == '故障',
+                    }"
+                  ></div>
+                </div>
                 <div class="info">
-                  <div class="info1">多媒体</div>
+                  <div class="info1">{{ item.deviceName }}</div>
                   <div class="info2">
                     <div class="text2">
                       今日稼动
-                      <span class="nums">70%</span>
+                      <span class="nums">{{ item.utilizationRate }}</span>
                     </div>
                     |
                     <div class="text2">
                       总稼动
-                      <span class="nums" style="color: white">80%</span>
+                      <span class="nums" style="color: white">{{
+                        item.totalRate
+                      }}</span>
                     </div>
                   </div>
                   <div class="info3">
-                    <div class="ip">IP:123.123.123.1</div>
-                    <div class="infoState">在线</div>
+                    <div class="ip">IP:{{ item.ip }}</div>
+                    <div
+                      class="infoState"
+                      :class="{
+                        red: item.state == '故障',
+                        white: item.state == '离线',
+                      }"
+                    >
+                      {{ item.state }}
+                    </div>
                   </div>
                 </div>
               </div>
@@ -90,12 +136,16 @@
             </div>
           </div>
           <el-scrollbar class="scrollbar" style="height: 53vh">
-            <div class="infoItem" v-for="(item, index) in 40" :key="index">
+            <div
+              class="infoItem"
+              v-for="(item, index) in materialArray"
+              :key="index"
+            >
               <div class="leftItem1 textComent itembg">
-                dadw味哒哒带娃打完阿达的啊我adwa
+                {{ item.materialName }}
               </div>
-              <div class="midItem1 itembg">今日排产</div>
-              <div class="rightItem1 itembg">123</div>
+              <div class="midItem1 itembg">{{ item.planNum }}</div>
+              <div class="rightItem1 itembg">{{ item.dayRate }}</div>
             </div>
           </el-scrollbar>
         </div>
@@ -104,13 +154,21 @@
           <div class="titleInfo">
             <div class="infoItem">
               <div class="leftItem">工位名称</div>
-              <div class="rightItem">完成率</div>
+              <div class="rightItem">报故数量</div>
             </div>
           </div>
           <el-scrollbar class="scrollbar" style="height: 20vh">
-            <div class="infoItem" v-for="(item, index) in 40" :key="index">
-              <div class="leftItem textComent itembg">dadwadwa</div>
-              <div class="rightItem itembg">123</div>
+            <div
+              class="infoItem"
+              v-for="(item, index) in todayErrorArray"
+              :key="index"
+            >
+              <div class="leftItem textComent itembg">
+                {{ item.materialName }}
+              </div>
+              <div class="rightItem itembg" style="color: #db4848">
+                {{ item.unqualifiedNum }}
+              </div>
             </div>
           </el-scrollbar>
         </div>
@@ -122,49 +180,66 @@
 <script setup>
 import CommonHeaderB from "@/views/report/statistics/screens/common-headerB.vue";
 import TitleHeaderB from "../titleHeaderB.vue";
+import ShowScroll from "@/components/ShowScroll/index.vue";
 import * as echarts from "echarts";
-import { getCensusNonconforming } from "@/api/bigScreen";
+import {
+  getFaultCount,
+  getTaskCount,
+  getTaskRate,
+  getDeviceList,
+  getMaterialRate,
+  getTodayError,
+} from "@/api/bigScreen";
 import Middle3D from "./middle3D.vue";
 import moment from "moment";
 const fontSize = ref(0);
+const scrollbarRef = ref(null);
+const ShowScrollRef = ref([]);
+const innerRef = ref(null);
 const setFontSize = () => {
   fontSize.value = (window.innerHeight / 100) * 1.55;
 };
 const charts2 = shallowRef(null);
 const chartsData2 = ref([]);
+const getRandomLetter = () => {
+  const letters = ["a", "b", "c", "d"];
+  const randomIndex = Math.floor(Math.random() * letters.length);
+  return letters[randomIndex];
+};
 const getData4 = async () => {
   //不合格品统计
-  const { data } = await getCensusNonconforming();
+  const { data } = await getFaultCount();
   chartsData2.value = data;
-  chartsData2.value.list = [
-    [
-      { name: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", num: "00" },
-      { name: "aaaa", num: "01" },
-      { name: "aaaa", num: "02" },
-    ],
-    [
-      { name: "bb", num: "20" },
-      { name: "bb", num: "20" },
-      { name: "bb", num: "20" },
-    ],
-    [
-      ({ name: "cc", num: "20" },
-      { name: "cc", num: "20" },
-      { name: "cc", num: "20" }),
-    ],
-    [
-      ({ name: "dd", num: "20" },
-      { name: "ff", num: "20" },
-      { name: "cc", num: "20" }),
-    ],
-    [
-      ({ name: "ff", num: "20" },
-      { name: "ff", num: "20" },
-      { name: "ff", num: "20" }),
-    ],
-  ];
 };
-
+const countData = ref({});
+//获取今日任务完成相关统计
+const getTodayData = async () => {
+  const { data } = await getTaskCount();
+  countData.value = data;
+};
+const taskRateArray = ref([]);
+//获取工位任务完成率
+const getRateArray = async () => {
+  const { data } = await getTaskRate();
+  taskRateArray.value = data;
+};
+const deviceArray = ref([]);
+//获取设备列表
+const getDevice = async () => {
+  const { data } = await getDeviceList();
+  deviceArray.value = data;
+};
+const materialArray = ref([]);
+const getMaterialArray = async () => {
+  const { data } = await getMaterialRate();
+  materialArray.value = data;
+};
+//今日报故
+const todayErrorArray = ref([]);
+const getTodayErrorArray = async () => {
+  const { data } = await getTodayError();
+  todayErrorArray.value = data;
+};
 const option1 = {
   xAxis: {
     type: "category",
@@ -180,14 +255,21 @@ const option1 = {
       color: "#fff",
     },
     formatter: function (param) {
-      const array = [moment().year() + "年" + param[0].name + "<br/>"];
+      const array = [
+        moment().year() +
+          "年" +
+          param[0].name +
+          "&nbsp;&nbsp;" +
+          param[0].value +
+          "<br/>",
+      ];
       for (
         let i = 0;
-        i < chartsData2.value.list[param[0].dataIndex].length;
+        i < chartsData2.value.faultList[param[0].dataIndex].length;
         i++
       ) {
         array.push(
-          ` <span style='width: 10vw'>${chartsData2.value.list[param[0].dataIndex][i].name}</span><span style='color:#D75656;'>&nbsp;&nbsp;${chartsData2.value.list[param[0].dataIndex][i].num}</span>` +
+          ` <span style='width: 10vw'>${chartsData2.value.faultList[param[0].dataIndex][i].materialName}</span><span style='color:#D75656;'>&nbsp;&nbsp;${chartsData2.value.faultList[param[0].dataIndex][i].unqualifiedNum}</span>` +
             "<br/>"
         );
       }
@@ -197,7 +279,7 @@ const option1 = {
   grid: {
     left: "3%",
     right: "3%",
-    top: "10%",
+    top: "12%",
     bottom: "15%",
   },
   yAxis: {
@@ -253,12 +335,31 @@ const setChart1Option = () => {
 onMounted(async () => {
   setFontSize();
   await getData4();
+  getTodayData();
+  getRateArray();
+  getDevice();
+  getMaterialArray();
+  getTodayErrorArray();
   charts2.value = echarts.init(document.getElementById("charts2"));
   setChart1Option();
+  window.addEventListener("resize", function () {
+    charts2.value.resize();
+  });
+});
+nextTick(() => {
+  ShowScrollRef.value.forEach((el) => {
+    el.setActive();
+  });
 });
 </script>
 
 <style lang="scss" scoped>
+.red {
+  color: red !important;
+}
+.white {
+  color: white !important;
+}
 .titleInfo {
   height: 3vh;
 }
@@ -382,11 +483,30 @@ onMounted(async () => {
             width: 19vw;
             height: 10vh;
             display: flex;
-            background-color: rgba(255, 255, 255, 0.06);
+            background-color: rgba(255, 255, 255, 0.1);
             clip-path: polygon(0% 0%, 85% 0%, 100% 25%, 100% 100%, 0% 100%);
             .img {
               height: 10vh;
               width: 7vw;
+              position: relative;
+              .imgbg {
+                position: absolute;
+                height: 10vh;
+                width: 7vw;
+                top: 0;
+                left: 0;
+                z-index: 2;
+                background-color: #06ffa520;
+                border: 0.4vh solid #06ffa5;
+              }
+              .outlinebg {
+                background-color: #ffffff20 !important;
+                border: 0.4vh solid #fff !important;
+              }
+              .errorbg {
+                background-color: #db484820 !important;
+                border: 0.4vh solid #db4848 !important;
+              }
             }
             .info {
               height: 10vh;