feature/jsbug修复

src/views/dashboard/components/BarChart.vue

@@ -1,202 +0,0 @@
-<!--  线 + 柱混合图 -->
-<template>
-  <el-card>
-    <template #header>
-      <div class="title">
-        产量柱状图
-        <el-tooltip effect="dark" content="点击试试下载" placement="bottom">
-          <i-ep-download class="download" @click="downloadEchart" />
-        </el-tooltip>
-      </div>
-    </template>
-
-    <div :id="id" :class="className" :style="{ height, width }"></div>
-  </el-card>
-</template>
-
-<script setup lang="ts">
-import * as echarts from "echarts";
-
-const props = defineProps({
-  id: {
-    type: String,
-    default: "barChart",
-  },
-  className: {
-    type: String,
-    default: "",
-  },
-  width: {
-    type: String,
-    default: "200px",
-    required: true,
-  },
-  height: {
-    type: String,
-    default: "200px",
-    required: true,
-  },
-});
-
-const options = {
-  grid: {
-    left: "2%",
-    right: "2%",
-    bottom: "10%",
-    containLabel: true,
-  },
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "cross",
-      crossStyle: {
-        color: "#999",
-      },
-    },
-  },
-  legend: {
-    x: "center",
-    y: "bottom",
-    data: ["收入", "毛利润", "收入增长率", "利润增长率"],
-    textStyle: {
-      color: "#999",
-    },
-  },
-  xAxis: [
-    {
-      type: "category",
-      data: ["1月", "2月", "3月", "4月", "5月","6月", "7月","8月", "9月","10月", "11月","12月"],
-      axisPointer: {
-        type: "shadow",
-      },
-    },
-  ],
-  yAxis: [
-    {
-      type: "value",
-      min: 0,
-      max: 10000,
-      interval: 2000,
-      axisLabel: {
-        formatter: "{value} ",
-      },
-    },
-    {
-      type: "value",
-      min: 0,
-      max: 100,
-      interval: 20,
-      axisLabel: {
-        formatter: "{value}%",
-      },
-    },
-  ],
-  series: [
-    {
-      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" },
-        ]),
-      },
-    },
-    {
-      name: "毛利润",
-      type: "bar",
-      data: [5100, 7200, 7300, 7800, 6100,7100, 3200, 7100, 7200, 7100,7200, 7200],
-      barWidth: 20,
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: "#25d73c" },
-          { offset: 0.5, color: "#1bc23d" },
-          { offset: 1, color: "#179e61" },
-        ]),
-      },
-    },
-    {
-      name: "收入增长率",
-      type: "line",
-      yAxisIndex: 1,
-      data: [60, 65, 70, 75, 80,60, 65, 70, 75, 80,23,23],
-      itemStyle: {
-        color: "#67C23A",
-      },
-    },
-    {
-      name: "利润增长率",
-      type: "line",
-      yAxisIndex: 1,
-      data: [70, 75, 80, 85, 90,65, 70, 75, 80,60, 65, 70],
-      itemStyle: {
-        color: "#409EFF",
-      },
-    },
-  ],
-};
-
-const downloadEchart = () => {
-  // 获取画布图表地址信息
-  const img = new Image();
-  img.src = chart.value.getDataURL({
-    type: "png",
-    pixelRatio: 1,
-    backgroundColor: "#fff",
-  });
-  // 当图片加载完成后，生成 URL 并下载
-  img.onload = () => {
-    const canvas = document.createElement("canvas");
-    canvas.width = img.width;
-    canvas.height = img.height;
-    const ctx = canvas.getContext("2d");
-    if (ctx) {
-      ctx.drawImage(img, 0, 0, img.width, img.height);
-      const link = document.createElement("a");
-      link.download = `业绩柱状图.png`;
-      link.href = canvas.toDataURL("image/png", 0.9);
-      document.body.appendChild(link);
-      link.click();
-      link.remove();
-    }
-  };
-};
-
-const chart = ref<any>("");
-onMounted(() => {
-  // 图表初始化
-  chart.value = markRaw(
-    echarts.init(document.getElementById(props.id) as HTMLDivElement)
-  );
-
-  chart.value.setOption(options);
-
-  // 大小自适应
-  window.addEventListener("resize", () => {
-    chart.value.resize();
-  });
-});
-
-onActivated(() => {
-  if (chart.value) {
-    chart.value.resize();
-  }
-});
-</script>
-<style lang="scss" scoped>
-.title {
-  display: flex;
-  justify-content: space-between;
-
-  .download {
-    cursor: pointer;
-
-    &:hover {
-      color: #409eff;
-    }
-  }
-}
-</style>

