update img

report-ui/src/views/report/bigscreen/designer/form/contentMenu.vue

@@ -3,19 +3,19 @@
     <div class="contentmenu__item" @click="deleteLayer">
       <i class="iconfont iconguanbi"></i> 删除图层
     </div>
-    <div class="contentmenu__item" @click="deleteLayer">
+    <div class="contentmenu__item" @click="copyLayer">
       <i class="iconfont iconfuzhi1"></i> 复制图层
     </div>
-    <div class="contentmenu__item" @click="deleteLayer">
+    <div class="contentmenu__item" @click="istopLayer">
       <i class="iconfont iconjinlingyingcaiwangtubiao01"></i> 置顶图层
     </div>
-    <div class="contentmenu__item" @click="deleteLayer">
-      <i class="iconfont iconleft-copy"></i> 置地图层
+    <div class="contentmenu__item" @click="setlowLayer">
+      <i class="iconfont iconleft-copy"></i> 置低图层
     </div>
-    <div class="contentmenu__item" @click="deleteLayer">
+    <div class="contentmenu__item" @click="moveupLayer">
       <i class="iconfont iconjinlingyingcaiwangtubiao01"></i> 上移一层
     </div>
-    <div class="contentmenu__item" @click="deleteLayer">
+    <div class="contentmenu__item" @click="movedownLayer">
       <i class="iconfont iconleft-copy"></i> 下移一层
     </div>
   </div>
@@ -61,6 +61,21 @@ export default {
             message: "已取消删除"
           });
         });
+    },
+    copyLayer() {
+      this.$emit("copylayer");
+    },
+    istopLayer() {
+      this.$emit("istopLayer");
+    },
+    setlowLayer() {
+      this.$emit("setlowLayer");
+    },
+    moveupLayer() {
+      this.$emit("moveupLayer");
+    },
+    movedownLayer() {
+      this.$emit("movedownLayer");
     }
   }
 };

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

@@ -30,18 +30,22 @@
         </el-tab-pane>
         <!-- 左侧图层-->
         <el-tab-pane label="图层">
-          <div
-            v-for="(item, index) in layerWidget"
-            :key="index"
-            class="tools-item"
-            :class="widgetIndex == index ? 'is-active' : ''"
-            @click="layerClick(index)"
-          >
-            <span class="tools-item-icon">
-              <i class="iconfont" :class="item.icon"></i>
-            </span>
-            <span class="tools-item-text">{{ item.label }}</span>
-          </div>
+          <draggable v-model="layerWidget">
+            <transition-group>
+              <div
+                v-for="(item, index) in layerWidget"
+                :key="'item' + index"
+                class="tools-item"
+                :class="widgetIndex == index ? 'is-active' : ''"
+                @click="layerClick(index)"
+              >
+                <span class="tools-item-icon">
+                  <i class="iconfont" :class="item.icon"></i>
+                </span>
+                <span class="tools-item-text">{{ item.label }}</span>
+              </div>
+            </transition-group>
+          </draggable>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -206,6 +210,11 @@
       :visible.sync="visibleContentMenu"
       :style-obj="styleObj"
       @deletelayer="deletelayer"
+      @copylayer="copylayer"
+      @istopLayer="istopLayer"
+      @setlowLayer="setlowLayer"
+      @moveupLayer="moveupLayer"
+      @movedownLayer="movedownLayer"
     />
   </div>
 </template>
@@ -639,9 +648,6 @@ export default {
       this.visibleContentMenu = true;
       return false;
     },
-    deletelayer() {
-      this.widgets.splice(this.rightClickIndex, 1);
-    },
     setDefaultValue(options, val) {
       for (let i = 0; i < options.length; i++) {
         if (Object.prototype.toString.call(options[i]) == "[object Object]") {
@@ -665,7 +671,21 @@ export default {
           }
         }
       }
-    }
+    },
+    // 删除
+    deletelayer() {
+      this.widgets.splice(this.rightClickIndex, 1);
+    },
+    // 复制
+    copylayer() {},
+    // 置顶
+    istopLayer() {},
+    // 置低
+    setlowLayer() {},
+    // 上移一层
+    moveupLayer() {},
+    // 下移一层
+    movedownLayer() {}
   }
 };
 </script>

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

@@ -6,56 +6,45 @@
  !-->
 <template>
   <div class="main-layout">
-    <el-form ref="form"
-             :model="params"
-             :rules="rules"
-             label-width="120px">
+    <el-form ref="form" :model="params" :rules="rules" label-width="120px">
       <!-- 搜索 -->
       <el-row :gutter="10">
-        <el-col :xs="24"
-                :sm="20"
-                :md="12"
-                :lg="6"
-                :xl="4">
+        <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-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">
+          <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">
-          <div class="rgba" />
+          <img class="bg-img" src="../../../assets/images/charts.jpg" alt="" />
           <div class="content">
             <header>{{ item.reportName }}</header>
             <footer>
@@ -80,19 +69,21 @@
       </el-col>
     </el-row>
     <div class="block">
-      <el-pagination :total="totalCount"
-                     :page-sizes="[10, 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="[10, 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>
   </div>
 </template>
 
 <script>
-import { reportPageList } from '@/api/report'
+import { reportPageList } from "@/api/report";
 export default {
   name: "Login",
   components: {},
@@ -102,61 +93,72 @@ 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"
+      }
     };
   },
   mounted() {},
   created() {
-    this.queryByPage()
+    this.queryByPage();
   },
   methods: {
     // 查询
-    search () {
-      this.params.pageNumber = 1
-      this.queryByPage()
+    search() {
+      this.params.pageNumber = 1;
+      this.queryByPage();
     },
     // 重置
-    reset (formName) {
-      this.$refs[formName].resetFields()
-      this.params.reportName = ''
-      this.params.reportCode = ''
-      this.params.pageNumber = 1
-      this.queryByPage()
+    reset(formName) {
+      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
+    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;
     },
-    handleSizeChange (val) {
-      this.params.pageSize = val
-      this.queryByPage()
+    handleSizeChange(val) {
+      this.params.pageSize = val;
+      this.queryByPage();
     },
-    handleCurrentChange (val) {
-      this.params.pageNumber = val
-      this.queryByPage()
+    handleCurrentChange(val) {
+      this.params.pageNumber = val;
+      this.queryByPage();
     },
     openDesign(val) {
-      var routeUrl = this.$router.resolve({ path: '/bigscreen/designer', query: { reportCode: val.reportCode, reportId: val.id, accessKey: val.accessKey } })
-      window.open(routeUrl.href, '_blank')
+      var routeUrl = this.$router.resolve({
+        path: "/bigscreen/designer",
+        query: {
+          reportCode: val.reportCode,
+          reportId: val.id,
+          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')
+      var routeUrl = this.$router.resolve({
+        path: "/bigscreen/viewer",
+        query: { reportCode: val.reportCode }
+      });
+      window.open(routeUrl.href, "_blank");
     }
   }
 };
@@ -181,15 +183,10 @@ export default {
     border: 12px solid white;
   }
 
-  .bg::before {
-    content: "";
+  .bg .bg-img {
     position: absolute;
     width: 100%;
     height: 100%;
-    background-image: url("../../../assets/images/charts.jpg");
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-position: left top;
     filter: blur(6px);
     z-index: 2;
   }