电子巡更 巡检计划 对接接口

.env.development

@@ -2,4 +2,4 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://172.16.120.25:8080'
+VUE_APP_BASE_API = 'http://47.111.81.118:8081'

src/api/partol.js

@@ -1,9 +1,48 @@
 import request from '@/utils/request'
 
-//queryJson: 
+
+// export default {
+
+//     // 分页条件查询分类列表 
+//     getList(query, pageNo = 1, pageSize = 20) {
+//         return request({ // Promise
+//             // url: 'clz/v1/get_content',
+//             // method: 'get',
+//             url: '/electronic_patrol/getElectronicPatrolList',
+//             method: 'post',
+//             data: {
+//                 ...query, //查询条件
+//                 pageNo, //当前页
+//                 pageSize //每页多少条
+//             }
+//         })
+//     },
+
+//     //新增
+//     add(data) {
+//         return request({
+//             url: '/electronic_patrol/appendElectronicPatrol',
+//             method: 'post',
+//             data: data
+//         })
+//     },
+
+//     // 更新
+//     update(data) {
+//         return request({
+//             url: '/electronic_patrol/updateElectronicPatrol',
+//             method: 'post',
+//             data: data
+//         })
+//     },
+
+
+// }
+
 export function getList(query, pageNo = 1, pageSize = 20) {
     return request({
-
+        // url: 'clz/v1/get_content',
+        // method: 'get',
         url: '/electronic_patrol/getElectronicPatrolList',
         method: 'post',
 
@@ -14,4 +53,33 @@ export function getList(query, pageNo = 1, pageSize = 20) {
             pageSize //每页多少条
         }
     })
+}
+export function add(data) {
+    return request({
+        url: '/electronic_patrol/appendElectronicPatrol',
+        method: 'post',
+        data: data
+    })
+}
+
+
+export function update(data) {
+    return request({
+        url: '/electronic_patrol/updateElectronicPatrol',
+        method: 'post',
+        data: data
+    })
+}
+
+
+export function deleteById(id) {
+
+    return request({
+        url: `/electronic_patrol/deleteElectronicPatrol`,
+        method: 'post',
+        data: {
+            id
+        }
+
+    })
 }

src/api/partolplan.js

@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+
+export default {
+
+    // 分页条件查询分类列表 
+    getList(query, pageNo = 1, pageSize = 20) {
+        return request({ // Promise
+
+            url: `/plan/getPlanList`,
+            method: 'post',
+            data: {
+                ...query, //查询条件
+                pageNo, //当前页
+                pageSize //每页多少条
+            }
+        })
+    },
+
+    //新增
+    // add(data) {
+    //     return request({
+    //         url: '/electronic_patrol/appendElectronicPatrol',
+    //         method: 'post',
+    //         data: data
+    //     })
+    // },
+
+    // 更新
+    // update(data) {
+    //     return request({
+    //         url: '/electronic_patrol/updateElectronicPatrol',
+    //         method: 'post',
+    //         data: data
+    //     })
+    // },
+
+
+}

src/views/index/components/alarming.vue

@@ -66,7 +66,7 @@ export default {
   tr td,
   tr th {
     font-size: 1.4rem;
-    line-height: 3.6rem;
+    line-height: 3rem;
     text-align: left;
     // padding: 0 1rem;
     padding: 0;

src/views/patrol/elect-partol/edit.vue

@@ -6,6 +6,7 @@
     width="60%"
   >
     <el-form
+      :rules="rules"
       ref="formData"
       :model="formData"
       label-position="right"
@@ -14,132 +15,142 @@
       <el-row :gutter="10">
         <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"
           ><div class="grid-content bg-purple">
-            <el-form-item label="设备名称:" :label-width="formLabelWidth" prop="device_name">
-              <el-input
-                v-model="formData.device_name"
-                autocomplete="off"
-              ></el-input>
-            </el-form-item>
-            <el-form-item label="设备编号:" :label-width="formLabelWidth" prop="device_code">
+            <el-form-item
+              label="设备名称:"
+              :label-width="formLabelWidth"
+              prop="deviceCode"
+            >
               <el-select
-                v-model="formData.device_code"
-                placeholder=""
+                v-model="formData.deviceCode"
                 style="width: 100%"
+                placeholder=""
               >
-                <el-option label="一" value="1"></el-option>
-                <el-option label="二" value="2"></el-option>
+                <el-option
+                  v-for="item in deviceData"
+                  :key="item.code"
+                  :label="item.deviceName"
+                  :value="item.deviceCode"
+                ></el-option>
               </el-select>
             </el-form-item>
 
-            <el-form-item label="巡更计划:" :label-width="formLabelWidth" prop="patrol_plan_name">
-              <el-select
-                v-model="formData.patrol_plan_name"
-                placeholder=""
-                style="width: 100%"
-              >
-                <el-option label="计划一" value="1"></el-option>
-                <el-option label="计划二" value="2"></el-option>
-              </el-select>
+            <el-form-item
+              label="巡更计划:"
+              :label-width="formLabelWidth"
+              prop="patrolPlanName"
+            >
+              <el-input v-model="formData.patrolPlanName"></el-input>
             </el-form-item>
-            <el-form-item label="开始时间:" :label-width="formLabelWidth" prop="start_time">
-              <el-date-picker
+
+            <el-form-item
+              label="巡更开始时间:"
+              :label-width="formLabelWidth"
+              prop="startTime"
+            >
+
+             <!-- <el-time-picker
+                is-range
+                v-model="formData.connectTime"
+                range-separator="至"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                placeholder="选择时间范围"
+              >
+              </el-time-picker> -->
+
+              
+              <el-time-select
+                placeholder="开始时间"
+                v-model="formData.startTime"
                 style="width: 100%"
-                v-model="formData.start_time"
-                type="datetime"
-                placeholder="选择日期时间"
-                align="right"
-                format="yyyy-MM-dd HH:mm:ss"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                :picker-options="pickerOptions3"
-              ></el-date-picker>
+                :picker-options="{
+                  start: '08:30',
+                  step: '00:15',
+                  end: '18:30',
+                }"
+              >
+              </el-time-select>
+
+             
             </el-form-item>
-            <el-form-item label="结束时间:" :label-width="formLabelWidth" prop="end_time">
-              <el-date-picker
+            <el-form-item
+              label="巡更结束时间:"
+              v-model="formData.endTime"
+              :label-width="formLabelWidth"
+              prop="endTime"
+            >
+              <el-time-select
+                placeholder="结束时间"
+                v-model="formData.endTime"
                 style="width: 100%"
-                v-model="formData.end_time"
-                type="datetime"
-                placeholder="选择日期时间"
-                align="right"
-                format="yyyy-MM-dd HH:mm:ss"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                :picker-options="pickerOptions4"
+                :picker-options="{
+                  start: '08:30',
+                  step: '00:15',
+                  end: '18:30',
+                  minTime: formData.startTime,
+                }"
               >