src/views/dashboard/components/FunnelChart.vue

@@ -1,115 +0,0 @@
-<!-- 漏斗图 -->
-<template>
-  <div :id="id" :class="className" :style="{ height, width }"></div>
-</template>
-
-<script setup lang="ts">
-import * as echarts from "echarts";
-
-const props = defineProps({
-  id: {
-    type: String,
-    default: "funnelChart",
-  },
-  className: {
-    type: String,
-    default: "",
-  },
-  width: {
-    type: String,
-    default: "200px",
-    required: true,
-  },
-  height: {
-    type: String,
-    default: "200px",
-    required: true,
-  },
-});
-
-const options = {
-  title: {
-    show: true,
-    text: "订单线索转化漏斗图",
-    x: "center",
-    padding: 15,
-    textStyle: {
-      fontSize: 18,
-      fontStyle: "normal",
-      fontWeight: "bold",
-      color: "#337ecc",
-    },
-  },
-  grid: {
-    left: "2%",
-    right: "2%",
-    bottom: "10%",
-    containLabel: true,
-  },
-  legend: {
-    x: "center",
-    y: "bottom",
-    data: ["Show", "Click", "Visit", "Inquiry", "Order"],
-  },
-
-  series: [
-    {
-      name: "Funnel",
-      type: "funnel",
-      left: "20%",
-      top: 60,
-      bottom: 60,
-      width: "60%",
-      sort: "descending",
-      gap: 2,
-      label: {
-        show: true,
-        position: "inside",
-      },
-      labelLine: {
-        length: 10,
-        lineStyle: {
-          width: 1,
-          type: "solid",
-        },
-      },
-      itemStyle: {
-        borderColor: "#fff",
-        borderWidth: 1,
-      },
-      emphasis: {
-        label: {
-          fontSize: 20,
-        },
-      },
-      data: [
-        { value: 60, name: "Visit" },
-        { value: 40, name: "Inquiry" },
-        { value: 20, name: "Order" },
-        { value: 80, name: "Click" },
-        { value: 100, name: "Show" },
-      ],
-    },
-  ],
-};
-
-const chart = ref<any>("");
-
-onMounted(() => {
-  chart.value = markRaw(
-    echarts.init(document.getElementById(props.id) as HTMLDivElement)
-  );
-
-  chart.value.setOption(options);
-
-  window.addEventListener("resize", () => {
-    chart.value.resize();
-  });
-});
-
-onActivated(() => {
-  if (chart.value) {
-    chart.value.resize();
-  }
-});
-</script>

src/views/dashboard/components/PieChart.vue

