erp_fans/src/views/index.vue

<template>
  <div class="app-container ">
    <div class="stat-warp">
      <div style="margin-bottom:15px">
        <TitleInfo :content="'工作事项'"></TitleInfo>
      </div>
      <ul>
        <li class="theme1" @click="toUrl(1)">
          <div class="num">{{ toBeProcessedData.total }}</div>
          <div class="label">待审批</div>
          <div class="icon-box">
            <i class="icon iconfont icon-iconm_waixht"></i>
          </div>
        </li>
        <li class="theme2" @click="toUrl(2)">
          <div class="num">{{ allData[0].total }}</div>
          <div class="label">待报价</div>
          <div class="icon-box">
            <svg-icon :icon-class="'baojia'" className="svg-class1" />
          </div>
        </li>
        <li class="theme3" @click="toUrl(3)">
          <div class="num">{{ allData[1].total }}</div>
          <div class="label">待投产</div>
          <div class="icon-box">
            <svg-icon :icon-class="'touchang'" className="svg-class" />
          </div>
        </li>
        <li class="theme4" @click="toUrl(4)">
          <div class="num">{{ allData[2].total }}</div>
          <div class="label">待入库</div>
          <div class="icon-box">
            <svg-icon :icon-class="'ruku'" className="svg-class1" />
          </div>
        </li>
        <li class="theme5" @click="toUrl(5)">
          <div class="num">{{ allData[3].total }}</div>
          <div class="label">待出库</div>
          <div class="icon-box">
            <svg-icon :icon-class="'chuku'" className="svg-class1" />
          </div>
        </li>
        <!-- <li class="theme6" @click="toUrl(6)" v-if="useUserStore().user.companyId =='100'">
          <div class="num">{{ allData[4].total }}</div>
          <div class="label">待认领</div>
          <div class="icon-box">
            <svg-icon :icon-class="'renling'" className="svg-class1" />
          </div>
        </li> -->

        <li class="theme6" @click="toUrl(6)">
          <div class="num">{{ allData[5].total }}</div>
          <div class="label">库存预警</div>
          <div class="icon-box">
            <svg-icon :icon-class="'kucun'" className="svg-class1" />
          </div>
        </li>

      </ul>
      <div class="table-card">
        <el-card style="width:32%">
          <TitleInfo :content="'待审批'"></TitleInfo>
          <el-table :data="toBeProcessedData.rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="title" label="流程标题" />
            <el-table-column label="操作" width="60" align="right">
              <template #default="{row,$index}">
                <div style="width:100%">
                  <el-button type="primary" link style="font-size:12px" @click="pushProcessApproval(row)">办理</el-button>
                </div>
              </template>
            </el-table-column>

          </el-table>

        </el-card>
        <el-card style="width:32%">
          <TitleInfo :content="'待报价'"></TitleInfo>
          <el-table :data="allData[0].rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="code" label="报价单号">
              <template #default="{row,$index}">
                <div style="width:100%">
                  <span class="el-click" @click="handleOpenDetail(row)">{{row.code}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="报价金额" width="110" />
          </el-table>

        </el-card>
        <el-card style="width:32%">
          <TitleInfo :content="'待投产'"></TitleInfo>
          <el-table :data="allData[1].rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="code" label="订单号">
              <template #default="{row,$index}">
                <div style="width:100%">
                  <span class="el-click" @click="lookDetails(row)">{{row.code}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="deliveryPeriod" label="交期" width="150" />
          </el-table>

        </el-card>
      </div>

      <div class="table-card ">
        <el-card style="width:32%">
          <TitleInfo :content="'待入库'"></TitleInfo>
          <el-table :data="allData[2].rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="quantity" label="数量" width="100" />
          </el-table>

        </el-card>
        <el-card style="width:32%">
          <TitleInfo :content="'待出库'"></TitleInfo>
          <el-table :data="allData[3].rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="quantity" label="数量" width="100" />
          </el-table>

        </el-card>
        <!-- <el-card style="width:32%" v-if="useUserStore().user.companyId =='100'">
          <TitleInfo :content="'待认领'"></TitleInfo>
          <el-table :data="allData[4].rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="accountManagementName" label="账户名称" />
            <el-table-column prop="amount" label="到账金额" width="100" />
            <el-table-column prop="transactionTime" label="到账时间" width="150" />
          </el-table>

        </el-card> -->
        <el-card style="width:32%">
          <TitleInfo :content="'库存预警'"></TitleInfo>
          <el-table :data="allData[5].rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="productCode" label="产品编码" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="stockThreshold" label="安全库存" width="100" />
            <el-table-column prop="quantity" label="当前库存" width="100" />
          </el-table>
        </el-card>
      </div>
    </div>
    <div class="table-warp">
      <div style="margin-bottom:15px">
        <TitleInfo :content="'监控告警'"></TitleInfo>
      </div>
      <el-card style="margin-bottom:20px">
        <TitleInfo :content="'逾期生产订单'+` (${allData[6].total})`"></TitleInfo>
        <el-table :data="allData[6].rows" style="width: 100%" :height="tableHeightOne">
          <el-table-column prop="code" label="订单号">
            <template #default="{row,$index}">
              <div style="width:100%">
                <span class="el-click" @click="lookDetails(row)">{{row.code}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="deliveryPeriod" label="交期" width="150" />
        </el-table>
      </el-card>
      <el-card style="margin-bottom:20px">
        <TitleInfo :content="'报损情况（近30天）'"></TitleInfo>
        <div class="baosun">
          <div class="theme2 q" @click="toUrl(7)">
            <span class="label">报损</span>
            <span class="num">{{ reportLossesData.replenishSumQuantity }}</span>
          </div>
          <div class="theme3 q" @click="toUrl(7)">
            <span class="label">丢件</span>
            <span class="num">{{ reportLossesData.lossSumQuantity }}</span>
          </div>
        </div>
      </el-card>
      <el-card>
        <TitleInfo :content="'设备运行情况'"></TitleInfo>
        <div style="display:flex;align-items:center">
          <div style="width:100px;font-size:12px">
            设备名称：设备1 <br><br> 当天标刻数量：10<br><br>在线工作时长（分钟）：1000
          </div>
          <div style="height:190px;width:calc(100% - 100px)" ref="pie_1"></div>
        </div>
      </el-card>
    </div>

    <el-dialog v-if="detailDialog" v-model="detailDialog" title="报价详情" width="90%" append-to-body>
      <PriceSheetDetailList :rowData="detailRowData" dataType="1" @changeLeftData="changeLeftData"></PriceSheetDetailList>
    </el-dialog>

    <el-dialog :title="'查看'" v-model="dialogVisible" width="90%" destroy-on-close>

      <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-change="handleTabChange">
        <el-tab-pane label="订单详情" name="1">
        </el-tab-pane>
        <el-tab-pane label="物料结存" name="2">
        </el-tab-pane>
      </el-tabs>

      <byForm :formConfig="formConfig" :formOption="formOptionOne" v-model="formData.orderData" ref="formDom">
        <template #commodity>
          <div style="width: 100%">
            <el-table :data="formData.orderData.contractProductList" style="width: 100%; ">
              <el-table-column type="expand" width="50" align="center">
                <template #default="scope">
                  <div style="padding-left:50px">
                    <div style="margin-bottom:10px;">
                      <TitleInfo content='BOM单:'></TitleInfo>
                    </div>
                    <el-table :data="scope.row.contractProductBomList" style="width: 100%;" border class="bom-table">
                      <el-table-column label="图片" width="80">
                        <template #default="{ row }">
                          <div v-if="row.fileUrl">
                            <img :src="row.fileUrl" class="pic" @click="onPicture(row.fileUrl)" />
                          </div>
                          <div v-else></div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="productCode" label="物料编码" width="190" />
                      <el-table-column prop="productName" label="物料名称" min-width="200" />
                      <el-table-column label="规格尺寸 (cm)" width="150">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            {{row.productLength}} * {{row.productWidth}} * {{row.productHeight}}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="quantity" label="数量" width="110" />
                      <el-table-column prop="remark" label="备注" width="180" />
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="商品图片" width="80">
                <template #default="{ row }">
                  <div v-if="row.fileUrl">
                    <img :src="row.fileUrl" class="pic" @click="onPicture(row.fileUrl)" />
                  </div>
                  <div v-else></div>
                </template>
              </el-table-column>
              <el-table-column prop="productCnName" label="商品名称" min-width="130" />
              <el-table-column prop="productCode" label="商品编码" width="130" />
              <el-table-column label="规格尺寸 (cm)" width="150">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    {{row.productLength}} * {{row.productWidth}} * {{row.productHeight}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="productColor" label="颜色" width="100" />
              <!-- <el-table-column label="设计图稿" width="80">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <el-upload :action="uploadUrl" accept=".gif, .jpeg, .jpg, .png" :show-file-list="false" :data="uploadData"
                               :before-upload="(file)=>handleBeforeUpload(file,$index)" :on-success="()=>handleSuccess($index)">
                      <div v-loading="row.imgLoading">
                        <img v-if="row.imageUrl" :src="row.imageUrl" class="pic" />
                       
                      </div>
                    </el-upload>
                  </div>
                </template>
              </el-table-column> -->
              <el-table-column label="生产plt文件" width="140">
                <template #default="{ row, $index }">
                  <div style="width:100%">
                    <div v-if="row.isShowProductFile &&row.fileListOne && row.fileListOne.length > 0">
                      <span class="el-click" @click="onPicture(row.fileListOne[0].fileUrl)">{{row.fileListOne[0].fileName}}</span>
                    </div>
                    <div v-else>
                      <div v-if="row.prodFileList && row.prodFileList.length > 0">
                        <span class="el-click" @click="onPicture(row.prodFileList[0].fileUrl)">{{row.prodFileList[0].fileName}} (定制)</span>
                      </div>
                    </div>
                  </div>

                </template>
              </el-table-column>
              <el-table-column label="数量" width="150" prop="quantity" />
              <el-table-column label="备注" min-width="200" prop="remark" />
            </el-table>
          </div>
        </template>

        <template #commodityOne>
          <div style="width: 100%">
            <el-table :data="formData.orderData.materialList" style="width: 100%; ">
              <el-table-column label="物料图片" width="80">
                <template #default="{ row }">
                  <div v-if="row.fileUrl">
                    <img :src="row.fileUrl" class="pic" @click="onPicture(row.fileUrl)" />
                  </div>
                  <div v-else></div>
                </template>
              </el-table-column>
              <el-table-column prop="materialCode" label="物料编码" width="200" />
              <el-table-column prop="materialName" label="物料名称" min-width="150" />
              <el-table-column prop="quantity" label="应发数量" width="150" />
              <el-table-column prop="unclaimedQuantity" label="未领数量" width="150" />
              <el-table-column prop="receivedQuantity" label="已领数量" width="150" />
              <el-table-column prop="workshopInventoryQuantity" label="车间结存" width="150">
                <template #default="{ row, $index }">
                  <div style="color:red">
                    {{row.workshopInventoryQuantity}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="purchaseTransitQuantity" label="采购在途" width="100" />
            </el-table>
          </div>
        </template>
      </byForm>
      <template #footer>
        <el-button @click="dialogVisible = false" size="defualt">取 消</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup name="Index">
import { createApp, onMounted, ref } from "vue";
import byTableDemo from "../components/byTable/demo";
import html2canvas from "html2canvas";
import JsPDF from "jspdf";
import * as echarts from "echarts";
import PriceSheetDetailList from "@/views/EHSD/saleContract/PriceSheetDetailList";
import byForm from "@/components/byForm/index";

const { proxy } = getCurrentInstance();
const tableHeight = ref(0);
const tableHeightOne = ref(0);
const getTableHeight = () => {
  tableHeight.value = (window.innerHeight - 390) / 2;
  tableHeightOne.value = window.innerHeight - 610;
};
getTableHeight();
window.addEventListener("resize", () => {
  getTableHeight();
});

function goTarget(url) {
  window.open(url, "__blank");
}

const toBeProcessedData = ref({
  total: 0,
  rows: [],
});

const allData = ref({
  0: {
    total: 0,
    rows: [],
  },
  1: { total: 0, rows: [] },
  2: { total: 0, rows: [] },
  3: { total: 0, rows: [] },
  4: { total: 0, rows: [] },
  5: { total: 0, rows: [] },
  6: { total: 0, rows: [] },
});

const reportLossesData = ref({});
const pushProcessApproval = (row) => {
  if (row.status != 1 && row.status != 0) {
    proxy.$router.push({
      path: "/platform_manage/process/processApproval",
      query: {
        flowKey: row.flowKey,
        id: row.id,
        processType: 20,
        version: row.version,
        businessId: row.businessId,
        submitType: "10",
      },
    });
    return;
  }
  proxy.post("flowExample/getApprovalRecord", { id: row.id }).then((res) => {
    if (res.recordList.length > 0) {
      let data = res.recordList.filter((item) => item.status === 2);
      let nodeType = 0;
      if (data && data.length > 0) {
        nodeType = data[0].nodeType;
      }
      proxy.$router.push({
        path: "/platform_manage/process/processApproval",
        query: {
          flowKey: row.flowKey,
          id: row.id,
          processType: nodeType == 1 ? 30 : 10,
          businessId: row.businessId,
        },
      });
    }
  });
};

const pushProcessApprovalOne = (row) => {
  proxy.$router.push({
    path: "/platform_manage/process/processApproval",
    query: {
      flowKey: row.flowKey,
      id: row.id,
      processType: 20,
      version: row.version,
      businessId: row.businessId,
      submitType: "10",
    },
  });
  return;
};
const getData = () => {
  proxy
    .post("/flowExample/getToBeProcessedPage", {
      pageNum: 1,
      pageSize: 5,
    })
    .then((res) => {
      toBeProcessedData.value = res;
    });
  // 待报价
  proxy
    .post("/saleQuotation/page", {
      pageNum: 1,
      pageSize: 5,
      isEstimate: proxy.useUserStore().user.companyId == "100" ? "" : "1",
    })
    .then((res) => {
      allData.value[0] = res;
    });

  // 待投产
  proxy
    .post("/produceOrder/page", {
      pageNum: 1,
      pageSize: 5,
      isProduce: "0",
    })
    .then((res) => {
      allData.value[1] = res;
    });

  // 待入库
  proxy
    .post("/stockWaitDetails/page", {
      pageNum: 1,
      pageSize: 5,
      type: 1,
    })
    .then((res) => {
      allData.value[2] = res;
    });
  // 待出库
  proxy
    .post("/stockWaitDetails/page", {
      pageNum: 1,
      pageSize: 5,
      type: 2,
    })
    .then((res) => {
      allData.value[3] = res;
    });

  // 待认领
  proxy
    .post("/sale/accountRunningWater/page", {
      pageNum: 1,
      pageSize: 5,
      isClaim: "0,2",
      dataType: "1",
    })
    .then((res) => {
      allData.value[4] = res;
    });

  // 库存预警
  proxy
    .post("/stock/stockWarningPage", {
      pageNum: 1,
      pageSize: 5,
    })
    .then((res) => {
      allData.value[5] = res;
    });

  // 逾期生产订单
  proxy
    .post("/produceOrder/page", {
      pageNum: 1,
      pageSize: 10,
      isOverdue: "1",
    })
    .then((res) => {
      allData.value[6] = res;
    });
  // 补单统计
  proxy.post("/reportLossesDetails/lossesStatistics").then((res) => {
    reportLossesData.value = res;
  });
};
const toUrl = (att) => {
  //获取name为name的路由的基础信息
  // const route = proxy.$router.resolve({ name: name, params: {} });

  let pageObj = {
    1: "Backlog",
    2:
      proxy.useUserStore().user.companyId == "100"
        ? "PriceSheetEHSD"
        : "PriceSheetEstimate",
    3: "ProductionOrder",
    4: "WaitingForStorage",
    5: "WaitingForDelivery",
    6: "Claim",
    7: "InventoryInquiry",
  };

  proxy.$router.push({
    name: pageObj[att],
  });
};
getData();
// ​
const getOption = () => {
  return {
    title: {
      show: true,
      text: "",
      bottom: "0%",
      left: "center",
      textStyle: {
        color: "#fff",
        fontSize: 12,
        fontWeight: 400,
      },
    },
    tooltip: {
      trigger: "item",
    },
    grid: {
      show: false,
      bottom: 0,
    },
    // legend: {
    //   top: "0%",
    //   left: "center",
    // },
    series: [
      {
        name: "设备1",
        type: "pie",
        // center: ["50%", "50%"],
        radius: ["45%", "75%"],
        top: "0%",
        bottom: "0%",
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: "bold",
            color: "#fff",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 1000,
            name: "工作时长",
            itemStyle: {
              color: "#F9CB19",
            },
          },
          {
            value: 440,
            name: "",
            itemStyle: {
              color: "#268EFF",
            },
          },
        ],
      },
    ],
  };
};

const pie_1 = ref(null);
let pie_1Chart = null;
let option1 = {};
onMounted(() => {
  option1 = getOption();
  pie_1Chart = echarts.init(pie_1.value);
  window.addEventListener("resize", () => {
    pie_1Chart.resize();
  });
  pie_1Chart.setOption(option1);
  pie_1Chart.resize();
});

const detailDialog = ref(false);
const detailRowData = ref({});
const handleOpenDetail = (item) => {
  detailRowData.value = item;
  detailDialog.value = true;
};

const handleOpenOrderDetail = (row) => {
  proxy.$router.push({
    path: "/platform_manage/process/processApproval",
    query: {
      flowKey: "contract_flow",
      id: row.flowId || "",
      processType: 20,
      businessId: row.contractId,
    },
  });
};
const formData = reactive({
  data: {},
  orderData: {},
});
const formOptionOne = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  disabled: true,
});
const dialogVisible = ref(false);
const formDom = ref(null);
const formConfig = computed(() => {
  return [
    {
      type: "title1",
      title: "基本信息",
      isShow: activeName.value == "1",
    },
    {
      type: "text",
      prop: "code",
      label: "合同号：",
      disabled: true,
      isShow: formData.orderData.code && activeName.value == "1" ? true : false,
    },
    {
      type: "title1",
      title: "商品信息",
      haveLine: true,
      isShow: activeName.value == "1",
    },
    {
      type: "slot",
      slotName: "commodity",
      label: "",
      isShow: activeName.value == "1",
    },
    {
      type: "title1",
      title: "物料结存",
      haveLine: false,
      isShow: activeName.value == "2",
    },
    {
      type: "slot",
      slotName: "commodityOne",
      label: "",
      isShow: activeName.value == "2",
    },
  ];
});
const getFileData = () => {
  let ids = [];
  formData.orderData.contractProductList.map((x) => {
    // ids.push(x.productId);
    x.contractProductBomList.map((y) => {
      ids.push(y.materialId);
    });
  });
  ids = Array.from(new Set(ids));
  proxy
    .post("/fileInfo/getList", {
      businessIdList: ids,
    })
    .then((fileObj) => {
      formData.orderData.contractProductList.map((x) => {
        // if (fileObj[x.productId] && fileObj[x.productId].length > 0) {
        //   x.fileUrl = fileObj[x.productId][0].fileUrl;
        // }
        x.contractProductBomList.map((y) => {
          y.fileList = fileObj[y.materialId] || [];
          if (y.fileList && y.fileList.length > 0) {
            y.fileUrl = y.fileList[0].fileUrl;
          }
        });
      });
    });
};

const activeName = ref("1");
const lookDetails = (item) => {
  activeName.value = "1";
  proxy.post("/contract/detail", { id: item.contractId }).then(async (res) => {
    formData.orderData = res;
    dialogVisible.value = true;
    proxy
      .post("/produceOrder/materialBalanceList", { id: item.id })
      .then((sonRes) => {
        formData.orderData.materialList = sonRes;
        if (sonRes && sonRes.length > 0) {
          let ids = sonRes.map((x) => x.materialId);
          proxy.getFileData({
            businessIdList: ids,
            data: formData.orderData.materialList,
            att: "materialId",
            businessType: "0",
            fileAtt: "fileList",
            filePathAtt: "fileUrl",
          });
        }
      });
    if (
      formData.orderData.contractProductList &&
      formData.orderData.contractProductList.length > 0
    ) {
      getFileData();
      let ids = formData.orderData.contractProductList.map((x) => x.id);
      let productIds = formData.orderData.contractProductList.map(
        (x) => x.productId
      );

      const productAllFile = await proxy.getFileData({
        businessIdList: productIds,
        getAll: true,
      });
      for (let i = 0; i < formData.orderData.contractProductList.length; i++) {
        const ele = formData.orderData.contractProductList[i];
        for (const key in productAllFile) {
          if (
            ele.productId == key &&
            productAllFile[ele.productId] &&
            productAllFile[ele.productId].length > 0
          ) {
            ele.productFile = productAllFile[ele.productId].filter(
              (x) => x.businessType == "0"
            );
            if (ele.productFile && ele.productFile.length > 0) {
              ele.fileUrl = ele.productFile[0].fileUrl;
            }
            break;
          }
        }
      }

      proxy
        .getFileData({
          businessIdList: ids,
          getAll: true,
        })
        .then((fileObj) => {
          if (fileObj && Object.keys(fileObj).length > 0) {
            for (
              let i = 0;
              i < formData.orderData.contractProductList.length;
              i++
            ) {
              const ele = formData.orderData.contractProductList[i];
              for (const key in fileObj) {
                if (
                  ele.id == key &&
                  fileObj[ele.id] &&
                  fileObj[ele.id].length > 0
                ) {
                  let imageUrlList = fileObj[ele.id].filter(
                    (x) => x.businessType == "0"
                  );
                  if (imageUrlList && imageUrlList.length > 0) {
                    ele.imageUrl = imageUrlList[0].fileUrl;
                  }
                  ele.prodFileList = fileObj[ele.id]
                    .filter((x) => x.businessType == "1")
                    .map((x) => ({ ...x, name: x.fileName, url: x.fileUrl }));
                  if (ele.prodFileList && ele.prodFileList.length > 0) {
                    ele.isShowProductFile = false;
                  } else {
                    ele.isShowProductFile = true;
                    if (productAllFile[ele.productId]) {
                      ele.fileListOne = productAllFile[ele.productId].filter(
                        (x) => x.businessType == "2"
                      );
                    }
                  }
                }
              }
            }
          } else {
            for (
              let i = 0;
              i < formData.orderData.contractProductList.length;
              i++
            ) {
              const ele = formData.orderData.contractProductList[i];
              ele.isShowProductFile = true;
              for (const key in productAllFile) {
                if (
                  ele.productId == key &&
                  productAllFile[ele.productId] &&
                  productAllFile[ele.productId].length > 0
                ) {
                  ele.fileListOne = productAllFile[ele.productId].filter(
                    (x) => x.businessType == "2"
                  );
                  break;
                }
              }
            }
          }
        });
    }
  });
};
</script>
<style scoped lang="scss">
.app-container {
  display: flex;
  width: 100vw;
  padding: 10px;
  font-size: 14px !important;
  // height: 100%;
  .announcement {
    padding: 0;
    margin: 0;
    li {
      list-style: none;
      border-radius: 2px;
      padding: 14px 20px;
      background: #eeeeee;
      margin-bottom: 10px;
      font-size: 14px;
      cursor: pointer;
      .time {
        color: #999;
      }
      .content {
        margin-top: 10px;
        color: #333;
      }
    }
    li:hover {
      background: #eff6ff;
    }
  }
  .table-warp {
    width: 400px;
    //页面全屏，占据剩下的位置
    height: calc(100vh - 120px);
    background: #fff;
    padding: 10px;
    // border-radius: 5px;
    .baosun {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      .q {
        padding: 10px;
        min-width: 150px;
        display: flex;
        cursor: pointer;
        justify-content: space-between;
        border-radius: 10px;
        .num {
          font-size: 20px;
          font-weight: 700;
        }
      }
      .theme2 {
        background: linear-gradient(180deg, #eae8fb 0%, #ded9ff 100%);
      }
      //#FFF1E1 #FF9315
      .theme3 {
        background: #fff1e1;
      }
    }

    .card {
      height: calc(50% - 10px);
      background: #fff;
      float: left;
      border-radius: 5px;
      padding: 20px;
      overflow-y: auto;
    }
    .odd {
      width: calc(66.5% - 10px);
    }
    .even {
      margin-left: 10px;
      width: 33.5%;
    }
    // .card:nth-child(2n + 1) {
    //   margin-right: 20px;
    // }
    .card:nth-child(1) {
      margin-bottom: 10px;
    }
    .card:nth-child(2) {
      margin-bottom: 10px;
    }
  }
  .stat-warp {
    width: calc(100% - 400px - 10px);
    height: calc(100vh - 120px);
    margin-right: 10px;
    // margin-bottom: 10px;
    background: #fff;
    padding: 10px;
    // padding: 20px;
    // overflow: hidden;
    // position: relative;
    // border-radius: 5px;

    .title {
      height: 60px;
      select {
        height: 60px;
        border: none;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        font-size: 14px;
        font-weight: bold;
        background: url("@/assets/images/sanjiao.png") no-repeat right center;
        padding-right: 20px;
      }
      div {
        height: 60px;
        font-size: 14px;
        font-weight: bold;
        line-height: 60px;
      }
    }
    ul {
      padding: 0;
      // overflow: hidden;
      margin: 0;
      display: flex;
      width: 100%;
      flex-wrap: nowrap;
      overflow: hidden;
      justify-content: space-between;
      li {
        flex: 1;
        list-style: none;
        min-width: 150px;
        box-sizing: border-box;
        margin-right: 20px;
        background: linear-gradient(360deg, #c7e3fe 0%, #dfecff 100%);
        // float: left;
        // overflow: hidden;
        padding: 10px;
        color: #333333;
        position: relative;
        border-radius: 10px;
        cursor: pointer;
        .label {
          font-size: 14px;
          margin-top: 10px;
        }
        .label::before {
          // width: 10px;
          // height: 10px;
          // content: '';
          // border-radius: 50%;
          // background: #0084ff;
          // display: inline-block;
          // margin-right: 10px;
        }
        .num {
          font-size: 24px;
          font-weight: bold;
        }
        .icon-box {
          position: absolute;
          height: 40px;
          width: 40px;
          right: 20px;
          top: 20px;
          background: #fff;
          border-radius: 10px;
          text-align: center;
          line-height: 40px;
          i {
            font-size: 20px;
            color: #0084ff;
          }
        }
      }
      //#F5F3FF #9E64ED
      .theme2 {
        background: linear-gradient(180deg, #eae8fb 0%, #ded9ff 100%);
        .label::before {
          background: #7566f0;
        }
        .icon-box i {
          color: #7566f0;
        }
      }
      //#FFF1E1 #FF9315
      .theme3 {
        background: #fff1e1;
        .label::before {
          background: #ff9315;
        }
        .icon-box i {
          color: #ff9315;
        }
      }
      //#E2FBE8 #39C55A
      .theme4 {
        background: #e2fbe8;
        .label::before {
          background: #39c55a;
        }
      }
      .theme5 {
        background: #ffebe9;
        .label::before {
          background: #f94539;
        }
      }
      .theme6 {
        background: #e4f9f9;
        .label::before {
          background: #53cbcb;
        }
      }
      .multi-data {
        .label::before {
          display: none;
        }
        .label {
          font-size: 14px;
          font-weight: bold;
          color: #333;
          margin-bottom: 8px;
        }
        .num-warp {
          overflow: hidden;
          .num-box {
            float: left;
            min-width: 80px;
            margin-right: 20px;
            .num-small {
              font-size: 16px;
              font-weight: bold;
              margin-bottom: 8px;
            }
            .label-small {
              color: #666;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  .table-card {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
}

:deep(
    .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th
  ) {
  height: auto !important;
}
.svg-class {
  font-size: 16px;
}
.svg-class1 {
  font-size: 19px;
  margin-top: 10px;
}
:deep(.el-table .cell) {
  font-size: 12px !important;
  line-height: 24px !important;
}
</style>