修复bug

src/api/datamanagement/dataplatform.ts

@@ -43,6 +43,20 @@ export interface VisitsModel {
     visits: number,
 }
 
+export interface DepartMentModel {
+    createDate: string,
+    deptId: number,
+    deptName: string,
+    grade: number,
+    isEnable: boolean,
+    modifyDate: string,
+    orderNum: number,
+    parent: number,
+    treePath: string,
+}
+
+
+
 // 查询访问次数列表
 export function getList(pageNumber: number, pageSize: number) {
     return http.request<Visits<Records>>({
@@ -54,7 +68,7 @@ export function getList(pageNumber: number, pageSize: number) {
 
 
 
-// 查询本月访问次数
+// 查询个人本月访问次数
 export function getMonthVisits(userId: number) {
     return http.request<VisitsModel[]>({
         url: '/platformData/getMonthVisits',
@@ -63,6 +77,15 @@ export function getMonthVisits(userId: number) {
     });
 }
 
+// 查询本月数据总表
+export function getMonthSumTable(deptIdList: []) {
+    return http.request<VisitsModel[]>({
+        url: '/platformData/getMonthSumTable',
+        method: 'post',
+        params: { deptIdList: deptIdList },
+    });
+}
+
 
 // 查询个人访问次数
 export function getPersonalVisits(pageNumber: number, pageSize: number, staffNo?: string, deptId?: number, nickName?: string) {
@@ -86,7 +109,18 @@ export function getTodayVisits(userId: number) {
     });
 }
 
-// 查询累计访问次数
+// 查询今日数据总表
+export function getTodaySumTable(deptIdList: []) {
+    return http.request<VisitsModel[]>({
+        url: '/platformData/getTodaySumTable',
+        method: 'post',
+        params: { deptIdList: deptIdList },
+    });
+}
+
+
+
+// 查询个人累计访问次数
 export function getTotalVisits(userId: number) {
     return http.request<VisitsModel[]>({
         url: '/platformData/getTotalVisits',
@@ -94,3 +128,21 @@ export function getTotalVisits(userId: number) {
         params: { userId: userId },
     });
 }
+
+// 查询累计数据总表
+export function getTotalSumTable(deptIdList: []) {
+    return http.request<VisitsModel[]>({
+        url: '/platformData/getTotalSumTable',
+        method: 'post',
+        params: { deptIdList: deptIdList },
+    });
+}
+
+
+// 获取部门列表
+export function getDeptList() {
+    return http.request<DepartMentModel[]>({
+        url: '/platformData/getDeptList',
+        method: 'get',
+    })
+}

src/views/cameras/overview/CamerasOverview.vue

@@ -2,26 +2,16 @@
   <div class="camera-page">
     <ConditionQuery />
     <div class="camera-list">
-      <BasicTable
-        :columns="columns"
-        :data-source="cameraItems"
-        :row-key="(row) => row.code"
-        :action-column="actionColumn"
-        :pagination="{ total: total, pageSize: size, hideOnSinglePage: !cameraItems.length }"
-        :loading="loading"
+      <BasicTable :columns="columns" :data-source="cameraItems" :row-key="(row) => row.code" :action-column="actionColumn"
+        :pagination="{ total: total, pageSize: size, hideOnSinglePage: !cameraItems.length }" :loading="loading"
         :tableSetting="{
           size: false,
           redo: false,
           fullscreen: false,
           striped: false,
           setting: false,
-        }"
-        :striped="true"
-        ref="tableRef"
-        @order-change="orderByItem"
-        @page-num-change="handlePageNumChange"
-        @page-size-change="handlePageSizeChange"
-      >
+        }" :striped="true" ref="tableRef" @order-change="orderByItem" @page-num-change="handlePageNumChange"
+        @page-size-change="handlePageSizeChange">
         <template #tableTitle>
           <el-button type="primary" :icon="Plus" @click="showAddPopover = true">添加</el-button>
         </template>
@@ -39,147 +29,149 @@
 </template>
 
 <script setup lang="ts">
-  import { h, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
-  import { BasicTable, TableActionIcons } from '@/components/Table';
-  import { BasicColumn } from '@/components/Table';
-  import { columns } from './overviewColumns';
-  import ConditionQuery from './components/ConditionQuery.vue';
-  import AddCamera from './components/CameraAddPopover.vue';
-  import EditCamera from './components/CameraEditPopover.vue';
-  import emptyImg from '@/assets/images/table/table-empty.png';
-  import { Plus } from '@element-plus/icons-vue';
-  import previewIcon from '@/assets/images/table/table-preview.png';
-  import editIcon from '@/assets/images/table/table-edit.png';
-  import deleteIcon from '@/assets/images/table/table-delete.png';
-  import useCameraOverview from './stores/useCameraOverview';
-  import { storeToRefs } from 'pinia';
-  import { CameraIPItem } from './type';
-  import { deleteCameraItem } from '@/api/camera/camera-overview';
-  import { ElMessage, ElMessageBox } from 'element-plus';
-
-  const cameraOverview = useCameraOverview();
-  const { cameraItems, loading, total, page, size } = storeToRefs(cameraOverview);
-  const { getCameraItems, openInterval, closeInterval } = cameraOverview;
-
-  // 添加弹窗相关
-  const showAddPopover = ref(false);
-
-  const showEditPopover = ref(false);
-  const editCameraData = ref<CameraIPItem | null>();
-
-  //操作列
-  const actionColumn: BasicColumn = reactive({
-    width: 150,
-    title: '操作',
-    prop: 'action',
-    key: 'action',
-    fixed: 'right',
-    render(record) {
-      return h(TableActionIcons as any, {
-        space: 20,
-        color: '#629bf9',
-        style: 'img',
-        size: 16,
-        actionIcons: [
-          {
-            label: '预览',
-            icon: previewIcon,
-            onClick: handlePreview.bind(null, record.row),
-          },
-          {
-            label: '编辑',
-            icon: editIcon,
-            onClick: handleEdit.bind(null, record.row),
-          },
-          {
-            label: '删除',
-            icon: deleteIcon,
-            onClick: handleDelete.bind(null, record.row),
-          },
-        ],
+import { h, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import { BasicTable, TableActionIcons } from '@/components/Table';
+import { BasicColumn } from '@/components/Table';
+import { columns } from './overviewColumns';
+import ConditionQuery from './components/ConditionQuery.vue';
+import AddCamera from './components/CameraAddPopover.vue';
+import EditCamera from './components/CameraEditPopover.vue';
+import emptyImg from '@/assets/images/table/table-empty.png';
+import { Plus } from '@element-plus/icons-vue';
+import previewIcon from '@/assets/images/table/table-preview.png';
+import editIcon from '@/assets/images/table/table-edit.png';
+import deleteIcon from '@/assets/images/table/table-delete.png';
+import useCameraOverview from './stores/useCameraOverview';
+import { storeToRefs } from 'pinia';
+import { CameraIPItem } from './type';
+import { deleteCameraItem } from '@/api/camera/camera-overview';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const cameraOverview = useCameraOverview();
+const { cameraItems, loading, total, page, size } = storeToRefs(cameraOverview);
+const { getCameraItems, openInterval, closeInterval } = cameraOverview;
+
+// 添加弹窗相关
+const showAddPopover = ref(false);
+
+const showEditPopover = ref(false);
+const editCameraData = ref<CameraIPItem | null>();
+
+//操作列
+const actionColumn: BasicColumn = reactive({
+  width: 150,
+  title: '操作',
+  prop: 'action',
+  key: 'action',
+  fixed: 'right',
+  render(record) {
+    return h(TableActionIcons as any, {
+      space: 20,
+      color: '#629bf9',
+      style: 'img',
+      size: 16,
+      actionIcons: [
+        {
+          label: '预览',
+          icon: previewIcon,
+          onClick: handlePreview.bind(null, record.row),
+        },
+        {
+          label: '编辑',
+          icon: editIcon,
+          onClick: handleEdit.bind(null, record.row),
+        },
+        {
+          label: '删除',
+          icon: deleteIcon,
+          onClick: handleDelete.bind(null, record.row),
+        },
+      ],
+    });
+  },
+});
+
+// 列排序操作
+const orderByItem = () => { };
+
+const handlePageNumChange = (pageNum) => {
+  page.value = pageNum;
+  getCameraItems();
+};
+
+const handlePageSizeChange = (pageSize) => {
+  size.value = pageSize;
+  getCameraItems();
+};
+
+const handlePreview = () => { };
+
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`您想删除相机${row.code}`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    draggable: true,
+  })
+    .then(() => {
+      deleteCameraItem({ cameraId: row.id }).then(() => {
+        ElMessage.success('删除成功');
+
+        getCameraItems();
       });
-    },
-  });
-
-  // 列排序操作
-  const orderByItem = () => {};
-
-  const handlePageNumChange = (pageNum) => {
-    page.value = pageNum;
-    getCameraItems();
-  };
-
-  const handlePageSizeChange = (pageSize) => {
-    size.value = pageSize;
-    getCameraItems();
-  };
-
-  const handlePreview = () => {};
-
-  const handleDelete = (row) => {
-    ElMessageBox.confirm(`您想删除相机${row.code}`, '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-      draggable: true,
     })
-      .then(() => {
-        deleteCameraItem({ cameraId: row.id }).then(() => {
-          ElMessage.success('删除成功');
-
-          getCameraItems();
-        });
-      })
-      .catch(() => {});
-  };
-
-  const handleEdit = (row) => {
-    showEditPopover.value = true;
-    editCameraData.value = row;
-  };
-
-  onMounted(() => {
-    getCameraItems();
-    openInterval();
-  });
-
-  onBeforeUnmount(() => {
-    closeInterval();
-  });
+    .catch(() => { });
+};
+
+const handleEdit = (row) => {
+  showEditPopover.value = true;
+  editCameraData.value = row;
+};
+
+onMounted(() => {
+  getCameraItems();
+  openInterval();
+});
+
+onBeforeUnmount(() => {
+  closeInterval();
+});
 </script>
 
 <style scoped>
-  .camera-page {
-    position: relative;
-    height: calc(100vh - 64px - 12px);
-    background-color: #ffffff;
-  }
-  .camera-list {
-    padding: 0 21px;
-  }
-  .empty-content {
-    margin: auto;
-    padding: 125px 0;
-  }
-
-  .empty-img {
-    width: 396px;
-  }
-
-  .empty-text {
-    font-size: 22px;
-    color: #8e8e8e;
-    line-height: 30px;
-    text-align: center;
-  }
-
-  .add-popover {
-    position: absolute;
-    width: calc(100% - 21px);
-    height: 622px;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    z-index: 99;
-  }
+.camera-page {
+  position: relative;
+  height: calc(100vh - 64px - 12px);
+  background-color: #ffffff;
+}
+
+.camera-list {
+  padding: 0 21px;
+}
+
+.empty-content {
+  margin: auto;
+  padding: 125px 0;
+}
+
+.empty-img {
+  width: 396px;
+}
+
+.empty-text {
+  font-size: 22px;
+  color: #8e8e8e;
+  line-height: 30px;
+  text-align: center;
+}
+
+.add-popover {
+  position: absolute;
+  width: calc(100% - 21px);
+  height: 622px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  z-index: 99;
+}
 </style>

src/views/datamanager/systemdata/PlatformData.vue

@@ -42,5 +42,22 @@ const handleClick = (tab: TabsPaneContext) => {
 };
 </script>
 
-
-<style scoped></style>
+<style>
+.demo-tabs>.el-tabs__content {
+    padding: 32px;
+    color: #6b778c;
+    font-size: 32px;
+    font-weight: 600;
+}
+
+.el-tabs__item:hover {
+    /* color: rgb(53, 120, 220); */
+    background-color: rgb(53, 120, 220);
+}
+
+.el-tabs__item.is-active {
+    /* color: rgb(221, 239, 255); */
+    background-color: rgb(221, 239, 255);
+    border: 3px solid #4693f1 !important
+}
+</style>

src/views/datamanager/systemdata/Table.vue

@@ -15,7 +15,7 @@ const type = ref('访问数据')
 
 
 
-// 查询数据列表
+// 查询访问次数列表
 function queryData(pageNumber: number, pageSize: number) {
     return getList(pageNumber, pageSize).then((res) => {
 

src/views/datamanager/systemdata/TableCommon.vue

@@ -11,14 +11,16 @@
             </el-form-item>
 
             <el-form-item label="部门：" prop="dept" style="margin-top: 15px;">
-                <el-select v-model="ruleForm.dept" placeholder="请选择部门" style="width: 100px ;">
-                    <el-option v-for="item in BoardDeptList" :key="item.value" :value="item.value"
-                        :label="item.label"></el-option>
+                <el-select v-model="ruleForm.dept" placeholder="请选择部门" style="width: 200px ;">
+                    <el-option v-for="item in departmentList" :key="item.deptId" :value="item.deptName"
+                        :label="item.deptName"></el-option>
                 </el-select>
             </el-form-item>
 
-            <el-button type="primary" @click="submitForm(ruleFormRef)" style="width: 100px;">搜索</el-button>
-            <el-button @click="resetForm(ruleFormRef)" style="width: 100px;">重置</el-button>
+            <el-button type="primary" @click="submitForm(ruleFormRef)"
+                style="width: 110px;position: absolute;margin-top: 15px;right:120px">搜索</el-button>
+            <el-button @click="resetForm(ruleFormRef)"
+                style="position: absolute;right:0;width: 110px;margin-top: 15px">重置</el-button>
             <el-form-item>
 
             </el-form-item>
@@ -26,28 +28,30 @@
         </el-form>
 
         <div>
-            <el-tag size="large">数据总表</el-tag>
+            <el-button type="primary">数据总表</el-button>
+
         </div>
         <el-table style="width: 100%;margin-top: 20px;" :data="tableData" highlight-current-row
             :default-sort="{ prop: 'todayVisits', order: 'descending' }">
-            <el-table-column label="序号" width="60" type="index"></el-table-column>
-            <el-table-column label="姓名" width="100" prop="nickName"></el-table-column>
-            <el-table-column label="工号" width="100" prop="staffNo"></el-table-column>
-            <el-table-column label="部门" width="120" prop="deptName"></el-table-column>
-            <el-table-column :label="`当日` + props.type" width="140" prop="todayVisits" sortable></el-table-column>
-            <el-table-column :label="`本月` + props.type" width="140" prop="monthVisits" sortable></el-table-column>
-            <el-table-column :label="`累计` + props.type" width="140" prop="totalVisits" sortable></el-table-column>
-            <el-table-column :label="props.type + '柱状图'" width="150">
+
+            <el-table-column label="姓名" prop="nickName"></el-table-column>
+            <el-table-column label="工号" prop="staffNo"></el-table-column>
+            <el-table-column label="部门" prop="deptName"></el-table-column>
+            <el-table-column :label="`当日` + props.type" prop="todayVisits" sortable></el-table-column>
+            <el-table-column :label="`本月` + props.type" prop="monthVisits" sortable></el-table-column>
+            <el-table-column :label="`累计` + props.type" prop="totalVisits" sortable></el-table-column>
+            <el-table-column :label="props.type + '柱状图'">
                 <template #default="scoped">
-                    <el-button type="primary" :icon="TrendCharts" @click="openDialog(scoped.row)"></el-button>
+                    <img :src="platformData" alt="" @click="openDialog(scoped.row)">
                 </template>
             </el-table-column>
         </el-table>
 
 
+
         <el-pagination v-model="currentPage" v-model:currentPageSize="currentPageSize" :page-sizes="[10, 20, 50, 100, 200]"
-            layout="total,sizes,prev,pager,next,jumper" :total="total" @size-change="handeSizeChange"
-            @current-change="handleCurrentPageChange" style="margin-left: 500px;" />
+            layout="->, total,sizes,prev,pager,next,jumper" :total="total" @size-change="handeSizeChange"
+            @current-change="handleCurrentPageChange" />
 
     </div>
 
@@ -62,10 +66,9 @@
 
 import { ref, onMounted } from 'vue';
 import { FormInstance } from 'element-plus';
-import { BoardDeptEnum, BoardDeptList } from './config'
 import TableEcharts from './TableEcharts.vue';
-import { TrendCharts } from '@element-plus/icons-vue'
-import { Records, Visits, VisitsModel } from '../../../api/datamanagement/dataplatform';
+import platformData from '@/assets/icons/platformdata.png';
+import { DepartMentModel, Records, Visits, VisitsModel, getDeptList } from '../../../api/datamanagement/dataplatform';
 
 export interface TableModel {
     deptId: number,
@@ -97,26 +100,35 @@ const tableData = ref<TableModel[]>()
 const userId = ref(10014);
 
 export interface FormModelCommon {
-    dept: number,
+    dept: string,
     nickName: string,
     staffNo: string,
 }
 
 const ruleForm = ref<FormModelCommon>({
-    dept: BoardDeptEnum.all,
+    dept: '',
     nickName: '',
     staffNo: '',
 })
 const ruleFormRef = ref<FormInstance>();
 
 
+const departmentList = ref<DepartMentModel[]>([]);
+const getDepartmentList = () => {
+    getDeptList().then((res) => {
+        departmentList.value = res;
+        console.log('department:', res)
+    });
+};
+
+
 // 查询数据列表
-function queryData() {
-    return props.queryData(currentPage.value, currentPageSize.value).then(res => {
-        console.log('tablecommon-querydata:', res)
-        tableData.value = res.records;
-        total.value = res.totalRow;
-    })
+async function queryData() {
+    const res = await props.queryData(currentPage.value, currentPageSize.value);
+    console.log('tablecommon-querydata:', res);
+    tableData.value = res.records;
+    console.log('tablecommon-querydata1:', tableData.value);
+    total.value = res.totalRow;
 
 }
 
@@ -135,7 +147,7 @@ function queryData() {
 
 // 搜索数据
 function submitForm(formE1: FormInstance | undefined) {
-
+    console.log('搜索数据')
     if (!formE1) return
     formE1.validate((valid, fields) => {
         if (valid) {
@@ -206,13 +218,21 @@ function currentAllData(userId: number) {
 
 // 查询个人访问次数-搜索数据
 function getPersonalVisits(data: FormModelCommon) {
+    const departId = ref();
+    departmentList.value.forEach(item => {
+        if (item.deptName === data.dept) {
+            departId.value = item.deptId;
+        }
+    })
     const newParam = {
         pageNumber: currentPage.value,
         pageSize: currentPageSize.value,
         nickName: data.nickName,
-        deptId: data.dept === BoardDeptEnum.all ? undefined : data.dept,
+        // deptId: data.dept === BoardDeptEnum.all ? undefined : data.dept,
+        deptId: departId.value,
         staffNo: data.staffNo,
     }
+    console.log('getPersonalVisits:', newParam);
     props.getPersonalVisits(newParam.deptId, newParam.nickName, newParam.pageNumber, newParam.pageSize, newParam.staffNo).then(res => {
         console.log('table-common-getPersonalVisits:', res)
         tableData.value = res.records;
@@ -235,6 +255,7 @@ function openDialog(row: TableModel) {
 
 onMounted(() => {
     queryData()
+    getDepartmentList();
 })
 
 </script>
@@ -250,4 +271,4 @@ onMounted(() => {
 .el-pagination {
     margin-top: 30px;
 }
-</style>
+</style>

src/views/datamanager/systemdata/TableEcharts.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
         <el-dialog v-model="visible" :before-close="handleClose" center style="width: 700px;">
+
             <el-card>
                 <template #header>
                     <div v-if="isShowAll === false" style="text-align: center;">
@@ -14,8 +15,8 @@
                             <el-form-item style="margin-top: 20px;">
                                 <el-select v-model="form.workspace" placeholder="请选择车间"
                                     style="width: 140px ;text-align: left;">
-                                    <el-option v-for="item in BoardDeptList" :key="item.value" :value="item.value"
-                                        :label="item.label"></el-option>
+                                    <el-option v-for="item in departmentList" :key="item.deptId" :value="item.deptName"
+                                        :label="item.deptName"></el-option>
                                 </el-select>
                             </el-form-item>
                             <el-button style="text-align: left;width: 100px;" type="primary"
@@ -39,11 +40,11 @@
 
 import * as echarts from 'echarts';
 import { ref, markRaw } from 'vue';
-import { ElMessageBox } from 'element-plus';
-import { BoardDeptList } from './config'
+// import { ElMessageBox } from 'element-plus';
+// import { BoardDeptList } from './config'
 import { watch } from 'vue';
 import { onMounted } from 'vue';
-import { VisitsModel } from '@/api/datamanagement/dataplatform';
+import { DepartMentModel, VisitsModel, getDeptList } from '@/api/datamanagement/dataplatform';
 
 interface DataOption {
     title: {},//标题
@@ -62,7 +63,12 @@ const userId = ref(1);
 const isShowAll = ref(false);//控制标题是否居中
 const chart = ref<any>("");
 
-
+const departmentList = ref<DepartMentModel[]>([]);
+const getDepartmentList = () => {
+    getDeptList().then((res) => {
+        departmentList.value = res;
+    });
+};
 
 
 watch(
@@ -110,16 +116,18 @@ function closeDialog() {
 
 // 关闭对话框
 function handleClose(done: () => void) {
-    ElMessageBox.confirm('确认关闭?')
-        .then(() => {
-
-            done()
-            closeDialog();//关闭对话框
-        })
-        .catch(() => {
-
-            // catch error
-        })
+    // ElMessageBox.confirm('确认关闭?')
+    //     .then(() => {
+
+    //         done()
+    //         closeDialog();//关闭对话框
+    //     })
+    //     .catch(() => {
+
+    //         // catch error
+    //     })
+    done();
+    closeDialog();//关闭对话框
 }
 
 // 查看今日数据
@@ -160,7 +168,7 @@ function currentMonthChart() {
 // 查看累计数据
 function allDatasChart() {
     isShowAll.value = true;
-    console.log('alldata');
+    console.log('alldata:', userId.value);
     const alltitle = ref();
     const allseriesdata = ref()
     props.allDatasChart(userId.value).then(res => {
@@ -393,6 +401,7 @@ optionall.value = {
 
 onMounted(() => {
     isShowAll.value = false;
+    getDepartmentList();
 })
 
 </script>

src/views/datamanager/systemdata/config.ts

@@ -1,3 +1,5 @@
+import { DepartMentModel, getDeptList } from "@/api/datamanagement/dataplatform";
+import { onMounted, ref } from "vue";
 
 
 export const BoardSelectList = [
@@ -13,21 +15,43 @@ export const BoardSelectList = [
 ]
 
 
-export enum BoardDeptEnum {
-    all = 100,
-    '5g' = 0,
-    'c02' = 1,
-    'c12' = 2,
-    'top' = 12,
-}
+// export enum BoardDeptEnum {
+//     all = 100,
+//     '5g' = 0,
+//     'c02' = 1,
+//     'c12' = 2,
+//     'top' = 12,
+// }
 
-export const BoardDeptList = [
-    {
-        label: '全部',
-        value: BoardDeptEnum.all,
-    },
-    {
-        label: '总部公司',
-        value: BoardDeptEnum.top,
-    },
-]
+// export const BoardDeptList = [
+//     {
+//         label: '全部',
+//         value: BoardDeptEnum.all,
+//     },
+//     {
+//         label: '总部公司',
+//         value: BoardDeptEnum.top,
+//     },
+// ]
+
+
+export function getDepartmentList() {
+    
+  
+    const departmentList = ref<DepartMentModel[]>([]);
+    const getDepartmentList = () => {
+      getDeptList().then((res) => {
+        departmentList.value = res;
+      });
+    };
+  
+  
+    onMounted(() => {
+      getDepartmentList();
+    })
+  
+  
+    return {  departmentList, getDepartmentList }
+  }
+  
+  export default getDepartmentList;

src/views/setting/system/system.vue

@@ -20,26 +20,4 @@
   const activeName = ref('basic');
 </script>
 <style lang="scss" scoped>
-  .thing-cell {
-    margin: 0 -16px 10px;
-    padding: 5px 16px;
-
-    &:hover {
-      background: #f3f3f3;
-      cursor: pointer;
-    }
-  }
-
-  .thing-cell-on {
-    background: #f0faff;
-    color: #2d8cf0;
-
-    :deep(.n-thing-main .n-thing-header .n-thing-header__title) {
-      color: #2d8cf0;
-    }
-
-    &:hover {
-      background: #f0faff;
-    }
-  }
 </style>

src/views/system-config/template/CardCommon.vue

@@ -7,32 +7,35 @@
       @handle-close="closeDrawer" @clear-data="clearData">
     </TitleCommon>
 
-    <div class="table" style="margin-top: 20px;">
+    <div style="margin-top: 20px;">
       <el-table style="width: 100%" :data="tableData" highlight-current-row>
-        <el-table-column :label="props.type + `名称`" width="250" prop="name" />
-        <el-table-column :label="props.type + `代码`" width="200" prop="code" />
+        <el-table-column :label="props.type + `名称`" prop="name" />
+        <el-table-column :label="props.type + `代码`" prop="code" />
 
-        <el-table-column prop="status" label="状态" width="150">
+        <el-table-column prop="status" label="状态">
           <template #default="scope">
             <el-tag v-if="scope.row.status === 0" type="success">正常</el-tag>
             <el-tag v-else type="danger">异常</el-tag>
           </template>
         </el-table-column>
 
-        <el-table-column label="备注" width="200" prop="remark" />
-        <el-table-column label="创建时间" width="250" prop="createdAt" />
-        <el-table-column label="操作" width="200">
+        <el-table-column label="备注" prop="remark" />
+        <el-table-column label="创建时间" prop="createdAt" />
+        <el-table-column label="操作">
           <template #default="scoped">
-            <el-button size="small" @click="deleteTableData(scoped.row)">删除</el-button>
-            <el-button size="small" @click="showEditDrawer(scoped.row)">编辑</el-button>
+            <img :src="del" alt="" @click="deleteTableData(scoped.row)" style="height: 30px;width: 30px; padding: 5px">
+            <img :src="edit" alt="" @click="showEditDrawer(scoped.row)" style="height: 30px;width: 30px; padding: 5px">
+
           </template>
         </el-table-column>
       </el-table>
 
-      <el-pagination v-model:currentPage="currentPage" v-model:currentPageSize="currentPageSize"
-        :page-sizes="[10, 20, 50, 100, 200]" layout="total,sizes,prev,pager,next,jumper" :total="total"
-        @size-change="handleSizeChangeFun" @current-change="handlePageChangeFun"
-        style="margin-left: 600px; margin-top: 20px" />
+      <div>
+        <el-pagination v-model:currentPage="currentPage" v-model:currentPageSize="currentPageSize"
+          :page-sizes="[10, 20, 50, 100, 200]" layout="->,total,sizes,prev,pager,next,jumper" :total="total"
+          @size-change="handleSizeChangeFun" @current-change="handlePageChangeFun" />
+      </div>
+
     </div>
 
     <el-drawer v-model="cardeditDrawer" direction="rtl" :title="currentType" :before-close="handleClose">
@@ -48,6 +51,8 @@ import { ElDrawer, ElMessageBox, } from 'element-plus';
 import DrawerCommonVue, { FormModelCommon } from './DrawerCommon.vue';
 import TitleCommon, { DataCommon } from './TitleCommon.vue';
 import { Records, SceneModule } from '@/api/template/template';
+import del from '@/assets/icons/del.png';
+import edit from '@/assets/icons/edit.png';
 
 // const currentFormType = ref('场景');
 

src/views/system-config/template/DrawerCommon.vue

@@ -37,7 +37,7 @@
 
       <div style="margin-top: 100px; margin-left: 250px">
         <el-button style="margin-left: 50px" @click="resetForm(ruleDrawerRef)">重置</el-button>
-        <el-button style="margin-left: 50px" @click="submitDrawer(ruleDrawerRef)">提交</el-button>
+        <el-button style="margin-left: 50px" @click="submitDrawer(ruleDrawerRef)" type="primary">提交</el-button>
       </div>
     </el-form>
   </div>

src/views/system-config/template/TemplateManager.vue

@@ -17,28 +17,48 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-  import type { TabsPaneContext } from 'element-plus';
-  import LabelManagerVue from './LabelManager.vue';
-  import WorkspaceManagerVue from './WorkspaceManager.vue';
-  import SceneManagerVue from './SceneManager.vue';
-
-  const activeName = ref('scene');
-  export type LabelType = 'scene' | 'label' | 'workspace';
-  const currentLabel = ref<LabelType>('scene');
-
-  const handleClick = (tab: TabsPaneContext) => {
-    console.log(tab.paneName);
-    if (tab.paneName === 'scene') {
-      currentLabel.value = 'scene';
+import { ref } from 'vue';
+import type { TabsPaneContext } from 'element-plus';
+import LabelManagerVue from './LabelManager.vue';
+import WorkspaceManagerVue from './WorkspaceManager.vue';
+import SceneManagerVue from './SceneManager.vue';
+
+const activeName = ref('scene');
+export type LabelType = 'scene' | 'label' | 'workspace';
+const currentLabel = ref<LabelType>('scene');
+
+const handleClick = (tab: TabsPaneContext) => {
+  console.log(tab.paneName);
+  if (tab.paneName === 'scene') {
+    currentLabel.value = 'scene';
+  } else {
+    if (tab.paneName === 'label') {
+      currentLabel.value = 'label';
     } else {
-      if (tab.paneName === 'label') {
-        currentLabel.value = 'label';
-      } else {
-        currentLabel.value = 'workspace';
-      }
+      currentLabel.value = 'workspace';
     }
-  };
+  }
+};
 </script>
 
-<style scoped></style>
+<style>
+
+
+.demo-tabs>.el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+
+.el-tabs__item:hover {
+  /* color: rgb(53, 120, 220); */
+  background-color: rgb(53, 120, 220);
+}
+
+.el-tabs__item.is-active {
+  /* color: rgb(221, 239, 255); */
+  background-color: rgb(221, 239, 255);
+  border:3px solid #4693f1 !important
+}
+</style>

src/views/system-config/template/TitleCommon.vue

@@ -2,11 +2,19 @@
     <div>
         <el-form inline ref="ruleFormRef" :model="form">
             <el-form-item style="margin-top: 20px;">
-                <el-input style="width: 200px" :placeholder="`请输入` + props.type + `名称`" v-model="form.name" clearable
-                    @clear="clearData" />
+                <el-input v-model="form.name" :placeholder="`请输入` + props.type + `名称`" class="input-with-select">
+
+                    <template #append>
+                        <el-button :icon="Search" @click="findDataByName(ruleFormRef)" />
+                    </template>
+                </el-input>
+
+                <!-- <el-input style="width: 200px" :placeholder="`请输入` + props.type + `名称`" v-model="form.name" clearable
+                    @clear="clearData" /> -->
             </el-form-item>
-            <el-button type="primary" :icon="Search" @click="findDataByName(ruleFormRef)">查询</el-button>
-            <el-button type="primary" :icon="Files" @click="addForm"> 添加</el-button>
+            <!-- <el-button type="primary" :icon="Search" @click="findDataByName(ruleFormRef)">查询</el-button> -->
+            <el-button type="primary" :icon="Plus" @click="addForm" style="position: absolute;right:0;width: 100px;">
+                模板</el-button>
         </el-form>
     </div>
 
@@ -17,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { Search, Files } from '@element-plus/icons-vue';
+import { Search, Plus } from '@element-plus/icons-vue';
 import { onMounted, ref, watch } from 'vue';
 import { ElMessageBox, FormInstance } from 'element-plus';
 import DrawerCommonVue, { FormModelCommon } from './DrawerCommon.vue';
@@ -51,6 +59,7 @@ watch(
 
 // 根据名称找到数据-finish
 function findDataByName(formEl: FormInstance | undefined) {
+    console.log('findDataByName')
     if (!formEl) return;
     formEl.validate((valid, fields) => {
         if (valid) {
@@ -82,16 +91,17 @@ const handleClose = (done: () => void) => {
     ElMessageBox.confirm('是否确认关闭?')
         .then(() => {
             done();
+            emit('handleClose');
         })
         .catch(() => {
             // catch error
         });
-    emit('handleClose');
+    // emit('handleClose');
 };
 
-function clearData() {
-    emit('clearData');
-}
+// function clearData() {
+//     emit('clearData');
+// }
 
 
 onMounted(() => {