@@ -1,89 +0,0 @@
-<!-- 饼图 -->
-<template>
-  <el-card>
-    <template #header> 产品分类饼图 </template>
-    <div :id="id" :class="className" :style="{ height, width }"></div>
-  </el-card>
-</template>
-
-<script setup lang="ts">
-import * as echarts from "echarts";
-
-const props = defineProps({
-  id: {
-    type: String,
-    default: "pieChart",
-  },
-  className: {
-    type: String,
-    default: "",
-  },
-  width: {
-    type: String,
-    default: "200px",
-    required: true,
-  },
-  height: {
-    type: String,
-    default: "200px",
-    required: true,
-  },
-});
-const options = {
-  grid: {
-    left: "2%",
-    right: "2%",
-    bottom: "10%",
-    containLabel: true,
-  },
-  legend: {
-    top: "bottom",
-    textStyle: {
-      color: "#999",
-    },
-  },
-  series: [
-    {
-      name: "Nightingale Chart",
-      type: "pie",
-      radius: [50, 130],
-      center: ["50%", "50%"],
-      roseType: "area",
-      itemStyle: {
-        borderRadius: 1,
-        color: function (params: any) {
-          //自定义颜色
-          const colorList = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C"];
-          return colorList[params.dataIndex];
-        },
-      },
-      data: [
-        { value: 26, name: "家用电器" },
-        { value: 27, name: "户外运动" },
-        { value: 24, name: "汽车用品" },
-        { value: 23, name: "手机数码" },
-      ],
-    },
-  ],
-};
-
-const chart = ref<any>("");
-
-onMounted(() => {
-  chart.value = markRaw(
-    echarts.init(document.getElementById(props.id) as HTMLDivElement)
-  );
-
-  chart.value.setOption(options);
-
-  window.addEventListener("resize", () => {
-    chart.value.resize();
-  });
-});
-
-onActivated(() => {
-  if (chart.value) {
-    chart.value.resize();
-  }
-});
-</script>

src/views/dashboard/components/RadarChart.vue

@@ -1,109 +0,0 @@
-<!-- 雷达图 -->
-<template>
-  <el-card>
-    <template #header> 订单状态雷达图 </template>
-    <div :id="id" :class="className" :style="{ height, width }"></div>
-  </el-card>
-</template>
-
-<script setup lang="ts">
-import * as echarts from "echarts";
-
-const props = defineProps({
-  id: {
-    type: String,
-    default: "radarChart",
-  },
-  className: {
-    type: String,
-    default: "",
-  },
-  width: {
-    type: String,
-    default: "200px",
-    required: true,
-  },
-  height: {
-    type: String,
-    default: "200px",
-    required: true,
-  },
-});
-
-const options = {
-  grid: {
-    left: "2%",
-    right: "2%",
-    bottom: "10%",
-    containLabel: true,
-  },
-  legend: {
-    x: "center",
-    y: "bottom",
-    data: ["预定数量", "下单数量", "发货数量"],
-    textStyle: {
-      color: "#999",
-    },
-  },
-  radar: {
-    // shape: 'circle',
-    radius: "60%",
-    indicator: [
-      { name: "家用电器" },
-      { name: "服装箱包" },
-      { name: "运动户外" },
-      { name: "手机数码" },
-      { name: "汽车用品" },
-      { name: "家具厨具" },
-    ],
-  },
-  series: [
-    {
-      name: "Budget vs spending",
-      type: "radar",
-      itemStyle: {
-        borderRadius: 6,
-        color: function (params: any) {
-          //自定义颜色
-          const colorList = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C"];
-          return colorList[params.dataIndex];
-        },
-      },
-      data: [
-        {
-          value: [400, 400, 400, 400, 400, 400],
-          name: "预定数量",
-        },
-        {
-          value: [300, 300, 300, 300, 300, 300],
-          name: "下单数量",
-        },
-        {
-          value: [200, 200, 200, 200, 200, 200],
-          name: "发货数量",
-        },
-      ],
-    },
-  ],
-};
-
-const chart = ref<any>("");
-
-onMounted(() => {
-  chart.value = markRaw(
-    echarts.init(document.getElementById(props.id) as HTMLDivElement)
-  );
-
-  chart.value.setOption(options);
-
-  window.addEventListener("resize", () => {
-    chart.value.resize();
-  });
-});
-
-onActivated(() => {
-  if (chart.value) {
-    chart.value.resize();
-  }
-});
-</script>

src/views/dashboard/main/index.vue

@@ -1,291 +1,7 @@
 <template>
