优化

elkers

2025-01-25 659d9d31ab3420b5fde4ae76973c89279fd48834

优化

 .env.development

@@ -1,19 +1,12 @@
###
 # @Author: hqs elkers@163.com
 # @Date: 2024-05-16 11:24:17
 # @LastEditors: Liuyi candymxq888@outlook.com
 # @LastEditTime: 2024-10-22 15:10:52
 # @FilePath: \wisdom-water-factory-web\.env.development
 # @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
### 

# 页面标题
VITE_APP_TITLE = 第四师高标准农田建设智慧灌溉信息化平台
VITE_APP_TITLE = 生态流量监测系统

# 开发环境配置
VITE_APP_ENV = 'development'

# 智慧灌溉接口
# 金川接口
  #  VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8030'
    VITE_APP_PUBLIC_REQUEST_API = 'https://wise.huiwuyuntong.com/farming-api'
    VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8036'
#后端本地
    #VITE_APP_PUBLIC_REQUEST_API = 'http://192.168.0.105:8029'

 .env.production

@@ -1,19 +1,12 @@
###
 # @Author: hqs elkers@163.com
 # @Date: 2024-05-16 11:24:17
 # @LastEditors: elkers dmhe0357
 # @LastEditTime: 2024-10-24 23:45:56
 # @FilePath: \wisdom-water-factory-web\.env.production
 # @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
### 

# 页面标题
VITE_APP_TITLE = 第四师高标准农田建设智慧灌溉信息化平台
VITE_APP_TITLE = 生态流量监测系统

# 开发环境配置
VITE_APP_ENV = 'production'

# 智慧灌溉智慧管理系统/开发环境
VITE_APP_PUBLIC_REQUEST_API = 'https://wise.huiwuyuntong.com/farming-api'
#  VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8030'
# 金川管理系统/开发环境
#VITE_APP_PUBLIC_REQUEST_API = 'https://wise.huiwuyuntong.com/farming-api'
 VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8036'
# 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip

 index.html

@@ -7,7 +7,7 @@
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="/favicon.ico">
  <title>金川水电站智慧监测平台</title>
  <title>金川水电站生态流量监测系统</title>
  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
  <style>
    html,

 package.json

@@ -1,8 +1,8 @@
{
  "name": "jc-hydropower-station-web",
  "version": "3.8.7",
  "description": "金川水电站智慧监测平台",
  "author": "智慧灌溉项目",
  "description": "金川水电站生态流量监测系统",
  "author": "金川项目",
  "license": "MIT",
  "type": "module",
  "scripts": {

 src/assets/logo/logo.png

 src/router/index.js

@@ -103,8 +103,8 @@
        meta: { title: '报警管理'}
      },
      {
        path: '/pump',
        component: () => import('@/views/screen/pump/index'),
        path: '/reports',
        component: () => import('@/views/screen/reports/index'),
        name: 'pump',
        meta: { title: '泵站控制'}
      },

 src/screen/index.vue

@@ -2,7 +2,7 @@
    <div class="main">
        <div class="header">
            <div class="top">
                <div class="title">金川水电站智慧监测平台</div>
                <div class="title">金川水电站生态流量监测系统</div>
                <div class="time">
                    <span>{{ nowTime.date }}</span>
                    <span>{{ nowTime.time }}</span>
@@ -62,12 +62,11 @@
}
const btnList = ref([
    {name:'总览',url:'/overview'},
    {name:'智慧灌溉',url:'/irrigate'},
    // {name:'设备管理',url:'/facility-screen'},
    // {name:'DMA分区漏损', url:'/dma'},
    {name:'统计分析',url:'/statistics'},
    // {name:'报警管理',url:'/alarm-screen'},
    {name:'泵站控制',url:'/pump'},
    {name:'生态流量',url:'/irrigate'},
    {name:'图像监测', url:'/dma'},
    {name:'设备管理',url:'/facility-screen'},
    {name:'报警管理',url:'/alarm-screen'},
    {name:'报表管理',url:'/reports'},
    {name:'系统管理',url:'/user'},
])
const navTo = (item) =>{

 src/utils/index.js

@@ -19,12 +19,12 @@
      routesData = setActiveRoute(routesData, views) //设置路由
      // console.log('组装完成',routesData)
      routesData.forEach((item) => {
          // console.log(router)
          console.log(222222,router)
          //路由数据解析完成，开始添加到本地路由表中
          router.addRoute('/', item);
          // console.log('item',item)
      });
      console.log('router', router.getRoutes())
      //console.log('router', router.getRoutes())
  }
}
import Layout from '@/layout'

 src/views/facility/supplier/index.vue

