youhua

src/views/data/monitor/index.vue

@@ -1,35 +1,14 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="站点" prop="stnm">
-        <el-input
-          v-model="queryParams.stnm"
-          placeholder="请输入站点名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="摄像机" prop="ip">
-        <el-input
-          v-model="queryParams.stnm"
-          placeholder="请输入摄像机IP"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
 
     <div class="container">
+      <img src="../../../assets/images/water.jpg" class="video">
       <div class="list">
+        <div class="title">摄像机列表</div><hr />
         <div class="station" v-for="item in currdataList" :key="item.stnmId">
           {{item.stnm + " (" + item.ip + ")"}}
         </div>
       </div>
-      <img src="../../../assets/images/water.jpg" class="video">
     </div>
   </div>
 </template>
@@ -196,9 +175,22 @@ export default {
 <style scoped>
   .container {
     width: 100%;
-    display: flex;
+    /* display: flex; */
     justify-content: space-around;
     align-items: center;
+    color: #606266;
+  }
+  .list{
+    vertical-align: top;
+    display: inline-block;
+    width: 250px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+    margin-left: 20px;
+    padding: 5px 10px;
+    height: 600px;
+  }
+  .title{
+    font-size: 20px;
   }
   .station {
     padding: 5px;
@@ -220,6 +212,8 @@ export default {
     left: -6px;
   }
   .video {
-    width: 600px;
+    display: inline-block;
+    width: 800px;
+    height: 600px;
   }
 </style>

src/views/data/photo/index.vue

@@ -25,7 +25,12 @@
 
     <div class="monitor">
       <div class="card" v-for="item in currdataList" :key="item.stnmId">
-        <img src="../../../assets/images/water.jpg">
+        <!-- <img src="../../../assets/images/water.jpg" @click="show('http://localhost:81/control/static/img/water.8d19122d.jpg')"> -->
+        <el-image style="width: 300px;"
+        src="http://123.207.216.86/test.jpg"
+        :preview-src-list="srcList"
+        @click="show('http://123.207.216.86/test.jpg')"
+        ></el-image>
         <div class="info">
           <div class="station">
             <div class="nm">{{item.stnm}}</div>
@@ -38,6 +43,11 @@
         </div>
       </div>
     </div>
+
+    <el-dialog title="预览" :visible.sync="open" width="800px" append-to-body>
+
+      <!-- <img  class="show-img" :src="showImg" /> -->
+    </el-dialog>
   </div>
 </template>
 
@@ -74,7 +84,10 @@ export default {
         stcdTypeId: null,
         latestTm: null,
         latestValue: null
-      }
+      },
+      open: false,
+      showImg : '',
+      srcList:[]
     }
   },
 
@@ -97,6 +110,12 @@ export default {
     resetQuery() {
       this.resetForm("queryForm");
       this.handleQuery();
+    },
+    show(url){
+      // this.open = true;
+      // this.showImg = url;
+      this.srcList =[]
+      this.srcList.push(url)
     }
   }
 };
@@ -113,7 +132,11 @@ export default {
     box-shadow: 2px 2px 8px #ccc;
   }
   img {
-    width: 400px;
+    width: 300px;
+  }
+  .show-img{
+    width: 100%;
+    margin: 0 auto;
   }
   .info {
     padding: 16px;