优化图标显示

2025-12-04 16:15:23 +08:00
parent d49e755506
commit 6001882533
3 changed files with 107 additions and 85 deletions
--- a/src/layout/components/NavBar/components/UserProfile.vue
+++ b/src/layout/components/NavBar/components/UserProfile.vue
@@ -3,7 +3,9 @@
    <div class="flex-center h100% p13px">
      <img :src="userStore.userInfo.logo" class="rounded-full mr-10px w40px h40px" />
      <span class="title">{{ userStore.userInfo.shopName }}</span>
-      <el-icon><CaretBottom /></el-icon>
+      <el-icon>
+        <CaretBottom />
+      </el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
@@ -13,38 +15,16 @@
      </el-dropdown-menu>
    </template>
  </el-dropdown>
-  <el-dialog
-    title="修改密码"
-    modal-append-to-body
-    append-to-body
-    v-model="dialogVisible"
-    @close="reset"
-    width="400px"
-  >
+  <el-dialog title="修改密码" modal-append-to-body append-to-body v-model="dialogVisible" @close="reset" width="400px">
    <el-form ref="refForm" :model="form" :rules="rules">
      <el-form-item label="旧密码" prop="oldPass">
-        <el-input
-          type="password"
-          show-password
-          v-model="form.oldPass"
-          placeholder="请输入旧密码"
-        ></el-input>
+        <el-input type="password" show-password v-model="form.oldPass" placeholder="请输入旧密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPass">
-        <el-input
-          type="password"
-          show-password
-          v-model="form.newPass"
-          placeholder="请输入新密码"
-        ></el-input>
+        <el-input type="password" show-password v-model="form.newPass" placeholder="请输入新密码"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="rnewPass">
-        <el-input
-          type="password"
-          show-password
-          v-model="form.rnewPass"
-          placeholder="请再次输入新密码"
-        ></el-input>
+        <el-input type="password" show-password v-model="form.rnewPass" placeholder="请再次输入新密码"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
@@ -63,10 +43,13 @@ defineOptions({
 });
 import { ElNotification } from "element-plus";
 import { useTagsViewStore, useUserStore } from "@/store";
+import { useCartsStore } from '@/store/modules/carts'

 const tagsViewStore = useTagsViewStore();
 const userStore = useUserStore();

+const cartStore = useCartsStore()
+
 const route = useRoute();
 const router = useRouter();

@@ -175,9 +158,18 @@ function logout() {
    userStore
      .logout()
      .then(() => {
+        console.log(111111111);
        tagsViewStore.delAllViews();
      })
      .then(() => {
+        console.log(222222222);
+        localStorage.setItem('Instead_olold_order', '')
+        localStorage.setItem('carts', '')
+        cartStore.table_code = ''
+        cartStore.oldOrder = ''
+
+        console.log('cartStore.table_code', cartStore.table_code);
+
        router.push(`/login?redirect=${route.fullPath}`);
      });
  });