-  <div class="dashboard-container">
-    <!-- github角标 -->
-<!--    <github-corner class="github-corner" />-->
-
-    <el-card shadow="never">
-      <el-row justify="space-between">
-        <el-col :span="18" :xs="24">
-          <div class="flex h-full items-center">
-            <img
-              class="w-20 h-20 mr-5 rounded-full"
-              :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
-            />
-            <div>
-              <p>{{ greetings }}</p>
-              <p class="text-sm text-gray">
-                今日天气晴朗，气温在15℃至25℃之间，东南风。
-              </p>
-            </div>
-          </div>
-        </el-col>
-
-        <el-col :span="6" :xs="24">
-          <div class="flex h-full items-center justify-around">
-            <el-statistic :value="99">
-              <template #title>
-                <div class="flex items-center">
-                  <svg-icon icon-class="message" size="20px" />
-                  <span class="text-[16px] ml-1">消息</span>
-                </div>
-              </template>
-            </el-statistic>
-
-            <el-statistic :value="50">
-              <template #title>
-                <div class="flex items-center">
-                  <svg-icon icon-class="todolist" size="20px" />
-                  <span class="text-[16px] ml-1">待办</span>
-                </div>
-              </template>
-              <template #suffix>/100</template>
-            </el-statistic>
-
-            <el-statistic :value="10">
-              <template #title>
-                <div class="flex items-center">
-                  <svg-icon icon-class="project" size="20px" />
-                  <span class="text-[16px] ml-1">项目</span>
-                </div>
-              </template>
-            </el-statistic>
-          </div>
-        </el-col>
-      </el-row>
-    </el-card>
-
-    <!-- 数据卡片 -->
-    <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>
-              <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) }}
-            </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>
-
-      <!--消息数-->
-      <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)]">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) }}
-            </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>
-
-      <!--销售额-->
-      <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>
-              <el-tag>月</el-tag>
-            </div>
-          </template>
-
-          <div class="flex items-center justify-between mt-5">
-            <div class="text-lg text-right">
-              {{ Math.round(amountOutput) }}
-            </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>
-
-      <!--订单量-->
-      <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>
-              <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) }}
-            </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>
-    </el-row>
-
-    <!-- Echarts 图表 -->
-    <el-row :gutter="10" class="mt-3">
-      <el-col :sm="24" :lg="8" class="mb-2">
-        <BarChart
-          id="barChart"
-          height="400px"
-          width="100%"
-          class="bg-[var(--el-bg-color-overlay)]"
-        />
-      </el-col>
-
-      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
-        <PieChart
-          id="pieChart"
-          height="400px"
-          width="100%"
-          class="bg-[var(--el-bg-color-overlay)]"
-        />
-      </el-col>
-
-      <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)]"
-        />
-      </el-col>
-    </el-row>
-  </div>
+  <div></div>
 </template>
 