对比新文件
@@ -0,0 +1,275 @@
<!--
 * @Author: elkers
 * @Date: 2024-08-06 16:17:39
 * @LastEditors: Liuyi candymxq888@outlook.com
 * @LastEditTime: 2024-08-14 09:34:55
 * @FilePath: \water-qinghe-web\src\views\waterMeter\supplier\index.vue
 * @Description: 供应商
-->

 <script setup>
 import  supplierApi from "@/api/waterMeterApi/supplier";
import  { nameReg ,phoneReg }  from "@/utils/regular";
 import setPostParams from "../../../utils/searchParams.js";

 const { proxy } = getCurrentInstance();
 
/**
 * 搜索相关
 */
 /** 搜索按钮操作 */
 function handleQuery() {
   getList({keywords:searchParams.value.name})
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }

 /**
  *  Table表格权限数据列表相关
  */
const searchParam = {
   limit:10,
   page:1
}
const pageParam = ref({
    total:0,
    limit:0,
    page:1,
})
const tableData = ref([]);
const inpTip= '请输入',selTip = '请选择';
let  tableHeader = ref({
        name: '供应商名称',
        address: '供应商地址',
        contact:'联系人',
        contactPhone:'联系人电话',
        createTimeView:'创建时间'
   })
 /** 获取列表 */
 async function getList(val) {
      loading.value = true;
    let postParam = setPostParams(val)
      await supplierApi().search(postParam).then((res) =>{
        tableData.value = res.data.list
        pageParam.value.total = res.data.total
        pageParam.value.limit = res.data.limit
        pageParam.value.page = res.data.page
    })
    loading.value = false;
 }
  /**
  *  表单相关
  */   
const  formLabel = ({
      name: '供应商名称',
      address: '供应商地址',
      contact:'联系人',
      contactPhone:'联系人电话',
      createTimeView:'创建时间'
})
 const  rules = ref({
    name: [{ required: true, message: `${inpTip+formLabel.name}`, trigger: "blur" }
      
    ],
    address: [{ required: true, message: `${inpTip+formLabel.address}`, trigger: "blur" }],
    contact: [
      { required: true, message: `${inpTip+formLabel.contact}`, trigger: "blur" },
      { pattern: nameReg, message: '请输入真实姓名!', trigger: 'blur' },
   ],
    contactPhone: [
      { required: true, message: `${inpTip+formLabel.contactPhone}`, trigger: "blur" },
      { pattern: phoneReg, message: '电话号码不正确！', trigger: 'blur' },
   ],
});
const form = ref({});
const searchParams = ref({
    keywords: '',
});
 /** 新增按钮操作 */
 async function handleAdd() {
   reset();
   open.value = true;
   title.value = "新增";
 }
 
 /** 修改按钮操作 */
 async function handleUpdate(row) {
   reset();
   // form.value = Object.assign({},row)
   Object.keys(row).forEach(key => {  
      if (form.value.hasOwnProperty(key)) {  
         form.value[key] = row[key];  
      }  
   });
   form.value.id = row.id
   open.value = true;
   title.value = "修改";
 }

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除名称为"' + row.contact + '"的数据项?').then(function() {
    return supplierApi().remove(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}
 

 /**
  *  新增/修改弹窗Form表单相关
  */
const open = ref(false);
const loading = ref(false);
const title = ref("");

