1. 服务管理取消二级菜单；2. 修改部分接口参数

src/api/data/basicInfo.js

@@ -5,7 +5,7 @@ import { get, post, put } from "@/utils/requestMethod";
  * @param {*} page
  * @param {*} page_size
  * @param {*} template_type
- * @param {*} templat_name
+ * @param {*} template_name
  * @param {*} template_format
  * @returns
  */

src/api/data/template.js

@@ -5,7 +5,7 @@ import { get, post, put } from "@/utils/requestMethod";
  * @param {*} page
  * @param {*} page_size
  * @param {*} template_type
- * @param {*} templat_name
+ * @param {*} template_name
  * @param {*} template_format
  * @returns
  */
@@ -13,11 +13,11 @@ const getTableTemplateList = (
   page,
   page_size = 10,
   template_type = 0,
-  templat_name = "",
+  template_name = "",
   template_format = ""
 ) => {
   return get(
-    `/data/template_list?page=${page}&page_size=${page_size}&template_type=${template_type}&templat_name=${templat_name}&template_format=${template_format}`
+    `/data/template_list?page=${page}&page_size=${page_size}&template_type=${template_type}&template_name=${template_name}&template_format=${template_format}`
   );
 };
 
@@ -57,7 +57,7 @@ const addReportTemplate = (options) => {
  * @param {*} page
  * @param {*} page_size
  * @param {*} template_type
- * @param {*} templat_name
+ * @param {*} template_name
  * @param {*} template_format
  * @returns
  */
@@ -65,12 +65,12 @@ const getReportTemplateList = (
   page,
   page_size = 10,
   template_type = 1,
-  templat_name = "",
+  template_name = "",
   template_format = "",
   report_type = ""
 ) => {
   return get(
-    `/data/template_list?page=${page}&page_size=${page_size}&template_type=${template_type}&templat_name=${templat_name}&template_format=${template_format}&report_type=${report_type}`
+    `/data/template_list?page=${page}&page_size=${page_size}&template_type=${template_type}&template_name=${template_name}&template_format=${template_format}&report_type=${report_type}`
   );
 };
 

src/layout/sidebar/sidebarItem.vue

@@ -6,13 +6,20 @@
           <el-image :src="menu.url"></el-image>
           <span>{{ menu.name }}</span>
         </template>
-        <el-menu-item-group v-for="(submenu, index2) in menu.submenus" :key="index2">
+        <el-menu-item-group
+          v-for="(submenu, index2) in menu.submenus"
+          :key="index2"
+        >
           <el-menu-item :index="submenu.path">
             <span class="subMenu">{{ submenu.name }}</span>
           </el-menu-item>
         </el-menu-item-group>
       </el-submenu>
-      <el-menu-item v-if="menu.submenus == null" :key="menu.path" :index="menu.path">
+      <el-menu-item
+        v-if="menu.submenus == null"
+        :key="menu.path"
+        :index="menu.path"
+      >
         <el-image :src="menu.url"></el-image>
         <span slot="title">
           {{ menu.name }}
@@ -27,120 +34,106 @@ export default {
     return {
       menus: [
         {
-          url: require('@/assets/images/userManagement@3x.png'),
-          name: '用户管理',
+          url: require("@/assets/images/userManagement@3x.png"),
+          name: "用户管理",
           submenus: [
             {
-              name: '人员管理',
-              path: '/home/user/person',
+              name: "人员管理",
+              path: "/home/user/person",
             },
             {
-              name: '组织管理',
-              path: '/home/user/group',
+              name: "组织管理",
+              path: "/home/user/group",
             },
-          ]
+          ],
         },
         {
-          url: require('@/assets/images/roleManagement@3x.png'),
-          name: '角色管理',
-          path: '/home/role',
+          url: require("@/assets/images/roleManagement@3x.png"),
+          name: "角色管理",
+          path: "/home/role",
         },
         {
-          url: require('@/assets/images/permissionManagement@3x.png'),
-          name: '权限管理',
-          path: '/home/permission',
+          url: require("@/assets/images/permissionManagement@3x.png"),
+          name: "权限管理",
+          path: "/home/permission",
         },
         {
-          url: require('@/assets/images/systemConfiguration@3x.png'),
-          name: '系统配置',
-          path: '/home/system',
+          url: require("@/assets/images/systemConfiguration@3x.png"),
+          name: "系统配置",
+          path: "/home/system",
           submenus: [
             {
-              name: '策略配置',
-              path: '/home/system/strategy',
+              name: "策略配置",
+              path: "/home/system/strategy",
             },
             {
-              name: '消息配置',
-              path: '/home/system/message',
+              name: "消息配置",
+              path: "/home/system/message",
             },
             {
-              name: '信息配置',
-              path: '/home/system/info',
+              name: "信息配置",
+              path: "/home/system/info",
             },
             {
-              name: '指标配置',
-              path: '/home/system/index',
-            }
-          ]
-        },
-        {
-          url: require('@/assets/images/deviceManagement@3x.png'),
-          name: '设备管理',
-          path: '/home/device',
-          submenus: [
-            {
-              name: '设备配置',
-              path: '/home/device/config',
+              name: "指标配置",
+              path: "/home/system/index",
             },
-            {
-              name: '设备告警',
-              path: '/home/device/warning',
-            }
-          ]
+          ],
         },
         {
-          url: require('@/assets/images/dataManagement@3x.png'),
-          name: '数据管理',
-          path: '/home/data',
+          url: require("@/assets/images/deviceManagement@3x.png"),
+          name: "设备管理",
+          path: "/home/device",
           submenus: [
             {
-              name: '报表配置',
-              path: '/home/data/statement',
+              name: "设备配置",
+              path: "/home/device/config",
             },
             {
-              name: '报告配置',
-              path: '/home/data/report',
+              name: "设备告警",
+              path: "/home/device/warning",
             },
-            {
-              name: '基础信息',
-              path: '/home/data/basicInfo',
-            }
-          ]
+          ],
         },
         {
-          url: require('@/assets/images/serviceManagement@3x.png'),
-          name: '服务管理',
-          path: '/home/service',
+          url: require("@/assets/images/dataManagement@3x.png"),
+          name: "数据管理",
+          path: "/home/data",
           submenus: [
             {
-              name: '全部服务',
-              path: '/home/service/all',
+              name: "报表配置",
+              path: "/home/data/statement",
             },
             {
-              name: '已安装服务',
-              path: '/home/service/installed',
+              name: "报告配置",
+              path: "/home/data/report",
             },
             {
-              name: '未安装服务',
-              path: '/home/service/uninstall',
+              name: "基础信息",
+              path: "/home/data/basicInfo",
             },
-          ]
+          ],
+        },
+        {
+          url: require("@/assets/images/serviceManagement@3x.png"),
+          name: "服务管理",
+          path: "/home/service",
         },
         {
-          url: require('@/assets/images/securityManagement@3x.png'),
-          name: '安全管理',
-          path: '/home/security',
+          url: require("@/assets/images/securityManagement@3x.png"),
+          name: "安全管理",
+          path: "/home/security",
           submenus: [
             {
-              name: '日志监控',
-              path: '/home/security/logMonitor',
+              name: "日志监控",
+              path: "/home/security/logMonitor",
             },
             {
-              name: '系统监控',
-              path: '/home/security/systemMonitor',
+              name: "系统监控",
+              path: "/home/security/systemMonitor",
             },
-          ]
-        }
+          ],
+        },
       ],
     };
   },
