更新2000px以上页面样式变动2.0

src/assets/styles/bigScreen.scss

@@ -311,11 +311,17 @@
   .el-picker-panel__footer {
     padding: 0.04rem !important;
   }
+  .el-button {
+    padding: 0.08rem 0.15rem !important;
+  }
   .el-button--mini {
-    padding: 0.07rem 0.15rem !important;
+    // padding: 0.08rem 0.15rem !important;
     font-size: 0.12rem !important;
     border-radius: 0.03rem !important;
   }
+  .el-button--text {
+    padding: 0 !important;
+  }
   .el-input__suffix {
     right: 0.05rem !important;
   }
@@ -477,7 +483,7 @@
     padding-right: 0.08rem !important;
   }
   .el-form-item--small .el-form-item__label {
-    line-height: 0.4rem !important;
+    line-height: 0.32rem !important;
   }
   .el-form-item__label {
     font-size: 0.14rem !important;
@@ -529,11 +535,37 @@
   }
   .el-checkbox {
     font-size: 0.14rem !important;
+    margin-right: 0.08rem !important;
+  }
+  .el-checkbox__label {
+    padding-left: 0.1rem !important;
+    line-height: 0.19rem !important;
+    font-size: 0.14rem !important;
+  }
+  .el-input-number--medium .el-input-number__increase,
+  .el-input-number--medium .el-input-number__decrease {
+    width: 0.36rem !important;
+    height: 50% !important;
+    font-size: 0.14rem !important;
+  }
+  .el-table__expand-icon {
+    font-size: 0.12rem !important;
+  }
+  .el-table [class*="el-table__row--level"] .el-table__expand-icon {
+    width: 0.2rem !important;
+    line-height: 0.2rem !important;
+    height: 0.2rem !important;
     margin-right: 0.03rem !important;
   }
   .el-cascader-node__label {
     padding: 0 0.1rem !important;
   }
