全局样式优化

src/assets/css/index.scss

@@ -138,13 +138,7 @@ ul li {
 
 .filter-container {
     width: 100%;
-    height: 100%;
     display: flex;
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    vertical-align: middle;
     .el-button+.el-button {
         margin-left: 30px !important;
     }

src/views/alarmManage/index.vue

@@ -2,50 +2,52 @@
   <div class="app-container alarmingManage" v-if="pageShow">
     <!-- 筛选start -->
     <div class="filter-container mb-10">
-      <div class="left">
-        <div>
-          <div class="filter-item">
-            站点:
-            <el-select
-              v-model="store.state.siteId"
-              placeholder="请选择"
-              style="width: 200px"
-              clearable
-              filterable
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              <el-option
-                v-for="item in store.state.siteList"
-                :key="item.id"
-                :label="item.siteName"
-                :value="item.id"
-              ></el-option>
-            </el-select>
-          </div>
-          <div class="filter-item">
-            时间：
-            <el-date-picker
-              v-model="dateValue"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              style="width: auto"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-        
-            ></el-date-picker>
-          </div>
-          <el-button
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-            class="search-button"
-            @click=";(store.state.siteId = ''), (dateValue = ''), listSelect()"
-          >
-            重置
-          </el-button>
-          <el-button :disabled="store.state.authorities.indexOf('查询')==-1" type="primary" class="search-button" @click="listSelect()">
-            搜索
-          </el-button>
-        </div>
+      <div class="filter-item">
+        站点:
+        <el-select
+          v-model="store.state.siteId"
+          placeholder="请选择"
+          style="width: 200px"
+          clearable
+          filterable
+          :disabled="store.state.authorities.indexOf('查询') == -1"
+        >
+          <el-option
+            v-for="item in store.state.siteList"
+            :key="item.id"
+            :label="item.siteName"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </div>
+      <div class="filter-item">
+        时间：
+        <el-date-picker
+          v-model="dateValue"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: auto"
+          :disabled="store.state.authorities.indexOf('查询') == -1"
+        ></el-date-picker>
+      </div>
+      <div>
+        <el-button
+          :disabled="store.state.authorities.indexOf('查询') == -1"
+          class="search-button"
+          @click=";(store.state.siteId = ''), (dateValue = ''), listSelect()"
+        >
+          重置
+        </el-button>
+        <el-button
+          :disabled="store.state.authorities.indexOf('查询') == -1"
+          type="primary"
+          class="search-button"
+          @click="listSelect()"
+        >
+          搜索
+        </el-button>
       </div>
     </div>
     <!-- 筛选end -->
@@ -73,7 +75,7 @@
               width:
                 (scope.row.totalGrade / allMaxData.totalNumMax) * 100 + '%',
             }"
-             style="min-width:35px!important"
+            style="min-width: 35px !important"
             @click="goAlarmTotal(0, scope.row.siteName, scope.row.siteId)"
           >
             {{ scope.row.totalGrade }}
@@ -89,7 +91,7 @@
               width:
                 (scope.row.oneGrade / allMaxData.oneAlarmingMax) * 100 + '%',
             }"
-             style="min-width:35px!important"
+            style="min-width: 35px !important"
             @click="goAlarmTotal(1, scope.row.siteName, scope.row.siteId)"
           >
             {{ scope.row.oneGrade }}
@@ -103,9 +105,9 @@
             :class="{ transparent: scope.row.twoGrade == 0 }"
             :style="{
               width:
-                (scope.row.twoGrade / allMaxData.twoAlarmingMax) * 100 + '%'
+                (scope.row.twoGrade / allMaxData.twoAlarmingMax) * 100 + '%',
             }"
-            style="min-width:35px!important"
+            style="min-width: 35px !important"
             @click="goAlarmTotal(2, scope.row.siteName, scope.row.siteId)"
           >
             {{ scope.row.twoGrade }}
@@ -157,163 +159,162 @@
 </template>
 
 <script>
