完成水电表列表

src/views/system/inspection/Plan/addInspectionPlan.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="p-2">
+    <PageHeader title="新建巡检计划"></PageHeader>
+    <div class="EditBody">
+      <div class="title">
+        <div>基本信息</div>
+      </div>
+      <div class="bodybox">
+        <el-form label-width="100px" label-position="right">
+          <el-form-item label="巡检计划名称" prop="planName">
+            <el-input v-model="form.planName" placeholder="请输入"></el-input>
+          </el-form-item>
+          <el-form-item label="巡检人员" prop="inspectorIds">
+            <el-input v-model="form.inspectorIds" placeholder="请输入"></el-input>
+          </el-form-item>
+          <el-form-item label="执行周期">
+            <el-date-picker
+              @update:model-value="handleTime"
+              v-model="taskDate"
+              type="daterange"
+              range-separator="到"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              start-placeholder="开启日期"
+              end-placeholder="结束日期"
+            />
+          </el-form-item>
+          <el-form-item label="任务时间">
+            <el-select v-model="form.taskTime" placeholder="Select" style="width: 100%">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <div flex flex-wrap>
+              <div
+                class="week-items"
+                @click="checkoutWeekFun(item)"
+                :class="{
+                  active: checkoutWeek.includes(item)
+                }"
+                v-for="(item, index) in 7"
+                :key="index"
+              >
+                <div class="iconbox">
+                  <el-icon v-show="checkoutWeek.includes(item)"><Check /></el-icon>
+                </div>
+                <span class="ml-5px">{{ numToWeek(item) }}</span>
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item label="提醒时间">
+            <el-select v-model="form.remindTime" placeholder="Select" style="width: 100%">
+              <el-option v-for="item in remindTimeoptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="巡检设置">
+            <el-radio-group v-model="form.inspectSetting">
+              <el-radio label="必须拍照" value="1" />
+              <el-radio label="允许跳检" value="0" />
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="计划路线">
+            <el-select v-model="form.routeIds" placeholder="Select" style="width: 100%">
+              <el-option v-for="item in routeIdsoptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <div class="mapbox"></div>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary">提交</el-button>
+            <el-button @click="routeback">返回</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PageHeader from '@/components/Pageheader/index.vue';
+import { numToWeek } from '@/utils/time';
+import { ref } from 'vue';
+const route = useRoute();
+
+const router = useRouter();
+
+const form = ref({
+  taskTime: 0,
+  remindTime: '',
+  startTime: '',
+  endTime: '',
+  inspectSetting: '',
+  routeIds: ''
+});
+
+//  执行周期
+const taskDate = ref([]);
+function handleTime(val) {
+  console.log(val);
+  taskDate.value = val;
+  form.value.startTime = val[0];
+  form.value.endTime = val[1];
+}
+const checkoutWeek = ref([]);
+function checkoutWeekFun(val: number) {
+  if (!checkoutWeek.value.includes(val)) {
+    checkoutWeek.value.push(val);
+  } else {
+    checkoutWeek.value = checkoutWeek.value.filter((item) => item !== val);
+  }
+  console.log(val);
+}
+
+// 任务时间
+const options = ref([
+  {
+    value: '09:00-11:00; 13:00-15:00',
+    label: '09:00-11:00; 13:00-15:00'
+  }
+]);
+// 提醒时间
+const remindTimeoptions = ref([
+  {
+    value: 0,
+    label: '任务开始前10分钟'
+  },
+  {
+    value: 1,
+    label: '任务开始前15分钟'
+  },
+  {
+    value: 2,
+    label: '任务开始前30分钟'
+  }
+]);
+
+// 计划路线
+const routeIdsoptions = ref([
+  {
+    value: 0,
+    label: '常规巡更计划1'
+  },
+  {
+    value: 1,
+    label: '常规巡更计划2'
+  },
+  {
+    value: 2,
+    label: '常规巡更计划3'
+  }
+]);
+// 巡检计划id
+const editid = ref(null);
+function init() {
+  if (route.query.id) {
+    editid.value = route.query.id;
+  }
+}
+
+init();
+
+function routeback() {
+  router.back();
+}
+</script>
+
+<style scoped lang="scss">
+.EditBody {
+  margin-top: 20px;
+  padding: 30px;
+  background-color: white;
+  .bodybox {
+    width: 600px;
+    margin: 0 auto;
+    margin-top: 20px;
+  }
+  .week-items {
+    width: 90px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin: 10px 5px;
+    background-color: #ccc;
+    color: #000;
+    display: flex;
+    align-items: center;
+    .iconbox {
+      width: 30px;
+      height: 30px;
+      margin-left: 5px;
+      text-align: center;
+      line-height: 30px;
+    }
+    &.active {
+      color: rgba(26, 117, 255, 1);
+      background-color: rgba(26, 117, 255, 0.15);
+    }
+  }
+
+  .mapbox {
+    margin-top: 20px;
+    width: 100%;
+    height: 400px;
+    border: 1px solid #ccc;
+  }
+}
+</style>