生成数据报告模板

package.json

@@ -24,8 +24,10 @@
     "element-plus": "2.7.6",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
+    "html2canvas": "^1.4.1",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "jspdf": "^2.5.2",
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
     "vue": "3.4.31",
@@ -35,10 +37,11 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "5.0.5",
     "sass": "1.77.5",
+    "unocss": "^0.64.1",
     "unplugin-auto-import": "0.17.6",
+    "unplugin-vue-setup-extend-plus": "1.0.1",
     "vite": "5.3.2",
     "vite-plugin-compression": "0.5.1",
-    "vite-plugin-svg-icons": "2.0.1",
-    "unplugin-vue-setup-extend-plus": "1.0.1"
+    "vite-plugin-svg-icons": "2.0.1"
   }
 }

src/api/basicData/xcrEBaseinfo.js

@@ -0,0 +1,48 @@
+import request from '@/utils/request'
+
+// 查询企业基本信息列表
+export function listBaseinfo(query) {
+  return request({
+    url: '/basicData/xcrEBaseinfo/findByPage',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询企业基本信息详细
+export function getBaseinfo(xhCodeId) {
+  return request({
+    url: '/basicData/xcrEBaseinfo/' + xhCodeId,
+    method: 'get'
+  })
+}
+
+// 新增企业基本信息
+export function addBaseinfo(data) {
+  return request({
+    url: '/basicData/xcrEBaseinfo',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改企业基本信息
+export function updateBaseinfo(data) {
+  return request({
+    url: '/basicData/xcrEBaseinfo',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除企业基本信息
+export function delBaseinfo(xhCodeId) {
+  return request({
+    url: '/basicData/xcrEBaseinfo/deleteAll',
+    method: 'delete'
+  })
+}
+// 批量删除行政许可
+export function delBaseinfoBatch(ids) {
+  return request.post('/basicData/xcrEBaseinfo/delete',ids)
+}

src/components/CreditReport/index.vue

@@ -0,0 +1,146 @@
+<script setup>
+import html2canvas from 'html2canvas';
+import { jsPDF } from 'jspdf';
+
+const printContent = async () => {
+  const elements = document.querySelectorAll('.page');
+
+  // 创建 jsPDF 实例
+  const pdf = new jsPDF('p', 'mm', 'a4');
+
+  const pdfWidth = pdf.internal.pageSize.getWidth();
+  const pdfHeight = pdf.internal.pageSize.getHeight();
+  for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+
+    // 使用 html2canvas 将 HTML 元素截图
+    const canvas = await html2canvas(element, {
+      scale: 2, // 提高截图质量
+    });
+
+    // 将 canvas 转换为图片数据 URL
+    const imgData = canvas.toDataURL('image/png');
+    // 计算图片在 PDF 中的位置
+    const imgProps = pdf.getImageProperties(imgData);
+    const pageHeight = (imgProps.height * pdfWidth) / imgProps.width;
+    // 添加图片到 PDF
+    if (i > 0) {
+      pdf.addPage();
+    }
+    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pageHeight);
+    if(canvas.height/2 >1188){
+      //如果高度超过一页，则分页
+      //将canvas对象分为(element.scrollHeight / 1188)份
+      //每份高度1188
+      //再转成图片 顺序添加进pdf中 每份一页
+      for (let j = 1; j <= element.scrollHeight / 1188; j++) {
+        //截取图片
+        const canvas2 = await html2canvas(element, {
+          scale: 2, // 提高截图质量
+        });
+        // console.log(canvas2);
+        //将截取的图片转成图片数据 URL
+        const imgData2 = canvas2.toDataURL('image/png');
+        //添加图片到 PDF
+        pdf.addPage();
+        console.log(pageHeight);
+        pdf.addImage(imgData2, 'PNG', 0, -297*j, pdfWidth, pageHeight);
+      }
+    }
+  }
+
+  // 保存 PDF
+  pdf.save('report.pdf');
+}
+
+const tableData = [
+  {
+    position: '法定代表人',
+    name: '性与暴力',
+    phone: '12345678910',
+  },
+  {
+    position: '董事长',
+    name: '性与暴力',
+    phone: '12345678910',
+  },
+  {
+    position: '总经理',
+    name: '性与暴力',
+    phone: '12345678910',
+  },
+  {
+    position: '财务负责人',
+    name: '性与暴力',
+    phone: '12345678910',
+  },
+  {
+    position: '信用专干',
+    name: '性与暴力',
+    phone: '12345678910',
+  },
+]
+const columnData = [
+  {
+    label: '序号',
+    prop: 'id',
+    width: '50'
+  },
+  {
+    label: '职务',
+    prop: 'position',
+    width: '100'
+  },
+  {
+    label: '姓名',
+    prop: 'name',
+    width: '100'
+  },
+  {
+    label: '联系电话',
+    prop: 'phone',
+    width: '150'
+  }
+]
+</script>
+
+<template>
+  <el-row class="report-container w-840px w-100% h-1188px overflow-auto">
+    <el-col :span="24" class="page w-840px h-1188px border p-20px pb-0  font-songti  border-black border-solid border-7px justify-between">
+      <div class="w-full text-center h-150px line-height-150px mt-150px tracking-widest text-black font-black text-44px">性与暴力企业综合信用报告</div>
+      <div class="w-full text-center h-150px line-height-150px mt-30px tracking-wider font-500 text-black text-30px">湖南性与暴力有限公司</div>
+      <div class="w-full text-center h-100px mt-100px tracking-wider font-900 text-24px text-black">
+        <div class="line-height-50px text-left pl-250px">企业信用等级: ZZZ级</div>
+        <div class="line-height-50px text-left pl-250px">信用评分情况: 0分</div>
+      </div>
+      <div class="indent-2xl underline w-full mt-300px px-30px text-18px">
+        标注:性与暴力性与暴力性与暴力性与暴力性与暴力
+        性与暴力性与暴力性与暴力性与暴力性与暴力性与暴力
+        性与暴力性与暴力性与暴力性与暴力性与暴力性与暴力
+        性与暴力性与暴力性与暴力性与暴力性与暴力性与暴力
+        性与暴力性与暴力性与暴力性与暴力性与暴力性与暴力
+      </div>
+    </el-col>
+    <el-col :span="24" class="page w-840px text-black p-20px tracking-widest font-songti">
+      <div v-for="q in 5"><!--测试-->
+        <div class="text-center text-30px mt-30px font-800">一、企业基本信息{{q}}</div>
+        <div class="w-80% mx-a line-height-50px text-24px text-black">1、联系信息</div>
+        <div class="w-80% mx-a line-height-24px text-16px">1.1&nbsp;实际经营地址：<span class="underline">麓谷诈骗园区</span></div>
+        <div class="w-80% mx-a line-height-24px text-16px">1.2&nbsp;企业网址：<span class="underline">www.zhapian.com</span>&nbsp;微信公众号：<span class="underline">割肾之家</span></div>
+        <div class="w-80% mx-a line-height-24px text-16px">1.3&nbsp;主要人物联系信息</div>
+        <div class="w-80% mx-a grid grid-cols-4 border-black border-solid border-1px">
+          <div v-for="(item, index) in columnData" :key="index" class="border-black border-solid border-1px text-center bg-gray">{{item.label}}</div>
+        </div>
+        <div class="w-80% mx-a">
+          <div v-for="(item, index) in tableData" :key="index" class="grid grid-cols-4 border-black border-solid border-1px text-center">
+            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px">{{index + 1}}</div>
+            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px">{{item.position}}</div>
+            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px">{{item.name}}</div>
+            <div class="border-black border-b-solid border-l-solid border-r-solid border-0.1px">{{item.phone}}</div>
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-button @click="printContent">导出 PDF</el-button>
+  </el-row>
+</template>

src/main.js

@@ -44,6 +44,8 @@ import TreeSelect from '@/components/TreeSelect'
 // 字典标签组件
 import DictTag from '@/components/DictTag'
 
+import 'virtual:uno.css'
+
 const app = createApp(App)
 
 // 全局方法挂载

src/views/basicData/xcrEBaseinfo/index.vue

@@ -0,0 +1,370 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="统一社会信用代码" prop="uniCode" label-width="200">
+        <el-input
+            v-model="queryParams.uniCode"
+            placeholder="请输入统一社会信用代码"
+            clearable
+            @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+            type="warning"
+            plain
+            icon="Download"
+            @click="handleExport"
+            :disabled="!xcrEBaseinfoList.length"
+            v-hasPermi="['basicData:xcrEBaseinfo:export']"
+        >导出
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" :data="xcrEBaseinfoList" height="650" @selection-change="handleSelectionChange">
+      <el-table-column label="统一社会信用代码" align="center" prop="uniCode" width="200"/>
+      <el-table-column label="身份证号" align="center" prop="etpsId" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="主体身份代码" align="center" prop="PRIPID" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="统一社会信用代码" align="center" prop="UNISCID" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="企业" align="center" prop="ENTNAME" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="注册号" align="center" prop="REGNO" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="市场主体类型" align="center" prop="ENTTYPE" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="市场主体类型" align="center" prop="enttypeCn" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="行业门类" align="center" prop="INDUSTRYPHY" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="行业代码" align="center" prop="INDUSTRYCO" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="成立日期" align="center" prop="ESTDATE" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.ESTDATE, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="登记机关" align="center" prop="REGORG" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="登记机关" align="center" prop="regorgCn" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="业务范围类型" align="center" prop="OPSCOTYPE" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="业务范围类型" align="center" prop="opscotypeCn" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="经营范围" align="center" prop="OPSCOPE" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="经营(驻在)期限自" align="center" prop="OPFROM" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.OPFROM, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="经营(驻在)期限至" align="center" prop="OPTO" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.OPTO, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="登记状态" align="center" prop="REGSTATE" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="登记状态" align="center" prop="regstateCn" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="住所所在行政区划" align="center" prop="DOMDISTRICT" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="住所" align="center" prop="DOM" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="注册资本(金)" align="center" prop="REGCAP" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="注册资本(金)币种" align="center" prop="REGCAPCUR" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="注册资本(金)币种" align="center" prop="regcapcurCn" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="注册资本(金)折万美元" align="center" prop="REGCAPUSD" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="实收资本" align="center" prop="RECCAP" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="实收资本折万美元" align="center" prop="RECCAPUSD" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="国别(地区)" align="center" prop="COUNTRY" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="从业人员/农专成员总数" align="center" prop="EMPNUM" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="是否城镇" align="center" prop="TOWN" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="法定代表人" align="center" prop="NAME" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="统计企业类型" align="center" prop="REPORTTYPE" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="核准日期" align="center" prop="APPRDATE" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.APPRDATE, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="数据更新时间" align="center" prop="sExtDatatime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.sExtDatatime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="" align="center" prop="sExtTimestamp" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.sExtTimestamp, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="" align="center" prop="iTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.iTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="" align="center" prop="sExtFromnode" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="" align="center" prop="modFlag" :show-overflow-tooltip='true' width="150"/>
+      <el-table-column label="" align="center" prop="upTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.upTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div style="position: fixed;bottom: 20px;right: 10px;">
+      <pagination
+          v-show="total>0"
+          :total="total"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+      />
+    </div>
+
+    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
+      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
+                 :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
+                 :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+        <el-icon class="el-icon--upload">
+          <upload-filled/>
+        </el-icon>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <template #tip>
+          <div class="el-upload__tip text-center">
+            <span>仅允许导入xls、xlsx格式文件。</span>
+          </div>
+        </template>
+      </el-upload>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          <el-button @click="upload.open = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Baseinfo">
+import {
+  listBaseinfo,
+  getBaseinfo,
+  delBaseinfo,
+  delBaseinfoBatch
+} from "@/api/basicData/xcrEBaseinfo";
+import {reactive, ref, toRaw} from "vue";
+import {getToken} from "@/utils/auth";
+import {ElMessage} from "element-plus";
+import {likeQueryMethod} from "@/utils/likeQueryMethod";
+
+const {proxy} = getCurrentInstance();
+
+const xcrEBaseinfoList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const upload = reactive({
+  // 是否显示弹出层（用户导入）
+  open: false,
+  // 弹出层标题（用户导入）
+  title: '',
+  // 是否禁用上传
+  isUploading: false,
+  // 设置上传的请求头部
+  headers: {Authorization: getToken()},
+  // 上传的地址
+  url: import.meta.env.VITE_APP_BASE_API + '/xcrEBaseinfo/importData'
+})
+const handleFileSuccess = (e) => {
+  if (e.code == 200) {
+    ElMessage({
+      type: "success",
+      message: e.msg
+    })
+    getList()
+    proxy.$refs['uploadRef']?.clearFiles()
+  } else {
+    ElMessage({
+      type: "error",
+      message: e.msg
+    })
+    proxy.$refs['uploadRef']?.clearFiles()
+  }
+}
+
+function submitFileForm() {
+  proxy.$refs['uploadRef']?.submit();
+  upload.open = false;
+}
+
+function handleImport() {
+  upload.open = true
+}
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 20,
+    etpsId: null,
+    PRIPID: null,
+    UNISCID: null,
+    ENTNAME: null,
+    REGNO: null,
+    ENTTYPE: null,
+    enttypeCn: null,
+    INDUSTRYPHY: null,
+    INDUSTRYCO: null,
+    ESTDATE: null,
+    REGORG: null,
+    regorgCn: null,
+    OPSCOTYPE: null,
+    opscotypeCn: null,
+    OPSCOPE: null,
+    OPFROM: null,
+    OPTO: null,
+    REGSTATE: null,
+    regstateCn: null,
+    DOMDISTRICT: null,
+    DOM: null,
+    REGCAP: null,
+    REGCAPCUR: null,
+    regcapcurCn: null,
+    REGCAPUSD: null,
+    RECCAP: null,
+    RECCAPUSD: null,
+    COUNTRY: null,
+    EMPNUM: null,
+    TOWN: null,
+    NAME: null,
+    REPORTTYPE: null,
+    APPRDATE: null,
+    sExtDatatime: null,
+    sExtTimestamp: null,
+    iTime: null,
+    sExtFromnode: null,
+    modFlag: null,
+    upTime: null,
+    uniCode: ''
+  },
+  rules: {
+    iTime: [
+      {
+        required: true, message: "不能为空", trigger: "blur" }
+    ],
+  }
+});
+
+const {queryParams, form, rules} = toRefs(data);
+
+/** 查询企业基本信息列表 */
+function getList() {
+  loading.value = true;
+  let toServerObj = likeQueryMethod('uni_code', queryParams.value.uniCode, queryParams.value.pageNum, queryParams.value.pageSize);
+  listBaseinfo(toServerObj).then(response => {
+    xcrEBaseinfoList.value = response.records;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+
+// 表单重置
+function reset() {
+  form.value = {
+    xhCodeId: null,
+    etpsId: null,
+    PRIPID: null,
+    UNISCID: null,
+    ENTNAME: null,
+    REGNO: null,
+    ENTTYPE: null,
+    enttypeCn: null,
+    INDUSTRYPHY: null,
+    INDUSTRYCO: null,
+    ESTDATE: null,
+    REGORG: null,
+    regorgCn: null,
+    OPSCOTYPE: null,
+    opscotypeCn: null,
+    OPSCOPE: null,
+    OPFROM: null,
+    OPTO: null,
+    REGSTATE: null,
+    regstateCn: null,
+    DOMDISTRICT: null,
+    DOM: null,
+    REGCAP: null,
+    REGCAPCUR: null,
+    regcapcurCn: null,
+    REGCAPUSD: null,
+    RECCAP: null,
+    RECCAPUSD: null,
+    COUNTRY: null,
+    EMPNUM: null,
+    TOWN: null,
+    NAME: null,
+    REPORTTYPE: null,
+    APPRDATE: null,
+    sExtDatatime: null,
+    sExtTimestamp: null,
+    iTime: null,
+    sExtFromnode: null,
+    modFlag: null,
+    upTime: null,
+    uniCode: ''
+  };
+  proxy.resetForm("xcrEBaseinfoRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.xhCodeId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+
+/** 删除按钮操作 */
+async function handleDelete(row) {
+  const res = await delBaseinfo();
+  if(res.code == 200){
+    ElMessage({
+      type:'success',
+      message:'删除成功'
+    })
+    getList();
+  }
+}
+/** 批量删除*/
+const batchDelete = (row)=>{
+  const idsToS = row.xhCodeId || ids.value;
+  (proxy.$modal).confirm('是否确认删除这' + idsToS.length+'条的数据项？').then(function() {
+    return delBaseinfoBatch(toRaw(idsToS));
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {
+  });
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('basicData/xcrEBaseinfo/export', {
+    ...queryParams.value
+  }, `企业基本信息_${new Date().getTime()}.xlsx`)
+}
+
+getList();
+</script>

src/views/basicData/xcrEnterpriseExceptionList/index.vue

@@ -92,7 +92,6 @@
 <script setup name="List">
   import {
     listList,
-    getList,
     delList,
     delListBatch
   } from "@/api/basicData/xcrEnterpriseExceptionList";

src/views/test/index.vue

@@ -0,0 +1,31 @@
+<script setup>
+import CreditReport from '@/components/CreditReport/index.vue'
+const dialogVisible = ref(false);
+
+</script>
+
+<template>
+  <el-row>
+    <el-col :span="24">
+      <el-button type="primary" @click="dialogVisible = true" >下载性与暴力报告</el-button>
+    </el-col>
+  </el-row>
+  <el-dialog v-model="dialogVisible" width="860px">
+    <template #title>
+      <span class="dialog-title">下载与暴力报告11</span>
+    </template>
+    <template #default>
+      <CreditReport />
+    </template>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>

uno.config.js

@@ -0,0 +1,12 @@
+import {defineConfig, presetAttributify, presetWind} from 'unocss'
+
+export default defineConfig({
+  // ...UnoCSS options
+    presets: [
+        presetAttributify(),
+        presetWind(),
+    ],
+    rules: [
+        ['font-songti', { 'font-family': '宋体, SimSun, serif' }],
+    ],
+})

vite.config.js

@@ -31,8 +31,7 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          // target: 'http://localhost:18902',
-          target: 'http://localhost:8900/background',
+          target: 'http://192.168.110.235:8900/background',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }

vite/plugins/index.js

@@ -1,12 +1,12 @@
 import vue from '@vitejs/plugin-vue'
-
+import UnoCSS from 'unocss/vite'
 import createAutoImport from './auto-import'
 import createSvgIcon from './svg-icon'
 import createCompression from './compression'
 import createSetupExtend from './setup-extend'
 
 export default function createVitePlugins(viteEnv, isBuild = false) {
-    const vitePlugins = [vue()]
+    const vitePlugins = [vue(),UnoCSS()]
     vitePlugins.push(createAutoImport())
 	vitePlugins.push(createSetupExtend())
     vitePlugins.push(createSvgIcon(isBuild))