-<script setup lang="ts">
-defineOptions({
-  name: "Dashboard",
-  inheritAttrs: false,
-});
-
-import { useUserStore } from "@/store/modules/user";
-import { useTransition, TransitionPresets } from "@vueuse/core";
-
-const userStore = useUserStore();
-const date: Date = new Date();
-
-const greetings = computed?.(() => {
-  const hours = date.getHours();
-  if (hours >= 6 && hours < 8) {
-    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
-  } else if (hours >= 8 && hours < 12) {
-    return "上午好，" + userStore.user.userName + "！";
-  } else if (hours >= 12 && hours < 18) {
-    return "下午好，" + userStore.user.userName + "！";
-  } else if (hours >= 18 && hours < 24) {
-    return "晚上好，" + userStore.user.userName + "！";
-  } else if (hours >= 0 && hours < 6) {
-    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
-  }
-});
-
-const duration = 5000;
-
-// 销售额
-const amount = ref(0);
-const amountOutput = useTransition(amount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-amount.value = 2000;
-
-// 访客数
-const visitCount = ref(0);
-const visitCountOutput = useTransition(visitCount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-visitCount.value = 2000;
-
-// IP数
-const dauCount = ref(0);
-const dauCountOutput = useTransition(dauCount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-dauCount.value = 2000;
-
-// 订单量
-const orderCount = ref(0);
-const orderCountOutput = useTransition(orderCount, {
-  duration: duration,
-  transition: TransitionPresets.easeOutExpo,
-});
-orderCount.value = 2000;
-</script>
-
-<style lang="scss" scoped>
-.dashboard-container {
-  position: relative;
-  padding: 24px;
-
-  .user-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-  }
-
-  .github-corner {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 1;
-    border: 0;
-  }
-
-  .data-box {
-    display: flex;
-    justify-content: space-between;
-    padding: 20px;
-    font-weight: bold;
-    color: var(--el-text-color-regular);
-    background: var(--el-bg-color-overlay);
-    border-color: var(--el-border-color);
-    box-shadow: var(--el-box-shadow-dark);
-  }
+<script lang="ts" setup></script>
 
-  .svg-icon {
-    fill: currentcolor !important;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/views/report/environment/temperature/index.vue

@@ -5,7 +5,7 @@
         <div class="box">
           <div class="titleText">防静电监控</div>
           <div class="itemBox">
-            <div class="item" v-for="(item, index in option) in 20">
+            <div class="item" v-for="(item, index) in option" :key="index">
               <div class="sc"></div>
               <div class="gw">工位:{{ item }}</div>
             </div>
@@ -28,25 +28,25 @@
       </div>
     </el-tab-pane>
     <el-tab-pane label="报表" name="second">
-      <Tables v-if="activeName === 'second'"></Tables>
+      <Tables v-if="activeName === 'second'" />
     </el-tab-pane>
   </el-tabs>
 </template>
 <script setup>
 import Tables from "./tables.vue";
 import * as echarts from "echarts";
-const option={
-  'JG-装配1',
-  'JG-装配2',
-  'JG-装配3',
-  'JG-捡练4',
-  'JG-捡练5',
-  '预期套01',
-  'JG-测试1',
-  'JG-装配4',
-  'JG-测试2',
-  '入库工位',
-}
+const option = [
+  "JG-装配1",
+  "JG-装配2",
+  "JG-装配3",
+  "JG-捡练4",
+  "JG-捡练5",
+  "预期套01",
+  "JG-测试1",
+  "JG-装配4",
+  "JG-测试2",
+  "入库工位",
+];
 const activeName = ref("first");
 
 const charts1 = shallowRef(null);
@@ -362,13 +362,15 @@ onMounted(() => {
     grid-gap: 5px; /* 设置网格项之间的间距为20像素 */
     .item {
       display: inline-block;
-      width: 60px;
+
       height: 100px;
       .sc {
         height: 60px;
+        width: 60px;
         border-radius: 30px;
         margin-bottom: 10px;
         background-color: green;
+        margin: 0 auto;
       }
       .gw {
         text-align: center;

src/views/welcome/components/PieChart.vue

@@ -58,10 +58,10 @@ const options = {
         },
       },
       data: [
-        { value: 26, name: "家用电器" },
-        { value: 27, name: "户外运动" },
-        { value: 24, name: "汽车用品" },
-        { value: 23, name: "手机数码" },
+        { value: 26, name: "工单" },
+        { value: 27, name: "工位" },
+        { value: 24, name: "订单" },
+        { value: 23, name: "报故单" },
       ],
     },
   ],

src/views/welcome/index.vue

@@ -209,11 +209,11 @@ const greetings = computed?.(() => {
   if (hours >= 6 && hours < 8) {
     return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
   } else if (hours >= 8 && hours < 12) {
-    return "上午好，" + userStore.user.userName + "！";
+    return "上午好！";
   } else if (hours >= 12 && hours < 18) {
-    return "下午好，" + userStore.user.userName + "！";
+    return "下午好！";
   } else if (hours >= 18 && hours < 24) {
-    return "晚上好，" + userStore.user.userName + "！";
+    return "晚上好！";
   } else if (hours >= 0 && hours < 6) {
     return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
   }