//上传文件，添加图片地址信息
const uploadData = (data) => {
    form.value.headImg = data.newFileView
}
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["supplierRef"].validate(valid => {
     if (valid) {
        form.value.contactPhone = Number(form.value.contactPhone)
       if (form.value.id != undefined) {
         supplierApi().modify(form.value).then(res => {
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
           getList();
         }).catch(() =>{
            open.value = false;
            proxy.$modal.msgError("修改失败");
         });
       } else {
         supplierApi().create(form.value).then(res => {
           proxy.$modal.msgSuccess("新增成功");
           open.value = false;
           getList();
         }).catch(() =>{
            open.value = false;
            proxy.$modal.msgError("新增失败");
         });;
       }
     }
   });
 }

 /** 取消按钮 */
 function cancel() {
   open.value = false;
   reset();
 }
 
 /** 表单重置 */
 function reset() {
   form.value = {
        name: '',
        address: '',
        contact:'',
        contactPhone:''
   };
   proxy.resetForm("supplierRef");
 }
 getList();
 </script>
 <template>
    <div class="app-container">
       <el-form :model="searchParams" ref="queryRef" :inline="true">
          <el-form-item label="" prop="">
             <el-input
                v-model="searchParams.name"
                placeholder="请输入搜索信息"
                clearable
                style="width: 200px"
                @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="primary"
                plain
                icon="Plus"
                @click="handleAdd"
             >新增</el-button>
          </el-col>
       </el-row>
       <!--表格及分页-->
       <el-table v-loading="loading" :data="tableData">
          <el-table-column
            v-for="(item, key, index) of tableHeader"
            :prop="key.toString()"
            :label="item"
            :key="index"
            align="center"
          >
            <template #default="scope">
                <div v-if="key.toString() == 'headImg'">
                    <img :src="scope.row.headImg" class="table-headImg"/>
                </div>
            </template>
        </el-table-column>
          <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
                <el-button link type="primary" icon="Edit" v-has="['update',route]" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button link type="primary" icon="Delete" v-has="['delete',route]" @click="handleDelete(scope.row)">删除</el-button>
             </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="pageParam.total"
          v-model:page="pageParam.page"
          v-model:limit="pageParam.limit"
          :page-sizes="[10,20,30]"
          @pagination="getList"
        />
       <!-- 添加/修改表单 -->
       <el-dialog :title="title" v-model="open" append-to-body center>
          <el-form class="form-box" ref="supplierRef" :model="form" :rules="rules" label-width='auto'>
            <el-form-item :label="formLabel.name" prop="name">
               <el-input v-model="form.name" :placeholder="inpTip+formLabel.name"/>
            </el-form-item>
            <el-form-item :label="formLabel.address" prop="address">
               <el-input v-model="form.address" :placeholder="inpTip+formLabel.address" />
            </el-form-item>
            <el-form-item :label="formLabel.contact" prop="contact">
               <el-input v-model="form.contact" :placeholder="inpTip+formLabel.contact" />
            </el-form-item>
            <el-form-item :label="formLabel.contactPhone" prop="contactPhone">
               <el-input v-model="form.contactPhone" :placeholder="inpTip+formLabel.contactPhone" />
            </el-form-item>
          </el-form>
          <template #footer>
             <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
             </div>
          </template>
       </el-dialog>
    </div>
 </template>
 
 <style lang="scss" scoped>
 .el-form{
     width: 100%;
     display: flex;
     justify-content: space-evenly;
     flex-wrap: wrap;
     .el-form-item{
         width: 45%;
     }
 }
</style>
 

 src/views/facility/valveDevice/index.vue

@@ -39,7 +39,7 @@
const pageParam = ref({
    total: 0,
    limit: 0,
    page: 1,
    page: 1,q
})
const tableData = ref([]);
const inpTip = '请输入', selTip = '请选择';

 src/views/login.vue

@@ -3,7 +3,7 @@
    <div class="login-bcg1"></div>
    <div class="contain">
    <el-form  ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">金川水电站智慧监测平台</h3>
      <h3 class="title">金川水电站生态流量监测系统</h3>
      <el-form-item label="账 号" prop="userName">
        <el-input
          style="height: 45px;"
