站点管理

src/views/siteManage/addGroupCom.vue

@@ -51,28 +51,7 @@ export default defineComponent({
 
     }
 
-    const options = [
-      {
-        value: '选项1',
-        label: '站点一',
-      },
-      {
-        value: '选项2',
-        label: '站点二',
-      },
-      {
-        value: '选项3',
-        label: '站点三',
-      },
-      {
-        value: '选项4',
-        label: '站点四',
-      },
-      {
-        value: '选项5',
-        label: '站点五',
-      },
-    ]
+    
 
     // 关闭弹框
     const closeDialog = () => {
@@ -115,7 +94,6 @@ export default defineComponent({
     return {
       closeDialog,
       dialogVisible,
-      options,
       roleValid,
       formInfo,
       form,

src/views/siteManage/addSiteCom.vue

@@ -60,28 +60,7 @@ export default defineComponent({
 
     }
 
-    const options = [
-      {
-        value: '选项1',
-        label: '站点一',
-      },
-      {
-        value: '选项2',
-        label: '站点二',
-      },
-      {
-        value: '选项3',
-        label: '站点三',
-      },
-      {
-        value: '选项4',
-        label: '站点四',
-      },
-      {
-        value: '选项5',
-        label: '站点五',
-      },
-    ]
+    
 
     // 关闭弹框
     const closeDialog = () => {
@@ -124,7 +103,7 @@ export default defineComponent({
     return {
       closeDialog,
       dialogVisible,
-      options,
+
       roleValid,
       formInfo,
       form,

src/views/siteManage/basicInfo/index oranage.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="siteManage-main basic-info-page">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-row style="min-width: 1100px">
+        <el-col :span="8" :gutter="20">
+          <div class="grid-content bg-purple">
+            <el-form-item label="站点名称" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item label="站点类型" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="用户公司" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item
+              label="投运时间:"
+              prop="planStartDate"
+              style="margin-top: 0px"
+            >
+              <el-date-picker
+                v-model="ruleForm.planStartDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              ></el-date-picker>
+            </el-form-item>
+            <el-form-item label="服务截止:" prop="planEndDate">
+              <el-date-picker
+                v-model="ruleForm.planEndDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              ></el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="装机容量：" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="供电类型" prop="resource">
+              <el-radio-group v-model="ruleForm.resource">
+                <el-radio label="单路"></el-radio>
+                <el-radio label="双路"></el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="电压等级" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点地址" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="所属台区" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点坐标" prop="name">
+              <el-input v-model="ruleForm.name">
+                <i
+                  :default-slot="suffix"
+                  class="el-input__icon el-icon-location-outline"
+                ></i>
+              </el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <el-form-item label="监察：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择">
+              <el-option label="监察1" value="1"></el-option>
+              <el-option label="监察2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="折标准煤：" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item>
+
+          <el-form-item label="折标准煤：" prop="resource">
+            <el-radio-group v-model="ruleForm.resource">
+              <el-radio label="电力（等价）"></el-radio>
+              <el-radio label="电力（当量）"></el-radio>
+            </el-radio-group>
+            <div style="opacity: 0.45">0.000404吨标准煤/千瓦时</div>
+          </el-form-item>
+
+          <a class="goArchive">现场档案</a>
+
+          <div class="blockTitle mt-60 mb-20">动态属性</div>
+          <el-form-item label="故障动态：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="故障动态1" value="1"></el-option>
+              <el-option label="故障动态2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="实时负荷：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="实时负荷1" value="1"></el-option>
+              <el-option label="实时负荷2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="总用电量：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="总用电量1" value="1"></el-option>
+              <el-option label="总用电量2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="功率因数：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="选择1" value="1"></el-option>
+              <el-option label="选择2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <div class="grid-content bg-purple">
+            <div class="grid-content bg-purple-light">
+              <div class="blockTitle mb-20">站点照片</div>
+              <el-form-item label="选择文件" prop="delivery">
+                <el-upload
+                  action="#"
+                  list-type="picture-card"
+                  :auto-upload="false"
+                  :limit="3"
+                >
+                  <i class="el-icon-plus"></i>
+                  <div>
+                    <span class="el-upload-list__item-actions">
+                      <span
+                        class="el-upload-list__item-preview"
+                        @click="handlePictureCardPreview(file)"
+                      ></span>
+                      <span
+                        v-if="!disabled"
+                        class="el-upload-list__item-delete"
+                        @click="handleRemove(file)"
+                      >
+                        <i class="el-icon-delete"></i>
+                      </span>
+                    </span>
+                  </div>
+                </el-upload>
+                <el-dialog v-model="dialogVisible">
+                  <img width="100%" :src="dialogImageUrl" alt="" />
+                </el-dialog>
+              </el-form-item>
+
+              <el-form-item label="联系人" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item>
+              <el-form-item label="联系方式" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item>
+              <el-form-item label="联系人2" prop="spare_user_name">
+                <el-input v-model="ruleForm.spare_user_name"></el-input>
+              </el-form-item>
+              <el-form-item label="联系方式2" prop="spare_phone">
+                <el-input v-model="ruleForm.spare_phone"></el-input>
+              </el-form-item>
+            </div>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')">
+                保存
+              </el-button>
+              <el-button @click="resetForm('ruleForm')">取消</el-button>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BasicInfo',
+  data() {
+    return {
+      dialogImageUrl: '',
+      dialogVisible: false,
+      disabled: false,
+      ruleForm: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: '',
+        planStartTime: '',
+        planEndTime: '',
+      },
+      rules: {
+        planStartDate: [
+          { required: true, message: '请选择开始日期', trigger: 'change' },
+        ],
+        planEndDate: [
+          { required: true, message: '请输入结束日期', trigger: 'change' },
+        ],
+        name: [
+          { required: true, message: '请输入站点名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+        ],
+        spare_user_name: [
+          { required: true, message: '请输入联系人2', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+        ],
+        spare_phone: [
+          { required: true, message: '请输入联系方式2', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+        ],
+        region: [
+          { required: true, message: '请选择活动区域', trigger: 'change' },
+        ],
+        date1: [
+          {
+            type: 'date',
+            required: true,
+            message: '请选择日期',
+            trigger: 'change',
+          },
+        ],
+        date2: [
+          {
+            type: 'date',
+            required: true,
+            message: '请选择时间',
+            trigger: 'change',
+          },
+        ],
+        type: [
+          {
+            type: 'array',
+            required: true,
+            message: '请至少选择一个活动性质',
+            trigger: 'change',
+          },
+        ],
+        resource: [
+          { required: true, message: '请选择活动资源', trigger: 'change' },
+        ],
+        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
+      },
+    }
+  },
+  methods: {
+    handleRemove(file) {
+      console.log(file)
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    },
+  },
+}
+</script>
+<style scoped lang="scss">
+</style>

src/views/siteManage/basicInfo/index.vue

@@ -3,64 +3,63 @@
     <el-form
       :model="ruleForm"
       :rules="rules"
-      ref="ruleForm"
+      ref="formInfo"
       label-width="100px"
       class="demo-ruleForm"
     >
       <el-row style="min-width: 1100px">
         <el-col :span="8" :gutter="20">
           <div class="grid-content bg-purple">
-            <el-form-item label="站点名称" prop="name">
+            <el-form-item label="站点名称：" prop="name">
               <el-input v-model="ruleForm.name"></el-input>
             </el-form-item>
 
-            <el-form-item label="站点类型" prop="name">
+            <el-form-item label="站点类型：" prop="name">
               <el-input v-model="ruleForm.name"></el-input>
             </el-form-item>
-            <el-form-item label="用户公司" prop="name">
+            <el-form-item label="用户公司：" prop="name">
               <el-input v-model="ruleForm.name"></el-input>
             </el-form-item>
 
             <el-form-item
-              label="投运时间:"
+              label="投运时间："
               prop="planStartDate"
               style="margin-top: 0px"
             >
               <el-date-picker
                 v-model="ruleForm.planStartDate"
+                width="100%"
                 type="datetime"
                 placeholder="选择日期时间"
-              >
-              </el-date-picker>
+              ></el-date-picker>
             </el-form-item>
-            <el-form-item label="服务截止:" prop="planEndDate">
+            <el-form-item label="服务截止：" prop="planEndDate">
               <el-date-picker
                 v-model="ruleForm.planEndDate"
                 type="datetime"
                 placeholder="选择日期时间"
-              >
-              </el-date-picker>
+              ></el-date-picker>
             </el-form-item>
 
             <el-form-item label="装机容量：" prop="name">
               <el-input v-model="ruleForm.name"></el-input>
             </el-form-item>
-            <el-form-item label="供电类型" prop="resource">
+            <el-form-item label="供电类型：" prop="resource">
               <el-radio-group v-model="ruleForm.resource">
                 <el-radio label="单路"></el-radio>
                 <el-radio label="双路"></el-radio>
               </el-radio-group>
             </el-form-item>
-            <el-form-item label="电压等级" prop="name">
+            <el-form-item label="电压等级：" prop="name">
               <el-input v-model="ruleForm.name"></el-input>
             </el-form-item>
-            <el-form-item label="站点地址" prop="name">
+            <el-form-item label="站点地址：" prop="name">
               <el-input v-model="ruleForm.name"></el-input>
             </el-form-item>
-            <el-form-item label="所属台区" prop="name">
+            <el-form-item label="所属台区：" prop="name">
               <el-input v-model="ruleForm.name"></el-input>
             </el-form-item>
-            <el-form-item label="站点坐标" prop="name">
+            <el-form-item label="站点坐标：" prop="name">
               <el-input v-model="ruleForm.name">
                 <i
                   :default-slot="suffix"
@@ -77,16 +76,11 @@
               <el-option label="监察2" value="2"></el-option>
             </el-select>
           </el-form-item>
-
-          <!-- <el-form-item label="联系方式" prop="name">
-            <el-input v-model="ruleForm.name"></el-input>
-          </el-form-item> -->
           <el-form-item label="折标准煤：" prop="name">
             <el-input v-model="ruleForm.name"></el-input>
           </el-form-item>
-
-          <el-form-item label="折标准煤：" prop="resource">
-            <el-radio-group v-model="ruleForm.resource">
+          <el-form-item label="折标准煤：" prop="resource2">
+            <el-radio-group v-model="ruleForm.resource2">
               <el-radio label="电力（等价）"></el-radio>
               <el-radio label="电力（当量）"></el-radio>
             </el-radio-group>
@@ -127,30 +121,23 @@
         <el-col :span="8" :gutter="20">
           <div class="grid-content bg-purple">
             <div class="grid-content bg-purple-light">
+
+              <!-- 站点照片start -->
               <div class="blockTitle mb-20">站点照片</div>
-              <el-form-item label="选择文件" prop="delivery">
+              <el-form-item label="选择文件：" prop="delivery">
                 <el-upload
                   action="#"
                   list-type="picture-card"
                   :auto-upload="false"
                   :limit="3"
                 >
-                <!-- slot="default" -->
-                  <i  class="el-icon-plus"></i>
-                  <!-- :default-slot="{ file }" -->
-                  <div  >
-                    <!-- <img
-                      class="el-upload-list__item-thumbnail"
-                      :src="file.url"
-                      alt=""
-                    /> -->
+                  <i class="el-icon-plus"></i>
+                  <div>
                     <span class="el-upload-list__item-actions">
-                      <span
+                      <!-- <span
                         class="el-upload-list__item-preview"
                         @click="handlePictureCardPreview(file)"
-                      >
-                        <!-- <i class="el-icon-zoom-in"></i> -->
-                      </span>
+                      ></span> -->
                       <span
                         v-if="!disabled"
                         class="el-upload-list__item-delete"
@@ -165,26 +152,26 @@
                   <img width="100%" :src="dialogImageUrl" alt="" />
                 </el-dialog>
               </el-form-item>
+              <!-- 站点照片end -->
 
-              <!-- <div class="blockTitle mt-40 mb-20">添加更多属性</div> -->
-              <el-form-item label="联系人" prop="name">
+              <el-form-item label="联系人：" prop="name">
                 <el-input v-model="ruleForm.name"></el-input>
               </el-form-item>
-              <el-form-item label="联系方式" prop="name">
+              <el-form-item label="联系方式：" prop="name">
                 <el-input v-model="ruleForm.name"></el-input>
               </el-form-item>
-               <el-form-item label="联系人2" prop="spare_user_name">
+              <el-form-item label="联系人2：" prop="spare_user_name">
                 <el-input v-model="ruleForm.spare_user_name"></el-input>
               </el-form-item>
-              <el-form-item label="联系方式2" prop="spare_phone">
+              <el-form-item label="联系方式2：" prop="spare_phone">
                 <el-input v-model="ruleForm.spare_phone"></el-input>
               </el-form-item>
             </div>
             <el-form-item>
-              <el-button type="primary" @click="submitForm('ruleForm')"
-                >保存</el-button
-              >
-              <el-button @click="resetForm('ruleForm')">取消</el-button>
+              <el-button type="primary" @click="submitForm('formInfo')">
+                保存
+              </el-button>
+              <el-button @click="resetForm('formInfo')">取消</el-button>
             </el-form-item>
           </div>
         </el-col>
@@ -194,101 +181,129 @@
 </template>
 
 <script>
-export default {
-  name: "BasicInfo",
-  data() {
-    return {
-      dialogImageUrl: "",
-      dialogVisible: false,
-      disabled: false,
-      ruleForm: {
-        name: "",
-        region: "",
-        date1: "",
-        date2: "",
-        delivery: false,
-        type: [],
-        resource: "",
-        desc: "",
-        planStartTime: "",
-        planEndTime: "",
-      },
-      rules: {
-        planStartDate: [
-          { required: true, message: "请选择开始日期", trigger: "change" },
-        ],
-        planEndDate: [
-          { required: true, message: "请输入结束日期", trigger: "change" },
-        ],
-        name: [
-          { required: true, message: "请输入站点名称", trigger: "blur" },
-          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
-        ],
-         spare_user_name: [
-          { required: true, message: "请输入联系人2", trigger: "blur" },
-          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
-        ],
-        spare_phone: [
-          { required: true, message: "请输入联系方式2", trigger: "blur" },
-          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
-        ],
-        region: [
-          { required: true, message: "请选择活动区域", trigger: "change" },
-        ],
-        date1: [
-          {
-            type: "date",
-            required: true,
-            message: "请选择日期",
-            trigger: "change",
-          },
-        ],
-        date2: [
-          {
-            type: "date",
-            required: true,
-            message: "请选择时间",
-            trigger: "change",
-          },
-        ],
-        type: [
-          {
-            type: "array",
-            required: true,
-            message: "请至少选择一个活动性质",
-            trigger: "change",
-          },
-        ],
-        resource: [
-          { required: true, message: "请选择活动资源", trigger: "change" },
-        ],
-        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
-      },
-    };
-  },
-  methods: {
-    handleRemove(file) {
-      console.log(file);
-    },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
-    },
-    submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
+import { defineComponent, ref, } from 'vue'
+
+export default defineComponent({
+  name: 'BasicInfo',
+  setup() {
+    const formInfo = ref(null)
+    const dialogImageUrl = ref('')
+    const dialogVisible = ref(false)
+    const disabled = ref(false)
+    const ruleForm = ref({
+      name: '',
+      region: '',
+      date1: '',
+      date2: '',
+      delivery: false,
+      type: [],
+      resource: '单路',
+      resource2: '电力（等价）',
+      desc: '',
+      planStartTime: '',
+      planEndTime: '',
+    })
+    const rules = ref({
+      planStartDate: [
+        { required: true, message: '请选择开始日期', trigger: 'change' },
+      ],
+      planEndDate: [
+        { required: true, message: '请输入结束日期', trigger: 'change' },
+      ],
+      name: [
+        { required: true, message: '请输入站点名称', trigger: 'blur' },
+        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+      ],
+      spare_user_name: [
+        { required: true, message: '请输入联系人2', trigger: 'blur' },
+        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+      ],
+      spare_phone: [
+        { required: true, message: '请输入联系方式2', trigger: 'blur' },
+        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+      ],
+      region: [
+        { required: true, message: '请选择活动区域', trigger: 'change' },
+      ],
+      date1: [
+        {
+          type: 'date',
+          required: true,
+          message: '请选择日期',
+          trigger: 'change',
+        },
+      ],
+      date2: [
+        {
+          type: 'date',
+          required: true,
+          message: '请选择时间',
+          trigger: 'change',
+        },
+      ],
+      type: [
+        {
+          type: 'array',
+          required: true,
+          message: '请至少选择一个活动性质',
+          trigger: 'change',
+        },
+      ],
+      resource: [
+        { required: true, message: '请选择活动资源', trigger: 'change' },
+      ],
+      desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
+    })
+    function handleRemove(file) {
+      console.log(file)
+    }
+    function handlePictureCardPreview(file) {
+      dialogImageUrl.value = file.url
+      dialogVisible.value = true
+    }
+    function submitForm() {
+      formInfo.value.validate((valid) => {
         if (valid) {
-          alert("submit!");
+          // 走保存请求
+          this.$message({
+            message: '操作成功！',
+            type: 'success',
+          })
+          this.closeDialog(1)
         } else {
-          console.log("error submit!!");
-          return false;
+          console.log('error submit!!')
+          return false
         }
-      });
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields();
-    },
+      })
+    }
+    
+    function resetForm() {
+       formInfo.value.resetFields()
+    }
+
+    return {
+      formInfo,
+      dialogImageUrl,
+      dialogVisible,
+      disabled,
+      ruleForm,
+      rules,
+      handleRemove,
+      handlePictureCardPreview,
+      submitForm,
+      resetForm
+      
+    }
   },
-};
+})
 </script>
-<style scoped lang="scss">
+
+<style lang="scss">
+.basic-info-page{
+  .el-date-editor.el-input, .el-date-editor.el-input__inner{
+  width:100%!important
+}
+
+}
+
 </style>

src/views/siteManage/index.vue

@@ -116,7 +116,7 @@
 
 <script>
 
-import { defineComponent, ref,reactive,watch} from 'vue'
+import { defineComponent, ref,reactive,watch,onMounted} from 'vue'
 
 import basicInfo from './basicInfo'
 import WatchDog from './watchDog'
@@ -128,6 +128,9 @@ import groupInfoCom from './groupInfoCom'
 import addGroupCom from './addGroupCom'
 import addSiteCom from './addSiteCom'
 
+import * as api from '@/api/siteManage/index'
+import { ElMessage } from 'element-plus'
+
 export default defineComponent({
   components: {
     basicInfo,
@@ -143,7 +146,7 @@ export default defineComponent({
     const showDialog = ref(false)
     const showDialog2 = ref(false)
     const dialogTitle = ref('')
-    const treeLevel = ref(0)
+    const treeLevel = ref(3)
     const activeName = ref('first')
     const filterText = ref('')
     const data = ref([
@@ -292,6 +295,24 @@ export default defineComponent({
       this.dataSource = [...this.dataSource]
     }
 
+
+     //电力监测设备列表
+    function siteTreeList() {
+      api.siteTreeList({}).then((requset) => {
+        if (requset.status === 'SUCCESS') {
+          console.log(requset.data)
+          // tableData.value = requset.data
+          // store.state.siteList = tableData
+        } else {
+          ElMessage.error(requset.msg)
+        }
+      })
+    }
+
+    onMounted(() => {
+      siteTreeList()
+    })
+
     return {
       showDialog,
       showDialog2,
@@ -318,9 +339,6 @@ export default defineComponent({
 })
 </script>
 
-
-
-
 <style scoped lang="scss">
 .app-container.page-nesting {
   padding: 0;