杆塔信息和线路信息

src/assets/css/reset.css

@@ -13,14 +13,18 @@ body,
 }
 
 body {
-    font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
+  font-family: "PingFang SC", "Helvetica Neue", Helvetica, "microsoft yahei",
+    arial, STHeiTi, sans-serif;
 }
 
 a {
-    text-decoration: none
+  text-decoration: none;
 }
 
-
+/* 表格样式*/
+.el-table-column--selection .cell {
+  padding-left: 14px !important;
+}
 
 /*滚动条样式*/
 /* 整个滚动条 */

src/components/common/Sidebar.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="sidebar">
-        <el-menu :default-active="onRoutes" class="sidebar-el-menu" mode="horizontal" router>
+    <el-menu
+      :default-active="onRoutes"
+      class="sidebar-el-menu"
+      mode="horizontal"
+      router
+    >
       <template v-for="item in items">
         <template v-if="item.subs">
           <el-submenu :index="item.index" :key="item.index">
@@ -9,13 +14,25 @@
               <span slot="title">{{ item.title }}</span>
             </template>
             <template v-for="subItem in item.subs">
-                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
+              <el-submenu
+                v-if="subItem.subs"
+                :index="subItem.index"
+                :key="subItem.index"
+              >
                 <template slot="title">{{ subItem.title }}</template>
-                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{
+                <el-menu-item
-                                    threeItem.title
+                  v-for="(threeItem, i) in subItem.subs"
-                                }}</el-menu-item>
+                  :key="i"
+                  :index="threeItem.index"
+                  >{{ threeItem.title }}</el-menu-item
+                >
               </el-submenu>
-                            <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
+              <el-menu-item
+                v-else
+                :index="subItem.index"
+                :key="subItem.index"
+                >{{ subItem.title }}</el-menu-item
+              >
             </template>
           </el-submenu>
         </template>
@@ -31,29 +48,29 @@
 </template>
 
 <script>
-import bus from '../common/bus';
+import bus from "../common/bus";
 export default {
   data() {
     return {
       //collapse: false,
 
       items: [
+        // {
+        //     icon: 'el-icon-s-home',
+        //     index: 'stritl',
+        //     title: '系统首页'
+        // },
         {
-                    icon: 'el-icon-s-home',
+          icon: "el-icon-camera",
-                    index: 'stritl',
+          index: "realTimeMonitor",
-                    title: '系统首页'
+          title: "实时监控",
-                },
-                {
-                    icon: 'el-icon-camera',
-                    index: 'realTimeMonitor',
-                    title: '实时监控'
-                },
-                {
-                    icon: 'el-icon-film',
-                    index: 'pictureRotation',
-                    title: '图片轮巡'
         },
         // {
+        //     icon: 'el-icon-film',
+        //     index: 'pictureRotation',
+        //     title: '图片轮巡'
+        // },
+        // {
         //     icon: 'el-icon-video-camera',
         //     index: '3',
         //     title: '视频监控',
@@ -73,11 +90,11 @@ export default {
         //     index: 'dashboard',
         //     title: '预警处理'
         // },
-                {
+        // {
-                    icon: 'el-icon-bell',
+        //     icon: 'el-icon-bell',
-                    index: 'photoAlarm',
+        //     index: 'photoAlarm',
-                    title: '告警处理'
+        //     title: '告警处理'
-                },
+        // },
         // {
         //     icon: 'el-icon-setting',
         //     index: '6',
@@ -128,64 +145,64 @@ export default {
         //     ]
         // },
         {
-                    icon: 'el-icon-files',
+          icon: "el-icon-files",
-                    index: '7',
+          index: "7",
-                    title: '资产管理',
+          title: "资产管理",
           subs: [
             {
-                            index: '7-1',
+              index: "7-1",
-                            title: '用户设备',
+              title: "用户设备",
               subs: [
                 {
-                                    index: 'lineInformation',
+                  index: "lineInformation",
-                                    title: '线路信息管理'
+                  title: "线路信息管理",
                 },
                 {
-                                    index: 'towerInformation',
+                  index: "towerInformation",
-                                    title: '杆塔信息管理'
+                  title: "杆塔信息管理",
                 },
-                                {
+                // {
-                                    index: 'towerTeam',
+                //     index: 'towerTeam',
-                                    title: '杆塔班组用户'
+                //     title: '杆塔班组用户'
-                                },
+                // },
-                                {
+                // {
-                                    index: 'groupInformation',
+                //     index: 'groupInformation',
-                                    title: '分组信息管理'
+                //     title: '分组信息管理'
-                                },
+                // },
-                                {
+                // {
-                                    index: 'form',
+                //     index: 'form',
-                                    title: '线路属性分组'
+                //     title: '线路属性分组'
-                                },
+                // },
-                                {
+                // {
-                                    index: 'form',
+                //     index: 'form',
-                                    title: '隐患类型管理'
+                //     title: '隐患类型管理'
-                                },
+                // },
-                                {
+                // {
-                                    index: 'form',
+                //     index: 'form',
-                                    title: '装置型号信息'
+                //     title: '装置型号信息'
-                                }
+                // }
-                            ]
+              ],
             },
             {
-                            index: '7-2',
+              index: "7-2",
-                            title: '监测设备',
+              title: "监测设备",
               subs: [
+                // {
+                //     index: 'SIMCard',
+                //     title: 'SIM卡管理'
+                // },
                 {
-                                    index: 'SIMCard',
+                  index: "photographicDevice",
-                                    title: 'SIM卡管理'
+                  title: "拍照装置管理",
                 },
-                                {
+                // {
-                                    index: 'photographicDevice',
+                //     index: 'deviceVisualization',
-                                    title: '拍照装置管理'
+                //     title: '装置分布可视化'
+                // }
+              ],
+            },
+          ],
         },
-                                {
-                                    index: 'deviceVisualization',
-                                    title: '装置分布可视化'
-                                }
-                            ]
-                        }
-                    ]
-                }
         // {
         //     icon: 'el-icon-monitor',
         //     index: '8',
@@ -225,13 +242,13 @@ export default {
         //         }
         //     ]
         // }
-            ]
+      ],
     };
   },
   computed: {
     onRoutes() {
-            return this.$route.path.replace('/', '');
+      return this.$route.path.replace("/", "");
-        }
+    },
   },
   created() {
     // 通过 Event Bus 进行组件间通信，来折叠侧边栏
@@ -239,7 +256,7 @@ export default {
     //     this.collapse = msg;
     //     bus.$emit('collapse-content', msg);
     // });
-    }
+  },
 };
 </script>
 