--- a/src/views/data/index.vue
+++ b/src/views/data/index.vue
@@ -917,26 +917,34 @@ export default {
    },
    // 初始化成本折线图
    initCostChart(time = [], data = []) {
+      // 销毁旧实例，避免重复创建
+      if (this.costRef) {
+        this.costRef.dispose();
+      }
      this.costRef = echarts.init(this.$refs.costRef);
+
      this.costRef.setOption({
        tooltip: {
          trigger: "item",
+          // 核心1：显示「时间 + 数量」（时间取X轴分类，数量取当前数值）
          formatter: (params) => {
-            return `${params.value}`;
+            // params.name 是X轴时间，params.value 是对应数值（保留2位小数，可按需调整）
+            return `${params.name}<br/>${params.value.toFixed(2)}`;
          },
+          // 优化提示框样式（可选）
+          padding: 10,
+          textStyle: { fontSize: 11 },
+          backgroundColor: "#fff",
+          borderColor: "#eee",
+          borderWidth: 1,
+          boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
        },
        xAxis: [
          {
            type: "category",
            data: time,
-            axisTick: {
-              alignWithLabel: true,
-            },
-            axisLine: {
-              lineStyle: {
-                color: "#999",
-              },
-            },
+            axisTick: { alignWithLabel: true },
+            axisLine: { lineStyle: { color: "#999" } },
            axisLabel: {
              rotate: time.length <= 7 ? 0 : 45,
              interval: 0,
@@ -949,29 +957,42 @@ export default {
          right: '5%',
          bottom: '8%',
          left: '8%',
+          containLabel: true // 确保标签不溢出，不影响点的显示
        },
-        color: "#165DFF",
+        color: "#165DFF", // 折线和默认点的颜色
        yAxis: [
          {
            type: "value",
-            axisLine: {
-              lineStyle: {
-                color: "#999",
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                type: "dashed",
-                color: "#ececec",
-              },
-            },
+            axisLine: { lineStyle: { color: "#999" } },
+            splitLine: { lineStyle: { type: "dashed", color: "#ececec" } },
          },
        ],
        series: [
          {
            data: data,
            type: "line",
-            symbol: "none",
+            symbol: "circle", // 核心2：X轴每个数据点显示圆形标记（默认是none，不显示）
+            symbolSize: 6, // 固定点的大小（默认尺寸，可调整）
+            lineStyle: { width: 2 }, // 折线宽度（优化视觉）
+            // 核心3：鼠标悬浮时点变大 + 黑色边框
+            emphasis: {
+              symbol: "circle", // 悬浮时仍为圆形
+              symbolSize: 10, // 悬浮时点的大小（比默认大）
+              itemStyle: {
+                borderColor: "#000", // 黑色边框
+                borderWidth: 2, // 边框宽度
+                // 悬浮时填充色不变（仍为 #165DFF）
+                color: "#165DFF"
+              }
+            },
+            // 确保所有数据点都显示（避免自动隐藏）
+            showAllSymbol: true,
+            // 点的基础样式（默认状态）
+            itemStyle: {
+              color: "#165DFF", // 点的填充色（与折线一致）
+              borderWidth: 1, // 基础状态可加细边框（可选，不加则无）
+              borderColor: "#fff" // 基础状态边框颜色（与背景区分，可选）
+            }
          },
        ],
      });
@@ -1051,27 +1072,50 @@ export default {
    },
    // 初始化毛利率/净利率图表
    initInterestRateChart(time, data) {
-      this.initInterestRate = null;
+      // 销毁旧实例，避免重复创建
+      if (this.initInterestRate) {
+        this.initInterestRate.dispose();
+      }
      this.initInterestRate = echarts.init(this.$refs.initInterestRate);
+
+      // 预处理数据：将毛利率和净利率按索引对应（关键，用于手动匹配）
+      const profitRateData = data.map(item => item.profitRate || 0);
+      const netProfitRateData = data.map(item => item.netProfitRate || 0);
+
      this.initInterestRate.setOption({
        tooltip: {
-          trigger: "item",
+          trigger: "item", // 保留 item 模式（确保能触发，之前已验证有效）
+          // 核心：手动查找当前 X 轴索引对应的另一个系列数据，拼接显示
          formatter: (params) => {
-            return `${params.value}`;
+            const index = params.dataIndex; // 获取当前数据的索引（X轴位置）
+            const xName = time[index]; // 当前 X 轴分类名称（如时间）
+            const color1 = "#165DFF"; // 毛利率颜色（与 series 一致）
+            const color2 = "#14C9C9"; // 净利率颜色（与 series 一致）
+            // 当前系列数据 + 另一个系列数据（按索引匹配）
+            const profitRate = profitRateData[index].toFixed(2);
+            const netProfitRate = netProfitRateData[index].toFixed(2);
+
+            // 拼接提示框内容（彩色方块 + 两个指标）
+            return `
+          <div style="margin-bottom:4px;">${xName}</div>
+          <div><span style="display:inline-block;width:8px;height:8px;background:${color1};margin-right:6px;border-radius:2px;"></span>毛利率：${profitRate}%</div>
+          <div><span style="display:inline-block;width:8px;height:8px;background:${color2};margin-right:6px;border-radius:2px;"></span>净利率：${netProfitRate}%</div>
+        `;
          },
+          // 保留你原有的提示框样式
+          padding: 10,
+          textStyle: { fontSize: 11 },
+          backgroundColor: "#fff",
+          borderColor: "#eee",
+          borderWidth: 1,
+          boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
        },
        xAxis: [
          {
            type: "category",
            data: time,
-            axisTick: {
-              alignWithLabel: true,
-            },
-            axisLine: {
-              lineStyle: {
-                color: "#999",
-              },
-            },
+            axisTick: { alignWithLabel: true },
+            axisLine: { lineStyle: { color: "#999" } },
            axisLabel: {
              rotate: time.length <= 7 ? 0 : 45,
              interval: 0,
@@ -1079,21 +1123,13 @@ export default {
            },
          },
        ],
-        color: ["#165DFF", "#14C9C9", "#F98B26"],
+        color: ["#165DFF", "#14C9C9", "#F98B26"], // 系列颜色不变
        yAxis: [
          {
            type: "value",
-            axisLine: {
-              lineStyle: {
-                color: "#999",
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                type: "dashed",
-                color: "#ececec",
-              },
-            },
+            axisLine: { lineStyle: { color: "#999" } },
+            splitLine: { lineStyle: { type: "dashed", color: "#ececec" } },
+            axisLabel: { formatter: "{value}%" }, // Y轴加百分号
          },
        ],
        grid: {
@@ -1106,23 +1142,17 @@ export default {
          {
            name: "毛利率",
            type: "bar",
-            barGap: '0%',
+            barGap: "0%", // 保持柱子紧贴
            barWidth: time.length <= 7 ? "50%" : "30%",
-            data: data.map((item) => item.profitRate),
+            data: profitRateData, // 预处理后的毛利率数据
          },
          {
            name: '净利率',
            type: "bar",
-            barGap: '0%',
+            barGap: "0%",
            barWidth: time.length <= 7 ? "50%" : "30%",
-            data: data.map(item => item.netProfitRate),
+            data: netProfitRateData, // 预处理后的净利率数据
          },
-          // {
-          //   name: '优惠金额',
-          //   type: "bar",
-          //   barWidth: time.length <= 7 ? "30%" : "20%",
-          //   data: data.map(item => item.discountAmount),
-          // }
        ],
      });
    },
--- a/src/views/order/index/components/detail.vue
+++ b/src/views/order/index/components/detail.vue
@@ -83,7 +83,6 @@
            <div class="row">
              <div>满减活动：￥{{ detail.discountActAmount || '-' }}</div>
              <div>新客立减：￥{{ detail.newCustomerDiscountAmount || '-' }}</div>
-              <!-- <div>限时折扣：￥{{ JSON.parse(detail.limitRateJson). }}</div> -->
              <div>会员折扣：￥{{ detail.vipDiscountAmount || '-' }}</div>
            </div>
            <div class="row">
@@ -159,13 +158,14 @@
              <el-table-column label="单价">
                <template v-slot="scope">￥{{ scope.row.unitPrice }}</template>
              </el-table-column>
+              <el-table-column label="出菜时间" prop="dishOutTime" width="180"></el-table-column>
+              <el-table-column label="上菜时间" prop="foodServeTime" width="180"></el-table-column>
              <el-table-column label="小计">
                <template v-slot="scope">￥{{ scope.row.payAmount }}</template>
              </el-table-column>
              <el-table-column label="实付">
                <template v-slot="scope">￥{{ scope.row.payAmount }}</template>
              </el-table-column>
-
              <el-table-column v-if="detail.status == 'unpaid'" label="可退菜数量" align="center" width="130px">
                <template v-slot="scope">
                  <el-input-number v-if="scope.row.checked" :min="0" style="width: 100px" v-model="scope.row.selNumber"
@@ -188,7 +188,7 @@
                  <span v-else>{{ scope.row.refundNum }}</span>
                </template>
              </el-table-column>
-              <el-table-column label="操作">
+              <el-table-column label="操作" fixed="right">
                <template v-slot="scope">
                  <template v-if="detail.status != 'unpaid'">
                    <el-button v-if="canTuikuan(scope.row)" link size="small" @click="tuikuan(scope.row)">