-              </el-date-picker>
+              </el-time-select>
             </el-form-item></div
         ></el-col>
         <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"
           ><div class="grid-content bg-purple">
-            <el-form-item label="巡更周期:" :label-width="formLabelWidth" prop="patrol_plan_cycle">
-              <el-checkbox
-                :indeterminate="isIndeterminate"
-                v-model="patrol_plan_cycle"
-                @change="handleCheckAllChange"
-                >全选</el-checkbox
-              >
-              <div style="margin: 10px 0"></div>
+            <el-form-item
+              label="巡更周期"
+              prop="patrolPlanCycle"
+              :label-width="formLabelWidth"
+            >
               <el-checkbox-group
-                v-model="checkedCities"
-                @change="handleCheckedCitiesChange"
+                v-model="formData2.patrolPlanCycle"
+                style="width: 100%"
               >
-                <el-checkbox v-for="city in cities" :label="city" :key="city">{{
-                  city
-                }}</el-checkbox>
+                <el-checkbox
+                  name="patrolPlanCycle"
+                  v-for="item in cycles"
+                  :label="item"
+                  :key="item"
+                  >{{ item }}</el-checkbox
+                >
               </el-checkbox-group>
             </el-form-item>
 
             <el-form-item
-              label="开始日期:"
+              label="执行开始日期:"
               :label-width="formLabelWidth"
               style="margin-top: 0px"
-              prop="start_date"
+              prop="startDate"
             >
               <el-date-picker
                 style="width: 100%"
-                v-model="formData.start_date"
-                type="datetime"
-                placeholder="选择日期时间"
+                v-model="formData.startDate"
+                type="date"
+                placeholder="选择开始日期"
                 align="right"
-                format="yyyy-MM-dd HH:mm:ss"
-                value-format="yyyy-MM-dd HH:mm:ss"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
                 :picker-options="pickerOptions1"
               >
               </el-date-picker>
             </el-form-item>
-            <el-form-item label="结束日期:" :label-width="formLabelWidth" prop="end_date">
+            <el-form-item
+              label="执行结束日期:"
+              :label-width="formLabelWidth"
+              prop="endDate"
+            >
               <el-date-picker
                 style="width: 100%"
-                v-model="formData.end_date"
-                type="datetime"
-                placeholder="选择日期时间"
+                v-model="formData.endDate"
+                type="date"
+                placeholder="选择结束日期"
                 align="right"
-                format="yyyy-MM-dd HH:mm:ss"
-                value-format="yyyy-MM-dd HH:mm:ss"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
                 :picker-options="pickerOptions2"
               >
               </el-date-picker>
             </el-form-item></div
         ></el-col>
       </el-row>
-
-      <el-table
-        :data="tableData2"
-        stripe
-        border
-        :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
-        style="width: 100%"
-        id="out-table"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column type="selection" width="40"> </el-table-column>
-
-        <el-table-column prop="order" label="序号"> </el-table-column>
-        <el-table-column prop="cameraName" label="摄像头名称">
-        </el-table-column>
-        <el-table-column prop="company" label="摄像头所属单位">
-        </el-table-column>
-        <el-table-column prop="cameraPosition" label="摄像头位置">
-        </el-table-column>
-      </el-table>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="handleClose" style="background: #f6f6f6"
@@ -152,100 +163,102 @@
   </el-dialog>
 </template>
 <script>