@@ -182,11 +175,11 @@ export default {
   padding: 0;
 }
 
-.el-menu-item-group>.span {
+.el-menu-item-group > .span {
   margin-left: 70px;
 }
 
-/deep/.el-menu--inline> {
+/deep/.el-menu--inline > {
   border: none;
   text-align: left;
 }

src/router/index.js

@@ -1,161 +1,161 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import Vue from "vue";
+import VueRouter from "vue-router";
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 const routes = [
   {
-    path: '/',
-    redirect: '/login'
+    path: "/",
+    redirect: "/login",
   },
   {
-    path: '/login',
-    name: 'login',
+    path: "/login",
+    name: "login",
 
-    component: () => import('../views/login/index.vue')
+    component: () => import("../views/login/index.vue"),
   },
   {
-    path: '/home',
-    name: 'home',
-    redirect: '/home/user/person',
-    component: () => import('../views/HomeView.vue'),
+    path: "/home",
+    name: "home",
+    redirect: "/home/user/person",
+    component: () => import("../views/HomeView.vue"),
     children: [
       {
-        path: 'user',
-        name: 'user',
-        component: () => import('../views/userManagement/index.vue'),
+        path: "user",
+        name: "user",
+        component: () => import("../views/userManagement/index.vue"),
         children: [
           {
-            path: 'person',
-            name: 'person',
-            component: () => import('../views/userManagement/personManagement/index.vue'),
+            path: "person",
+            name: "person",
+            component: () =>
+              import("../views/userManagement/personManagement/index.vue"),
           },
           {
-            path: 'group',
-            name: 'group',
-            component: () => import('../views/userManagement/groupManagement/index.vue'),
+            path: "group",
+            name: "group",
+            component: () =>
+              import("../views/userManagement/groupManagement/index.vue"),
           },
-        ]
+        ],
       },
       {
-        path: 'role',
-        name: 'role',
-        component: () => import('../views/permissionManagement/roleOverview.vue')
+        path: "role",
+        name: "role",
+        component: () =>
+          import("../views/permissionManagement/roleOverview.vue"),
       },
       {
-        path: 'system',
-        name: 'system',
-        component: () => import('../views/systemManagement/index.vue'),
+        path: "system",
+        name: "system",
+        component: () => import("../views/systemManagement/index.vue"),
         children: [
           {
-            path: 'strategy',
-            name: 'strategy',
-            component: () => import('../views/systemManagement/strategyConfiguration/index.vue')
+            path: "strategy",
+            name: "strategy",
+            component: () =>
+              import(
+                "../views/systemManagement/strategyConfiguration/index.vue"
+              ),
           },
           {
-            path: 'message',
-            name: 'message',
-            component: () => import('../views/systemManagement/messageConfiguration/commonMessage.vue')
+            path: "message",
+            name: "message",
+            component: () =>
+              import(
+                "../views/systemManagement/messageConfiguration/commonMessage.vue"
+              ),
           },
           {
-            path: 'info',
-            name: 'info',
-            component: () => import('../views/systemManagement/infoConfiguration/index.vue')
+            path: "info",
+            name: "info",
+            component: () =>
+              import("../views/systemManagement/infoConfiguration/index.vue"),
           },
           {
-            path: 'index',
-            name: 'index',
-            component: () => import('../views/systemManagement/indexConfiguration/index.vue')
+            path: "index",
+            name: "index",
+            component: () =>
+              import("../views/systemManagement/indexConfiguration/index.vue"),
           },
-        ]
+        ],
       },
       {
-        path: 'device',
-        name: 'device',
-        component: () => import('../views/deviceManagement/index.vue'),
+        path: "device",
+        name: "device",
+        component: () => import("../views/deviceManagement/index.vue"),
         children: [
           {
-            path: 'config',
-            name: 'config',
-            component: () => import('../views/deviceManagement/deviceConfig.vue'),
+            path: "config",
+            name: "config",
+            component: () =>
+              import("../views/deviceManagement/deviceConfig.vue"),
           },
           {
-            path: 'warning',
-            name: 'warning',
-            component: () => import('../views/deviceManagement/deviceWarning.vue'),
-          }
-        ]
+            path: "warning",
+            name: "warning",
+            component: () =>
+              import("../views/deviceManagement/deviceWarning.vue"),
+          },
+        ],
       },
       {
-        path: 'data',
-        name: 'data',
-        component: () => import('../views/dataManagement/index.vue'),
+        path: "data",
+        name: "data",
+        component: () => import("../views/dataManagement/index.vue"),
         children: [
           {
-            path: 'statement',
-            name: 'statement',
-            component: () => import('../views/dataManagement/statementConfig.vue'),
+            path: "statement",
+            name: "statement",
+            component: () =>
+              import("../views/dataManagement/statementConfig.vue"),
           },
           {
-            path: 'report',
-            name: 'report',
-            component: () => import('../views/dataManagement/reportConfig.vue'),
+            path: "report",
+            name: "report",
+            component: () => import("../views/dataManagement/reportConfig.vue"),
           },
           {
-            path: 'basicInfo',
-            name: 'basicInfo',
-            component: () => import('../views/dataManagement/basicInfo/index.vue'),
-          }
-        ]
+            path: "basicInfo",
+            name: "basicInfo",
+            component: () =>
+              import("../views/dataManagement/basicInfo/index.vue"),
+          },
+        ],
       },
       {
-        path: 'service',
-        name: 'service',
-        component: () => import('../views/servicesManagement/index.vue'),
-        children: [
-          {
-            path: 'all',
-            name: 'allServices',
-            component: () => import('../views/servicesManagement/allServices.vue'),
-          },
-          {
-            path: 'installed',
-            name: 'installed',
-            component: () => import('../views/servicesManagement/allServices.vue'),
-          },
-          {
-            path: 'uninstall',
-            name: 'uninstall',
-            component: () => import('../views/servicesManagement/allServices.vue'),
-          }
-        ]
+        path: "service",
+        name: "service",
+        component: () => import("../views/servicesManagement/index.vue"),
       },
       {
-        path: 'security',
-        name: 'security',
-        redirect: '/home/security/logMonitor',
-        component: () => import('../views/securityManagement/index.vue'),
+        path: "security",
+        name: "security",
+        redirect: "/home/security/logMonitor",
+        component: () => import("../views/securityManagement/index.vue"),
         children: [
           {
-            path: 'logMonitor',
-            name: 'logMonitor',
-            component: () => import('../views/securityManagement/logMonitor.vue'),
+            path: "logMonitor",
+            name: "logMonitor",
+            component: () =>
+              import("../views/securityManagement/logMonitor.vue"),
           },
           {
-            path: 'systemMonitor',
-            name: 'systemMonitor',
-            component: () => import('../views/securityManagement/systemMonitor/index.vue'),
+            path: "systemMonitor",
+            name: "systemMonitor",
+            component: () =>
+              import("../views/securityManagement/systemMonitor/index.vue"),
           },
-        ]
-      }
-    ]
+        ],
+      },
+    ],
   },