-import alarmTotal from './alarmTotal'
-import { useStore } from 'vuex'
-import { computed, defineComponent, onMounted, ref } from 'vue'
-import * as api from '@/api/alarmManage/index'
-import { ElMessage } from 'element-plus'
-import { useRouter } from 'vue-router'
+  import alarmTotal from './alarmTotal'
+  import { useStore } from 'vuex'
+  import { computed, defineComponent, onMounted, ref } from 'vue'
+  import * as api from '@/api/alarmManage/index'
+  import { ElMessage } from 'element-plus'
+  import { useRouter } from 'vue-router'
 
-export default defineComponent({
-  components: { alarmTotal },
-  name: 'VariableList',
-  setup() {
-    const store = useStore()
-    const router = useRouter()
+  export default defineComponent({
+    components: { alarmTotal },
+    name: 'VariableList',
+    setup() {
+      const store = useStore()
+      const router = useRouter()
 
-    const pageShow = ref(true)
-    const alarmGradeList = ref({})
-    const dateValue =ref('')
-    const total = ref(0)
-    const pageSize = ref(15)
-    const currentPage = ref(1)
-    const tableData = ref([])
+      const pageShow = ref(true)
+      const alarmGradeList = ref({})
+      const dateValue = ref('')
+      const total = ref(0)
+      const pageSize = ref(15)
+      const currentPage = ref(1)
+      const tableData = ref([])
 
-    //查询
-    function listSelect() {
-      store.commit('TimeAll_function', dateValue.value)
-      api
-        .alarmGradeCount({
-          startTime: store.state.Time_Data[0],
-          endTime: store.state.Time_Data[1],
-          siteId: store.state.siteId,
-          size: pageSize.value,
-          current: currentPage.value,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            total.value = requset.data.total
-            tableData.value = requset.data.records
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
+      //查询
+      function listSelect() {
+        store.commit('TimeAll_function', dateValue.value)
+        api
+          .alarmGradeCount({
+            startTime: store.state.Time_Data[0],
+            endTime: store.state.Time_Data[1],
+            siteId: store.state.siteId,
+            size: pageSize.value,
+            current: currentPage.value,
+          })
+          .then((requset) => {
+            if (requset.status === 'SUCCESS') {
+              total.value = requset.data.total
+              tableData.value = requset.data.records
+            } else {
+              ElMessage.error(requset.msg)
+            }
+          })
+      }
 
-    //查看
-    const handleClick = (row) => {
-      // alert('查看对应站点（页面跳转）')
-      console.log(row)
-    }
+      //查看
+      const handleClick = (row) => {
+        // alert('查看对应站点（页面跳转）')
+        console.log(row)
+      }
 
-    const goVariableList = () => {
-      // 跳转至订单列表页面传参
-      router.push({
-        path: '../siteManage/variableList/index.vue',
-      })
-      // this.$router.push({ name:'variableList'})
-    }
+      const goVariableList = () => {
+        // 跳转至订单列表页面传参
+        router.push({
+          path: '../siteManage/variableList/index.vue',
+        })
+        // this.$router.push({ name:'variableList'})
+      }
 
-    const goAlarmTotal = (val, val1, val2) => {
-      pageShow.value = !pageShow.value
-      store.commit('TimeAll_function', dateValue.value)
-      if (val != undefined) {
-        alarmGradeList.value = {
-          startTime: store.state.Time_Data[0],
-          endTime: store.state.Time_Data[1],
-          type: val,
-          siteName: val1,
-          siteId: val2,
+      const goAlarmTotal = (val, val1, val2) => {
+        pageShow.value = !pageShow.value
+        store.commit('TimeAll_function', dateValue.value)
+        if (val != undefined) {
+          alarmGradeList.value = {
+            startTime: store.state.Time_Data[0],
+            endTime: store.state.Time_Data[1],
+            type: val,
+            siteName: val1,
+            siteId: val2,
+          }
         }
       }
-    }
 
-    onMounted(() => {
-      listSelect()
-      // window.location.reload()
-    })
+      onMounted(() => {
+        listSelect()
+        // window.location.reload()
+      })
 
-    //条数
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      listSelect()
-    }
-    //页数
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      listSelect()
-    }
+      //条数
+      const handleSizeChange = (val) => {
+        pageSize.value = val
+        listSelect()
+      }
+      //页数
+      const handleCurrentChange = (val) => {
+        currentPage.value = val
+        listSelect()
+      }
 
-    const allMaxData = computed(() => {
-      var allMaxData = {}
+      const allMaxData = computed(() => {
+        var allMaxData = {}
 
-      var totalNumData = []
-      var oneAlarmingData = []
-      var twoAlarmingData = []
-      var otherData = []
+        var totalNumData = []
+        var oneAlarmingData = []
+        var twoAlarmingData = []
+        var otherData = []
 
-      tableData.value.forEach((element, index) => {
-        totalNumData[index] = element.totalGrade
-        oneAlarmingData[index] = element.oneGrade
-        twoAlarmingData[index] = element.twoGrade
-        otherData[index] = element.otherGrade
-      })
+        tableData.value.forEach((element, index) => {
+          totalNumData[index] = element.totalGrade
+          oneAlarmingData[index] = element.oneGrade
+          twoAlarmingData[index] = element.twoGrade
+          otherData[index] = element.otherGrade
+        })
 
-      allMaxData.totalNumMax = Math.max.apply(Math, totalNumData)
-      allMaxData.oneAlarmingMax = Math.max.apply(Math, oneAlarmingData)
-      allMaxData.twoAlarmingMax = Math.max.apply(Math, twoAlarmingData)
-      allMaxData.otherMax = Math.max.apply(Math, otherData)
+        allMaxData.totalNumMax = Math.max.apply(Math, totalNumData)
+        allMaxData.oneAlarmingMax = Math.max.apply(Math, oneAlarmingData)
+        allMaxData.twoAlarmingMax = Math.max.apply(Math, twoAlarmingData)
+        allMaxData.otherMax = Math.max.apply(Math, otherData)
 
-      return allMaxData
-    })
+        return allMaxData
+      })
 
-    //自定义列样式
-    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
-      row, column, rowIndex
-      // console.log(row, column, rowIndex)
-      if (columnIndex !== 0) {
-        return `color:#0284E8;cursor:pointer`
+      //自定义列样式
+      const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
+        row, column, rowIndex
+        // console.log(row, column, rowIndex)
+        if (columnIndex !== 0) {
+          return `color:#0284E8;cursor:pointer`
+        }
+        if (columnIndex) {
+          // return `text-align:left;cursor:pointer;`
+        } else {
+          return ''
+        }
       }
-      if (columnIndex) {
-        // return `text-align:left;cursor:pointer;`
-      } else {
-        return ''
+      // 表头样式设置
+      const headClass = () => {
+        return 'background:#FAFAFA;'
       }
-    }
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA;'
-    }
-    return {
-      headClass,
-      goVariableList,
-      handleCurrentChange,
-      handleSizeChange,
-      cellStyle,
-      handleClick,
-      goAlarmTotal,
-      listSelect,
+      return {
+        headClass,
+        goVariableList,
+        handleCurrentChange,
+        handleSizeChange,
+        cellStyle,
+        handleClick,
+        goAlarmTotal,
+        listSelect,
 
-      store,
-      pageShow,
-      dateValue,
+        store,
+        pageShow,
+        dateValue,
 
-      total,
-      pageSize,
-      currentPage,
-      tableData,
-      alarmGradeList,
+        total,
+        pageSize,
+        currentPage,
+        tableData,
+        alarmGradeList,
 
-      showDialog: false,
-      tabPosition: 'one',
+        showDialog: false,
+        tabPosition: 'one',
 
-      input: '',
-      region: '',
-      allMaxData,
-    }
-  },
-})
+        input: '',
+        region: '',
+        allMaxData,
+      }
+    },
+  })
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>