-const cityOptions = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
+import { add } from "@/api/partol";
+
+//import api from "@/api/partol";
+
+const cycleOptions = [
+  "星期一",
+  "星期二",
+  "星期三",
+  "星期四",
+  "星期五",
+  "星期六",
+  "星期日",
+];
+
+const deviceData = [
+  {
+    deviceCode: "4689975698772669995465611",
+    deviceName: "设备1",
+  },
+  {
+    deviceCode: "122",
+    deviceName: "设备2",
+  },
+  {
+    deviceCode: "123",
+    deviceName: "设备3",
+  },
+];
 
 export default {
   name: "edit",
   props: {
-    title: {//弹框的标题
+    title: {
+      //弹框的标题
       type: String,
       default: "",
     },
-    visible: {//弹框窗口，true弹出
+    visible: {
+      //弹框窗口，true弹出
       type: Boolean,
       default: false,
     },
-    remoteClose:Function ,//用于关闭窗口
-    formData:{ //提交表单数据
-        type:Object,
-        default:{}
-
-    }
+    remoteClose: Function, //用于关闭窗口
+    formData: {
+      //提交表单数据
+      type: Object,
+      default: {},
+    },
   },
   data() {
     return {
-      tableData2: [
-        {
-          order: "1",
-          cameraName: "摄像头A",
-          company: "上海永天科技",
-          cameraPosition: "三楼大厅西南角",
-        },
-        {
-          order: "2",
-          cameraName: "摄像头B",
-          company: "虹泾总部",
-          cameraPosition: "一楼大厅大门处",
-        },
-      ],
-      multipleSelection: [],
+      formData2: {
+        // patrolPlanCycle: ["星期五"],
 
-      options2: [
-        {
-          value: "1",
-          label: "角色1",
-        },
-        {
-          value: "2",
-          label: "角色2",
-        },
-        {
-          value: "3",
-          label: "角色3",
-        },
-      ],
-      value2: "",
+           patrolPlanCycle:this.formData.patrolPlanCycle ? this.formData.patrolPlanCycle : []
+      },
 
-      options3: [
-        {
-          value: "1",
-          label: "单位名称1",
-        },
-        {
-          value: "2",
-          label: "单位名称2",
-        },
-        {
-          value: "3",
-          label: "单位名称3",
-        },
-      ],
-      value3: "",
+      deviceData,
+      //校验
+      rules: {
+        deviceName: [
+          { required: true, message: "请选择设备名称", trigger: "change" },
+        ],
+        patrolPlanName: [
+          { required: true, message: "请输入巡更计划名称", trigger: "blur" },
+        ],
+        // patrolPlanCycle: [
+        //   { required: true, message: "请选择巡更周期", trigger: "change" },
+        // ],
+        // startTime: [
+        //   { required: true, message: "请选择开始时间", trigger: "change" },
+        // ],
+        // endTime: [
+        //   { required: true, message: "请输入结束时间", trigger: "change" },
+        // ],
+        startDate: [
+          { required: true, message: "请选择开始日期", trigger: "change" },
+        ],
+        endDate: [
+          { required: true, message: "请输入结束日期", trigger: "change" },
+        ],
+      },
 
-      input: "",
+      multipleSelection: [],
 
-      
       formLabelWidth: "120px",
 
-      // 全选
-      checkAll: false,
-      checkedCities: ["周一", "周五"],
-      cities: cityOptions,
-      isIndeterminate: true,
+      cycles: cycleOptions,
 
-      //日期时间选择器
-      formData: {
-        start_date: "",
-        end_date: "",
-        start_time: "",
-        end_time: "",
-      },
+      // 时间插件
       pickerOptions1: {
         disabledDate: (time) => {
-          if (this.formData.end_date) {
+          if (this.formData.endDate) {
             return (
               time.getTime() < Date.now() - 8.64e7 ||
-              time.getTime() > new Date(this.formData.end_date).getTime()
+              time.getTime() > new Date(this.formData.endDate).getTime()
             );
           } else {
             return time.getTime() < Date.now() - 8.64e7;
@@ -254,10 +267,10 @@ export default {
       },
       pickerOptions2: {
         disabledDate: (time) => {
-          if (this.formData.start_date) {
+          if (this.formData.startDate) {
             return (
               time.getTime() < Date.now() - 8.64e7 ||
-              time.getTime() < new Date(this.formData.start_date).getTime()
+              time.getTime() < new Date(this.formData.startDate).getTime()
             );
           } else {
             return time.getTime() < Date.now() - 8.64e7;
@@ -267,10 +280,10 @@ export default {
 
       pickerOptions3: {
         disabledDate: (time) => {
-          if (this.formData.end_date) {
+          if (this.formData.endDate) {
             return (
               time.getTime() < Date.now() - 8.64e7 ||
-              time.getTime() > new Date(this.formData.end_date).getTime()
+              time.getTime() > new Date(this.formData.endDate).getTime()
             );
           } else {
             return time.getTime() < Date.now() - 8.64e7;
@@ -279,10 +292,10 @@ export default {
       },
       pickerOptions4: {
         disabledDate: (time) => {
-          if (this.formData.start_date) {
+          if (this.formData.startDate) {
             return (
               time.getTime() < Date.now() - 8.64e7 ||
-              time.getTime() < new Date(this.formData.start_date).getTime()
+              time.getTime() < new Date(this.formData.startDate).getTime()
             );
           } else {
             return time.getTime() < Date.now() - 8.64e7;
@@ -292,31 +305,66 @@ export default {
     };
   },
   methods: {
-    // 全选
-    handleCheckAllChange(val) {
-      this.checkedCities = val ? cityOptions : [];
-      this.isIndeterminate = false;
-    },
-    handleCheckedCitiesChange(value) {
-      let checkedCount = value.length;
-      this.checkAll = checkedCount === this.cities.length;
-      this.isIndeterminate =
-        checkedCount > 0 && checkedCount < this.cities.length;
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
+    renderTime(date) {
+      var dateee = new Date(date).toJSON();
+      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
+        .toISOString()
+        .replace(/T/g, " ")
+        .replace(/\.[\d]{3}Z/, "");
     },
+
     //关闭窗口
     handleClose() {
-        //将表单清空
-        this.$refs['formData'].resetFields()
-        //注意不可以通过this.visiable=false来关闭，因为他是父组件的属性
-      this.remoteClose()
+      //将表单清空
+      this.$refs["formData"].resetFields();
+      //注意不可以通过this.visiable=false来关闭，因为他是父组件的属性
+      this.remoteClose();
     },
 
     //提交表单数据
     submitForm(formName) {
-      this.$emit("update:visible", false);
+      this.formData.patrolPlanCycle = this.formData2.patrolPlanCycle;
+      //   let startTime = this.renderTime(this.formData.connectTime[0]);
+      //   let endTime = this.renderTime(this.formData.connectTime[1]);
+
+      //   this.formData.startTime = startTime.split(" ")[1];
+      //   this.formData.endTime = endTime.split(" ")[1];
+      //   delete this.formData.connectTime;
+
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          //检验通过，提交表单数据
+
+          console.log(this.formData);
+          deviceData.forEach((item, index) => {
+            if (item.deviceCode == this.formData.deviceCode) {
+              this.formData.deviceName = item.deviceName;
+            }
+          });
+
+          this.formData.patrolPlanCycle = JSON.stringify(
+            this.formData.patrolPlanCycle
+          );
+
+          add(this.formData).then((response) => {
+            if (response.success) {
+              this.$message({
+                message: "保存成功",
+                type: "success",
+              });
+              this.handleClose();
+            } else {
+              this.$message({
+                message: response.Msg,
+                type: "error",
+              });
+            }
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
     },
   },
 };

src/views/patrol/elect-partol/index.vue

@@ -5,14 +5,19 @@
         <div class="filter-item">
           巡更计划名称:
           <el-input
-            v-model.trim="query.patrol_plan_name"
+            v-model.trim="query.patrolPlanName"
             placeholder=""
             style="width: 150px"
           ></el-input>
         </div>
         <div class="filter-item">
           执行设备:
-          <el-select v-model="query.device_name" placeholder="" style="width: 150px" clearable >
+          <el-select
+            v-model="query.deviceName"
+            placeholder=""
+            style="width: 150px"
+            clearable
+          >
             <el-option
               v-for="item in options"
               :key="item.value"
@@ -23,22 +28,23 @@
           </el-select>
         </div>
 
-        <el-button type="primary" icon="el-icon-search" class="search-button" @click="queryData"
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          class="search-button"
+          @click="queryData"
           >搜索</el-button
         >
       </div>
 
       <div class="handle-button-right">
-        <el-button
-          icon="el-icon-plus"
-          type="success"
-          @click="openAdd"
+        <el-button icon="el-icon-plus" type="success" @click="openAdd"
           >新增</el-button
         >
         <el-button icon="el-icon-delete" type="danger" @click="batchDelete"
           >删除</el-button
         >
-        <el-button type="warning">
+        <el-button type="warning" @click="handleDownload">
           <svg-icon icon-class="export" />
           导出
         </el-button>
@@ -46,8 +52,7 @@
     </div>
 
     <el-divider></el-divider>
-    <!-- <div>{{page.total}}</div>
-    <div>{{list}}</div> -->
+
     <el-table
       :data="list"
       stripe
@@ -68,19 +73,19 @@
           <div class="check" @click="dialogVideoDetailVisible = true">查看</div>
         </template>
       </el-table-column>
-      <el-table-column label="巡更开始时间" width="200">
+      <el-table-column label="执行日期" width="200">
         <template slot-scope="{ row }">
-          <div>{{ row.startDate }} {{ row.start_date }}</div>
+          <div>{{ row.startDate }} ~ {{ row.endDate }}</div>
         </template>
       </el-table-column>
 
-      <el-table-column prop="endDate" label="巡更结束时间" width="200">
+      <el-table-column label="巡更时间" width="200">
         <template slot-scope="{ row }">
-          <div>{{ row.endDate }} {{ row.end_date }}</div>
+          <div>{{ row.startTime }} ~ {{ row.endTime }}</div>
         </template>
       </el-table-column>
 
-      <el-table-column prop="patrolPlanCycle" label="巡更周期" width="100">
+      <el-table-column prop="patrolPlanCycle" label="巡更周期" width="170">
       </el-table-column>
 
       <el-table-column label="添加时间" width="200">
@@ -100,7 +105,7 @@
           <el-button
             icon="el-icon-delete"
             style="color: #f27979"
-            @click="handleDelete(scope.$index, scope.row)"
+            @click="handleDelete(scope.row.id)"
             >删除</el-button
           >
         </template>
@@ -108,19 +113,21 @@
     </el-table>
 
     <el-pagination
-
       background
       @current-change="handleCurrentChange"
       :current-page="page.pageNo"
       :page-size="1"
       layout="prev, pager, next"
-      :total="page.total">
+      :total="page.total"
+    >
     </el-pagination>
 
-
-    
-
-    <edit :title="edit.title " :visible="edit.visible" :formData="edit.formData" :remoteClose="remoteClose"/>
+    <edit
+      :title="edit.title"
+      :visible="edit.visible"
+      :formData="edit.formData"
+      :remoteClose="remoteClose"
+    />
 
     <!-- 视频详情弹框 start -->
     <el-dialog
@@ -140,24 +147,16 @@
 <script>
 import { renderTime } from "@/utils";
 
-// 引入导出Excel表格依赖
-import FileSaver from "file-saver";
-import XLSX from "xlsx";
-
-// console.log(flexible);
-// console.log(renderTime);
-
 //aa 1：引入api文件
-import { getList } from "@/api/partol";
-
-import edit from "./edit";
+import { getList, deleteById } from "@/api/partol";
 
+// import api from "@/api/partol";
 
+import edit from "./edit";
 
 export default {
   components: {
-    edit
-
+    edit,
   },
   name: "elect-partol",
   data() {
@@ -172,13 +171,10 @@ export default {
       query: {},
       list: [], //列表数据
 
-
       //视频弹框
       dialogVideoDetailVisible: false,
 
-             dialogFormVisible: false,
-
-
+      dialogFormVisible: false,
 
       options: [
         {
@@ -196,13 +192,11 @@ export default {
       ],
       value: "",
 
-      edit:{
-        title:'',
-        visible:false,
-        formData:{}
-      }
-
-      
+      edit: {
+        title: "",
+        visible: false,
+        formData: {},
+      },
     };
   },
 
@@ -213,6 +207,7 @@ export default {
 
   methods: {
     //aa 3请求接口
+
     fetchData() {
       getList(this.query, this.page.pageNo, this.page.pageSize).then(
         (response) => {
@@ -225,6 +220,57 @@ export default {
       );
     },
 
+
+
+
+    handleDownload() {
+      this.downloadLoading = true;
+      import("@/vendor/Export2Excel").then((excel) => {
+        const tHeader = [
+          "巡更计划名称",
+          "设备名称",
+          "执行开始日期",
+          "执行结束日期",
+          "巡更开始时间",
+          "巡更结束时间",
+          "巡更周期",
+          "添加时间"
+          
+        ];
+        const filterVal = [
+          "deviceName",
+          "patrolPlanName",
+          "startDate",
+          "endDate",
+          "startTime",
+          "endTime",
+          "patrolPlanCycle",
+          "creationTime"
+          
+          
+        ];
+        const data = this.formatJson(filterVal);
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: "table-list",
+        });
+        this.downloadLoading = false;
+      });
+    },
+    formatJson(filterVal) {
+      return this.list.map((v) =>
+        filterVal.map((j) => {
+          if (j === "timestamp") {
+            return parseTime(v[j]);
+          } else {
+            return v[j];
+          }
+        })
+      );
+    },
+
+
     //当页码改变后触发到此方法  val是当前点击到的那个页码
     handleCurrentChange(val) {
       this.page.pageNo = val;
@@ -232,14 +278,12 @@ export default {
     },
 
     //条件查询
-    queryData(){
+    queryData() {
       //将页码 变为1，第一页
-      this.page.pageNo=1 ;
-      this.fetchData()
-
+      this.page.pageNo = 1;
+      this.fetchData();
     },
 
-
     //时间格式化2021-01-21T05:53:00.000+0000
     renderTime(date) {
       var dateee = new Date(date).toJSON();
@@ -249,54 +293,65 @@ export default {
         .replace(/\.[\d]{3}Z/, "");
     },
 
-    //定义导出Excel表格事件
-    exportExcel() {
-      /* 从表生成工作簿对象 */
-      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
-      /* 获取二进制字符串作为输出 */
-      var wbout = XLSX.write(wb, {
-        bookType: "xlsx",
-        bookSST: true,
-        type: "array",
-      });
-      try {
-        FileSaver.saveAs(
-          //Blob 对象表示一个不可变、原始数据的类文件对象。
-          //Blob 表示的不一定是JavaScript原生格式的数据。
-          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
-          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
-          new Blob([wbout], { type: "application/octet-stream" }),
-          //设置导出文件名称
-          "sheetjs.xlsx"
-        );
-      } catch (e) {
-        if (typeof console !== "undefined") console.log(e, wbout);
-      }
-      return wbout;
-    },
+  
+
+
+
+
     handleEdit(index, row) {
-      alert(index, row);
+      this.edit.visible = true;
+      this.edit.title = "修改";
+
+      // console.log("demo======");
+      // console.log(row);
+      // this.formData = row
+      this.edit.formData = row;
+
+      //
+      let startTimeArr = row.startTime.split(":");
+      let endTimeArr = row.endTime.split(":");
+      //  alert(startTimeArr)
+
+      // this.edit.formData.connectTime = [
+      //   new Date(
+      //     2016,
+      //     9,
+      //     10,
+      //     startTimeArr[0],
+      //     startTimeArr[1],
+      //     startTimeArr[2]
+      //   ),
+      //   new Date(2016, 9, 10, endTimeArr[0], endTimeArr[1], endTimeArr[2]),
+      // ];
+
+      // alert(index, row);
     },
-    handleDelete(index, row) {
+    handleDelete(id) {
       this.$confirm("确定删除该数据吗?", "删除", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
       })
         .then(() => {
-          this.$message({
-            type: "success",
-            message: "删除成功!",
+          //发送删除请求
+          deleteById(this.id).then((response) => {
+            //处理相应结果提示
+            this.$message({
+              type: response.success ? "success" : "error",
+              message: response.Msg,
+            });
           });
-          this.list.splice(index, 1);
+
+          //刷新列表数据
+          this.fetchData();
+
+          // this.list.splice(index, 1);
         })
         .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除",
-          });
+          // 不用理会
         });
     },
+
     batchDelete() {
       let multData = this.multipleSelection;
       let tableData = this.tableData;
@@ -317,25 +372,17 @@ export default {
       this.multipleSelection = val;
     },
 
-//子组件会触发此事件方法来关闭窗口
-    remoteClose(){
-       this.edit.formData={}
-      this.edit.visible=false
-      this.fetchData()
+    //子组件会触发此事件方法来关闭窗口
+    remoteClose() {
+      this.edit.formData = {};
+      this.edit.visible = false;
+      this.fetchData();
+    },
+    //打开新增窗口
+    openAdd() {
+      this.edit.visible = true;
+      this.edit.title = "新增";
     },
-//打开新增窗口
-    openAdd(){
-      this.edit.visible=true ;
-      this.edit.title='新增'
-
-    }
-
-
-
-
-
-
-    
   },
 };
 </script>

src/views/patrol/partol-plan/edit.vue

@@ -0,0 +1,155 @@
+<template>
+
+ <el-dialog title="新增" :visible.sync="dialogFormVisible" width="60%">
+      <el-form :model="form">
+        <el-row :gutter="10">
+          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"
+            ><div class="grid-content bg-purple">
+              <el-form-item label="任务名称:" :label-width="formLabelWidth">
+                <el-input v-model="form.name" autocomplete="off"></el-input>
+              </el-form-item>
+
+              <el-form-item label="单位/项目:" :label-width="formLabelWidth">
+                <el-select
+                  v-model="form.region"
+                  placeholder=""
+                  style="width: 100%"
+                >
+                  <el-option label="项目一" value="1"></el-option>
+                  <el-option label="项目二" value="2"></el-option>
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="执行团队:" :label-width="formLabelWidth">
+                <el-select
+                  v-model="form.region2"
+                  placeholder=""
+                  style="width: 100%"
+                >
+                  <el-option label="团队一" value="3"></el-option>
+                  <el-option label="团队二" value="4"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="巡检开始时间:" :label-width="formLabelWidth">
+                <el-date-picker
+                  style="width: 100%"
+                  v-model="formDaliog.startTime2"
+                  type="datetime"
+                  placeholder="选择日期时间"
+                  align="right"
+                  format="yyyy-MM-dd HH:mm:ss"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  :picker-options="pickerOptions3"
+                ></el-date-picker>
+              </el-form-item>
+              <el-form-item label="巡检结束时间:" :label-width="formLabelWidth">
+                <el-date-picker
+                  style="width: 100%"
+                  v-model="formDaliog.endTime2"
+                  type="datetime"
+                  placeholder="选择日期时间"
+                  align="right"
+                  format="yyyy-MM-dd HH:mm:ss"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  :picker-options="pickerOptions4"
+                >
+                </el-date-picker>
+              </el-form-item></div
+          ></el-col>
+          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"
+            ><div class="grid-content bg-purple">
+              <el-form-item label="周期:" :label-width="formLabelWidth">
+                <el-checkbox
+                  :indeterminate="isIndeterminate"
+                  v-model="checkAll"
+                  @change="handleCheckAllChange"
+                  >全选</el-checkbox
+                >
+                <div style="margin: 10px 0"></div>
+                <el-checkbox-group
+                  v-model="checkedCities"
+                  @change="handleCheckedCitiesChange"
+                >
+                  <el-checkbox
+                    v-for="city in cities"
+                    :label="city"
+                    :key="city"
+                    >{{ city }}</el-checkbox
+                  >
+                </el-checkbox-group>
+              </el-form-item>
+
+              <el-form-item
+                label="执行开始日期:"
+                :label-width="formLabelWidth"
+                style="margin-top: 0px"
+              >
+                <el-date-picker
+                  style="width: 100%"
+                  v-model="formDaliog.startTime"
+                  type="datetime"
+                  placeholder="选择日期时间"
+                  align="right"
+                  format="yyyy-MM-dd HH:mm:ss"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  :picker-options="pickerOptions1"
+                >
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="执行结束日期:" :label-width="formLabelWidth">
+                <el-date-picker
+                  style="width: 100%"
+                  v-model="formDaliog.endTime"
+                  type="datetime"
+                  placeholder="选择日期时间"
+                  align="right"
+                  format="yyyy-MM-dd HH:mm:ss"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  :picker-options="pickerOptions2"
+                >
+                </el-date-picker>
+              </el-form-item></div
+          ></el-col>
+        </el-row>
+
+        <el-table
+          :data="tableData2"
+          stripe
+          border
+          :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
+          style="width: 100%"
+          id="out-table"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="40"> </el-table-column>
+
+          <el-table-column prop="order" label="序号" width="50">
+          </el-table-column>
+          <el-table-column prop="cameraName" label="点位名称">
+          </el-table-column>
+          <el-table-column prop="company" label="点位地址"> </el-table-column>
+          <el-table-column label="点位详情">
+            <template slot-scope="scope">
+              <img :src="scope.row.imageUrl" style="width: 25px" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          @click="dialogFormVisible = false"
+          style="background: #f6f6f6"
+          >关 闭</el-button
+        >
+        <el-button type="primary" @click="dialogFormVisible = false"
+          >保 存</el-button
+        >
+      </div>
+    </el-dialog>
+
+</template>
+<script>
+
+
+
+</script>

src/views/patrol/partol-plan/index.vue

@@ -5,25 +5,21 @@
         <div class="filter-item">
           任务名称:
           <el-input
-            v-model="input"
+            v-model.trim="query.planName"
             placeholder=""
             style="width: 150px"
           ></el-input>
         </div>
-        <div class="filter-item">
-          责任人:
-          <el-select v-model="value" placeholder="" style="width: 150px">
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
+       <div class="filter-item">
+          任务团队:
+          <el-input
+            v-model.trim="query.planTeam"
+            placeholder=""
+            style="width: 150px"
+          ></el-input>
         </div>
 
-        <el-button type="primary" icon="el-icon-search" class="search-button"
+        <el-button type="primary" icon="el-icon-search" class="search-button" @click="queryData"
           >搜索</el-button
         >
       </div>
@@ -47,7 +43,7 @@
 
     <el-divider></el-divider>
     <el-table
-      :data="tableData"
+      :data="list"
       stripe
       border
       :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
@@ -57,15 +53,33 @@
     >
       <el-table-column type="selection" width="40"> </el-table-column>
 
-      <el-table-column prop="planName" label="任务名称" width="150"> </el-table-column>
-      <el-table-column prop="period" label="周期" width="280">
+      <el-table-column prop="planName" label="计划名称" width="130"> </el-table-column>
+      <el-table-column prop="planRoute" label="计划路线" width="130"> </el-table-column>
+
+      <el-table-column prop="planTeam" label="计划团队 "> </el-table-column>
+      <el-table-column prop="planCycle" label="计划周期" width="100">
       </el-table-column>
-      <el-table-column prop="execuDate" label="执行日期" width="180">
+
+      <el-table-column prop="planStartDate" label="计划开始日期 " width="130"> </el-table-column>
+      <el-table-column prop="planEndDate" label="计划结束日期" width="130">
+      </el-table-column>
+      <el-table-column prop="planStartTime" label="计划开始时间 " width="130"> </el-table-column>
+
+      <el-table-column prop="planEndTime" label="计划结束时间" width="130">
       </el-table-column>
 
-      <el-table-column prop="patrolTime" label="巡检时间" width="130"> </el-table-column>
-      <el-table-column prop="team" label="执行团队"> </el-table-column>
-      <el-table-column prop="responser" label="责任人"> </el-table-column>
+      
+      
+      
+
+      
+      <el-table-column prop="state" label="状态 "> </el-table-column>
+      <el-table-column prop="user" label="创建人 "> </el-table-column>
+      <el-table-column label="创建时间" width="200">
+        <template slot-scope="{ row }">
+          <span>{{ renderTime(row.creationTime) }}</span>
+        </template>
+      </el-table-column>
 
       <el-table-column label="操作" width="150" fixed="right">
         <template slot-scope="scope">
@@ -85,174 +99,53 @@
       </el-table-column>
     </el-table>
 
-    <el-pagination background layout="prev, pager, next" :total="1000">
+    <el-pagination
+      background
+      @current-change="handleCurrentChange"
+      :current-page="page.pageNo"
+      :page-size="1"
+      layout="prev, pager, next"
+      :total="page.total"
+    >
     </el-pagination>
 
-    <el-dialog title="新增" :visible.sync="dialogFormVisible" width="60%">
-      <el-form :model="form">
-        <el-row :gutter="10">
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"
-            ><div class="grid-content bg-purple">
-              <el-form-item label="任务名称:" :label-width="formLabelWidth">
-                <el-input v-model="form.name" autocomplete="off"></el-input>
-              </el-form-item>
-
-              <el-form-item
-                label="单位/项目:"
-                :label-width="formLabelWidth"
-              >
-                <el-select
-                  v-model="form.region"
-                  placeholder=""
-                  style="width: 100%"
-                >
-                  <el-option label="项目一" value="1"></el-option>
-                  <el-option label="项目二" value="2"></el-option>
-                </el-select>
-              </el-form-item>
-
-              <el-form-item label="执行团队:" :label-width="formLabelWidth">
-                <el-select
-                  v-model="form.region2"
-                  placeholder=""
-                  style="width: 100%"
-                >
-                  <el-option label="团队一" value="3"></el-option>
-                  <el-option label="团队二" value="4"></el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="巡检开始时间:" :label-width="formLabelWidth">
-                <el-date-picker
-                  style="width: 100%"
-                  v-model="formDaliog.startTime2"
-                  type="datetime"
-                  placeholder="选择日期时间"
-                  align="right"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  :picker-options="pickerOptions3"
-                ></el-date-picker>
-              </el-form-item>
-              <el-form-item label="巡检结束时间:" :label-width="formLabelWidth">
-                <el-date-picker
-                  style="width: 100%"
-                  v-model="formDaliog.endTime2"
-                  type="datetime"
-                  placeholder="选择日期时间"
-                  align="right"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  :picker-options="pickerOptions4"
-                >
-                </el-date-picker>
-              </el-form-item></div
-          ></el-col>
-          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"
-            ><div class="grid-content bg-purple">
-              <el-form-item label="周期:" :label-width="formLabelWidth">
-                <el-checkbox
-                  :indeterminate="isIndeterminate"
-                  v-model="checkAll"
-                  @change="handleCheckAllChange"
-                  >全选</el-checkbox
-                >
-                <div style="margin: 10px 0"></div>
-                <el-checkbox-group
-                  v-model="checkedCities"
-                  @change="handleCheckedCitiesChange"
-                >
-                  <el-checkbox
-                    v-for="city in cities"
-                    :label="city"
-                    :key="city"
-                    >{{ city }}</el-checkbox
-                  >
-                </el-checkbox-group>
-              </el-form-item>
-
-              <el-form-item
-                label="执行开始日期:"
-                :label-width="formLabelWidth"
-                style="margin-top: 0px"
-              >
-                <el-date-picker
-                  style="width: 100%"
-                  v-model="formDaliog.startTime"
-                  type="datetime"
-                  placeholder="选择日期时间"
-                  align="right"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  :picker-options="pickerOptions1"
-                >
-                </el-date-picker>
-              </el-form-item>
-              <el-form-item label="执行结束日期:" :label-width="formLabelWidth">
-                <el-date-picker
-                  style="width: 100%"
-                  v-model="formDaliog.endTime"
-                  type="datetime"
-                  placeholder="选择日期时间"
-                  align="right"
-                  format="yyyy-MM-dd HH:mm:ss"
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  :picker-options="pickerOptions2"
-                >
-                </el-date-picker>
-              </el-form-item></div
-          ></el-col>
-        </el-row>
-
-        <el-table
-          :data="tableData2"
-          stripe
-          border
-          :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
-          style="width: 100%"
-          id="out-table"
-          @selection-change="handleSelectionChange"
-        >
-          <el-table-column type="selection" width="40"> </el-table-column>
-
-          <el-table-column prop="order" label="序号" width="50"> </el-table-column>
-          <el-table-column prop="cameraName" label="点位名称">
-          </el-table-column>
-          <el-table-column prop="company" label="点位地址">
-          </el-table-column>
-          <el-table-column label="点位详情">
-            <template slot-scope="scope">
-                  <img :src="scope.row.imageUrl" style="width: 25px" />
-                </template>
-          </el-table-column>
-        </el-table>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button
-          @click="dialogFormVisible = false"
-          style="background: #f6f6f6"
-          >关 闭</el-button
-        >
-        <el-button type="primary" @click="dialogFormVisible = false"
-          >保 存</el-button
-        >
-      </div>
-    </el-dialog>
 
+    <!-- <edit
+      :title="edit.title"
+      :visible="edit.visible"
+      :formData="edit.formData"
+      :remoteClose="remoteClose"
+    /> -->
+
+
+
+
+   
   </div>
 </template>
 
 
 <script>
-// 引入导出Excel表格依赖
-import FileSaver from "file-saver";
-import XLSX from "xlsx";
+import api from "@/api/partolplan";
+import edit from "./edit";
+
 
 const cityOptions = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
 
 export default {
-  name: "javascriptthree",
+  name: "partol-plan",
   data() {
     return {
+      list: [], //列表数据
+      page: {
+        //分页对象
+        pageNo: 1,
+        pageSize: 20,
+        total: 0,
+      },
+      // query: {"demo":1}, //查询条件
+      query: {},
+
       tableData: [
         {
           planName: "admin巡检计划1",
@@ -285,13 +178,13 @@ export default {
           order: "1",
           cameraName: "维保测试点位",
           company: "上海青浦区徐泾镇徐乐路208号",
-          imageUrl:require("@/assets/img.png"),
+          imageUrl: require("@/assets/img.png"),
         },
         {
           order: "2",
           cameraName: "维保测试点位",
           company: "测试地址",
-          imageUrl:require("@/assets/img.png"),
+          imageUrl: require("@/assets/img.png"),
         },
       ],
       multipleSelection: [],
@@ -427,32 +320,52 @@ export default {
       },
     };
   },
+
+  created() {
+    this.fetchData();
+  },
+
   methods: {
-    //定义导出Excel表格事件
-    exportExcel() {
-      /* 从表生成工作簿对象 */
-      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
-      /* 获取二进制字符串作为输出 */
-      var wbout = XLSX.write(wb, {
-        bookType: "xlsx",
-        bookSST: true,
-        type: "array",
-      });
-      try {
-        FileSaver.saveAs(
-          //Blob 对象表示一个不可变、原始数据的类文件对象。
-          //Blob 表示的不一定是JavaScript原生格式的数据。
-          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
-          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
-          new Blob([wbout], { type: "application/octet-stream" }),
-          //设置导出文件名称
-          "sheetjs.xlsx"
-        );
-      } catch (e) {
-        if (typeof console !== "undefined") console.log(e, wbout);
-      }
-      return wbout;
+    fetchData() {
+      api
+        .getList(this.query, this.page.current, this.page.size)
+        .then((response) => {
+          console.log("response", response);
+          // 列表数据
+          this.list = response.pageList;
+          this.page.total = response.totalCount;
+        });
     },
+
+    
+
+
+
+    //时间格式化2021-01-21T05:53:00.000+0000
+    renderTime(date) {
+      var dateee = new Date(date).toJSON();
+      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
+        .toISOString()
+        .replace(/T/g, " ")
+        .replace(/\.[\d]{3}Z/, "");
+    },
+
+    //当页码改变后触发到此方法  val是当前点击到的那个页码
+    handleCurrentChange(val) {
+      this.page.pageNo = val;
+      this.fetchData();
+    },
+
+
+    //条件查询
+    queryData() {
+      //将页码 变为1，第一页
+      this.page.pageNo = 1;
+      this.fetchData();
+    },
+
+
+
     handleEdit(index, row) {
       alert(index, row);
     },

vue.config.js

@@ -44,7 +44,7 @@ module.exports = {
         // proxy: {
         //     [process.env.VUE_APP_BASE_API]: {
         //         target: 'http://172.16.120.25:8080',
-        //         // target: "https://devapimeeting.talkmed.com",
+        //         //target: "https://devapimeeting.talkmed.com",
         //         changeOrigin: true,
         //         pathRewrite: {
         //             ['^' + process.env.VUE_APP_BASE_API]: ''