update

report-ui/src/assets/styles/index.scss

@@ -90,6 +90,7 @@ a:hover {
 
 .app-container {
   padding: 20px;
+  background: #fff;
 }
 
 .filter-container {
@@ -317,34 +318,38 @@ a:hover {
 // 'waterway': 'table-info',
 // 'airtransport': 'table-warning',
 // 'multimodal': 'table-danger'
-.table-primary,.table-success,.table-info,.table-warning,.table-danger{
-  border-radius:3px;
+.table-primary,
+.table-success,
+.table-info,
+.table-warning,
+.table-danger {
+  border-radius: 3px;
   padding: 2px 5px;
   border-width: 1px;
   border-style: solid;
 }
-.table-primary{
-  background: rgba(32, 182, 249, .1);
-  border-color: rgba(32, 182, 249, .2);
+.table-primary {
+  background: rgba(32, 182, 249, 0.1);
+  border-color: rgba(32, 182, 249, 0.2);
   color: rgb(32, 182, 249);
 }
-.table-success{
-  background: rgba(0, 226, 68, .1);
+.table-success {
+  background: rgba(0, 226, 68, 0.1);
   border-color: rgba(0, 226, 68, 0.2);
   color: rgb(0, 226, 68);
 }
-.table-info{
-  background: rgba(216, 216, 216, .1);
-  border-color: rgba(216, 216, 216, .2);
+.table-info {
+  background: rgba(216, 216, 216, 0.1);
+  border-color: rgba(216, 216, 216, 0.2);
   color: rgb(216, 216, 216);
 }
-.table-warning{
-  background: rgba(255, 216, 40, .1);
-  border-color: rgba(255, 216, 40, .2);
+.table-warning {
+  background: rgba(255, 216, 40, 0.1);
+  border-color: rgba(255, 216, 40, 0.2);
   color: rgb(241, 185, 0);
 }
-.table-danger{
-  background: rgba(249, 32, 32, .1);
-  border-color: rgba(249, 32, 32, .2);
+.table-danger {
+  background: rgba(249, 32, 32, 0.1);
+  border-color: rgba(249, 32, 32, 0.2);
   color: rgb(249, 32, 32);
-}
+}

report-ui/src/views/report/bigscreen/index.vue

@@ -11,32 +11,81 @@
       <el-row :gutter="10">
         <el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4">
           <el-form-item label="名称">
-            <el-input v-model="params.reportName" size="mini" clearable placeholder="名称" class="filter-item" />
+            <el-input
+              v-model="params.reportName"
+              size="mini"
+              clearable
+              placeholder="名称"
+              class="filter-item"
+            />
           </el-form-item>
         </el-col>
         <el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4">
           <el-form-item label="报表编码">
-            <el-input v-model="params.reportCode" size="mini" clearable placeholder="报表编码" class="filter-item" />
+            <el-input
+              v-model="params.reportCode"
+              size="mini"
+              clearable
+              placeholder="报表编码"
+              class="filter-item"
+            />
           </el-form-item>
         </el-col>
-        <el-col :xs="24" :sm="20" :md="4" :lg="4" :xl="4">
-          <el-button type="primary" size="mini" @click="search('form')">查询</el-button>
-          <el-button type="danger" size="mini" @click="reset('form')">重置</el-button>
+        <el-col
+          :xs="24"
+          :sm="20"
+          :md="4"
+          :lg="4"
+          :xl="4"
+          style="margin-top: 5px"
+        >
+          <el-button type="primary" size="mini" @click="search('form')"
+            >查询</el-button
+          >
+          <el-button type="danger" size="mini" @click="reset('form')"
+            >重置</el-button
+          >
         </el-col>
       </el-row>
     </el-form>
     <el-row :gutter="20">
       <el-col v-for="item in list" :key="item.id" :span="6">
         <div class="bg">
-          <img class="bg-img" :src="(item.reportImage == null || item.reportImage == '') ? require('../../../assets/images/charts.jpg') : item.reportImage" alt="" />
+          <img
+            class="bg-img"
+            :src="
+              item.reportImage == null || item.reportImage == ''
+                ? require('../../../assets/images/charts.jpg')
+                : item.reportImage
+            "
+            alt=""
+          />
           <div class="content">
             <header>{{ item.reportName }}</header>
             <footer>
               {{ item.updateTime }}
               <div class="operation">
-                <el-button icon="el-icon-share" class="view" type="text" @click="share(item)" v-permission="'bigScreenManage:share'"/>
-                <el-button icon="el-icon-view" class="view" type="text" @click="viewDesign(item)" v-permission="'bigScreenManage:view'"/>
-                <el-button icon="el-icon-edit" class="edit" type="text" @click="openDesign(item)" v-permission="'bigScreenManage:design'"/>
+                <el-button
+                  icon="el-icon-share"
+                  class="view"
+                  type="text"
+                  @click="share(item)"
+                  v-permission="'bigScreenManage:share'"
+                />
+                <el-button
+                  icon="el-icon-view"
+                  class="view"
+                  type="text"
+                  @click="viewDesign(item)"
+                  v-permission="'bigScreenManage:view'"
+                />
+                <el-button
+                  icon="el-icon-edit"
+                  class="edit"
+                  type="text"
+                  @click="openDesign(item)"
+                  v-permission="'bigScreenManage:design'"
+                />
               </div>
             </footer>
           </div>
@@ -44,18 +93,30 @@
       </el-col>
     </el-row>
     <div class="block">
-      <el-pagination :total="totalCount" :page-sizes="[8, 20, 50, 100]" :page-size="params.pageSize" :current-page="params.pageNumber" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+      <el-pagination
+        :total="totalCount"
+        :page-sizes="[8, 20, 50, 100]"
+        :page-size="params.pageSize"
+        :current-page="params.pageNumber"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
     </div>
-    <Share :visib="visibleForShareDialog" :reportCode="reportCodeForShareDialog" @handleClose="visibleForShareDialog = false" />
+    <Share
+      :visib="visibleForShareDialog"
+      :reportCode="reportCodeForShareDialog"
+      @handleClose="visibleForShareDialog = false"
+    />
   </div>
 </template>
 
 <script>
-import Share from '@/views/report/report/components/share'
-import { reportPageList } from '@/api/report'
+import Share from "@/views/report/report/components/share";
+import { reportPageList } from "@/api/report";
 export default {
-  name: 'Login',
-  components: {Share},
+  name: "Login",
+  components: { Share },
   data() {
     return {
       list: [],
@@ -63,83 +124,83 @@ export default {
       totalCount: 0,
       totalPage: 0,
       params: {
-        reportCode: '',
-        reportName: '',
+        reportCode: "",
+        reportName: "",
         // reportType: '',
         pageNumber: 1,
         pageSize: 8,
-        order: 'DESC',
-        sort: 'update_time',
+        order: "DESC",
+        sort: "update_time"
       },
       // 分享
       visibleForShareDialog: false,
-      reportCodeForShareDialog: '',
-    }
+      reportCodeForShareDialog: ""
+    };
   },
   mounted() {},
   created() {
-    this.queryByPage()
+    this.queryByPage();
   },
   methods: {
     // 查询
     search() {
-      this.params.pageNumber = 1
-      this.queryByPage()
+      this.params.pageNumber = 1;
+      this.queryByPage();
     },
     // 重置
     reset(formName) {
-      this.$refs[formName].resetFields()
-      this.params.reportName = ''
-      this.params.reportCode = ''
-      this.params.pageNumber = 1
-      this.queryByPage()
+      this.$refs[formName].resetFields();
+      this.params.reportName = "";
+      this.params.reportCode = "";
+      this.params.pageNumber = 1;
+      this.queryByPage();
     },
     async queryByPage() {
-      const res = await reportPageList(this.params)
-      if (res.code != '200') return
-      this.listLoading = true
-      this.list = res.data.records
-      this.list.forEach((value) => {
-        value['reportNameCode'] =
-          value.reportName + '[' + value.reportCode + ']'
-      })
-      this.totalCount = res.data.total
-      this.totalPage = res.data.pages
-      this.listLoading = false
+      const res = await reportPageList(this.params);
+      if (res.code != "200") return;
+      this.listLoading = true;
+      this.list = res.data.records;
+      this.list.forEach(value => {
+        value["reportNameCode"] =
+          value.reportName + "[" + value.reportCode + "]";
+      });
+      this.totalCount = res.data.total;
+      this.totalPage = res.data.pages;
+      this.listLoading = false;
     },
     handleSizeChange(val) {
-      this.params.pageSize = val
-      this.queryByPage()
+      this.params.pageSize = val;
+      this.queryByPage();
     },
     handleCurrentChange(val) {
-      this.params.pageNumber = val
-      this.queryByPage()
+      this.params.pageNumber = val;
+      this.queryByPage();
     },
     // 分享
     share(val) {
-      this.reportCodeForShareDialog = val.reportCode
-      this.visibleForShareDialog = true
+      this.reportCodeForShareDialog = val.reportCode;
+      this.visibleForShareDialog = true;
     },
     openDesign(val) {
       var routeUrl = this.$router.resolve({
-        path: '/bigscreen/designer',
+        path: "/bigscreen/designer",
         query: {
           reportCode: val.reportCode,
           reportId: val.id,
-          accessKey: val.accessKey,
-        },
-      })
-      window.open(routeUrl.href, '_blank')
+          accessKey: val.accessKey
+        }
+      });
+      window.open(routeUrl.href, "_blank");
     },
     viewDesign(val) {
       var routeUrl = this.$router.resolve({
-        path: '/bigscreen/viewer',
-        query: { reportCode: val.reportCode },
-      })
-      window.open(routeUrl.href, '_blank')
-    },
-  },
-}
+        path: "/bigscreen/viewer",
+        query: { reportCode: val.reportCode }
+      });
+      window.open(routeUrl.href, "_blank");
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">
@@ -147,6 +208,7 @@ export default {
   padding: 20px;
   position: relative;
   height: auto;
+  background: #fff;
   header {
     font-size: 24px;
     text-align: center;