首页更改

.env.development

@@ -11,6 +11,6 @@ VITE_APP_BASE_API = '/dev-api'
 VITE_APP_UPLOAD_URL = 'http://192.168.101.4:9000'
 # 开发接口地址
 #VITE_APP_API_URL = 'http://192.168.101.4:8078'
-VITE_APP_API_URL = 'http://121.41.179.41:8078'
+VITE_APP_API_URL = 'http://127.0.0.1:8078'
 # 是否启用 Mock 服务
 VITE_MOCK_DEV_SERVER = false

src/api/process/index.ts

@@ -58,3 +58,9 @@ export function sendTdmTBom(
     data: params
   });
 }
+export function queryIndex(): AxiosPromise<any> {
+  return request({
+    url: "/api/v1/process/census/queryIndex",
+    method: "get",
+  });
+}

src/views/welcome/components/BarChart.vue

@@ -1,14 +1,14 @@
 <!--  线 + 柱混合图 -->
 <template>
   <el-card>
-    <template #header>
+<!--    <template #header>
       <div class="title">
         产量柱状图
         <el-tooltip effect="dark" content="点击试试下载" placement="bottom">
           <i-ep-download class="download" @click="downloadEchart" />
         </el-tooltip>
       </div>
-    </template>
+    </template>-->
 
     <div :id="id" :class="className" :style="{ height, width }"></div>
   </el-card>
@@ -36,8 +36,24 @@ const props = defineProps({
     default: "200px",
     required: true,
   },
+  indexSum: {
+    type: Object,
+    default: () => {
+      return null;
+    },
+  },
 });
-
+watch(
+    () => props.indexSum,
+    () => {
+      handleSum(props.indexSum)
+      chart.value.setOption(options);
+      // 大小自适应
+      window.addEventListener("resize", () => {
+        chart.value.resize();
+      });
+    }
+);
 const options = {
   grid: {
     left: "2%",
@@ -57,7 +73,7 @@ const options = {
   legend: {
     x: "center",
     y: "bottom",
-    data: ["收入", "毛利润", "收入增长率", "利润增长率"],
+    data: ["报废数", "完工任务数", "新增任务数","总完成率"],
     textStyle: {
       color: "#999",
     },
@@ -93,20 +109,20 @@ const options = {
   ],
   series: [
     {
-      name: "收入",
+      name: "报废数",
       type: "bar",
       data: [5000, 7100, 7200, 7300, 6000,7800, 3500, 7000, 7000, 7500,7500, 7100],
       barWidth: 20,
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: "#83bff6" },
-          { offset: 0.5, color: "#188df0" },
-          { offset: 1, color: "#188df0" },
+          { offset: 0, color: "#e81968" },
+          { offset: 0.5, color: "#a91e53" },
+          { offset: 1, color: "#5b0829" },
         ]),
       },
     },
     {
-      name: "毛利润",
+      name: "完工任务数",
       type: "bar",
       data: [5100, 7200, 7300, 7800, 6100,7100, 3200, 7100, 7200, 7100,7200, 7200],
       barWidth: 20,
@@ -119,26 +135,29 @@ const options = {
       },
     },
     {
-      name: "收入增长率",
-      type: "line",
-      yAxisIndex: 1,
-      data: [60, 65, 70, 75, 80,60, 65, 70, 75, 80,23,23],
+      name: "新增任务数",
+      type: "bar",
+      data: [7100, 8200, 9300, 17800, 61100,17100, 13200, 2100, 1200, 1100,17200, 8200],
+      barWidth: 20,
       itemStyle: {
-        color: "#67C23A",
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: "#969b97" },
+          { offset: 0.5, color: "#8a988d" },
+          { offset: 1, color: "#3d3f49" },
+        ]),
       },
     },
     {
-      name: "利润增长率",
+      name: "总完成率",
       type: "line",
       yAxisIndex: 1,
-      data: [70, 75, 80, 85, 90,65, 70, 75, 80,60, 65, 70],
+      data: [60, 65, 70, 75, 80, 60, 65, 70, 75, 80, 23, 23],
       itemStyle: {
-        color: "#409EFF",
-      },
-    },
+        color: "#67C23A",
+      }
+    }
   ],
 };
-
 const downloadEchart = () => {
   // 获取画布图表地址信息
   const img = new Image();
@@ -164,6 +183,15 @@ const downloadEchart = () => {
     }
   };
 };