@@ -168,7 +168,7 @@
        localStorage.setItem('id',JSON.stringify(res.data.id))
        localStorage.setItem('userType',JSON.stringify(res.data.userType))
        
        router.push("/overview");
        router.push("/user");//overview
      }).catch(error => {
        loading.value = false;
        proxy.$modal.msgError('登录失败！')

 src/views/point/ecology/index.vue

 src/views/point/index.vue

 src/views/screen/overView/index.vue

@@ -2,92 +2,14 @@
    <div class="dma-container">
        <div class="content">
            <div class="left">
                <div class="echarts-box">
                    <!-- <div class="echarts-title">压力监测</div> -->
                    <div class="titbox">
                        <img src="../../../assets/images/screen/irrigate/titbox.png" alt="" srcset="">
                        <span>压力监测</span>
                    </div>
                    <div id="pressure"></div>
                </div>
                <div  class="echarts-box">
                    <div class="titbox">
                        <img src="../../../assets/images/screen/irrigate/titbox.png" alt="" srcset="">
                        <span>流量监测</span>
                    </div>
                    <div id="entrance"></div>
                </div>
                <div  class="echarts-box">
                    <div class="titbox">
                        <img src="../../../assets/images/screen/irrigate/titbox.png" alt="" srcset="">
                        <span>水位监测</span>
                    </div>
                    <div id="analysis"></div>
                </div>
            
            </div>
            <div class="main">
                <div class="map">
                    <div class="map-img">
                        <img src="../../../assets/images/screen/overview/map.png">
                       
                    </div>
                    <img class="circle" src="../../../assets/images/screen/overview/mini-circle.png"/>
                </div>
                <div class="table-box">
                    <el-table v-loading="loading" :data="landMassList" max-height="250px">
                        <el-table-column
                            v-for="(item, key, index) of tableHeader"
                            :prop="key.toString()"
                            :label="item"
                            :key="index"
                            align="center"
                        ></el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 右 ------------------------------------------ -->
            <div class="right">
                <!-- <div class="search">
                    <el-select v-model="pointId" filterable  placeholder="请选择监控点">
                        <el-option
                            v-for="(item,index) in pointList"
                            :key="index"
                            :label="item.pointName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <el-button type="primary" class="search-btn" @click="searchPoint">搜 索</el-button>
                </div> -->
                <div id="alarm">
           
                    <div class="titbox">
                        <img src="../../../assets/images/screen/irrigate/titbox.png" alt="" srcset="">
                        <span>实时报警</span>
                    </div>
                    <div class="alarm-content">
                        <div v-for="(item,index) in alarmList" :key="index" class="alarm-item">
                        
                            <div class="item-text">{{ item.description }}</div>
                            <div class="item-date">{{ item.createTimeView }}</div>
                        </div>
                    </div>
                    <div v-if="alarmList.length > 5" class="alarm-more">.........</div>
                </div>
                <div class="echarts-box">
                    <div class="titbox">
                        <img src="../../../assets/images/screen/irrigate/titbox.png" alt="" srcset="">
                        <span>频率监测</span>
                    </div>
                    <div id="flow"></div>
                </div>
                <div class="echarts-box">
                    <div class="titbox">
                        <img src="../../../assets/images/screen/irrigate/titbox.png" alt="" srcset="">
                        <span>设备监测</span>
                    </div>
                    <div id="liquidLevel"></div>
                </div>
            </div>
        </div>
    </div>

 src/views/screen/reports/index.vue

对比新文件
@@ -0,0 +1,476 @@
<template>
    <div class="facility-container">
    
        <div class="right-content">
            <div class="search-box">

                <el-select v-model="pointId" filterable  placeholder="请选择报表">
                    <el-option
                        v-for="(item,index) in reportedList"
                        :key="index"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
              
                <el-select v-model="pointId" filterable  placeholder="请选择监控点">
                    <el-option
                        v-for="(item,index) in pointList"
                        :key="index"
                        :label="item.pointName"
                        :value="item.id">
                    </el-option>
                </el-select>
                <div class="date">
                    <div v-for="item in dateList" :class="item.active === 1 ? 'date-active' : '' " @click="changeDate(item.dictValue)">{{item.dictLabel}}</div>
                </div>
                <el-button class="search-btn" @click="searchPoint">搜索</el-button>
                <el-button class="search-btn" @click="exportToExcel">导出</el-button>
            </div>
            <div class="table-box">
                <div class="table-title">{{reportName}}报表</div>
                <div class="table-content">
                    <el-table v-loading="loading" :data="tableData" width="100%" max-height="690px">
                        <el-table-column
                            label="序号"
                            align="center"
                            prop="num"
                            fixed="left"
                        >
                        </el-table-column>
                        <el-table-column
                            v-for="(item, key, index) of tableHeader"
                            :prop="key.toString()"
                            :label="item"
                            :key="index"
                            align="center"
                        >
                        <template #default="scope">
                            <div v-if="key.toString() === 'detail'" class="table-handle">
                                <div @click="toDetail(scope.row)"></div>
                            </div>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination">
                    <el-pagination
                        v-model:current-page="pageParam.page"
                        background
                        :page-size="pageParam.limit"
                        layout="total,prev, pager, next, jumper"
                        :total="pageParam.total"
                        @current-change="currentPage"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import pointApi from "@/api/facility/point";
import { sysDictData } from '@/api/system/dict'
import { PREURL} from '@/config/index'
// import * as XLSX from 'xlsx';
import defaultImage from '@/assets/images/screen/facility/no-img.png'
//导出
// const exportToExcel = () => {
//      const dataVal = hisData.value
//         const worksheet = XLSX.utils.json_to_sheet(dataVal);
//       const workbook = XLSX.utils.book_new();
//       XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
//       XLSX.writeFile(workbook, 'data.xlsx');
// };


const dateList = ref()
const dateValue = ref()
const getDate = async () =>{
    await sysDictData().searchType('date_type').then((res)=>{
        dateList.value = res.data
        dateList.value.forEach((item,index)=>{
            if(index === 0){
                item.active = 1
            }else{
                item.active = 0
            }
            item.dictLabel = item.dictLabel.replace('统计','')
        })
        dateValue.value = dateList.value[0].dictValue
    })
}
getDate()
//选中日期
const changeDate = (dateType) =>{
    dateValue.value = dateType
    dateList.value.forEach((item)=>{
        item.active = 0
        if(item.dictValue === dateType){
            item.active = 1
        }
    })
    getData({dateType:dateValue.value,pointId:pointId.value})
}
//监控点列表
const pointList = ref([])
const pointId = ref();
const getPointList = async() =>{

    //区域列表
    let res = await pointApi().search({limit: 100, page: 1})
    if(res.code == 200){
        pointList.value = res.data.list
        pointId.value = pointList.value[0].id
        console.log("获取监控点数据",pointList.value);
    }else{
        proxy.$modal.msgError('获取数据失败,请刷新再试！')
    }
}
getPointList()
//选中数据
const searchPoint = () =>{
    getData({dateType:dateValue.value,pointId:pointId.value})
}
//选择报表类型
const reportedList = ref([
    {id:1,name:"压力报表"},
    {id:2,name:"水质报表"},
])


//搜索
const searchParam = ref()
const searchList = () =>{
    getTableData({keywords:searchParam.value})
}
const reportName = ref("压力")
/**
 *  Table表格权限数据报表相关
 */
const pageParam = ref({
    total:200,
    limit:15,
    page:1,
})
const tableData = ref([]);
let  tableHeader = ref({
    pointName: "所属设备",
    pointyName: "数据1",
    address2: "数据2",
    installDate3: "数据3",
    detail2: "采集时间",
})

/** 获取报表 */
const loading = ref(false);
async function getTableData(val) {
    loading.value = true;
    if(val){
        if(!val.limit){
            val.limit = 5
        }
        if(!val.page){
            val.page = 1
        }
    }else{
        val = { limit:5,page:1 }
    }
    await pointApi().search(val).then((res) =>{
        tableData.value = res.data.list
        //添加序号
        tableData.value.forEach((item,index) =>{
            item.num = index + 1
        })
        //设置详情为tableData第一项
        formDetail.value.facilityName = tableData.value[0].facilityName
        formDetail.value.supplier = tableData.value[0].supplier
        formDetail.value.installDate = tableData.value[0].installDate
        formDetail.value.facilityUrl = tableData.value[0].facilityUrl
        console.log('formDetail.value.facilityUrl',formDetail.value.facilityUrl)
        //分页参数
        pageParam.value.total = res.data.total
        pageParam.value.limit = res.data.limit
        pageParam.value.page = res.data.page
    })
    loading.value = false;
}
//分页
const currentPage = (val) =>{
    getTableData({page:val})
}
// 详情

const formDetail = ref({
    facilityName:'',
    supplier:'',
    installDate:'',
    facilityUrl:'',
})
const defaultImg = ref(defaultImage)
const toDetail = (row) =>{
    formDetail.value.facilityName = row.facilityName
    formDetail.value.supplier = row.supplier
    formDetail.value.installDate = row.installDate
    formDetail.value.facilityUrl = row.facilityUrl
    console.log('todetail',formDetail.value.facilityUrl)
}
const backgroundStyle = computed(() => ({
    backgroundImage: `url('${ PREURL+ formDetail.value.facilityUrl }')`,
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
}));
onMounted(async ()=>{
    await getTableData()
})
</script>

<style lang="scss" scoped>
.facility-container{
    width: 100%;
    height:100%;
    padding:0 3% 1% 3%;
    display:flex;
    justify-content: space-between;
}
.left-content{
    width:22%;
    height:100%;
    background-image: url("../../../assets/images/screen/facility/left-box.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding:4% 1% 1%;
    .left-title{
        width: 100%;
        height:5%;
        background-image: url("../../../assets/images/screen/facility/left-title.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
        padding-left:9%;
        padding-top:1%;
    }
    .img-box{
        width:83%;
        height:35%;
        background: rgba(244, 248, 250, 0.21);
        border-radius: 10px;
        margin: 15% auto 0;
        padding: 1%;
        .left-img{
            width:100%;
            height:100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .left-detail{
        width:100%;
        height: 30%;
        //background: rgba(255, 255, 255, 0.29);
        padding:6% 10% 10%;
        p{
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            //background: rgba(0, 175, 240, 0.51);
        }
    }
}
.right-content{
    width:100%;//698
    height:100%;//918.7
    display:flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    padding:1% 0;
    .date{
           
            width: 322px;
            height: 50px;
            background-image: url("../../../assets/images/screen/statistics/date.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin: 0 20px;
            display: flex;
            align-items: center;
            justify-content:center;
            font-weight: 400;
            font-size: 18px;
            color: #DDDDDD;
            div{
                width: 25%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .date-active{
                background-image: url("../../../assets/images/screen/statistics/select-date.png");
            }
        }
    .search-box{
        width:100%;
        height:6%;
        display: flex;
        :deep(.el-select__wrapper){
            height: 50%;
            width: 100%;
            background:transparent !important;
            border: 1px solid #1fb0be !important;
            border-radius: 5px 0 0 5px;
        }
        .search-input{
                width:70%;
                height:100%;
                margin-right:3%;
            :deep(.el-input__wrapper){
                background:linear-gradient(to right ,rgba(6,92,135,0.56),rgba(6,92,135,0.16)) !important;
                border: 1px solid #1fb0be !important;
                border-radius: 8px !important;
            }
            .el-input.is-focus .el-input__inner{
                border-color: #2ec4d2 !important;
            }
        }
        .search-btn{
            width:7%;
            height:100%;
            background-color: #2a6bb6 !important;
            border: 1px solid #03e9ff !important;
            border-radius: 8px !important;
            font-weight: 400;
            font-size: 22px;
            color: #B9F9FF;
        }
    }
    .table-box{
        width:100%;
        height:89%;
        background-image: url("../../../assets/images/screen/facility/right-box.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .table-title{
            height:10%;
            width:100%;
            display: flex;
            justify-content:center;
            align-items: center;
            font-weight: 500;
            font-size: 22px;
            color: #8DFEFF;
        }
        .table-content{
            height:80%;
            width:100%;
            padding: 1% 4%;
            //background: #1D2129;
            //修改边框和字体
            :deep(.el-table){
                --el-table-border-color:rgba(0,0,0,0);
                font-weight: 400;
                font-size: 20px;
                color: #D1D1D1;
            }
            //修改头部字体
            :deep(.el-table__header th){
                font-weight: 400;
                font-size: 20px;
                color: #D1D1D1;
            }
            /*最外层透明*/
            :deep(.el-table),
            :deep(.el-table__expanded-cell){
                background-color: transparent !important;
            }
            /* 表格内背景颜色 */
            :deep(.el-table th),
            :deep(.el-table tr),
            :deep(.el-table td){
                background-color: transparent !important;
                border-bottom:1px solid #1D627D !important;
            }
            //:deep(.el-table tr){
            //    border:1px solid #000 !important;
            //}
            /*去除底边框*/
            :deep(.el-table td.el-table__cell){
                border:0;
            }
            :deep(.el-table th.el-table__cell.is-leaf) {
                border: 0;
            }
            /*去除底部灰条.el-table::before*/
            :deep(.el-table::before) {
                display: none;
            }
            .table-handle{
                display: flex;
                align-items: center;
                justify-content: center;
                div{
                    width:30px;
                    height: 30px;
                    background-image: url("../../../assets/images/screen/facility/detail.png");
                }
            }
        }
        .pagination{
            width:100%;
            height:10%;
            display:flex;
            justify-content:center;
            :deep(.el-pagination__total),
            :deep(.el-pagination__goto),
            :deep(.el-pagination__classifier){
                color: #bcd4f3
            }
            :deep(.el-pager li) {
                font-size: 15px;
                color: #BAEBEC;
                background: transparent;
                padding: 0 4px;
                border: 1px solid #BAEBEC;
                border-radius: 0;
                margin: 0 4px;
                min-width: 25px;
                height: 25px;
            }
            :deep(.el-pagination button) {
                color: #BAEBEC;
                background: transparent;
                padding: 0 4px;
                border-radius: 0;
                margin: 0 4px;
            }
            :deep(.el-pagination .btn-next .el-icon),
            :deep(.el-pagination .btn-prev .el-icon) {
                font-size: 18px !important;
            }
            :deep(.el-input__wrapper) {
                background: transparent;
                box-shadow: 0 0 0 1px #BAEBEC inset;
                border-radius: 0;
                height: 25px;
                min-width: 30px;
            }
            :deep(.el-input__inner) {
                font-size: 16px;
                color: #BAEBEC;
                height: 25px;
                line-height: 30px !important;
            }
            :deep(.el-pager li.is-active) {
                background-color: #1FB0BE;
                color: #ffffff;
                border: 1px solid #1FB0BE;
            }
        }
    }
}
</style>

 src/views/system/user/index.vue

@@ -94,7 +94,7 @@
                      <el-form-item v-if="!form.id">
                          <br>
                      </el-form-item>
                        <el-form-item label="上传头像" prop="headImg">
                        <el-form-item label="上传头像" prop="">
                            <upload-icons @uploadData="uploadData" :imageList="form.headImg" :limit="1"></upload-icons>
                      </el-form-item>
                  <el-form-item></el-form-item>
@@ -165,7 +165,7 @@
    let  tableHeader = ref({
            userName: '用户名称',
            nickName: '昵称',
            headImg:'头像',
          //  headImg:'头像',
            userTypeView:'用户类型',
            // userTypeView:'用户角色',
            contact:'联系方式',

 vite.config.js

@@ -33,7 +33,7 @@
    },
    // vite 相关配置
    server: {
      port: 5030,
      port: 5036,
      host: true,
      open: true,
      proxy: {