1

config/index.js

@@ -22,7 +22,7 @@ module.exports = {
     // Various Dev Server settings
     host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8001, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-    autoOpenBrowser: false,
+    autoOpenBrowser: true,
     errorOverlay: true,
     notifyOnErrors: true,
     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

package-lock.json

@@ -14999,6 +14999,12 @@
       "integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
       "dev": true
     },
+    "vue-imageview": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/vue-imageview/-/vue-imageview-1.0.5.tgz",
+      "integrity": "sha512-vfr1whP40JJDnBJTk9T8GhOVec8W0Fyg/Mw6aICoC/XWsG+UG5Kp564O1c2mUtL/xm8vlVWeNG78FaZGRIvMlA==",
+      "dev": true
+    },
     "vue-jest": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-1.4.0.tgz",

package.json

@@ -72,6 +72,7 @@
     "shelljs": "^0.7.6",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
+    "vue-imageview": "^1.0.5",
     "vue-jest": "^1.0.2",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",

src/libs/apiMap.js

@@ -29,6 +29,11 @@ const methodMap = {
     * 销售统计
     */
    sellinfo:{url:`${url}/bianalysis/sellinfo/`,method:'get'},
+   /**
+    * 样品信息
+    */
+   getSpeciminHdr:{url:url+'/mmmaterial/getlist/',method:'post'},
+   getSpeciminDtl:{url:url+'/mmmaterial/getdetail/',method:'post'},
    
 };
 export default methodMap;

src/main.js

@@ -32,12 +32,13 @@ Vue.prototype.$echarts = echarts
 
 function getAbsolutePath () {
   let path = location.pathname
-  return path.substring(0, path.lastIndexOf('/') + 1)
+  // return path.substring(0, path.lastIndexOf('/') + 1)
+  return "/apiproxy/huansi/hszh_report/main"
  }
 const router = new VueRouter({
   mode:'history',
   routes,
-  base: getAbsolutePath()
+  base:getAbsolutePath()
 })
 
 FastClick.attach(document.body)

src/router/index.js

