添加上传图片

src/utils/api/index.js

@@ -695,3 +695,12 @@ export function addFavorList(data) {
     data,
   });
 }
+
+//上传图片
+export function uploadPicApi(data) {
+  return request({
+    url: "/api/upload",
+    method: "post",
+    data,
+  });
+}

src/views/realTimeMonitor/components/carouselChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="thumb-example">
-    <div class="radioBox" v-if="roleUser != 2">
+    <div class="radioBox" v-if="roleUser == 1">
       {{ radioPx }}
       <!-- <span>(共{{ terminalPhoto.length }}张)</span> -->
     </div>

src/views/realTimeMonitor/components/parameterArea.vue

@@ -81,6 +81,10 @@
           历史图片</el-button
         >
         <el-button type="primary" @click="handleParams"> 参数配置</el-button>
+
+        <el-button type="primary" @click="handleuploadPic" v-if="roleUser == 0">
+          上传图片</el-button
+        >
         <!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
           >主动拍照
         </el-button> -->
@@ -130,6 +134,7 @@
       </div>
     </div>
     <parameterSetDialog ref="parameterSetref"></parameterSetDialog>
+    <uploadpic ref="uploadpicref"></uploadpic>
   </div>
 </template>
 <script>
@@ -141,6 +146,7 @@ import scheduleButton from "./scheduleButton.vue";
 import alarmButton from "./alarmButton.vue";
 import cableButton from "./cableButton.vue";
 import gpsButton from "./gpsButton.vue";
+import uploadpic from "./uploadpic.vue";
 import parameterSetDialog from "../../photographicDevice/components/parameterSetDialog.vue";
 import {
   getChannelByTermidJoggle,
@@ -158,9 +164,11 @@ export default {
     cableButton,
     gpsButton,
     parameterSetDialog,
+    uploadpic,
   },
   data() {
     return {
+      roleUser: "",
       selectChannelValue: null, //选中的通道
       channelListOption: [], //通道数组
       channelarrValue: null,
@@ -191,6 +199,10 @@ export default {
       return this.$store.state.currentData;
     },
   },
+  created() {
+    this.roleUser = localStorage.getItem("role");
+    console.log("asdsaddddddddddddddddddddddddd", this.roleUser);
+  },
   mounted() {
     this.getDateTime();
   },
@@ -380,6 +392,9 @@ export default {
         }
       });
     },
+    handleuploadPic() {
+      this.$refs.uploadpicref.display(this.areaData);
+    },
   },
 };
 </script>

src/views/realTimeMonitor/components/siderBar.vue

@@ -191,7 +191,7 @@ export default {
         this.$refs.tree.filter(this.filterText);
       } else {
         if (this.role == 4) {
-          getzzdyTreeList({ type: this.zzradio, lineid: 127 })
+          getzzdyTreeList({ type: this.zzradio, lineid: 259 })
             .then((res) => {
               console.log(res);
               this.lineTreeData = res.data.list;
@@ -267,7 +267,7 @@ export default {
     getLineTreeList() {
       console.log(this.zzradio);
       if (this.role == 4) {
-        getzzdyTreeList({ type: this.zzradio, lineid: 127 })
+        getzzdyTreeList({ type: this.zzradio, lineid: 259 })
           .then((res) => {
             this.lineTreeData = res.data.list;
             this.onlineNum = res.data.onlineNum;

src/views/realTimeMonitor/components/uploadpic.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-dialog
+    class="uploadPic"
+    title="上传图片"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="600px"
+    @close="handleclose"
+  >
+    <div class="uploadBox">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="装置编号">
+          <el-input v-model="form.cmdid"></el-input>
+        </el-form-item>
+        <el-form-item label="装置Id">
+          <el-input v-model="form.id"></el-input>
+        </el-form-item>
+        <el-form-item label="通道选择">
+          <el-select v-model="form.channel" placeholder="选择通道">
+            <el-option label="通道一" :value="1"></el-option>
+            <el-option label="通道二" :value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="选择时间">
+          <el-date-picker
+            v-model="form.phototime"
+            value-format="timestamp"
+            type="datetime"
+            placeholder="选择日期时间"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="">
+          <el-upload
+            class="upload-demo"
+            ref="upload"
+            action="#"
+            :http-request="httpRequest"
+          >
+            <el-button slot="trigger" size="small" type="primary"
+              >选取图片</el-button
+            >
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="handlesure">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { uploadPicApi } from "@/utils/api/index";
+export default {
+  props: {},
+  data() {
+    return {
+      isShow: false,
+      form: {},
+      fileList: [], //上传列表
+    };
+  },
+  mounted() {},
+  methods: {
+    httpRequest(raw) {
+      this.fileList.push(raw);
+    },
+    //数据库获取最新数据
+    display(data) {
+      console.log(data);
+      this.$set(this.form, "cmdid", data.cmdid);
+      this.$set(this.form, "id", data.id);
+      this.isShow = true;
+    },
+    handleclose() {
+      this.isShow = false;
+    },
+    handlesure() {
+      this.isShow = false;
+      //console.log(this.fileList[0].file);
+      this.$set(this.form, "file", this.fileList[0].file);
+      console.log(this.form);
+      uploadPicApi(this.form)
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((err) => {});
+    },
+  },
+  destroyed() {
+    this.isShow = false;
+  },
+};
+</script>
+<style lang="less">
+.uploadPic {
+  .uploadBox {
+  }
+  .upload-demo {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    margin-right: 16px;
+    .el-upload-list {
+      width: 370px;
+      height: 32px;
+      line-height: 32px;
+      border: 1px solid #dcdfe6;
+      background: #fff;
+      margin-right: 12px;
+      border-radius: 4px;
+      .el-upload-list__item-name {
+        margin-right: 0px;
+      }
+      .el-upload-list__item {
+        transition: none;
+        font-size: 14px;
+        color: #606266;
+        position: relative;
+        box-sizing: border-box;
+        border-radius: 4px;
+        width: 100%;
+        height: 32px;
+        line-height: 32px;
+        margin-top: 0px !important;
+        .el-icon-close {
+          top: 10px;
+        }
+      }
+    }
+  }
+}
+</style>