src/router/index.js

@@ -6,7 +6,7 @@ Vue.use(VueRouter);
 const routes = [
   {
     path: "/",
-    redirect: "/stritl",
+    redirect: "/lineInformation",
   },
   {
     path: "/",

src/utils/api/index.js

@@ -80,7 +80,6 @@ export function get2(params) {
   });
 }
 //图片轮巡 Post请求：
-
 export function picLoop(data) {
   return request({
     url: "/stritl/realData/listCompanyScan",
@@ -114,6 +113,95 @@ export function getTowerList(params) {
   });
 }
 
+//实时监控页面
+//获取线路树状结构
+export function getLineTreeListJoggle(data) {
+  return request({
+    url: "/test/getLineTreeList",
+    method: "post",
+    data,
+  });
+}
+//获取图片接口
+export function getTerminalPhotoListJoggle(data) {
+  return request({
+    url: "/test/getTerminalPhotoList",
+    method: "post",
+    data,
+  });
+}
+
+//线路信息管理接口数据
+//1.线路列表信息
+export function getLineListJoggle(data) {
+  return request({
+    url: "/test/getLineList",
+    method: "post",
+    data,
+  });
+}
+//2.添加单个或者多个线路信息
+export function addLineJoggle(data) {
+  return request({
+    url: "/test/addLine",
+    method: "post",
+    data,
+  });
+}
+//3.删除新路信息
+export function deleteLineJoggle(data) {
+  return request({
+    url: "/test/deleteLine",
+    method: "post",
+    data,
+  });
+}
+//4.修改信息
+export function updateLineJoggle(data) {
+  return request({
+    url: "/test/updateLine",
+    method: "post",
+    data,
+  });
+}
+
+//拍照装置管理  接口增删改查
+//获取列表
+export function getTerminalJoggle(data) {
+  return request({
+    url: "/test/getTerminalList",
+    method: "post",
+    data,
+  });
+}
+//添加设备信息
+
+export function addTerminalJoggle(data) {
+  return request({
+    url: "/test/addTerminal",
+    method: "post",
+    data,
+  });
+}
+//修改设备信息
+
+export function updateTerminalJoggle(data) {
+  return request({
+    url: "/test/updateTerminal",
+    method: "post",
+    data,
+  });
+}
+//删除设备信息
+
+export function deleteTerminalJoggle(data) {
+  return request({
+    url: "/test/deleteTerminal",
+    method: "post",
+    data,
+  });
+}
+
 //公司服务器地址接口
 // export function get1() {
 //     return request({

src/utils/request.js

@@ -1,34 +1,36 @@
 import axios from "axios";
-// import { Loading } from 'element-ui'; //项目已经全局引入element的话可以不单独引入
+import { Loading } from "element-ui"; //项目已经全局引入element的话可以不单独引入
-// let loading        //定义loading变量
+let loading; //定义loading变量
-// function startLoading() {    //使用Element loading-start 方法
+function startLoading() {
-//     loading = Loading.service({
+  //使用Element loading-start 方法
-//         lock: true,
+  loading = Loading.service({
-//         text: '加载中……',
+    lock: true,
-//         background: 'rgba(255, 255, 255, 0.7)'
+    text: "加载中……",
-//     })
+    background: "rgba(255, 255, 255, 0.7)",
-// }
+  });
-// function endLoading() {    //使用Element loading-close 方法
+}
-//     loading.close()
+function endLoading() {
-// }
+  //使用Element loading-close 方法
-// //那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
+  loading.close();
-// //声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
+}
-// //调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
+//那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
-// let needLoadingRequestCount = 0
+//声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
-// export function showFullScreenLoading() {
+//调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
-//     if (needLoadingRequestCount === 0) {
+let needLoadingRequestCount = 0;
-//         startLoading()
+export function showFullScreenLoading() {
-//     }
+  if (needLoadingRequestCount === 0) {
-//     needLoadingRequestCount++
+    startLoading();
-// }
+  }
+  needLoadingRequestCount++;
+}
 
-// export function tryHideFullScreenLoading() {
+export function tryHideFullScreenLoading() {
-//     if (needLoadingRequestCount <= 0) return
+  if (needLoadingRequestCount <= 0) return;
-//     needLoadingRequestCount--
+  needLoadingRequestCount--;
-//     if (needLoadingRequestCount === 0) {
+  if (needLoadingRequestCount === 0) {
-//         endLoading()
+    endLoading();
-//     }
+  }
-// }
+}
 
 const service = axios.create({
   // process.env.NODE_ENV === 'development' 来判断是否开发环境
@@ -41,7 +43,7 @@ const service = axios.create({
 
 service.interceptors.request.use(
   (config) => {
-    // showFullScreenLoading()
+    showFullScreenLoading();
     return config;
   },
   (error) => {
@@ -53,7 +55,7 @@ service.interceptors.request.use(
 service.interceptors.response.use(
   (response) => {
     if (response.status === 200) {
-      // tryHideFullScreenLoading()
+      tryHideFullScreenLoading();
       return response.data;
     } else {
       Promise.reject();

src/views/management/monitoringEquipment/photographicDevice/components/addPhotoDialog.vue

@@ -0,0 +1,203 @@
+<template>
+  <el-dialog
+    class="addPhotoDialog"
+    :title="photoDialogTitle"
+    :visible.sync="photoDialog"
+    width="654px"
+  >
+    <el-form
+      label-position="left"
+      label-width="92px"
+      ref="formPhotoInfo"
+      :rules="rules"
+      :model="formInfo"
+    >
+      <el-form-item label="出厂编号" prop="bsIdentifier" required>
+        <el-input v-model="formInfo.bsIdentifier"></el-input>
+      </el-form-item>
+      <el-form-item label="生产厂家" prop="bsManufacturer" required>
+        <el-input v-model="formInfo.bsManufacturer"></el-input>
+      </el-form-item>
+      <el-form-item label="生产日期" prop="bsProductionDate" required>
+        <el-input v-model="formInfo.bsProductionDate"></el-input>
+      </el-form-item>
+      <el-form-item label="	图像监测装置 ID" prop="cmdid" required>
+        <el-input v-model="formInfo.cmdid"></el-input>
+      </el-form-item>
+      <el-form-item label="显示名" prop="displayName" required>
+        <el-input v-model="formInfo.displayName"></el-input>
+      </el-form-item>
+
+      <el-form-item label="装置名称" prop="equipName" required>
+        <el-input v-model="formInfo.equipName"></el-input>
+      </el-form-item>
+      <el-form-item
+        label="装置基本信息版本号"
+        prop="essentialInfoVersion"
+        required
+      >
+        <el-input v-model="formInfo.essentialInfoVersion"></el-input>
+      </el-form-item>
+      <el-form-item label="是否带云台" prop="hasPan" required>
+        <el-input v-model="formInfo.hasPan"></el-input>
+      </el-form-item>
+      <el-form-item label="纬度" prop="latitude" required>
+        <el-input v-model.number="formInfo.latitude"></el-input>
+      </el-form-item>
+      <el-form-item label="线路编号" prop="lineid" required>
+        <el-input v-model="formInfo.lineid"></el-input>
+      </el-form-item>
+      <el-form-item label="经度" prop="longitude" required>
+        <el-input v-model.number="formInfo.longitude"></el-input>
+      </el-form-item>
+      <el-form-item label="装置型号" prop="model" required>
+        <el-input v-model="formInfo.model"></el-input>
+      </el-form-item>
+      <el-form-item label="原始 ID" prop="orgId" required>
+        <el-input v-model="formInfo.orgId"></el-input>
+      </el-form-item>
+      <el-form-item label="杆塔编号" prop="towerid" required>
+        <el-input v-model="formInfo.towerid"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="closeDialog(0)">取 消</el-button>
+      <el-button type="primary" @click="submitForm()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { addTerminalJoggle, updateTerminalJoggle } from "@/utils/api/index";
+export default {
+  props: {
+    photoDialog: {
+      type: Boolean,
+    },
+    photoDialogTitle: {
+      type: String,
+      default: "新增",
+    },
+    formItem: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+
+  data() {
+    return {
+      formInfo: {},
+      rules: {},
+      //表单数组，对象
+      formArr: [],
+    };
+  },
+  methods: {
+    // 保存确定操作
+    submitForm() {
+      this.$refs.formPhotoInfo.validate((valid) => {
+        if (valid) {
+          let formObj = {
+            bsIdentifier: this.formInfo.bsIdentifier,
+            bsManufacturer: this.formInfo.bsManufacturer,
+            bsProductionDate: this.formInfo.bsProductionDate,
+            cmdid: this.formInfo.cmdid,
+            displayName: this.formInfo.displayName,
+            equipName: this.formInfo.equipName,
+            essentialInfoVersion: this.formInfo.essentialInfoVersion,
+            hasPan: this.formInfo.hasPan,
+            latitude: this.formInfo.latitude,
+            lineid: this.formInfo.lineid,
+            longitude: this.formInfo.longitude,
+            model: this.formInfo.model,
+            orgId: this.formInfo.orgId,
+            towerid: this.formInfo.towerid,
+          };
+          this.formArr.push(formObj);
+          console.log(this.formArr);
+
+          // 走保存请求
+          if (this.photoDialogTitle == "新增") {
+            addTerminalJoggle({ list: this.formArr })
+              .then((res) => {
+                console.log(res);
+                this.$emit("photoDialogClose", 1); //关闭弹窗
+                this.$message.success("添加成功");
+                this.$refs.formPhotoInfo.resetFields();
+              })
+              .catch((err) => {
+                console.log(err); //代码错误、请求失败捕获
+                this.$message.error("添加失败");
+              });
+          } else if (this.photoDialogTitle == "修改") {
+            let changeformObj = {
+              bsIdentifier: this.formInfo.bsIdentifier,
+              bsManufacturer: this.formInfo.bsManufacturer,
+              bsProductionDate: this.formInfo.bsProductionDate,
+              cmdid: this.formInfo.cmdid,
+              displayName: this.formInfo.displayName,
+              equipName: this.formInfo.equipName,
+              essentialInfoVersion: this.formInfo.essentialInfoVersion,
+              hasPan: this.formInfo.hasPan,
+              latitude: this.formInfo.latitude,
+              lineid: this.formInfo.lineid,
+              longitude: this.formInfo.longitude,
+              model: this.formInfo.model,
+              orgId: this.formInfo.orgId,
+              towerid: this.formInfo.towerid,
+              id: this.formInfo.id,
+            };
+            updateTerminalJoggle(changeformObj)
+              .then((res) => {
+                console.log(res);
+                this.$emit("photoDialogClose", 1); //关闭弹窗
+                this.$message.success("修改成功");
+              })
+              .catch((err) => {
+                console.log(err); //代码错误、请求失败捕获
+                this.$message.error("修改失败");
+              });
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //取消关闭弹窗
+    closeDialog(flag) {
+      this.$refs.formPhotoInfo.resetFields();
+      this.$emit("photoDialogClose", flag);
+    },
+  },
+  mounted() {
+    console.log("打印传过来的对象", this.formItem);
+    console.log("打印传过来的对象", this.formItem.bsIdentifier);
+    this.formInfo = JSON.parse(JSON.stringify(this.formItem));
+  },
+  watch: {
+    formItem: {
+      handler(newVal, oldVal) {
+        // 调用函数
+        this.$nextTick(() => {
+          this.formInfo = JSON.parse(JSON.stringify(this.formItem));
+        });
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+};
+</script>
+<style lang="less">
+.addPhotoDialog {
+  .el-dialog {
+    .el-form {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+  }
+}
+</style>

src/views/management/monitoringEquipment/photographicDevice/index.vue

@@ -1,22 +1,11 @@
 <template>
   <div class="photoGraphicDevice">
     <div class="photoGraphicBtnGroup">
-      <el-button type="primary">新增</el-button>
+      <el-button type="primary" @click="handleAddPhoto()">新增</el-button>
-      <el-button type="primary">修改</el-button>
+      <el-button type="primary" @click="handleRevisePhoto()">修改</el-button>
-      <el-button type="primary">删除</el-button>
+      <el-button type="primary" @click="handleDelete()">删除</el-button>
-      <el-button type="primary">查询</el-button>
-      <el-button type="primary">质保延期</el-button>
-      <el-button type="primary">导入</el-button>
-      <el-button type="primary">模板</el-button>
-      <el-button type="primary">导出</el-button>
-      <el-button type="primary">前端分析报告</el-button>
-      <el-button type="primary">G开关</el-button>
-      <el-button type="primary">更新ZB</el-button>
-      <el-button type="primary">I1图像分析</el-button>
-      <el-button type="primary">主动拍照</el-button>
-      <el-button type="primary">传感器数量下发</el-button>
     </div>
-    <div class="searchForm">
+    <!-- <div class="searchForm">
       <el-form :inline="true" :model="formInline" class="demo-form-inline">
         <el-form-item label="单位:">
           <el-select v-model="formInline.region" placeholder="活动区域">
@@ -91,96 +80,197 @@
           <el-input v-model="formInline.user" placeholder="审批人"></el-input>
         </el-form-item>
       </el-form>
-    </div>
+    </div> -->
     <div class="photoGraphicTable">
       <el-table
         ref="multipleTable"
-        :data="tableData"
+        :data="terminalTableData"
         tooltip-effect="dark"
         style="width: 100%"
+        border
         @selection-change="handleSelectionChange"
+        @row-click="handleRowClick"
       >
         <el-table-column type="index" width="55"> </el-table-column>
         <el-table-column type="selection" width="55"> </el-table-column>
-        <el-table-column label="单位">
+        <el-table-column label="出厂编号">
-          <template slot-scope="scope">{{ scope.row.date }}</template>
+          <template slot-scope="scope">{{ scope.row.bsIdentifier }}</template>
+        </el-table-column>
+        <el-table-column prop="bsManufacturer" label="生产厂家">
+        </el-table-column>
+        <el-table-column
+          prop="bsProductionDate"
+          label="生产日期"
+          :show-overflow-tooltip="true"
+          :formatter="dateFormat"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="cmdid"
+          label="图像监测装置ID"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          label="创建时间"
+          :show-overflow-tooltip="true"
+          :formatter="dateFormat"
+        >
+        </el-table-column>
+        <el-table-column prop="displayName" label="显示名"> </el-table-column>
+        <el-table-column prop="equipName" label="装置名称"> </el-table-column>
+        <el-table-column prop="essentialInfoVersion" label="装置基本信息版本号">
         </el-table-column>
-        <el-table-column prop="name" label="电话号码"> </el-table-column>
+        <el-table-column prop="hasPan" label="是否带云台">
-        <el-table-column prop="address" label="网络类型" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="scope.row.hasPan == 0">否</span>
+            <span v-if="scope.row.hasPan == 1">是</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="latitude" label="维度"> </el-table-column>
+        <el-table-column prop="lineid" label="线路编号"> </el-table-column>
+        <el-table-column prop="longitude" label="经度"> </el-table-column>
+        <el-table-column prop="model" label="装置型号"> </el-table-column>
+        <el-table-column prop="orgId" label="原始ID"> </el-table-column>
+        <el-table-column prop="towerid" label="杆塔编号"> </el-table-column>
+        <el-table-column
+          prop="updateTime"
+          label="修改时间"
+          :show-overflow-tooltip="true"
+          :formatter="dateFormat"
+        >
         </el-table-column>
-        <el-table-column prop="name" label="质保到期日"> </el-table-column>
-        <el-table-column prop="name" label="流量包(M)"> </el-table-column>
-        <el-table-column prop="name" label="告警阀值(%)"> </el-table-column>
-        <el-table-column prop="name" label="状态"> </el-table-column>
-        <el-table-column prop="name" label="是否已使用"> </el-table-column>
       </el-table>
     </div>
+    <addPhotoDialog
+      :photoDialog="photoDialog"
+      :photoDialogTitle="photoDialogTitle"
+      @photoDialogClose="photoDialogClose"
+      :formItem="formphotoInfo"
+    ></addPhotoDialog>
   </div>
 </template>
 <script>
+import { getTerminalJoggle, deleteTerminalJoggle } from "@/utils/api/index";
+import moment from "moment";
+import addPhotoDialog from "./components/addPhotoDialog.vue";
 export default {
+  components: {
+    addPhotoDialog,
+  },
   data() {
     return {
-      formInline: {
+      terminalTableData: [], //表格数据
-        user: "",
+      photoDialog: false, //新增弹窗
-        region: "",
+      photoDialogTitle: "", //弹窗标题
-      },
+      deleteArr: [], //删除数组
-      tableData: [
+      multipleSelection: [], //当前选中数组
-        {
+      formphotoInfo: {}, //弹窗传值
-          date: "2016-05-03",
+    };
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
   },
-        {
+  methods: {
-          date: "2016-05-04",
+    ////获取拍照装置列表数据
-          name: "王小虎",
+    terminalList() {
-          address: "上海市普陀区金沙江路 1518 弄",
+      getTerminalJoggle()
+        .then((res) => {
+          console.log(res);
+          this.terminalTableData = res.data.list;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
     },
-        {
+    //点击行选中当前行
-          date: "2016-05-01",
+    handleRowClick(row, column, event) {
-          name: "王小虎",
+      this.$refs.multipleTable.toggleRowSelection(row);
-          address: "上海市普陀区金沙江路 1518 弄",
+      // console.log(column, row, event);
     },
-        {
+    //获取选中的行
-          date: "2016-05-08",
+    handleSelectionChange(val) {
-          name: "王小虎",
+      this.multipleSelection = val;
-          address: "上海市普陀区金沙江路 1518 弄",
+      console.log(this.multipleSelection);
     },
-        {
+    //时间转化
-          date: "2016-05-06",
+    dateFormat(row, column) {
-          name: "王小虎",
+      var date = row[column.property];
-          address: "上海市普陀区金沙江路 1518 弄",
+      if (date == undefined) {
+        return "";
+      }
+      return moment(date).format("YYYY-MM-DD HH:mm:ss");
     },
-        {
+    //新建弹窗handleAddPhoto
-          date: "2016-05-07",
+    handleAddPhoto() {
-          name: "王小虎",
+      this.photoDialog = true;
-          address: "上海市普陀区金沙江路 1518 弄",
+      this.photoDialogTitle = "新增";
     },
-      ],
+    //修改弹窗handleRevisePhoto
-      multipleSelection: [],
+    handleRevisePhoto() {
-    };
+      if (this.multipleSelection.length !== 1) {
+        this.$message({
+          showClose: true,
+          message: "请选择要操作的记录最多只能选择一条！",
+          type: "warning",
+        });
+      } else {
+        this.photoDialog = true;
+        this.photoDialogTitle = "修改";
+        console.log(this.multipleSelection);
+        this.formphotoInfo = Object.assign({}, this.multipleSelection[0]);
+      }
     },
-  methods: {
+    //新建弹窗取消按钮 关闭弹窗
-    onSubmit() {
+    photoDialogClose(flag) {
-      console.log("submit!");
+      if (flag) {
+        //更新列表
+        this.terminalList();
+      }
+      this.photoDialog = false;
     },
-    toggleSelection(rows) {
+    //删除数据
-      if (rows) {
+    handleDelete() {
-        rows.forEach((row) => {
+      if (this.multipleSelection.length == 0) {
-          this.$refs.multipleTable.toggleRowSelection(row);
+        this.$message({
+          showClose: true,
+          message: "请选择要操作的记录！",
+          type: "warning",
         });
       } else {
-        this.$refs.multipleTable.clearSelection();
+        console.log(this.multipleSelection);
+        for (let i in this.multipleSelection) {
+          console.log(i);
+          this.deleteArr.push({
+            id: this.multipleSelection[i].id,
+          });
+        }
+        console.log(this.deleteArr);
+        this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            // 行设置向后台请求删除数据
+            deleteTerminalJoggle({ list: this.deleteArr }).then((res) => {
+              console.log(res);
+              this.terminalList(); //刷新
+            });
+            this.$message({
+              type: "success",
+              message: "删除成功!",
+            });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除",
+            });
+          });
       }
     },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
   },
+  created() {
+    this.terminalList();
   },
 };
 </script>

src/views/management/userEquipment/lineInformation/components/addLineDialog.vue

@@ -0,0 +1,152 @@
+<template>
+  <el-dialog
+    class="addLineDialog"
+    :title="lineDialogTitle"
+    :visible.sync="lineDialog"
+    width="420px"
+  >
+    <el-form
+      label-position="left"
+      label-width="92px"
+      ref="formLineInfo"
+      :rules="rules"
+      :model="lineForm"
+    >
+      <el-form-item label="单位：" prop="bsManufacturer">
+        <el-input
+          v-model="lineForm.bsManufacturer"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="DY等级：" prop="dyLevel">
+        <el-input
+          v-model.number="lineForm.dyLevel"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="线路名称：" prop="name">
+        <el-input v-model="lineForm.name" autocomplete="off"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="closeDialog(0)">取 消</el-button>
+      <el-button type="primary" @click="submitForm()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { addLineJoggle, updateLineJoggle } from "@/utils/api/index";
+export default {
+  props: {
+    lineDialog: {
+      type: Boolean,
+    },
+    lineDialogTitle: {
+      type: String,
+      default: "新增",
+    },
+    formItem: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+
+  data() {
+    return {
+      lineForm: {},
+      rules: {
+        bsManufacturer: [
+          { required: true, message: "请输入公司名称", trigger: "blur" },
+        ],
+        dyLevel: [
+          { required: true, message: "请选择DY等级", trigger: "blur" },
+          { type: "number", message: "DY等级数字值" },
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入线路名称",
+            trigger: "blur",
+          },
+        ],
+      },
+      //表单数组，对象
+      formArr: [],
+    };
+  },
+  methods: {
+    // 保存确定操作
+    submitForm() {
+      this.$refs.formLineInfo.validate((valid) => {
+        if (valid) {
+          let formObj = {
+            bsManufacturer: this.lineForm.bsManufacturer,
+            dyLevel: this.lineForm.dyLevel,
+            name: this.lineForm.name,
+          };
+          this.formArr.push(formObj);
+          console.log(this.formArr);
+
+          // 走保存请求
+          if (this.lineDialogTitle == "新增") {
+            addLineJoggle({ list: this.formArr })
+              .then((res) => {
+                console.log(res);
+                this.$emit("lineDialogClose", 1); //关闭弹窗
+                this.$message.success("添加成功");
+              })
+              .catch((err) => {
+                console.log(err); //代码错误、请求失败捕获
+                this.$message.error("添加失败");
+              });
+          } else if (this.lineDialogTitle == "修改") {
+            let changeformObj = {
+              bsManufacturer: this.lineForm.bsManufacturer,
+              dyLevel: this.lineForm.dyLevel,
+              name: this.lineForm.name,
+              id: this.lineForm.id,
+            };
+            updateLineJoggle(changeformObj)
+              .then((res) => {
+                console.log(res);
+                this.$emit("lineDialogClose", 1); //关闭弹窗
+                this.$message.success("修改成功");
+              })
+              .catch((err) => {
+                console.log(err); //代码错误、请求失败捕获
+                this.$message.error("修改失败");
+              });
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //取消关闭弹窗
+    closeDialog(flag) {
+      this.$refs.formLineInfo.resetFields();
+      this.$emit("lineDialogClose", flag);
+    },
+  },
+  mounted() {
+    console.log("打印传过来的对象", this.formItem);
+    console.log("打印传过来的对象", this.formItem.bsIdentifier);
+    this.lineForm = JSON.parse(JSON.stringify(this.formItem));
+  },
+  watch: {
+    formItem: {
+      handler(newVal, oldVal) {
+        // 调用函数
+        this.$nextTick(() => {
+          this.lineForm = JSON.parse(JSON.stringify(this.formItem));
+        });
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+};
+</script>

src/views/management/userEquipment/lineInformation/index.vue

@@ -1,17 +1,14 @@
 <template>
   <div class="lineInformation">
     <div class="lineBtnGroup">
-            <el-button type="primary">新增</el-button>
+      <el-button type="primary" @click="handleAddLine()">新增</el-button>
-            <el-button type="primary">批量添加</el-button>
+      <el-button type="primary" @click="handleResive()">修改</el-button>
-            <el-button type="primary">修改</el-button>
+      <!-- <el-button type="primary">批量添加</el-button> -->
-            <el-button type="primary">修改公司</el-button>
+      <el-button type="primary" @click="handleDelete()">删除</el-button>
-            <el-button type="primary">删除</el-button>
+
-            <el-button type="primary">查询</el-button>
+      <!-- <el-button type="primary">查询</el-button> -->
-            <el-button type="primary">导入</el-button>
-            <el-button type="primary">导入模板下载</el-button>
-            <el-button type="primary">导出</el-button>
     </div>
-        <div class="searchForm">
+    <!-- <div class="searchForm">
       <el-form :inline="true" :model="formInline" class="demo-form-inline">
         <el-form-item label="单位:">
           <el-select v-model="formInline.region" placeholder="活动区域">
@@ -38,96 +35,163 @@
           <el-input v-model="formInline.user" placeholder="审批人"></el-input>
         </el-form-item>
       </el-form>
-        </div>
+    </div> -->
     <div class="lineTable">
       <el-table
         ref="multipleTable"
-                :data="tableData"
+        :data="lineTableData"
         tooltip-effect="dark"
         style="width: 100%"
+        border
         @selection-change="handleSelectionChange"
+        @row-click="handleRowClick"
       >
         <el-table-column type="index" width="55"> </el-table-column>
         <el-table-column type="selection" width="55"> </el-table-column>
-                <el-table-column label="单位">
+        <el-table-column label="单位" show-overflow-tooltip>
-                    <template slot-scope="scope">{{ scope.row.date }}</template>
+          <template slot-scope="scope">{{ scope.row.bsManufacturer }}</template>
+        </el-table-column>
+        <el-table-column prop="id" label="线路id" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="XL名称"
+          min-width="95"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column prop="dyLevel" label="DY等级" show-overflow-tooltip>
         </el-table-column>
-                <el-table-column prop="name" label="XL名称"> </el-table-column>
-                <el-table-column prop="address" label="DY等级" show-overflow-tooltip> </el-table-column>
-                <el-table-column prop="name" label="起始GT"> </el-table-column>
-                <el-table-column prop="name" label="终止GT"> </el-table-column>
-                <el-table-column prop="name" label="PMS编号"> </el-table-column>
-                <el-table-column prop="name" label="备注"> </el-table-column>
-                <el-table-column prop="name" label="排序号"> </el-table-column>
       </el-table>
     </div>
+    <!-- 新增线路 -->
+    <add-lineDialog
+      :lineDialog="lineDialog"
+      :lineDialogTitle="lineDialogTitle"
+      :formItem="formLineInfo"
+      @lineDialogClose="lineDialogClose"
+    ></add-lineDialog>
   </div>
 </template>
 <script>
+import { getLineListJoggle, deleteLineJoggle } from "@/utils/api/index";
+import addLineDialog from "./components/addLineDialog.vue";
+
 export default {
+  components: {
+    addLineDialog,
+  },
   data() {
     return {
       formInline: {
-                user: '',
+        user: "",
-                region: ''
+        region: "",
       },
-            tableData: [
+      lineDialogTitle: "", //弹窗标题
-                {
+      lineDialog: false,
-                    date: '2016-05-03',
+      formLineInfo: {}, //弹窗传值
-                    name: '王小虎',
+      lineTableData: [],
-                    address: '上海市普陀区金沙江路 1518 弄'
+      multipleSelection: [], //获取当前选中
-                },
+      //删除数组
-                {
+      deleteArr: [],
-                    date: '2016-05-02',
+    };
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1518 弄'
   },
-                {
+  methods: {
-                    date: '2016-05-04',
+    //获取线路列表数据
-                    name: '王小虎',
+    lineList() {
-                    address: '上海市普陀区金沙江路 1518 弄'
+      getLineListJoggle()
+        .then((res) => {
+          console.log(res);
+          this.lineTableData = res.data.list;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
     },
-                {
+    //点击行选中
-                    date: '2016-05-01',
+    handleRowClick(row, column, event) {
-                    name: '王小虎',
+      this.$refs.multipleTable.toggleRowSelection(row);
-                    address: '上海市普陀区金沙江路 1518 弄'
+      // console.log(column, row, event);
     },
-                {
+    //获取选中的行
-                    date: '2016-05-08',
+    handleSelectionChange(val) {
-                    name: '王小虎',
+      this.multipleSelection = val;
-                    address: '上海市普陀区金沙江路 1518 弄'
     },
-                {
+
-                    date: '2016-05-06',
+    // 新建弹窗
-                    name: '王小虎',
+    handleAddLine() {
-                    address: '上海市普陀区金沙江路 1518 弄'
+      this.lineDialog = true;
+      this.lineDialogTitle = "新增";
     },
-                {
+
-                    date: '2016-05-07',
+    //handleResive 修改线路数据
-                    name: '王小虎',
+    handleResive() {
-                    address: '上海市普陀区金沙江路 1518 弄'
+      if (this.multipleSelection.length !== 1) {
+        this.$message({
+          showClose: true,
+          message: "请选择要操作的记录最多只能选择一条！",
+          type: "warning",
+        });
+      } else {
+        console.log(this.multipleSelection);
+        this.lineDialogTitle = "修改";
+        this.formLineInfo = Object.assign({}, this.multipleSelection[0]);
+        this.lineDialog = true;
       }
-            ],
-            multipleSelection: []
-        };
     },
-    methods: {
+    //新建弹窗取消按钮 关闭弹窗
-        onSubmit() {
+    lineDialogClose(flag) {
-            console.log('submit!');
+      if (flag) {
+        //更新列表
+        this.lineList();
+      }
+      this.lineDialog = false;
     },
-        toggleSelection(rows) {
+    //删除数据
-            if (rows) {
+    handleDelete() {
-                rows.forEach((row) => {
+      if (this.multipleSelection.length == 0) {
-                    this.$refs.multipleTable.toggleRowSelection(row);
+        this.$message({
+          showClose: true,
+          message: "请选择要操作的记录！",
+          type: "warning",
         });
       } else {
-                this.$refs.multipleTable.clearSelection();
+        console.log(this.multipleSelection);
-            }
+        for (let i in this.multipleSelection) {
-        },
+          console.log(i);
-        handleSelectionChange(val) {
+          this.deleteArr.push({
-            this.multipleSelection = val;
+            id: this.multipleSelection[i].id,
+          });
         }
+        console.log(this.deleteArr);
+        this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            // 行设置向后台请求删除数据
+            deleteLineJoggle({ list: this.deleteArr }).then((res) => {
+              console.log(res);
+              this.lineList(); //刷新
+            });
+            this.$message({
+              type: "success",
+              message: "删除成功!",
+            });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除",
+            });
+          });
       }
+    },
+  },
+  created() {
+    this.lineList();
+  },
 };
 </script>
 <style lang="less">

src/views/realTimeMonitor/index.vue

@@ -4,16 +4,16 @@
     <div class="sideBar">
       <!-- <treeSide></treeSide> -->
       <!-- <el-tree ref="tree" :data="barData" @node-click="handleNodeClick" :props="defaultProps"></el-tree> -->
+
       <el-tree
-                :data="barData"
+        :data="lineTreeData"
         :props="defaultProps"
-                :current-node-key="current_node_key"
+        :expand-on-click-node="false"
         ref="tree"
         node-key="id"
         highlight-current
-                :default-expanded-keys="defaultKey"
-                check-on-click-node
         @node-click="handleNodeClick"
+        :current-node-key="currentNodekey"
       >
       </el-tree>
     </div>
@@ -32,75 +32,88 @@
 </template>
 
 <script>
-// import { getHostDeviceDataByVoltage } from '@/utils/api/index';
+import {
-import carouselChart from '../components/carouselChart.vue';
+  getLineTreeListJoggle,
-import treeSide from './components/treeSide.vue';
+  getTerminalPhotoListJoggle,
-import picturemain from './picturemain.vue'; //照片展示
+} from "@/utils/api/index";
-import paramArea from './paramArea.vue'; //右侧参数区
+import carouselChart from "../components/carouselChart.vue";
-import testjson from '../../testjson';
+import treeSide from "./components/treeSide.vue";
+import picturemain from "./picturemain.vue"; //照片展示
+import paramArea from "./paramArea.vue"; //右侧参数区
 
 export default {
   components: {
     treeSide,
     picturemain,
     paramArea,
-        carouselChart
+    carouselChart,
   },
   data() {
     return {
-            photoData: '',
+      photoData: "",
-            childData: '',
+      childData: "",
-            currentNodekey: '',
+      currentNodekey: "",
       showBigPic: true,
-            defaultKey: '',
+      defaultKey: "",
-           
+      lineTreeData: [],
-            barData: [],
       defaultProps: {
         //指定参数格式回显数据
-                children: 'children',
+        children: "list",
-                label: 'text'
+        label: "name",
       },
-            current_node_key: '2e24a182-b1a5-4135-b473-b8eee2c5193e'
+      currentNodekey: "", //默认选中的节点树,
     };
   },
   watch: {},
 
-    mounted() {
+  mounted() {},
-        this.$nextTick(() => {
-            var currentData = testjson.data[0].children[0].children[0];
-            this.handleNodeClick(currentData);
-            this.defaultKey = [currentData.id];
-        });
-    },
   created() {
-        this.getTree();
+    this.getLineTreeList();
-        //装置数量统计
-        // getHostDeviceDataByVoltage().then((res) => {
-        //     console.log(res);
-        // });
   },
 
   methods: {
-        handleNodeClick(data) {
+    //获取左侧树结构
-            console.log(data);
+    getLineTreeList() {
-            if (data.children.length === 0 && data.dataType === 'tower') {
+      getLineTreeListJoggle()
-                // this.photoData = data;
+        .then((res) => {
-                this.showBigPic = false;
+          console.log(res);
-                this.childData = data.text;
+          this.lineTreeData = res.data.list;
-            } else if (data.children.length && data.dataType === 'line') {
+          console.log(this.lineTreeData);
-                this.showBigPic = true;
+          if (this.lineTreeData.length > 0) {
-                this.photoData = data;
+            this.currentNodekey = this.lineTreeData[0].id;
+            this.$nextTick(() => {
+              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+            });
           }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
     },
-        getTree() {
+    //获取图片
-            this.barData = testjson.data;
+    getTerminalPhotoList() {},
-            console.log(this.barData);
+    //点击获取当前点击的tree数据
-        }
+    handleNodeClick(data, node) {
+      console.log(data, node);
+      if (data.list) {
+        this.$refs.tree.setCurrentKey(data.list[0].id);
       }
+    },
+  },
 };
 </script>
 
 <style lang="less">
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  // 设置颜色
+  color: #fff;
+  background: #2d8cf0 !important;
+}
+
+.el-tree-node > .el-tree-node__content:hover {
+  background-color: #c1ddf0;
+}
+
 .monitor-container {
   display: flex;
   height: 100%;
@@ -112,11 +125,9 @@ export default {
     border-right: 1px solid @border-color-base;
     overflow: auto;
     .el-tree {
-           
       .el-tree-node__content {
         height: 40px;
       }
-           
     }
   }
   .picSetBox {

vue.config.js

@@ -1,32 +1,32 @@
-const { defineConfig } = require('@vue/cli-service')
+const { defineConfig } = require("@vue/cli-service");
 const path = require("path");
 module.exports = defineConfig({
-  publicPath: '/',
+  publicPath: "/",
-  assetsDir: 'static',
+  assetsDir: "static",
   transpileDependencies: true,
-  lintOnSave:false,
+  lintOnSave: false,
   pluginOptions: {
-    'style-resources-loader': {
+    "style-resources-loader": {
-      preProcessor: 'less',
+      preProcessor: "less",
       patterns: [
         // 这个是加上自己的路径
-        path.resolve(__dirname, './src/assets/css/global.less')
+        path.resolve(__dirname, "./src/assets/css/global.less"),
-      ]
+      ],
-    }
+    },
   },
 
   devServer: {
     proxy: {
-        '/api': {//表示拦截以/api开头的请求路径
+      "/api": {
+        //表示拦截以/api开头的请求路径
         //target: 'http://localhost:1234', //本地nodejs服务器
-            //target: 'http://47.96.238.157:8093', //公司项目服务器环境
+        target: "http://47.96.238.157:8093", //公司项目服务器环境
-            target: 'http://180.166.218.222:7200',
+        //target: 'http://180.166.218.222:7200',
-            changOrigin: true,//是否开启跨域
+        changOrigin: true, //是否开启跨域
         pathRewrite: {
-                '^/api': '' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
+          "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
-            }
+        },
-        }
+      },
-    }
+    },
-
+  },
-}
+});
-})