+  .el-input--prefix .el-input__inner {
+    padding-left: 0.3rem !important;
+  }
+  .el-input__prefix {
+    left: 0.05rem !important ;
+  }
   .el-checkbox__inner {
     border-radius: 0.02rem !important;
     width: 0.14rem !important;
@@ -576,7 +608,7 @@
     padding-top: 0.1rem !important;
   }
   .el-form-item__content {
-    line-height: 0.4rem !important;
+    line-height: 0.32rem !important;
     font-size: 0.14rem !important;
   }
   .el-message-box__message p {
@@ -636,6 +668,18 @@
   .el-form-item--medium .el-form-item__content {
     width: 100%;
   }
+  .el-popover {
+    // min-width: 1.5rem !important;
+    min-width: 4.6rem !important;
+    border-radius: 0.04rem !important;
+    border: 0.01rem solid #e6ebf5 !important;
+    padding: 0.12rem !important;
+    font-size: 0.14rem !important;
+  }
+  .el-card__header {
+    padding: 0.14rem 0.15rem 0.07rem !important;
+    min-height: 0.4rem !important;
+}
 }
 @media (min-width: 2000px) {
   // 页面公共样式

src/components/IconSelect/index.vue

@@ -73,6 +73,8 @@ export default {
           display: flex;
           .icon-item {
             display: flex;
+            flex-wrap: row;
+            align-items: center;
             max-width: 100%;
             height: 100%;
             padding: 0 5px;
@@ -101,4 +103,34 @@ export default {
       }
     }
   }
+  // 媒体查询，适配大于2000px分辨率的大屏样式-element样式
+@media (min-width: 2000px) {
+  .icon-body {
+    padding: 0.1rem !important;
+    .icon-search {
+      margin-bottom: 0.05rem !important;
+    }
+    .icon-list {
+      height: 2rem !important;
+      .list-container {
+        .icon-item-wrapper {
+          height: 0.25rem !important;
+          line-height: 0.25rem !important;
+          .icon-item {
+            padding: 0 0.05rem !important;
+            &:hover {
+              border-radius: 0.05rem !important;
+            }
+            span {
+              padding-left: 0.02rem !important;
+            }
+          }
+          .icon-item.active {
+            border-radius: 0.05rem !important;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/views/bigScreen/components/useElect.vue

@@ -180,6 +180,7 @@ export default {
       systemTrend(data).then((res) => {
         console.log("用电趋势返回", res);
         if (res.code == 200) {
+          const titleFontSize = this.$refs.sys_charts.offsetWidth / 40;
           let adapterOption = {};
           // 添加折线的配置
           adapterOption = {
@@ -209,6 +210,14 @@ export default {
             },
             xAxis: {
               data: res.rows[0].timeStr,
+              axisLabel: {
+                fontSize: titleFontSize,
+              },
+            },
+            yAxis: {
+              axisLabel: {
+                fontSize: titleFontSize,
+              },
             },
             series: [
               {

src/views/centerairC/temHistoryQuery/index.vue

@@ -261,13 +261,22 @@ export default {
     //初始化chartInstance对象
     initChart() {
       this.chartInstance = echarts.init(this.$refs.chart_ref);
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 100;
       this.option = {
         tooltip: {
           // 设置触发方式为 axis，鼠标移动到 x 轴对应位置时触发
           trigger: "axis",
+          textStyle: {
+            // 设置提示框内文字的大小
+            fontSize: titleFontSize,
+          },
         },
         legend: {
           show: false,
+          // textStyle: {
+          //   // 设置图例文字的大小
+          //   fontSize: 14
+          // }
         },
         grid: {
           top: "10%",
@@ -285,6 +294,7 @@ export default {
             // interval: 0, //强制显示所有x轴数据
             // rotate: 30, //x轴坐标字体倾斜30度
             color: "rgba(255, 255, 255, 1)",
+            fontSize: titleFontSize,  //x轴文字大小
           },
           axisTick: {
             show: false, // 不显示坐标轴刻度线
@@ -305,19 +315,18 @@ export default {
         yAxis: {
           min: 0,
           // max:20,
-          // // // min:'dataMin',
-          // // // max:'dataMax',
           // name: "kwh", // 第一个 y 轴的单位描述
           // 设置 name 的样式
           nameTextStyle: {
             color: "rgba(255, 255, 255, 1)",
-            fontSize: 12,
+            fontSize: 12,  //y轴单位文字大小 
           },
           miniInterval: 5,
           type: "value",
           // 修饰刻度标签的颜色即y坐标数据
           axisLabel: {
             color: "rgba(255, 255, 255, 1)",
+            fontSize: titleFontSize,  //x轴文字大小
           },
           // 显示y坐标轴
           axisLine: {
@@ -340,14 +349,22 @@ export default {
           {
             type: "line",
             // 拐点大小
-            symbolSize: 8,
+            symbolSize: titleFontSize * 0.5,
+            lineStyle: {
+              // 设置折线的厚度
+              width: titleFontSize * 0.1,
+            },
             symbol: "circle",
             name: "最高气温",
           },
           {
             type: "line",
             // 拐点大小
-            symbolSize: 8,
+            symbolSize: titleFontSize * 0.5,
+            lineStyle: {
+              // 设置折线的厚度
+              width: titleFontSize * 0.1,
+            },
             symbol: "circle",
             name: "最低气温",
           },

src/views/components/viewEnergy.vue

@@ -81,6 +81,7 @@ export default {
       );
       console.log("当前要渲染的数据对象", chartsObj);
       console.log("当前要渲染的颜色对象", colorObj);
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 50;
       let adapterOption = {};
       // 添加折线的配置
       adapterOption = {
@@ -106,7 +107,7 @@ export default {
                   value +
                   chartsObj.unit +
                   "</span><br>";
-              }  else {
+              } else {
                 res +=
                   marker +
                   seriesName +
@@ -121,9 +122,18 @@ export default {
         },
         xAxis: {
           data: chartsObj.timeStr,
+          axisLabel: {
+            fontSize: titleFontSize,
+          },
         },
         yAxis: {
           name: chartsObj.unit,
+          nameTextStyle: {
+            fontSize: titleFontSize,
+          },
+          axisLabel: {
+            fontSize: titleFontSize,
+          },
         },
         series: [
           {
@@ -292,16 +302,16 @@ export default {
 }
 // 媒体查询，适配大于2000px分辨率的大屏样式
 @media (min-width: 2000px) {
- .right-table {
+  .right-table {
-  padding: 0.27rem 0.15rem 0.25rem 0.15rem !important;
+    padding: 0.27rem 0.15rem 0.25rem 0.15rem !important;
-}
+  }
-.mr20 {
+  .mr20 {
-  width: 0.92rem !important;
+    width: 0.92rem !important;
-  padding: 0.02rem !important;
+    padding: 0.02rem !important;
-}
+  }
-.charts {
+  .charts {
-  margin-top: 0.2rem !important;
+    margin-top: 0.2rem !important;
-  height: 3rem !important;
+    height: 3rem !important;
-}
+  }
 }
 </style>

src/views/monitor/cache/list.vue

@@ -3,7 +3,7 @@
     <el-row :gutter="10">
       <el-col :span="8">
         <el-card style="height: calc(100vh - 125px)">
-          <div slot="header">
+          <div slot="header" class="header-list">
             <span><i class="el-icon-collection"></i> 缓存列表</span>
             <el-button
               style="float: right; padding: 3px 0"
@@ -20,11 +20,7 @@
             @row-click="getCacheKeys"
             style="width: 100%"
           >
-            <el-table-column
+            <el-table-column label="序号" type="index"></el-table-column>
-              label="序号"
-              width="60"
-              type="index"
-            ></el-table-column>
 
             <el-table-column
               label="缓存名称"
@@ -42,7 +38,6 @@
             />
             <el-table-column
               label="操作"
-              width="60"
               align="center"
               class-name="small-padding fixed-width"
             >
@@ -61,7 +56,7 @@
 
       <el-col :span="8">
         <el-card style="height: calc(100vh - 125px)">
-          <div slot="header">
+          <div slot="header" class="header-list">
             <span><i class="el-icon-key"></i> 键名列表</span>
             <el-button
               style="float: right; padding: 3px 0"
@@ -78,11 +73,7 @@
             @row-click="handleCacheValue"
             style="width: 100%"
           >
-            <el-table-column
+            <el-table-column label="序号" type="index"></el-table-column>
-              label="序号"
-              width="60"
-              type="index"
-            ></el-table-column>
             <el-table-column
               label="缓存键名"
               align="center"
@@ -92,7 +83,6 @@
             </el-table-column>
             <el-table-column
               label="操作"
-              width="60"
               align="center"
               class-name="small-padding fixed-width"
             >
@@ -111,7 +101,7 @@
 
       <el-col :span="8">
         <el-card :bordered="false" style="height: calc(100vh - 125px)">
-          <div slot="header">
+          <div slot="header" class="header-list">
             <span><i class="el-icon-document"></i> 缓存内容</span>
             <el-button
               style="float: right; padding: 3px 0"
@@ -152,7 +142,14 @@
 </template>
 
 <script>
-import { listCacheName, listCacheKey, getCacheValue, clearCacheName, clearCacheKey, clearCacheAll } from "@/api/monitor/cache";
+import {
+  listCacheName,
+  listCacheKey,
+  getCacheValue,
+  clearCacheName,
+  clearCacheKey,
+  clearCacheAll,
+} from "@/api/monitor/cache";
 
 export default {
   name: "CacheList",
@@ -164,7 +161,7 @@ export default {
       loading: true,
       subLoading: false,
       nowCacheName: "",
-      tableHeight: window.innerHeight - 200
+      tableHeight: window.innerHeight - 200,
     };
   },
   created() {
@@ -174,7 +171,7 @@ export default {
     /** 查询缓存名称列表 */
     getCacheNames() {
       this.loading = true;
-      listCacheName().then(response => {
+      listCacheName().then((response) => {
         this.cacheNames = response.data;
         this.loading = false;
       });
@@ -186,7 +183,7 @@ export default {
     },
     /** 清理指定名称缓存 */
     handleClearCacheName(row) {
-      clearCacheName(row.cacheName).then(response => {
+      clearCacheName(row.cacheName).then((response) => {
         this.$modal.msgSuccess("清理缓存名称[" + row.cacheName + "]成功");
         this.getCacheKeys();
       });
@@ -198,7 +195,7 @@ export default {
         return;
       }
       this.subLoading = true;
-      listCacheKey(cacheName).then(response => {
+      listCacheKey(cacheName).then((response) => {
         this.cacheKeys = response.data;
         this.subLoading = false;
         this.nowCacheName = cacheName;
@@ -211,7 +208,7 @@ export default {
     },
     /** 清理指定键名缓存 */
     handleClearCacheKey(cacheKey) {
-      clearCacheKey(cacheKey).then(response => {
+      clearCacheKey(cacheKey).then((response) => {
         this.$modal.msgSuccess("清理缓存键名[" + cacheKey + "]成功");
         this.getCacheKeys();
       });
@@ -226,16 +223,28 @@ export default {
     },
     /** 查询缓存内容详细 */
     handleCacheValue(cacheKey) {
-      getCacheValue(this.nowCacheName, cacheKey).then(response => {
+      getCacheValue(this.nowCacheName, cacheKey).then((response) => {
         this.cacheForm = response.data;
       });
     },
     /** 清理全部缓存 */
     handleClearCacheAll() {
-      clearCacheAll().then(response => {
+      clearCacheAll().then((response) => {
         this.$modal.msgSuccess("清理全部缓存成功");
       });
-    }
+    },
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (min-width: 2000px) {
+  ::v-deep .el-button--medium {
+    padding: 0 !important;
+  }
+
+  .header-list {
+    font-size: 0.14rem !important;
+  }
+}
+</style>

src/views/monitor/job/index.vue

@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="任务名称" prop="jobName">
             <el-input
@@ -137,12 +136,7 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column
+      <el-table-column label="任务编号" align="center" prop="jobId" />
-        label="任务编号"
-        width="100"
-        align="center"
-        prop="jobId"
-      />
       <el-table-column
         label="任务名称"
         align="center"
@@ -243,8 +237,8 @@
     />
 
     <!-- 添加或修改定时任务对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form ref="form" :model="form" :rules="rules">
         <el-row>
           <el-col :span="12">
             <el-form-item label="任务名称" prop="jobName">
@@ -285,7 +279,7 @@
           <el-col :span="24">
             <el-form-item label="cron表达式" prop="cronExpression">
               <el-input
-              style="width: 76%;"
+                style="width: 76%"
                 v-model="form.cronExpression"
                 placeholder="请输入cron执行表达式"
               >
@@ -350,13 +344,8 @@
     </el-dialog>
 
     <!-- 任务日志详细 -->
-    <el-dialog
+    <el-dialog title="任务详细" :visible.sync="openView" append-to-body>
-      title="任务详细"
+      <el-form ref="form" :model="form" size="mini">
-      :visible.sync="openView"
-      width="700px"
-      append-to-body
-    >
-      <el-form ref="form" :model="form" label-width="120px" size="mini">
         <el-row>
           <el-col :span="12">
             <el-form-item label="任务编号：">{{ form.jobId }}</el-form-item>
@@ -667,3 +656,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 800px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 8rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>

src/views/monitor/job/log.vue

@@ -7,14 +7,12 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="任务名称" prop="jobName">
             <el-input
               v-model="queryParams.jobName"
               placeholder="请输入任务名称"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +21,6 @@
               v-model="queryParams.jobGroup"
               placeholder="请选择任务组名"
               clearable
-              style="width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_job_group"
@@ -38,7 +35,6 @@
               v-model="queryParams.status"
               placeholder="请选择执行状态"
               clearable
-              style="width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_common_status"
@@ -51,7 +47,6 @@
           <el-form-item label="执行时间">
             <el-date-picker
               v-model="dateRange"
-              style="width: 240px"
               value-format="yyyy-MM-dd"
               type="daterange"
               range-separator="-"
@@ -139,12 +134,7 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column
+      <el-table-column label="日志编号" align="center" prop="jobLogId" />
-        label="日志编号"
-        width="80"
-        align="center"
-        prop="jobLogId"
-      />
       <el-table-column
         label="任务名称"
         align="center"
@@ -184,12 +174,7 @@
           />
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column label="执行时间" align="center" prop="createTime">
-        label="执行时间"
-        align="center"
-        prop="createTime"
-        width="180"
-      >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
@@ -221,13 +206,8 @@
     />
 
     <!-- 调度日志详细 -->
-    <el-dialog
+    <el-dialog title="调度日志详细" :visible.sync="open" append-to-body>
-      title="调度日志详细"
+      <el-form ref="form" :model="form" size="mini">
-      :visible.sync="open"
-      width="700px"
-      append-to-body
-    >
-      <el-form ref="form" :model="form" label-width="100px" size="mini">
         <el-row>
           <el-col :span="12">
             <el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
@@ -396,3 +376,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 700px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 100px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 7rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>

src/views/monitor/logininfor/index.vue

@@ -7,14 +7,12 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="登录地址" prop="ipaddr">
             <el-input
               v-model="queryParams.ipaddr"
               placeholder="请输入登录地址"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +21,6 @@
               v-model="queryParams.userName"
               placeholder="请输入用户名称"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -32,7 +29,6 @@
               v-model="queryParams.status"
               placeholder="登录状态"
               clearable
-              style="width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_common_status"
@@ -45,7 +41,6 @@
           <el-form-item label="登录时间">
             <el-date-picker
               v-model="dateRange"
-              style="width: 240px"
               value-format="yyyy-MM-dd HH:mm:ss"
               type="daterange"
               range-separator="-"
@@ -151,7 +146,6 @@
         label="登录地址"
         align="center"
         prop="ipaddr"
-        width="130"
         :show-overflow-tooltip="true"
       />
       <el-table-column
@@ -187,7 +181,6 @@
         prop="loginTime"
         sortable="custom"
         :sort-orders="['descending', 'ascending']"
-        width="180"
       >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.loginTime) }}</span>

src/views/monitor/online/index.vue

@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="登录地址" prop="ipaddr">
             <el-input
@@ -88,7 +87,6 @@
         label="登录时间"
         align="center"
         prop="loginTime"
-        width="180"
       >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.loginTime) }}</span>

src/views/monitor/operlog/index.vue

@@ -7,14 +7,12 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="操作地址" prop="operIp">
             <el-input
               v-model="queryParams.operIp"
               placeholder="请输入操作地址"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +21,6 @@
               v-model="queryParams.title"
               placeholder="请输入系统模块"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -32,7 +29,6 @@
               v-model="queryParams.operName"
               placeholder="请输入操作人员"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -41,7 +37,6 @@
               v-model="queryParams.businessType"
               placeholder="操作类型"
               clearable
-              style="width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_oper_type"
@@ -56,7 +51,6 @@
               v-model="queryParams.status"
               placeholder="操作状态"
               clearable
-              style="width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_common_status"
@@ -69,7 +63,6 @@
           <el-form-item label="操作时间">
             <el-date-picker
               v-model="dateRange"
-              style="width: 240px"
               value-format="yyyy-MM-dd HH:mm:ss"
               type="daterange"
               range-separator="-"
@@ -170,7 +163,6 @@
         label="操作人员"
         align="center"
         prop="operName"
-        width="110"
         :show-overflow-tooltip="true"
         sortable="custom"
         :sort-orders="['descending', 'ascending']"
@@ -179,7 +171,6 @@
         label="操作地址"
         align="center"
         prop="operIp"
-        width="130"
         :show-overflow-tooltip="true"
       />
       <el-table-column
@@ -200,7 +191,6 @@
         label="操作日期"
         align="center"
         prop="operTime"
-        width="160"
         sortable="custom"
         :sort-orders="['descending', 'ascending']"
       >
@@ -212,7 +202,6 @@
         label="消耗时间"
         align="center"
         prop="costTime"
-        width="110"
         :show-overflow-tooltip="true"
         sortable="custom"
         :sort-orders="['descending', 'ascending']"
@@ -248,13 +237,8 @@
     />
 
     <!-- 操作日志详细 -->
-    <el-dialog
+    <el-dialog title="操作日志详细" :visible.sync="open" append-to-body>
-      title="操作日志详细"
+      <el-form ref="form" :model="form" size="mini">
-      :visible.sync="open"
-      width="800px"
-      append-to-body
-    >
-      <el-form ref="form" :model="form" label-width="100px" size="mini">
         <el-row>
           <el-col :span="12">
             <el-form-item label="操作模块："
@@ -442,3 +426,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 800px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 110px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 8rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.1rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>

src/views/system/config/index.vue

@@ -7,14 +7,12 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="参数名称" prop="configName">
             <el-input
               v-model="queryParams.configName"
               placeholder="请输入参数名称"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +21,6 @@
               v-model="queryParams.configKey"
               placeholder="请输入参数键名"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -44,7 +41,6 @@
           <el-form-item label="创建时间">
             <el-date-picker
               v-model="dateRange"
-              style="width: 240px"
               value-format="yyyy-MM-dd"
               type="daterange"
               range-separator="-"
@@ -177,12 +173,7 @@
         prop="remark"
         :show-overflow-tooltip="true"
       />
-      <el-table-column
+      <el-table-column label="创建时间" align="center" prop="createTime">
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="180"
-      >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
@@ -222,8 +213,8 @@
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules">
         <el-form-item label="参数名称" prop="configName">
           <el-input v-model="form.configName" placeholder="请输入参数名称" />
         </el-form-item>
@@ -440,3 +431,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 600px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>

src/views/system/dept/index.vue

@@ -89,17 +89,9 @@
       :default-expand-all="isExpandAll"
       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
     >
-      <el-table-column
+      <el-table-column prop="deptName" label="部门名称"></el-table-column>
-        prop="deptName"
+      <el-table-column prop="orderNum" label="排序"></el-table-column>
-        label="部门名称"
+      <el-table-column prop="status" label="状态">
-        width="260"
-      ></el-table-column>
-      <el-table-column
-        prop="orderNum"
-        label="排序"
-        width="200"
-      ></el-table-column>
-      <el-table-column prop="status" label="状态" width="100">
         <template slot-scope="scope">
           <dict-tag
             :options="dict.type.sys_normal_disable"
@@ -107,12 +99,7 @@
           />
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column label="创建时间" align="center" prop="createTime">
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="200"
-      >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
@@ -153,8 +140,8 @@
     </el-table>
 
     <!-- 添加或修改部门对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules">
         <el-row>
           <el-col :span="24" v-if="form.parentId !== 0">
             <el-form-item label="上级部门" prop="parentId">
@@ -431,3 +418,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 600px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>

src/views/system/dict/data.vue

@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="字典名称" prop="dictType">
             <el-select v-model="queryParams.dictType">
@@ -167,12 +166,7 @@
         prop="remark"
         :show-overflow-tooltip="true"
       />
-      <el-table-column
+      <el-table-column label="创建时间" align="center" prop="createTime">
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="180"
-      >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
@@ -212,8 +206,8 @@
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules">
         <el-form-item label="字典类型">
           <el-input v-model="form.dictType" :disabled="true" />
         </el-form-item>
@@ -503,3 +497,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 600px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>

src/views/system/dict/index.vue

@@ -7,14 +7,12 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="字典名称" prop="dictName">
             <el-input
               v-model="queryParams.dictName"
               placeholder="请输入字典名称"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +21,6 @@
               v-model="queryParams.dictType"
               placeholder="请输入字典类型"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -32,7 +29,6 @@
               v-model="queryParams.status"
               placeholder="字典状态"
               clearable
-              style="width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_normal_disable"
@@ -45,7 +41,6 @@
           <el-form-item label="创建时间">
             <el-date-picker
               v-model="dateRange"
-              style="width: 240px"
               value-format="yyyy-MM-dd"
               type="daterange"
               range-separator="-"
@@ -184,7 +179,6 @@
         label="创建时间"
         align="center"
         prop="createTime"
-        width="180"
       >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -225,8 +219,8 @@
     />
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules">
         <el-form-item label="字典名称" prop="dictName">
           <el-input v-model="form.dictName" placeholder="请输入字典名称" />
         </el-form-item>
@@ -433,3 +427,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 600px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>

src/views/system/menu/index.vue

@@ -93,18 +93,13 @@
         prop="menuName"
         label="菜单名称"
         :show-overflow-tooltip="true"
-        width="160"
       ></el-table-column>
-      <el-table-column prop="icon" label="图标" align="center" width="100">
+      <el-table-column prop="icon" label="图标" align="center">
         <template slot-scope="scope">
           <svg-icon :icon-class="scope.row.icon" />
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column prop="orderNum" label="排序"></el-table-column>
-        prop="orderNum"
-        label="排序"
-        width="60"
-      ></el-table-column>
       <el-table-column
         prop="perms"
         label="权限标识"
@@ -115,7 +110,7 @@
         label="组件路径"
         :show-overflow-tooltip="true"
       ></el-table-column>
-      <el-table-column prop="status" label="状态" width="80">
+      <el-table-column prop="status" label="状态">
         <template slot-scope="scope">
           <dict-tag
             :options="dict.type.sys_normal_disable"
@@ -163,8 +158,8 @@
     </el-table>
 
     <!-- 添加或修改菜单对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" :model="form" :rules="rules">
         <el-row>
           <el-col :span="24">
             <el-form-item label="上级菜单" prop="parentId">
@@ -571,3 +566,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 680px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6.8rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>

src/views/system/notice/index.vue

@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="公告标题" prop="noticeTitle">
             <el-input
@@ -121,12 +120,7 @@
         prop="noticeTitle"
         :show-overflow-tooltip="true"
       />
-      <el-table-column
+      <el-table-column label="公告类型" align="center" prop="noticeType">
-        label="公告类型"
-        align="center"
-        prop="noticeType"
-        width="100"
-      >
         <template slot-scope="scope">
           <dict-tag
             :options="dict.type.sys_notice_type"
@@ -134,7 +128,7 @@
           />
         </template>
       </el-table-column>
-      <el-table-column label="状态" align="center" prop="status" width="100">
+      <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
           <dict-tag
             :options="dict.type.sys_notice_status"
@@ -142,18 +136,8 @@
           />
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column label="创建者" align="center" prop="createBy" />
-        label="创建者"
+      <el-table-column label="创建时间" align="center" prop="createTime">
-        align="center"
-        prop="createBy"
-        width="100"
-      />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="100"
-      >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
         </template>
@@ -193,8 +177,8 @@
     />
 
     <!-- 添加或修改公告对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules">
         <el-row>
           <el-col :span="12">
             <el-form-item label="公告标题" prop="noticeTitle">
@@ -394,3 +378,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 780px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 7.8rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>

src/views/system/post/index.vue

@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="岗位编码" prop="postCode">
             <el-input
@@ -177,8 +176,8 @@
     />
 
     <!-- 添加或修改岗位对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules">
         <el-form-item label="岗位名称" prop="postName">
           <el-input v-model="form.postName" placeholder="请输入岗位名称" />
         </el-form-item>
@@ -383,3 +382,38 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 600px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
+

src/views/system/role/authUser.vue

@@ -14,7 +14,7 @@
               v-model="queryParams.userName"
               placeholder="请输入用户名称"
               clearable
-              style="width: 240px"
+              style="width: 2.4rem; min-width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +23,7 @@
               v-model="queryParams.phonenumber"
               placeholder="请输入手机号码"
               clearable
-              style="width: 240px"
+              style="width: 2.4rem; min-width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>

src/views/system/role/index.vue

@@ -14,7 +14,6 @@
               v-model="queryParams.roleName"
               placeholder="请输入角色名称"
               clearable
-              style="width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -23,7 +22,7 @@
               v-model="queryParams.roleKey"
               placeholder="请输入权限字符"
               clearable
-              style="width: 240px"
+              style="width: 2.4rem; min-width: 240px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
@@ -32,7 +31,7 @@
               v-model="queryParams.status"
               placeholder="角色状态"
               clearable
-              style="width: 240px"
+              style="width: 2.4rem; min-width: 240px"
             >
               <el-option
                 v-for="dict in dict.type.sys_normal_disable"
@@ -45,7 +44,7 @@
           <el-form-item label="创建时间">
             <el-date-picker
               v-model="dateRange"
-              style="width: 240px"
+              style="width: 2.4rem; min-width: 240px"
               value-format="yyyy-MM-dd"
               type="daterange"
               range-separator="-"
@@ -135,21 +134,19 @@
       stripe
     >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="角色编号" prop="roleId" width="120" />
+      <el-table-column label="角色编号" prop="roleId" />
       <el-table-column
         label="角色名称"
         prop="roleName"
         :show-overflow-tooltip="true"
-        width="150"
       />
       <el-table-column
         label="权限字符"
         prop="roleKey"
         :show-overflow-tooltip="true"
-        width="150"
       />
-      <el-table-column label="显示顺序" prop="roleSort" width="100" />
+      <el-table-column label="显示顺序" prop="roleSort" />
-      <el-table-column label="状态" align="center" width="100">
+      <el-table-column label="状态" align="center">
         <template slot-scope="scope">
           <el-switch
             v-model="scope.row.status"
@@ -159,12 +156,7 @@
           ></el-switch>
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column label="创建时间" align="center" prop="createTime">
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="180"
-      >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
@@ -227,8 +219,8 @@
     />
 
     <!-- 添加或修改角色配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" :model="form" :rules="rules">
         <el-form-item label="角色名称" prop="roleName">
           <el-input v-model="form.roleName" placeholder="请输入角色名称" />
         </el-form-item>
@@ -249,6 +241,7 @@
             v-model="form.roleSort"
             controls-position="right"
             :min="0"
+            style="width: 50%;"
           />
         </el-form-item>
         <el-form-item label="状态">
@@ -740,3 +733,37 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 600px !important;
+  }
+  ::v-deep .el-form-item--medium .el-form-item__content {
+    width: 100%;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 120px !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 6rem !important;
+  }
+
+  ::v-deep .el-dialog .el-form-item__label {
+    width: 1.2rem !important;
+  }
+  ::v-deep .el-dialog .el-form-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>

src/views/temSys/temHistory/components/historyCharts.vue

@@ -306,4 +306,13 @@ export default {
   width: 100% !important;
   height: 600px !important;
 }
+/* // 媒体查询，适配大于2000px分辨率的大屏样式 */
+@media (min-width: 2000px) {
+  .historyCharts {
+    height: 2.3rem !important;
+  }
+  .oneClass {
+    height: 6rem !important;
+  }
+}
 </style>

src/views/temSys/temHistory/index.vue

@@ -349,7 +349,7 @@ export default {
       }
     }
     .oneClass {
-      width: 100% !important;
+      width: calc(100% - 0.4rem) !important;
       height: 7.5rem !important;
     }
     .twoClass {

src/views/temSys/temMonitor/index.vue

@@ -147,12 +147,7 @@
       </div>
     </div>
     <!-- 历史数据弹框 -->
-    <el-dialog
+    <el-dialog title="当日数据" :visible.sync="openDialog" append-to-body>
-      title="当日数据"
-      :visible.sync="openDialog"
-      width="900px"
-      append-to-body
-    >
       <div class="charts" ref="chart_ref"></div>
     </el-dialog>
     <!-- <div class="charts" ref="chart_ref"></div> -->
@@ -476,15 +471,21 @@ export default {
       if (chartRef) {
         // 初始化图表的代码
         this.chartInstance = echarts.init(this.$refs.chart_ref);
+        const titleFontSize = this.$refs.chart_ref.offsetWidth / 70;
         this.option = {
           tooltip: {
             trigger: "axis",
+            textStyle: {
+              // 设置提示框内文字的大小
+              fontSize: titleFontSize,
+            },
           },
           legend: {
             show: true,
             top: 10,
             textStyle: {
               color: "white",
+              fontSize: titleFontSize,
             },
           },
           grid: {
@@ -503,6 +504,7 @@ export default {
               // interval: 0, //强制显示所有x轴数据
               // rotate: 30, //x轴坐标字体倾斜30度
               color: "rgba(255, 255, 255, 1)",
+              fontSize: titleFontSize, //x轴文字大小
             },
             axisTick: {
               show: false, // 不显示坐标轴刻度线
@@ -537,6 +539,7 @@ export default {
             // 修饰刻度标签的颜色即y坐标数据
             axisLabel: {
               color: "rgba(255, 255, 255, 1)",
+              fontSize: titleFontSize, //x轴文字大小
             },
             // 显示y坐标轴
             axisLine: {
@@ -559,7 +562,12 @@ export default {
             {
               type: "line",
               // 拐点大小
-              symbolSize: 8,
+              // 拐点大小
+              symbolSize: titleFontSize * 0.5,
+              lineStyle: {
+                // 设置折线的厚度
+                width: titleFontSize * 0.1,
+              },
               data: this.chartData2,
               name: "湿度",
               //折线颜色
@@ -593,7 +601,11 @@ export default {
             {
               type: "line",
               // 拐点大小
-              symbolSize: 8,
+              symbolSize: titleFontSize * 0.5,
+              lineStyle: {
+                // 设置折线的厚度
+                width: titleFontSize * 0.1,
+              },
               data: this.chartData1,
               name: "温度",
               //折线颜色
@@ -978,8 +990,8 @@ export default {
     }
   }
   .charts {
-    width: 870px;
+    width: 8.7rem !important;
-    height: 300px;
+    height: 3rem !important;
   }
 }
 </style>
@@ -994,3 +1006,16 @@ export default {
   color: #25f1f8;
 }
 </style>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 900px !important;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 9rem !important;
+  }
+}
+</style>

src/views/tool/build/index.vue

@@ -599,7 +599,7 @@ $lighterBlue: #409eff;
   height: calc(100vh - 42px);
   overflow: hidden;
   border-left: 1px solid #0e5191;
-  border-right: 1px solid #0e5191 ;
+  border-right: 1px solid #0e5191;
   box-sizing: border-box;
 }
 .center-board {
@@ -623,8 +623,8 @@ $lighterBlue: #409eff;
   height: 42px;
   text-align: right;
   padding: 0 15px;
-  box-sizing: border-box;;
+  box-sizing: border-box;
-  border: 1px solid  #0e5191 ;
+  border: 1px solid #0e5191;
   border-top: none;
   border-left: none;
   .delete-btn {
@@ -810,4 +810,202 @@ $lighterBlue: #409eff;
 .delete-btn::after {
   display: none !important;
 }
+
+// 媒体查询，适配大于2000px分辨率的大屏样式
+@media (min-width: 2000px) {
+  .editor-tabs {
+    .el-tabs__item {
+      height: 0.32rem !important;
+      line-height: 0.32rem !important;
+      border-left: 0.01rem solid #121315 !important;
+      margin-right: 0.05rem !important;
+    }
+  }
+
+  // home
+  .right-scrollbar {
+    .el-scrollbar__view {
+      padding: 0.12rem 0.18rem 0.15rem 0.15rem !important;
+    }
+  }
+  .reg-item {
+    padding: 0.12rem 0.06rem !important;
+    border-radius: 0.04rem !important;
+    .close-btn {
+      right: -0.06rem !important;
+      top: -0.06rem !important;
+      width: 0.16rem !important;
+      height: 0.16rem !important;
+      line-height: 0.16rem !important;
+      font-size: 0.12rem !important;
+    }
+    & + .reg-item {
+      margin-top: 0.18rem !important;
+    }
+  }
+  .action-bar {
+    & .el-button + .el-button {
+      margin-left: 0.15rem !important;
+    }
+    & i {
+      font-size: 0.2rem !important;
+      top: -0.01rem !important;
+    }
+  }
+
+  .custom-tree-node {
+    font-size: 0.14rem !important;
+    i[class*="el-icon"] + i[class*="el-icon"] {
+      margin-left: 0.06rem !important;
+    }
+  }
+  .components-list {
+    padding: 0.08rem !important;
+  }
+  .components-draggable {
+    padding-bottom: 0.2rem !important;
+  }
+  .components-title {
+    font-size: 0.14rem !important;
+    margin: 0.06rem 0.02rem !important;
+    .svg-icon {
+      font-size: 0.18rem !important;
+    }
+  }
+
+  .components-body {
+    padding: 0.08rem 0.1rem !important;
+    font-size: 0.12rem !important;
+    border: 0.01rem dashed #436efc !important;
+    border-radius: 0.03rem !important;
+    .svg-icon {
+      font-size: 0.15rem !important;
+    }
+    &:hover {
+      border: 0.01rem dashed #787be8 !important;
+    }
+  }
+
+  .left-board {
+    width: 2.6rem !important;
+  }
+  .left-scrollbar {
+    height: calc(100vh - 0.42rem) !important;
+  }
+  .center-scrollbar {
+    height: calc(100vh - 0.42rem) !important;
+    border-left: 0.01rem solid #0e5191 !important;
+    border-right: 0.01rem solid #0e5191 !important;
+  }
+  .center-board {
+    margin: 0 3.5rem 0 2.6rem !important;
+  }
+  .empty-info {
+    font-size: 0.18rem !important;
+    letter-spacing: 0.04rem !important;
+  }
+  .action-bar {
+    height: 0.42rem !important;
+    padding: 0 0.15rem !important;
+    border: 0.01rem solid #0e5191 !important;
+  }
+  .logo-wrapper {
+    height: 0.42rem !important;
+    border-bottom: 0.01rem solid #0e5191 !important;
+  }
+  .logo {
+    left: 0.12rem !important;
+    top: 0.06rem !important;
+    line-height: 0.3rem !important;
+    font-size: 0.17rem !important;
+    > img {
+      width: 0.3rem !important;
+      height: 0.3rem !important;
+    }
+    .github {
+      margin-left: 0.15rem !important;
+      > img {
+        height: 0.22rem !important;
+      }
+    }
+  }
+
+  .center-board-row {
+    padding: 0.12rem 0.12rem 0.15rem 0.12rem !important;
+    & > .el-form {
+      height: calc(100vh - 0.69rem) !important;
+    }
+  }
+  .drawing-board {
+    .sortable-ghost {
+      &::before {
+        height: 0.03rem !important;
+      }
+    }
+    .components-item.sortable-ghost {
+      height: 0.6rem !important;
+    }
+    .active-from-item {
+      & > .el-form-item {
+        border-radius: 0.06rem !important;
+      }
+    }
+    .el-form-item {
+      margin-bottom: 0.15rem !important;
+    }
+  }
+  .drawing-item {
+    &.unfocus-bordered:not(.activeFromItem) > div:first-child {
+      border: 0.01rem dashed #ccc !important;
+    }
+    .el-form-item {
+      padding: 0.12rem 0.1rem !important;
+    }
+  }
+  .drawing-row-item {
+    border: 0.01rem dashed #ccc !important;
+    border-radius: 0.03rem !important;
+    padding: 0 0.02rem !important;
+    margin-bottom: 0.15rem !important;
+    .drawing-row-item {
+      margin-bottom: 0.02rem !important;
+    }
+    .el-col {
+      margin-top: 0.22rem !important;
+    }
+    .drag-wrapper {
+      min-height: 0.8rem !important;
+    }
+    &.active-from-item {
+      border: 0.01rem dashed $lighterBlue !important;
+    }
+    .component-name {
+      font-size: 0.12rem !important;
+      padding: 0 0.06rem !important;
+    }
+  }
+  .drawing-item,
+  .drawing-row-item {
+    &:hover {
+      & > .el-form-item {
+        border-radius: 0.06rem !important;
+      }
+    }
+    & > .drawing-item-copy,
+    & > .drawing-item-delete {
+      top: -0.1rem !important;
+      width: 0.22rem !important;
+      height: 0.22rem !important;
+      line-height: 0.22rem !important;
+      font-size: 0.12rem !important;
+      border: 0.01rem solid !important;
+    }
+    & > .drawing-item-copy {
+      right: 0.56rem !important;
+    }
+    & > .drawing-item-delete {
+      right: 0.24rem !important;
+    }
+  }
+}
 </style>

src/views/tool/gen/createTable.vue

@@ -1,8 +1,13 @@
 <template>
   <!-- 创建表 -->
-  <el-dialog title="创建表" :visible.sync="visible" width="800px" top="5vh" append-to-body>
+  <el-dialog title="创建表" :visible.sync="visible" top="5vh" append-to-body>
     <span>创建表语句(支持多个建表语句)：</span>
-    <el-input type="textarea" :rows="10" placeholder="请输入文本" v-model="content"></el-input>
+    <el-input
+      type="textarea"
+      :rows="10"
+      placeholder="请输入文本"
+      v-model="content"
+    ></el-input>
     <div slot="footer" class="dialog-footer">
       <el-button @click="visible = false">取 消</el-button>
       <el-button type="primary" @click="handleCreateTable">确 定</el-button>
@@ -18,7 +23,7 @@ export default {
       // 遮罩层
       visible: false,
       // 文本内容
-      content: ""
+      content: "",
     };
   },
   methods: {
@@ -32,14 +37,27 @@ export default {
         this.$modal.msgError("请输入建表语句");
         return;
       }
-      createTable({ sql: this.content }).then(res => {
+      createTable({ sql: this.content }).then((res) => {
         this.$modal.msgSuccess(res.msg);
         if (res.code === 200) {
           this.visible = false;
           this.$emit("ok");
         }
       });
-    }
+    },
-  }
+  },
 };
 </script>
+<style scoped lang="scss">
+/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
+@media (max-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 800px !important;
+  }
+}
+@media (min-width: 2000px) {
+  ::v-deep .el-dialog {
+    width: 8rem !important;
+  }
+}
+</style>

src/views/tool/gen/index.vue

@@ -7,7 +7,6 @@
           ref="queryForm"
           size="small"
           :inline="true"
-          label-width="68px"
         >
           <el-form-item label="表名称" prop="tableName">
             <el-input
@@ -146,33 +145,28 @@
         align="center"
         prop="tableName"
         :show-overflow-tooltip="true"
-        width="120"
       />
       <el-table-column
         label="表描述"
         align="center"
         prop="tableComment"
         :show-overflow-tooltip="true"
-        width="120"
       />
       <el-table-column
         label="实体"
         align="center"
         prop="className"
         :show-overflow-tooltip="true"
-        width="120"
       />
       <el-table-column
         label="创建时间"
         align="center"
         prop="createTime"
-        width="160"
       />
       <el-table-column
         label="更新时间"
         align="center"
         prop="updateTime"
-        width="160"
       />
       <el-table-column
         label="操作"