+const handleSum = (sum) =>{
+  options.series[0].data = sum.list1
+  options.series[1].data = sum.list2
+  options.series[2].data = sum.list3
+  options.series[3].data = sum.list4
+  options.yAxis[0].max = sum.maxNum
+  options.yAxis[0].interval = sum.maxNum
+  options.xAxis[0].data = sum.monList
+}
 
 const chart = ref<any>("");
 onMounted(() => {
@@ -171,7 +199,9 @@ onMounted(() => {
   chart.value = markRaw(
     echarts.init(document.getElementById(props.id) as HTMLDivElement)
   );
-
+  if(props.indexSum){
+    handleSum(props.indexSum)
+  }
   chart.value.setOption(options);
 
   // 大小自适应

src/views/welcome/index.vue

@@ -12,15 +12,15 @@
               :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
             />
             <div>
-              <p>{{ greetings }}</p>
+              <p>欢迎您!</p>
               <p class="text-sm text-gray">
-                今日天气晴朗，气温在15℃至25℃之间，东南风。
+                {{ greetings }}
               </p>
             </div>
           </div>
         </el-col>
 
-        <el-col :span="6" :xs="24">
+<!--        <el-col :span="6" :xs="24">
           <div class="flex h-full items-center justify-around">
             <el-statistic :value="99">
               <template #title>
@@ -50,7 +50,7 @@
               </template>
             </el-statistic>
           </div>
-        </el-col>
+        </el-col>-->
       </el-row>
     </el-card>
 
@@ -58,25 +58,15 @@
     <el-row :gutter="10" class="mt-3">
       <el-col :xs="24" :sm="12" :lg="6">
         <el-card shadow="never">
-          <template #header>
+          <div class="flex items-center justify-between">
+            <span class="text-[var(--el-text-color-secondary)]">订单数</span>
             <div class="flex items-center justify-between">
-              <span class="text-[var(--el-text-color-secondary)]">访客数</span>
-              <el-tag type="success">日</el-tag>
-            </div>
-          </template>
-
-          <div class="flex items-center justify-between mt-5">
-            <div class="text-lg text-right">
-              {{ Math.round(visitCountOutput) }}
+              <el-tag type="success">
+                <div class="text-lg text-right">
+                  {{ Math.round(orderNumOutput) }}
+                </div>
+              </el-tag>
             </div>
-            <svg-icon icon-class="visit" size="2em" />
-          </div>
-
-          <div
-            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
-          >
-            <span> 总访客数 </span>
-            <span> {{ Math.round(visitCountOutput * 15) }} </span>
           </div>
         </el-card>
       </el-col>
@@ -84,25 +74,15 @@
       <!--消息数-->
       <el-col :xs="24" :sm="12" :lg="6">
         <el-card shadow="never">
-          <template #header>
+          <div class="flex items-center justify-between">
+            <span class="text-[var(--el-text-color-secondary)]">工单数</span>
             <div class="flex items-center justify-between">
-              <span class="text-[var(--el-text-color-secondary)]">IP数</span>
-              <el-tag type="success">日</el-tag>
-            </div>
-          </template>
-
-          <div class="flex items-center justify-between mt-5">
-            <div class="text-lg text-right">
-              {{ Math.round(dauCountOutput) }}
+              <el-tag type="success">
+                <div class="text-lg text-right">
+                  {{ Math.round(workOrderCountOutput) }}
+                </div>
+              </el-tag>
             </div>
-            <svg-icon icon-class="ip" size="2em" />
-          </div>
-
-          <div
-            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
-          >
-            <span> 总IP数 </span>
-            <span> {{ Math.round(dauCountOutput) }} </span>
           </div>
         </el-card>
       </el-col>
@@ -110,25 +90,15 @@
       <!--销售额-->
       <el-col :xs="24" :sm="12" :lg="6">
         <el-card shadow="never">
-          <template #header>
+          <div class="flex items-center justify-between">
+            <span class="text-[var(--el-text-color-secondary)]">物料数</span>
             <div class="flex items-center justify-between">
-              <span class="text-[var(--el-text-color-secondary)]">产品数</span>
-              <el-tag>月</el-tag>
-            </div>
-          </template>
-
-          <div class="flex items-center justify-between mt-5">
-            <div class="text-lg text-right">
-              {{ Math.round(amountOutput) }}
+              <el-tag type="success">
+                <div class="text-lg text-right">
+                  {{ Math.round(materialCountOutput) }}
+                </div>
+              </el-tag>
             </div>
-            <svg-icon icon-class="money" size="2em" />
-          </div>
-
-          <div
-            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
-          >
-            <span> 总产品数 </span>
-            <span> {{ Math.round(amountOutput * 15) }} </span>
           </div>
         </el-card>
       </el-col>
@@ -136,25 +106,15 @@
       <!--订单量-->
       <el-col :xs="24" :sm="12" :lg="6">
         <el-card shadow="never">
-          <template #header>
+          <div class="flex items-center justify-between">
+            <span class="text-[var(--el-text-color-secondary)]">设备数</span>
             <div class="flex items-center justify-between">
-              <span class="text-[var(--el-text-color-secondary)]">订单量</span>
-              <el-tag type="danger">季</el-tag>
-            </div>
-          </template>
-
-          <div class="flex items-center justify-between mt-5">
-            <div class="text-lg text-right">
-              {{ Math.round(orderCountOutput) }}
+              <el-tag type="success">
+                <div class="text-lg text-right">
+                  {{ Math.round(deviceCountOutput) }}
+                </div>
+              </el-tag>
             </div>
-            <svg-icon icon-class="order" size="2em" />
-          </div>
-
-          <div
-            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
-          >
-            <span> 总订单量 </span>
-            <span> {{ Math.round(orderCountOutput * 15) }} </span>
           </div>
         </el-card>
       </el-col>
@@ -162,42 +122,46 @@
 
     <!-- Echarts 图表 -->
     <el-row :gutter="10" class="mt-3">
-      <el-col :sm="24" :lg="8" class="mb-2">
+      <el-col :sm="24" :lg="24" class="mb-2">
         <BarChart
           id="barChart"
           height="400px"
           width="100%"
           class="bg-[var(--el-bg-color-overlay)]"
+          :indexSum="indexSum"
         />
       </el-col>
 
-      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
+<!--      <el-col :xs="24" :sm="12" :lg="12" class="mb-2">
         <PieChart
           id="pieChart"
           height="400px"
           width="100%"
-          class="bg-[var(--el-bg-color-overlay)]"
+          class="bg-[var(&#45;&#45;el-bg-color-overlay)]"
         />
-      </el-col>
+      </el-col>-->
 
-      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
+<!--      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
         <RadarChart
           id="radarChart"
           height="400px"
           width="100%"
-          class="bg-[var(--el-bg-color-overlay)]"
+          class="bg-[var(&#45;&#45;el-bg-color-overlay)]"
         />
-      </el-col>
+      </el-col>-->
     </el-row>
   </div>
 </template>
 
 <script setup lang="ts">
+import * as echarts from "echarts";
+
 defineOptions({
   name: "Dashboard",
   inheritAttrs: false,
 });
 
+import {queryIndex} from "@/api/process"
 import { useUserStore } from "@/store/modules/user";
 import { useTransition, TransitionPresets } from "@vueuse/core";
 
@@ -209,49 +173,56 @@ const greetings = computed?.(() => {
   if (hours >= 6 && hours < 8) {
     return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
   } else if (hours >= 8 && hours < 12) {
-    return "上午好！";
+    return "上午的阳光，如细丝般穿透云层，轻轻拂过沉睡的大地，唤醒万物生机。";
   } else if (hours >= 12 && hours < 18) {
-    return "下午好！";
+    return "当下午的阳光悄悄的倾斜，天空被渲染上了一层淡金的色彩，这时的世界是如此的宁静与和谐，让人心生向往。";
   } else if (hours >= 18 && hours < 24) {
-    return "晚上好！";
+    return "夜晚的美丽如同黑色的丝绸，神秘而深邃，繁星如明珠般镶嵌在天空，月光如同一把柔和的画笔，描绘出了一幅宁静致远的画卷。";
   } else if (hours >= 0 && hours < 6) {
     return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
   }
 });
 
+
+const indexSum = ref(null)
 const duration = 5000;
 
 // 销售额
-const amount = ref(0);
-const amountOutput = useTransition(amount, {
+const orderCount = ref(0);
+const orderNumOutput = useTransition(orderCount, {
   duration: duration,
   transition: TransitionPresets.easeOutExpo,
 });
-amount.value = 2000;
 
 // 访客数
-const visitCount = ref(0);
-const visitCountOutput = useTransition(visitCount, {
+const workOrderCount = ref(0);
+const workOrderCountOutput = useTransition(workOrderCount, {
   duration: duration,
   transition: TransitionPresets.easeOutExpo,
 });
-visitCount.value = 2000;
 
 // IP数
-const dauCount = ref(0);
-const dauCountOutput = useTransition(dauCount, {
+const materialCount = ref(0);
+const materialCountOutput = useTransition(materialCount, {
   duration: duration,
   transition: TransitionPresets.easeOutExpo,
 });
-dauCount.value = 2000;
 
 // 订单量
-const orderCount = ref(0);
-const orderCountOutput = useTransition(orderCount, {
+const deviceCount = ref(0);
+const deviceCountOutput = useTransition(deviceCount, {
   duration: duration,
   transition: TransitionPresets.easeOutExpo,
 });
-orderCount.value = 2000;
+onMounted(() => {
+  queryIndex().then((res)=>{
+    deviceCount.value = res.data.deviceNum
+    orderCount.value = res.data.orderNum
+    workOrderCount.value = res.data.workOrderNum
+    materialCount.value = res.data.materialNum
+    indexSum.value = res.data
+  });
+});
 </script>
 
 <style lang="scss" scoped>