-]
+];
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: "history",
   base: process.env.BASE_URL,
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;

src/store/modules/user.js

@@ -29,7 +29,6 @@ const user = {
       return new Promise((resolve, reject) => {
         login({ username: username.trim(), password: password })
           .then((res) => {
-            debugger;
             const { data } = res;
             console.log(data);
             commit("SET_TOKEN", data.data);

src/views/dataManagement/reportConfig.vue

@@ -34,8 +34,8 @@
               ></el-option>
             </el-select>
           </el-form-item>
-          <el-button class="reset-btn">重置</el-button>
-          <el-button class="search-btn">查询</el-button>
+          <el-button class="reset-btn" @click="resetEvent">重置</el-button>
+          <el-button class="search-btn" @click="searchEvent">查询</el-button>
         </div>
       </el-form>
     </div>
@@ -52,6 +52,7 @@
         :header-cell-style="{ textAlign: 'center' }"
         :cell-style="{ textAlign: 'center' }"
         style="width: 100%"
+        :height="400"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="50"> </el-table-column>
@@ -70,7 +71,8 @@
               size="mini"
               type="text"
               style="color: #2ea8e6"
-              >点击下载</el-button
+              @click="downloadTemplate(scope.row.templateUrl)"
+              ><a :href="scope.row.templateUrl">点击下载</a></el-button
             >
             <el-button
               v-show="scope.row.templateName == null ? false : true"
@@ -105,7 +107,6 @@ export default {
   components: { checkbox, page },
   data() {
     return {
-      total: 0,
       input: "",
       show: true,
       form: {
@@ -212,6 +213,9 @@ export default {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
+    downloadTemplate(url) {
+      console.log(url, "url");
+    },
     getTableData(val) {
       this.tableData = [];
       getReportTemplateList(
@@ -223,6 +227,7 @@ export default {
         this.form.reportType
       ).then((res) => {
         if (res.data.code === 0 && res.data.data.length > 0) {
+          this.paginationData.total = res.data.total;
           this.tableData = res.data.data.map((v) => {
             return {
               id: v.id,
@@ -245,6 +250,15 @@ export default {
     handleSelectionChange(val) {
       this.multipleSelection = val;
     },
+    resetEvent() {
+      this.form.templateName = "";
+      this.form.templateFormat = "";
+      this.form.reportType = "";
+      this.searchEvent();
+    },
+    searchEvent() {
+      this.getTableData(this.currentPage);
+    },
   },
 };
 </script>

src/views/dataManagement/statementConfig.vue

@@ -24,8 +24,8 @@
               ></el-option>
             </el-select>
           </el-form-item>
-          <el-button class="reset-btn">重置</el-button>
-          <el-button class="search-btn">查询</el-button>
+          <el-button class="reset-btn" @click="resetEvent">重置</el-button>
+          <el-button class="search-btn" @click="searchEvent">查询</el-button>
         </div>
       </el-form>
     </div>
@@ -59,6 +59,7 @@
               size="mini"
               type="text"
               style="color: #2ea8e6"
+              @click="downloadTemplate"
               >点击下载</el-button
             >
             <el-button
@@ -187,6 +188,7 @@ export default {
         this.form.templateForm
       ).then((res) => {
         if (res.data.code === 0 && res.data.data.length > 0) {
+          this.paginationData.total = res.data.total;
           this.tableData = res.data.data.map((v) => {
             return {
               id: v.id,
@@ -201,9 +203,12 @@ export default {
         }
       });
     },
+    downloadTemplate(url) {
+      console.log(url);
+    },
     handleSizeChange(val) {
-      this.currentPageSize = val
-      this.getTableData(this.currentPage)
+      this.currentPageSize = val;
+      this.getTableData(this.currentPage);
     },
     handleSelectionChange(val) {
       this.multipleSelection = val;
@@ -212,6 +217,14 @@ export default {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
+    resetEvent() {
+      this.form.templateName = "";
+      this.form.templateForm = "";
+      this.searchEvent();
+    },
+    searchEvent() {
+      this.getTableData(this.currentPage);
+    },
   },
 };
 </script>

src/views/securityManagement/logMonitor.vue

@@ -254,6 +254,7 @@ export default {
         this.form.operationStatus
       ).then((res) => {
         if (res.data.code === 0 && res.data.data.length > 0) {
+          this.paginationData.total = res.data.total
           this.tableData = res.data.data.map((v) => {
             return {
               logID: v.id,

src/views/servicesManagement/allServices.vue

@@ -1,283 +0,0 @@
-<template>
-  <div class="content">
-    <el-input
-      class="search"
-      v-model="input"
-      placeholder="请输入"
-      suffix-icon="el-icon-search"
-    ></el-input>
-    <el-table
-      ref="multipleTable"
-      :data="tableData"
-      tooltip-effect="dark"
-      :header-cell-style="{ textAlign: 'center' }"
-      :cell-style="{ textAlign: 'center' }"
-      style="width: 95%"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="50"> </el-table-column>
-      <el-table-column prop="photo">
-        <template slot-scope="scope">
-          <el-image
-            :src="scope.row.photo"
-            style="width: 40px; height: 40px"
-            :preview-src-list="[scope.row.photo]"
-          ></el-image>
-        </template>
-      </el-table-column>
-      <el-table-column prop="introduction">
-        <template slot-scope="scope">
-          <el-descriptions :title="scope.row.name">
-            <el-descriptions-item label="功能简介">{{
-              scope.row.introduction
-            }}</el-descriptions-item>
-          </el-descriptions>
-        </template>
-      </el-table-column>
-      <el-table-column prop="updatetime">
-        <template slot-scope="scope">
-          <el-form label-position="right" label-width="110px">
-            <el-form-item label="版本号：">
-              <el-select v-model="form.version">
-                <el-option value="v1.0"></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="更新时间：">
-              <span style="margin-right: 110px">{{
-                scope.row.updatetime
-              }}</span>
-            </el-form-item>
-          </el-form>
-        </template>
-      </el-table-column>
-      <el-table-column prop="operation">
-        <template slot-scope="scope">
-          <el-button
-            style="width: 80px; height: 40px"
-            :type="
-              scope.row.status == '1'
-                ? 'primary'
-                : scope.row.status == '2'
-                ? 'info'
-                : 'danger'
-            "
-          >
-            {{
-              scope.row.status == "1"
-                ? "安装"
-                : scope.row.status == "2"
-                ? "未配置"
-                : "卸载"
-            }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="bottom">
-      <!-- <div>
-                <checkbox class="checkbox" :total="total"></checkbox>
-                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
-            </div>
-            <div class="bottom_button" v-show="show">
-                <el-button class="delete" type="text">批量删除</el-button>
-                <el-divider direction="vertical"></el-divider>
-                <el-button class="disabled" type="text">批量激活</el-button>
-                <el-divider direction="vertical"></el-divider>
-                <el-button class="export" type="text">导出数据</el-button>
-            </div> -->
-      <page :paginationData="paginationData"></page>
-    </div>
-  </div>
-</template>
-
-<script>
-import checkbox from "@/components/Checkbox/index";
-import page from "@/components/pagination/index";
-export default {
-  components: { checkbox, page },
-  data() {
-    return {
-      input: "",
-      show: true,
-      total: 0,
-      form: {},
-      tableData: [
-        {
-          photo:
-            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
-          updatetime: "2023-01-01 00:00",
-          name: "海康威视软件包",
-          introduction: "xxxxxxxxxxxxx",
-          status: "1",
-        },
-        {
-          photo:
-            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
-          updatetime: "2023-01-01 00:00",
-          name: "海康威视软件包",
-          introduction: "xxxxxxxxxxxxx",
-          status: "2",
-        },
-        {
-          photo:
-            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
-          updatetime: "2023-01-01 00:00",
-          name: "海康威视软件包",
-          introduction: "xxxxxxxxxxxxx",
-          status: "3",
-        },
-      ],
-      paginationData: {
-        pageSize: 10,
-        pagerCount: 5,
-        currentPage: 1,
-        pageSizes: [5, 10, 20, 30],
-        total: 30,
-        currentChange: (val) => {
-          this.getTableData(val);
-        },
-        handleSizeChange: (val) => {
-          this.handleSizeChange(val);
-        },
-      },
-    };
-  },
-  methods: {
-    handleSelectionChange() {
-      //
-    },
-    getTableData(val) {},
-    handleSizeChange(val) {},
-  },
-};
-</script>
-<style lang="less" scoped>
-.content {
-  top: 77px;
-  position: absolute;
-  left: 218px;
-  right: 16px;
-  height: -webkit-fill-available;
-  margin-bottom: 20px;
-  background-color: #ffffff;
-}
-
-.el-table {
-  top: 100px;
-  margin-left: 2.5%;
-  border: 1px solid #f0f2f2;
-  font-size: 0.95rem;
-  font-family: PingFang SC;
-  font-weight: 500;
-  color: #b2b2b2;
-  background: rgba(255, 255, 255, 0.8);
-  /deep/th {
-    background: #f7fbff;
-  }
-  /deep/.el-checkbox {
-    color: #b2b2b2;
-    .el-checkbox__input.is-checked + .el-checkbox__label {
-      color: #2ea8e6;
-    }
-
-    .el-checkbox__input.is-checked .el-checkbox__inner::after {
-      width: 70%;
-      height: 70%;
-      background: #2ea8e6;
-      border-radius: 0;
-      transform: rotate(0deg) scaleY(1);
-      position: static;
-      // border: 1px solid #8DD9FF;
-    }
-
-    .el-checkbox__inner {
-      border: 1px solid #8dd9ff;
-      background: rgba(0, 170, 255, 0);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: static;
-      &::after {
-        transition: 0ms;
-      }
-    }
-
-    .el-checkbox__label {
-      padding-left: 0;
-      font-size: 15px;
-      position: absolute;
-      top: 1px;
-      left: 25px;
-    }
-  }
-}
-
-.el-form-item {
-  margin-bottom: 0 !important;
-}
-
-/deep/.el-form-item__label {
-  padding: 0;
-}
-
-/deep/.el-form-item__content {
-  margin-right: 8px;
-}
-
-.bottom {
-  position: absolute;
-  left: 20px;
-  right: 16px;
-  bottom: 20px;
-  height: 50px;
-  line-height: 20px;
-  background-color: rgba(255, 255, 255, 1);
-  text-align: center;
-
-  .checkbox {
-    position: absolute;
-    left: 29px;
-    top: 15px;
-    font-size: 14px;
-  }
-
-  .check-cancel {
-    position: absolute;
-    // line-height: 20px;
-    font-size: 14px;
-    text-align: center;
-    left: 140px;
-    top: 10px;
-  }
-
-  .bottom_button {
-    position: absolute;
-    left: 200px;
-    margin-top: 15px;
-
-    .delete {
-      font-size: 14px;
-      text-align: center;
-      padding: 1px;
-    }
-
-    .disabled {
-      font-size: 14px;
-      text-align: center;
-      padding: 1px;
-    }
-
-    .export {
-      font-size: 14px;
-      text-align: center;
-      padding: 1px;
-    }
-  }
-}
-.search {
-  position: absolute;
-  width: 300px;
-  top: 20px;
-  right: 2.5%;
-}
-</style>

src/views/servicesManagement/index.vue

@@ -1,18 +1,283 @@
 <template>
-    <div>
-        <router-view></router-view>
+  <div class="content">
+    <el-input
+      class="search"
+      v-model="input"
+      placeholder="请输入"
+      suffix-icon="el-icon-search"
+    ></el-input>
+    <el-table
+      ref="multipleTable"
+      :data="tableData"
+      tooltip-effect="dark"
+      :header-cell-style="{ textAlign: 'center' }"
+      :cell-style="{ textAlign: 'center' }"
+      style="width: 95%"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="50"> </el-table-column>
+      <el-table-column prop="photo">
+        <template slot-scope="scope">
+          <el-image
+            :src="scope.row.photo"
+            style="width: 40px; height: 40px"
+            :preview-src-list="[scope.row.photo]"
+          ></el-image>
+        </template>
+      </el-table-column>
+      <el-table-column prop="introduction">
+        <template slot-scope="scope">
+          <el-descriptions :title="scope.row.name">
+            <el-descriptions-item label="功能简介">{{
+              scope.row.introduction
+            }}</el-descriptions-item>
+          </el-descriptions>
+        </template>
+      </el-table-column>
+      <el-table-column prop="updatetime">
+        <template slot-scope="scope">
+          <el-form label-position="right" label-width="110px">
+            <el-form-item label="版本号：">
+              <el-select v-model="form.version">
+                <el-option value="v1.0"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="更新时间：">
+              <span style="margin-right: 110px">{{
+                scope.row.updatetime
+              }}</span>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-table-column>
+      <el-table-column prop="operation">
+        <template slot-scope="scope">
+          <el-button
+            style="width: 80px; height: 40px"
+            :type="
+              scope.row.status == '1'
+                ? 'primary'
+                : scope.row.status == '2'
+                ? 'info'
+                : 'danger'
+            "
+          >
+            {{
+              scope.row.status == "1"
+                ? "安装"
+                : scope.row.status == "2"
+                ? "未配置"
+                : "卸载"
+            }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="bottom">
+      <!-- <div>
+                <checkbox class="checkbox" :total="total"></checkbox>
+                <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
+            </div>
+            <div class="bottom_button" v-show="show">
+                <el-button class="delete" type="text">批量删除</el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button class="disabled" type="text">批量激活</el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button class="export" type="text">导出数据</el-button>
+            </div> -->
+      <page :paginationData="paginationData"></page>
     </div>
+  </div>
 </template>
 
-<script >
+<script>
+import checkbox from "@/components/Checkbox/index";
+import page from "@/components/pagination/index";
 export default {
-    data() {
-        return {
-        }
+  components: { checkbox, page },
+  data() {
+    return {
+      input: "",
+      show: true,
+      total: 0,
+      form: {},
+      tableData: [
+        {
+          photo:
+            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+          updatetime: "2023-01-01 00:00",
+          name: "海康威视软件包",
+          introduction: "xxxxxxxxxxxxx",
+          status: "1",
+        },
+        {
+          photo:
+            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+          updatetime: "2023-01-01 00:00",
+          name: "海康威视软件包",
+          introduction: "xxxxxxxxxxxxx",
+          status: "2",
+        },
+        {
+          photo:
+            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+          updatetime: "2023-01-01 00:00",
+          name: "海康威视软件包",
+          introduction: "xxxxxxxxxxxxx",
+          status: "3",
+        },
+      ],
+      paginationData: {
+        pageSize: 10,
+        pagerCount: 5,
+        currentPage: 1,
+        pageSizes: [5, 10, 20, 30],
+        total: 30,
+        currentChange: (val) => {
+          this.getTableData(val);
+        },
+        handleSizeChange: (val) => {
+          this.handleSizeChange(val);
+        },
+      },
+    };
+  },
+  methods: {
+    handleSelectionChange() {
+      //
     },
-    methods: {
-    }
+    getTableData(val) {},
+    handleSizeChange(val) {},
+  },
 };
 </script>
 <style lang="less" scoped>
-</style>
+.content {
+  top: 77px;
+  position: absolute;
+  left: 218px;
+  right: 16px;
+  height: -webkit-fill-available;
+  margin-bottom: 20px;
+  background-color: #ffffff;
+}
+
+.el-table {
+  top: 100px;
+  margin-left: 2.5%;
+  border: 1px solid #f0f2f2;
+  font-size: 0.95rem;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: #b2b2b2;
+  background: rgba(255, 255, 255, 0.8);
+  /deep/th {
+    background: #f7fbff;
+  }
+  /deep/.el-checkbox {
+    color: #b2b2b2;
+    .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: #2ea8e6;
+    }
+
+    .el-checkbox__input.is-checked .el-checkbox__inner::after {
+      width: 70%;
+      height: 70%;
+      background: #2ea8e6;
+      border-radius: 0;
+      transform: rotate(0deg) scaleY(1);
+      position: static;
+      // border: 1px solid #8DD9FF;
+    }
+
+    .el-checkbox__inner {
+      border: 1px solid #8dd9ff;
+      background: rgba(0, 170, 255, 0);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: static;
+      &::after {
+        transition: 0ms;
+      }
+    }
+
+    .el-checkbox__label {
+      padding-left: 0;
+      font-size: 15px;
+      position: absolute;
+      top: 1px;
+      left: 25px;
+    }
+  }
+}
+
+.el-form-item {
+  margin-bottom: 0 !important;
+}
+
+/deep/.el-form-item__label {
+  padding: 0;
+}
+
+/deep/.el-form-item__content {
+  margin-right: 8px;
+}
+
+.bottom {
+  position: absolute;
+  left: 20px;
+  right: 16px;
+  bottom: 20px;
+  height: 50px;
+  line-height: 20px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+
+  .checkbox {
+    position: absolute;
+    left: 29px;
+    top: 15px;
+    font-size: 14px;
+  }
+
+  .check-cancel {
+    position: absolute;
+    // line-height: 20px;
+    font-size: 14px;
+    text-align: center;
+    left: 140px;
+    top: 10px;
+  }
+
+  .bottom_button {
+    position: absolute;
+    left: 200px;
+    margin-top: 15px;
+
+    .delete {
+      font-size: 14px;
+      text-align: center;
+      padding: 1px;
+    }
+
+    .disabled {
+      font-size: 14px;
+      text-align: center;
+      padding: 1px;
+    }
+
+    .export {
+      font-size: 14px;
+      text-align: center;
+      padding: 1px;
+    }
+  }
+}
+.search {
+  position: absolute;
+  width: 300px;
+  top: 20px;
+  right: 2.5%;
+}
+</style>