@@ -34,7 +34,7 @@ let routes = [
   {
     name:'main',
     component: () => import('@/view/main.vue'),
-    path:'/chart',
+    path:'/main',
     children:[
       {
         path:'/sales',
@@ -83,6 +83,21 @@ let routes = [
         meta:{
           title: '销售统计'
         }
+      },
+    ]
+  },
+  {
+    name:'main',
+    component: () => import('@/view/main.vue'),
+    path:'/main',
+    children:[
+      {
+        path:'/specimin/:iProjectId/:sMaterialNo',
+        name:'specimin',
+        component:()=> import('@/view/specimen/index.vue'),
+        meta:{
+          title: '样品信息'
+        }
       }
     ]
   }

src/view/specimen/index.vue

+<style lang="less" >
+    .slide-fade-enter-active {
+		transition: opacity .5s ease;
+	}
+
+	.slide-fade-leave-active {
+		transition: opacity .5s ease;
+	}
+
+	.slide-fade-enter, .slide-fade-leave-active {
+		opacity: 0;
+	}
+	h1, h2 {
+		margin: 0;
+		padding: 0;
+	}
+	img {
+		display: block;
+		max-width: 100%;
+	}
+    #imageView .imageBox li img[data-v-cc57528a]{
+        height:auto !important;
+    }
+    #imageView .imageBox li{
+        display:flex;
+        align-items:center;
+        justify-content:center;
+    }
+    #specimen{
+        height:100%;
+        background: white;
+        h3{
+            height:40px;
+            line-height:40px;
+            text-align: center;
+            background:white;
+        }
+        .header{
+            .hdrImg{
+                width:100%;
+                height:200px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background: #eef4fe;
+                position: relative;
+            }
+            img{
+                height:200px;
+            }
+            img:after {
+                content: "";
+                display: inline-block;
+                position: absolute;
+                z-index: 2;
+                top: 0;
+                left: calc(50% - 100px);
+                width: 200px;
+                height: 200px;
+                background: url("../../assets/imgErr.png") no-repeat;
+                background-position: center;
+                background-size: contain;
+                background-color: #fff;
+            }
+        }
+        .info{
+            .content{
+                display:flex;
+                background:white;
+                padding:16px;
+                >div{
+                    flex:1
+                }
+            }
+        }
+        .detail{
+            background: white;
+            border-top:1px solid #eef4fe;
+            .img{
+                position: relative;
+                min-height:50px;
+            }
+            img:after {
+                content: "";
+                display: inline-block;
+                position: absolute;
+                z-index: 2;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 50px;
+                background: url("../../assets/imgErr.png") no-repeat;
+                background-position: center;
+                background-size: contain;
+                background-color: #fff;
+            }
+        }
+    }
+</style>
+
+<template>
+  <div id="specimen">
+    <div class="header">
+        <transition name="slide-fade" class="fadeView">
+            <div v-if="showHdr">
+                <image-view :imgArr="hdr_src" 
+                    :showImageView="true"
+                    :imageIndex="imageHdrIndex"
+                    v-on:hideImage="hideImageView('hdr')"></image-view>
+            </div>
+            <div v-if="showDtl">
+                <image-view :imgArr="dtl_src" 
+                    :showImageView="true"
+                    :imageIndex="imageDtlIndex"
+                    v-on:hideImage="hideImageView('dtl')"></image-view>
+            </div>
+        </transition>
+        <div class="hdrImg">
+            <img v-for="(item, index) in hdr_src" :src="item" @click="selectImg('hdr',index)" :key="index"/>
+        </div>
+        <div class="info">
+            <h3>参数</h3>
+            <div class="content">
+                <div class="left">
+                    <p>产品编号：{{hdr.sMaterialNo}}</p>
+                    <p>幅宽：{{hdr.sWidth}}</p>
+                    <p>规格：{{hdr.sSpecification}}</p>
+                    <p>成分：{{hdr.sComponent}}</p>
+                </div>
+                <div class="right">
+                    <p>产品名称：{{hdr.sMaterialName}}</p>
+                    <p>克重：{{hdr.sGMWT}}</p>
+                </div>  
+            </div>
+        </div>
+    </div>
+
+    <div class="detail">
+        <h3>颜色明细</h3>
+        <div class="detailImg">
+            <v-container grid-list-md text-xs-center>
+                <v-layout row wrap>
+                    <v-flex xs3 v-for="(item, index) in dtl_src" :key="index">
+                        <div class="img">
+                            <img :src="item" @click="selectImg('dtl',index)" />
+                        </div>
+                        <div style="border:1px solid #ddd;border-top:0;height:20px;font-size:12px;">
+                            {{dtl[index].sColorNo}}
+                        </div>
+                    </v-flex>
+                </v-layout>
+            </v-container>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import imageView from 'vue-imageview'
+
+import Util from '@/libs/util.js'
+function nofind(e){
+          console.log(e,11)
+      }
+export default {
+  name: 'specimen',
+  data () {
+    return {
+        showHdr:false,
+        showDtl:false,
+        imageHdrIndex:0,
+        imageDtlIndex:0,
+        hdr_src:[],
+        dtl_src:[],
+        iProjectId:'',
+        sMaterialNo:'',
+        hdr:{},
+        dtl:[]
+    }
+  },
+  async mounted(){
+      this.iProjectId = this.$route.params.iProjectId;
+      this.sMaterialNo = this.$route.params.sMaterialNo;
+      await this.getSpeciminHdr();
+      await this.getSpeciminDtl();
+      
+  },
+  components:{
+    'image-view': imageView
+  },
+  
+  methods:{
+      
+    async getSpeciminHdr(){
+        let result = await this.request('getSpeciminHdr',{
+            data:[
+                {key: "url", value: "sMaterialName"},
+                {key: "searchname", value: this.sMaterialNo}
+            ]
+        },true,{iProject:this.iProject});
+        this.hdr = result[0];
+        this.hdr_src.push(`https://weixin.huansi.net/apiproxy/huansi/Mall/mmmaterial/image_click/?iProjectId=${this.iProjectId}&iIden=${this.hdr.iIden}&m=${Math.random() / 9999}`)
+    },
+    async getSpeciminDtl(){
+        let result = await this.request('getSpeciminDtl',{
+            data:[
+                {key: "url", value: "getDetail"},
+                {key: "iIden", value: this.hdr.iIden}
+            ]
+        },true,{iProject:this.iProject});
+        result.map(x=>{
+            this.dtl_src.push(`https://weixin.huansi.net/apiproxy/huansi/Mall/mmmaterial/image_click/?iProjectId=${this.iProjectId}&iIden=${x.iIden}&m=${Math.random() / 9999}`)
+        })
+        this.dtl = result;
+    },
+    showImgView (type) {
+        if(type == 'hdr'){
+            this.showHdr = true;
+        }else{
+            this.showDtl = true;
+        }
+    },
+    hideImageView (type) {
+        if(type == 'hdr'){
+            this.showHdr = false;
+        }else{
+            this.showDtl = false;
+        }
+    },
+    selectImg (type,index) {
+        if(type == 'hdr'){
+            this.showHdr = true;
+            this.imageHdrIndex = index;
+        }else{
+            this.showDtl = true;
+            this.imageDtlIndex = index;
+        }
+    },
+  }
+}
+</script>
+
+