update code

src/api/index.js

@@ -20,6 +20,7 @@ import standard from './standard/index'
 import flow from './flow/index'
 import video from './video/index'
 import plan from './plan/index'
+import periodical from './periodical/index'
 import {axios,download} from '@/utils/request'
 export default {
     project,
@@ -31,6 +32,7 @@ export default {
     workTrain,
     special,
     dict,
+    periodical,
     costOut,
     attendance,
     insurance,

src/api/periodical/index.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+const getList=()=> {
+  return request({
+    url: `bgscreen/periodical/getList`,
+    method: 'get'
+  })
+}
+
+export default{
+    getList
+}

src/components/chart-bar.js

@@ -6,7 +6,6 @@ Vue.component("chart-bar", {
  
             </div>            
         </div>            
-            
     `,
     props: {
         fn:{

src/pages/engin/enginImageItems.vue

@@ -1,33 +1,52 @@
 <template>
     <div class="engin-image-items">
         <div class="tool-bar">
-            <span class="sp-page" @click="goNextPage(-1)" v-if="images.length>5" >&lt;</span>            
+            <span class="sp-page" @click="goNextPage(-1)" v-if="images.length > 5">&lt;</span>
-            <span v-for="(it, idx) in pagers" :key="idx" class="sp-page" @click="goPage(it)" :class="it == index + 1 ? 'active' : ''"
+            <span v-for="(it, idx) in pagers" :key="idx" class="sp-page" @click="goPage(it)"
-                v-if="it <= images.length">{{ it }}</span>
+                :class="it == index + 1 ? 'active' : ''" v-if="it <= images.length">{{ it }}</span>
-            <span class="sp-page" @click="goNextPage(1)" v-if="images.length>5">&gt;</span>
+            <span class="sp-page" @click="goNextPage(1)" v-if="images.length > 5">&gt;</span>
         </div>
         <div class="div-img">
             <span class="sp-border sp-1"></span>
             <span class="sp-border sp-2"></span>
             <span class="sp-border sp-3"></span>
             <span class="sp-border sp-4"></span>
-            <el-image :preview-src-list="images.map(it => it.imageFile)" :src="getImage()">
+            <template v-if="mode == 'periodical'">
+                <el-image  :src="getImage()" @click="doDownload" style="cursor: pointer;"/>
+            </template>
+            <el-image v-else :preview-src-list="images.map(it => it.imageFile)" :src="getImage()">
             </el-image>
         </div>
         <div class="div-desc">
-            <el-popover placement="bottom" width="200" trigger="hover" :content="getTitle()">
+            <el-popover placement="bottom"  trigger="hover" popper-class="engin-image-item-pop">
-                <div class="div-title" slot="reference">{{ getTitle() }}</div>
+                <div v-if="mode == 'periodical'" style="position: relative;">
+                    文件名:{{ getTitle2() }}<br />
+                    文件大小:{{ getFileSize() }}
+                    <span style="position: absolute;right: 0px;color: #409EFF;font-weight: bold;cursor: pointer;" @click="doDownload">
+                        <i class="el-icon-download"></i><span>下载</span>
+                    </span>
+                </div>
+                <div v-else>
+                    {{ getTitle() }}
+                </div>
+                <div class="div-title" slot="reference" style="cursor: pointer;">{{ getTitle() }}</div>
             </el-popover>
         </div>
     </div>
 </template>
 
 <script>
+import { download } from '@/utils/request';
+
 export default {
     props: {
         images: {
             type: Array,
             default: () => []
+        },
+        mode: {
+            type: String,
+            default: ''
         }
     },
     data() {
@@ -40,84 +59,125 @@ export default {
     mounted() {
 
     },
-    computed:{
+    computed: {
         pagers() {
-        const pagerCount = 5;
+            const pagerCount = 5;
-        const halfPagerCount = (pagerCount - 1) / 2;
+            const halfPagerCount = (pagerCount - 1) / 2;
 
-        const currentPage = this.index;
+            const currentPage = this.index;
-        const pageCount = this.images.length;
+            const pageCount = this.images.length;
 
-        let showPrevMore = false;
+            let showPrevMore = false;
-        let showNextMore = false;
+            let showNextMore = false;
 
 
-        if (pageCount > pagerCount) {
+            if (pageCount > pagerCount) {
-          if (currentPage > pagerCount - halfPagerCount) {
+                if (currentPage > pagerCount - halfPagerCount) {
-            showPrevMore = true;
+                    showPrevMore = true;
-          }
+                }
 
-          if (currentPage < pageCount - halfPagerCount) {
+                if (currentPage < pageCount - halfPagerCount) {
-            showNextMore = true;
+                    showNextMore = true;
-          }
+                }
+            }
+
+            const array = [];
+
+            if (showPrevMore && !showNextMore) {
+                const startPage = pageCount - (pagerCount - 2);
+                for (let i = startPage; i <= pageCount; i++) {
+                    array.push(i);
+                }
+            } else if (!showPrevMore && showNextMore) {
+                for (let i = 1; i < pagerCount; i++) {
+                    array.push(i);
+                }
+            } else if (showPrevMore && showNextMore) {
+                const offset = Math.floor(pagerCount / 2) - 1;
+                for (let i = currentPage - offset; i <= currentPage + offset; i++) {
+                    array.push(i);
+                }
+            } else {
+                for (let i = 1; i <= pageCount; i++) {
+                    array.push(i);
+                }
+            }
+
+            this.showPrevMore = showPrevMore;
+            this.showNextMore = showNextMore;
+
+            return array;
         }
-
-        const array = [];
-
-        if (showPrevMore && !showNextMore) {
-          const startPage = pageCount - (pagerCount - 2);
-          for (let i = startPage; i <=pageCount; i++) {
-            array.push(i);
-          }
-        } else if (!showPrevMore && showNextMore) {
-          for (let i = 1; i < pagerCount; i++) {
-            array.push(i);
-          }
-        } else if (showPrevMore && showNextMore) {
-          const offset = Math.floor(pagerCount / 2) - 1;
-          for (let i = currentPage - offset ; i <= currentPage + offset; i++) {
-            array.push(i);
-          }
-        } else {
-          for (let i = 1; i <=pageCount; i++) {
-            array.push(i);
-          }
-        }
-
-        this.showPrevMore = showPrevMore;
-        this.showNextMore = showNextMore;
-
-        return array;
-      }    
     },
     methods: {
-        goNextPage(o){
+        goNextPage(o) {
-            if(this.images.length==0){
+            if (this.images.length == 0) {
                 return;
             }
-            let n=this.index+o;
+            let n = this.index + o;
-            if(n<0){
+            if (n < 0) {
-                n=this.images.length-1;                
+                n = this.images.length - 1;
             }
-            if(n>=this.images.length){
+            if (n >= this.images.length) {
-                n=0;
+                n = 0;
             }
-            this.index=n;
+            this.index = n;
         },
-        goPage(o){
+        goPage(o) {
-            if(this.images.length==0){
+            if (this.images.length == 0) {
                 return;
             }
-            this.index=o-1;
+            this.index = o - 1;
         },
         getTitle() {
-            if (this.images.length > 0) {
+            if (this.images.length >= this.index + 1) {
                 return this.images[this.index].standardDesc;
             }
             return "";
         },
+        toSize(value) {
+            if (value < 1024) {
+                return value.toFixed(2) + 'B'
+            } else if (value >= 1024 && value < Math.pow(1024, 2)) {
+                return parseFloat(value / 1024).toFixed(2) + 'KB'
+            } else if (value >= Math.pow(1024, 2) && value < Math.pow(1024, 3)) {
+                return parseFloat(value / Math.pow(1024, 2)).toFixed(2) + 'MB';
+            } else if (value > Math.pow(1024, 3)) {
+                return parseFloat(value / Math.pow(1024, 3)).toFixed(2) + 'GB';
+            } else if (value > Math.pow(1024, 4)) {
+                return parseFloat(value / Math.pow(1024, 4)).toFixed(2) + 'T';
+            }
+
+        },
+        doDownload(){
+            if (this.images.length >= this.index + 1) {
+                let obj = this.images[this.index].fileUrl;
+                if (obj && obj.length > 0) {
+                    window.open(obj[0].url)
+                }
+            }
+        },
+        getTitle2(){
+            if (this.images.length >= this.index + 1) {
+                let obj = this.images[this.index].fileUrl;
+                if (obj && obj.length > 0) {
+                    return obj[0].url.split("/").pop();                    
+                }
+            }
+            return "";
+        },
+        getFileSize() {
+            if (this.images.length >= this.index + 1) {
+                let obj = this.images[this.index].fileUrl;
+                if (obj && obj.length > 0) {
+                    let size = obj[0].size;
+                    return this.toSize(size);
+                }
+            }
+            return "";
+        },
         getImage() {
-            if (this.images.length > 0) {
+            if (this.images.length >= this.index + 1) {
                 return this.images[this.index].imageFile + '.1000.jpg';
             }
             return "";
@@ -226,4 +286,9 @@ export default {
 
     }
 
-}</style>
+}
+.engin-image-item-pop{
+    max-width: 400px;
+    min-width: auto;
+}
+</style>

src/pages/projectEngin.vue

@@ -40,26 +40,30 @@
                                 :typedata="chart2Data" :text="flowTitle" :height="280"
                                 style="top:0px"></project-overview-chart>
                     </module-one-1-1>
-                    <module-one-1-1 label="集团期刊" :border="1">
+                    <module-one-1-1 label="集团期刊"  style="position: relative;">
-                        
+                        <imageItem :images="periodicalList" v-if="periodicalList.length>0 && !loading" mode="periodical"></imageItem>
+                        <div v-if="periodicalList.length==0 && !loading" style="text-align: center;margin-top: 40px;">
+                            <img src="images/nodata.png" style="width: 240px;">
+                            <div style="text-align: center;">暂无数据</div>
+                        </div>
                     </module-one-1-1>
                 </el-col>
                 <el-col :span="8">
-                    <module-one-1-1 label="设备管理标准">
+                    <module-one-1-1 label="设备管理标准"  style="position: relative;">
                         <imageItem :images="list4" v-if="list4.length>0 && !loading"></imageItem>
                         <div v-if="list4.length==0 && !loading" style="text-align: center;margin-top: 40px;">
                             <img src="images/nodata.png" style="width: 240px;">
                             <div style="text-align: center;">暂无数据</div>
                         </div>
                     </module-one-1-1>
-                    <module-one-1-1 label="文明施工标准">
+                    <module-one-1-1 label="文明施工标准"  style="position: relative;">
                         <imageItem :images="list5" v-if="list5.length>0 && !loading"></imageItem>
                         <div v-if="list5.length==0 && !loading" style="text-align: center;margin-top: 40px;">
                             <img src="images/nodata.png" style="width: 240px;">
                             <div style="text-align: center;">暂无数据</div>
                         </div>
                     </module-one-1-1>
-                    <module-one-1-1 label="环境保护标准">
+                    <module-one-1-1 label="环境保护标准"  style="position: relative;">
                         <imageItem :images="list6" v-if="list6.length>0 && !loading"></imageItem>
                         <div v-if="list6.length==0 && !loading" style="text-align: center;margin-top: 40px;">
                             <img src="images/nodata.png" style="width: 240px;">
@@ -136,6 +140,7 @@ export default {
             },
             flowTitle:'待审批',
             flowTotal:0,
+            periodicalList:[]
         };
     },
 
@@ -151,9 +156,20 @@ export default {
             this.dept = dept;
             this.loadData();
         }));
+        this.loadPeriodical();
     },
 
     methods: {
+        loadPeriodical(){
+            this.$api.periodical.getList().then(d=>{
+               this.periodicalList=(d.data||[]).map(it=>{
+                    it.fileUrl=JSON.parse(it.fileUrl);
+                    it.imageFile=it.imageUrl;
+                    it.standardDesc=it.name;
+                    return it;
+               })
+            });
+        },
         changeChart1(opt){            
             console.log("--opt->",opt)
             //opt.xAxis.axisLabel={width:50}