sunyu 修改全局样式以符合边距要求,修改历史记录页面

src/assets/styles/index.scss

@@ -127,9 +127,9 @@ aside {
   margin: 0;
   //padding: 0;
   overflow: hidden; /* 防止内容溢出 */
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 10px;
+  padding-left: 40px;
+  padding-right: 40px;
+  padding-top: 20px;
   background-color: #D4D9E5;
 }
 

src/views/history/index.vue

 <template>
   <div class="app-container">
-    <div style="background-color: white;height: 95vh;padding-left: 30px;padding-right: 30px" >
+    <div style="background-color: white;height: 95vh;padding-left: 30px;padding-right: 30px">
       <div>
-        <span style="display: flex;justify-content: flex-start;align-items: center;"><div style="border: 1px solid #116FBB;width: 2px;height: 20px;margin-right: 5px"></div><h5 style="color: #116FBB;font-weight: bolder">历史记录</h5></span>
+        <span style="display: flex;justify-content: flex-start;align-items: center;"><div
+          style="border: 1px solid #116FBB;width: 2px;height: 20px;margin-right: 5px"></div><h5
+          style="color: #116FBB;font-weight: bolder">历史记录</h5></span>
       </div>
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
-      <el-form-item label="监控点名称：" prop="monitoringName">
+        <el-form-item prop="monitoringName">
           <el-input
             v-model.trim="queryParams.monitoringName"
             placeholder="请输入监控点名称"
@@ -13,7 +15,16 @@
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
-      <el-form-item label="监控时间：" prop="monitorTime">
+
+        <el-form-item prop="monitorState">
+          <el-select v-model="queryParams.monitorState" placeholder="请选择监控状态" clearable>
+            <el-option value="0">进行中</el-option>
+            <el-option value="1">已完成</el-option>
+          </el-select>
+        </el-form-item>
+
+
+        <el-form-item prop="monitorTime">
           <el-date-picker
             placeholder="请选择监控时间"
             value-format="yyyy-MM-dd"
@@ -24,42 +35,42 @@
             end-placeholder="结束日期"
           >
           </el-date-picker>
-<!--        <el-date-picker clearable-->
-<!--                        v-model="queryParams.monitorTime"-->
-<!--                        type="date"-->
-<!--                        value-format="yyyy-MM-dd"-->
-<!--                        placeholder="请选择监控时间">-->
-<!--        </el-date-picker>-->
-      </el-form-item>
-<!--      <el-form-item label="监控状态" prop="monitorState">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.monitorState"-->
-<!--          placeholder="请输入监控状态"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-      <el-form-item label="监控状态：" prop="monitorState">
-        <el-select v-model="queryParams.monitorState" placeholder="请选择监控状态" clearable>
-          <el-option value="0">进行中</el-option>
-          <el-option value="1">已完成</el-option>
-        </el-select>
+          <!--        <el-date-picker clearable-->
+          <!--                        v-model="queryParams.monitorTime"-->
+          <!--                        type="date"-->
+          <!--                        value-format="yyyy-MM-dd"-->
+          <!--                        placeholder="请选择监控时间">-->
+          <!--        </el-date-picker>-->
         </el-form-item>
+        <!--      <el-form-item label="监控状态" prop="monitorState">-->
+        <!--        <el-input-->
+        <!--          v-model="queryParams.monitorState"-->
+        <!--          placeholder="请输入监控状态"-->
+        <!--          clearable-->
+        <!--          @keyup.enter.native="handleQuery"-->
+        <!--        />-->
+        <!--      </el-form-item>-->
+        <div style="margin-left: 92%">
+
           <el-form-item>
             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
           </el-form-item>
+
+        </div>
+
+
       </el-form>
 
 
-<!--    <el-table v-loading="loading" :data="histableList" @selection-change="handleSelectionChange">-->
-    <el-table  :data="histableList" @selection-change="handleSelectionChange" style="min-height: 650px" >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="序号" align="center" width="100"/>
-<!--      <template slot-scope="scope">-->
-<!--        <span>{{ (scope.$index+1)+(queryParams.pageNum-1)*queryParams.pageSize }}</span>-->
-<!--      </template>-->
-      <el-table-column label="监控点名称" align="center" prop="monitoringName" />
+      <!--    <el-table v-loading="loading" :data="histableList" @selection-change="handleSelectionChange">-->
+      <el-table :data="histableList" @selection-change="handleSelectionChange" style="min-height: 650px">
+        <el-table-column type="selection" width="55" align="center"/>
+        <el-table-column label="序号" align="center" width="100" prop="id"/>
+        <!--      <template slot-scope="scope">-->
+        <!--        <span>{{ (scope.$index+1)+(queryParams.pageNum-1)*queryParams.pageSize }}</span>-->
+        <!--      </template>-->
+        <el-table-column label="监控点名称" align="center" prop="monitoringName"/>
         <el-table-column label="监控开始时间" align="center" prop="monitoringStarttime" width="180">
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.monitoringStarttime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
@@ -77,19 +88,22 @@
         </el-table-column>
         <el-table-column label="监控状态" align="center" prop="monitorState">
           <template slot-scope="scope">
-          <span :class="scope.row.monitorState === '0' ? 'green-text' : 'black-text'">{{ scope.row.monitorState === '0' ? '·进行中' : '·已完成' }}</span>
-<!--          <dict-tag :options="dict.type.history_state" :value="scope.row.monitorState"/>-->
+            <span :class="scope.row.monitorState === '0' ? 'green-text' : 'black-text'">{{
+                scope.row.monitorState === '0' ? '·进行中' : '·已完成'
+              }}</span>
+            <!--          <dict-tag :options="dict.type.history_state" :value="scope.row.monitorState"/>-->
           </template>
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <el-button
-            style="border: transparent;background-color: transparent"
+              style="border: transparent;background-color: transparent;color: green;font-size: 20px"
               size="mini"
               plain
               icon="el-icon-view"
               class="green-icon"
               @click="handleUpdate(scope.row)"
+
             ></el-button>
           </template>
         </el-table-column>
@@ -118,7 +132,7 @@
 </template>
 
 <script>
-import { listHistable, getHistable, delHistable, addHistable, updateHistable } from "@/api/system/histable";
+import {listHistable, getHistable, delHistable, addHistable, updateHistable} from "@/api/system/histable";
 import {parseTime} from "../../utils/ruoyi";
 
 export default {
@@ -151,12 +165,12 @@ export default {
         monitoringName: null,
         monitorTime: null,
         monitorState: null,
+        id:null,
       },
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
-      }
+      rules: {}
     };
   },
   created() {
@@ -219,7 +233,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.ID)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -231,7 +245,7 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       // 查看详情页面(把id换成code)
-      this.$router.push({ path: '/monitoringPlayback/playback', query: { code: row.ID } })
+      this.$router.push({path: '/monitoringPlayback/playback', query: {code: row.ID}})
     },
     /** 提交按钮 */
     submitForm() {
@@ -256,12 +270,13 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const IDs = row.ID || this.ids;
-      this.$modal.confirm('是否确认删除history编号为"' + IDs + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除history编号为"' + IDs + '"的数据项？').then(function () {
         return delHistable(IDs);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => {
+      });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -276,9 +291,11 @@ export default {
 .green-text {
   color: #51ad51;
 }
+
 .black-text {
   color: black;
 }
+
 .green-icon .el-icon-view {
   color: #51ad51;
 }