站点

.history/src/views/siteManage/basicInfo/index_20210926181832.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="siteManage-main basic-info-page" style="padding:20px 0">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-row>
+        <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="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
+                  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="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="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 slot="default" class="el-icon-plus"></i>
+                  <div slot="file" slot-scope="{ file }">
+                    <img
+                      class="el-upload-list__item-thumbnail"
+                      :src="file.url"
+                      alt=""
+                    />
+                    <span class="el-upload-list__item-actions">
+                      <span
+                        class="el-upload-list__item-preview"
+                        @click="handlePictureCardPreview(file)"
+                      >
+                        <i class="el-icon-zoom-in"></i>
+                      </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 :visible.sync="dialogVisible">
+                  <img width="100%" :src="dialogImageUrl" alt="" />
+                </el-dialog>
+              </el-form-item>
+
+              <div class="blockTitle mt-40 mb-20">添加更多属性</div>
+              <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>
+            </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" },
+        ],
+        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>

.history/src/views/siteManage/watchDog/dialogComponent_20210926175407.vue

@@ -0,0 +1,202 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+      class="dialog-component"
+      :visible.sync="showDialog"
+      width="640px"
+      @close="closeDialog(0)"
+    >
+      <el-form
+        ref="formInfo"
+        :model="formInfo"
+        class="demo-form-inline"
+        label-width="100px"
+        :rules="rules"
+      >
+        <el-form-item label="台区名称：" prop="stationName">
+          <el-input v-model="formInfo.stationName"></el-input>
+        </el-form-item>
+        <el-form-item label="台区编号：" prop="stationCode">
+          <el-input v-model="formInfo.stationCode"></el-input>
+        </el-form-item>
+        <el-form-item label="台区地址：" prop="stationAddress">
+          <el-input v-model="formInfo.stationAddress"></el-input>
+        </el-form-item>
+        <el-form-item label="站点列表:" prop="siteList">
+          <el-select
+            v-model="formInfo.siteList"
+            multiple
+            filterable
+            collapse-tags
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="已勾选：" prop="pointNum">
+          <el-input v-model="formInfo.pointNum" style="width: 200px"></el-input>
+          个站点
+        </el-form-item>
+        <el-form-item label="共挂载：" prop="deviceNum">
+          <el-input v-model="formInfo.deviceNum" style="width: 200px"></el-input>
+          个设备
+        </el-form-item>
+        <br />
+        <br />
+        <br />
+        <div style="text-align: right">
+          <el-button @click="closeDialog(0)">取消</el-button>
+          <el-button type="primary" @click="submitForm('formInfo')"
+            >保存</el-button
+          >
+        </div>
+      </el-form>
+    </el-dialog>
+  </transition>
+</template>
+
+<script>
+
+
+
+
+export default {
+  name: "DialogComponent",
+  props: {
+    dialogTitle: {
+      type: String,
+      default: "新增",
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      showDialog: false,
+      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      options: [
+        {
+          value: "选项1",
+          label: "站点一",
+        },
+        {
+          value: "选项2",
+          label: "站点二",
+        },
+        {
+          value: "选项3",
+          label: "站点三",
+        },
+        {
+          value: "选项4",
+          label: "站点四",
+        },
+        {
+          value: "选项5",
+          label: "站点五",
+        },
+      ],
+
+      rules: {
+        stationName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入台区名称", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        stationCode: [
+          { required: true, message: "请输入台区编号", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        stationAddress: [
+          { required: true, message: "请输入台区地址", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        siteList: [
+          { required: true, message: '请选择站点列表', trigger: 'change'}
+        
+        ],
+        pointNum: [
+          { required: true, message: "请输入已选站点个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+        deviceNum: [
+          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    roleValid(rule, value, callback) {
+      if (value.length === 0) {
+        callback(new Error("角色不能为空"));
+      } else {
+        callback();
+      }
+    },
+
+    // onSelectedDrug(event) {
+    //   this.siteList = event;
+    //   console.log(this.siteList);
+    // },
+    // 保存操作
+    submitForm(formName) {
+      const that = this;
+      const params = Object.assign(that.formInfo, {});
+      that.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          that.$message({
+            message: "操作成功！",
+            type: "success",
+          });
+          that.closeDialog(1);
+        } else {
+          return false;
+        }
+      });
+    },
+    // 关闭弹框
+    closeDialog(flag) {
+      this.$refs["formInfo"].resetFields();
+      this.showDialog = false;
+      this.$emit("closeDialog", flag);
+    },
+  },
+};
+</script>
+ 
+<style scoped lang="scss">
+.el-input,
+.el-select {
+  width: 240px;
+}
+</style>

.history/src/views/siteManage/watchDog/dialogComponent_20210926181557.vue

@@ -0,0 +1,202 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+      class="dialog-component"
+      :visible.sync="showDialog"
+      width="640px"
+      @close="closeDialog(0)"
+    >
+      <el-form
+        ref="formInfo"
+        :model="formInfo"
+        class="demo-form-inline"
+        label-width="100px"
+        :rules="rules"
+      >
+        <el-form-item label="台区名称：" prop="stationName">
+          <el-input v-model="formInfo.stationName"></el-input>
+        </el-form-item>
+        <el-form-item label="台区编号：" prop="stationCode">
+          <el-input v-model="formInfo.stationCode"></el-input>
+        </el-form-item>
+        <el-form-item label="台区地址：" prop="stationAddress">
+          <el-input v-model="formInfo.stationAddress"></el-input>
+        </el-form-item>
+        <el-form-item label="站点列表:" prop="siteList">
+          <el-select
+            v-model="formInfo.siteList"
+            multiple
+            filterable
+            collapse-tags
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="已勾选：" prop="pointNum">
+          <el-input v-model="formInfo.pointNum" style="width: 200px"></el-input>
+          个站点
+        </el-form-item>
+        <el-form-item label="共挂载：" prop="deviceNum">
+          <el-input v-model="formInfo.deviceNum" style="width: 200px"></el-input>
+          个设备
+        </el-form-item>
+        <br />
+        <br />
+        <br />
+        <div style="text-align: right">
+          <el-button @click="closeDialog(0)">取消</el-button>
+          <el-button type="primary" @click="submitForm('formInfo')"
+            >保存</el-button
+          >
+        </div>
+      </el-form>
+    </el-dialog>
+  </transition>
+</template>
+
+<script>
+
+
+
+
+export default {
+  name: "DialogComponent",
+  props: {
+    dialogTitle: {
+      type: String,
+      default: "新增",
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      showDialog: false,
+      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      options: [
+        {
+          value: "选项1",
+          label: "站点一",
+        },
+        {
+          value: "选项2",
+          label: "站点二",
+        },
+        {
+          value: "选项3",
+          label: "站点三",
+        },
+        {
+          value: "选项4",
+          label: "站点四",
+        },
+        {
+          value: "选项5",
+          label: "站点五",
+        },
+      ],
+
+      rules: {
+        stationName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入台区名称", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        stationCode: [
+          { required: true, message: "请输入台区编号", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        stationAddress: [
+          { required: true, message: "请输入台区地址", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        siteList: [
+          { required: true, message: '请选择站点列表', trigger: 'change'}
+        
+        ],
+        pointNum: [
+          { required: true, message: "请输入已选站点个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+        deviceNum: [
+          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    roleValid(rule, value, callback) {
+      if (value.length === 0) {
+        callback(new Error("角色不能为空"));
+      } else {
+        callback();
+      }
+    },
+
+    // onSelectedDrug(event) {
+    //   this.siteList = event;
+    //   console.log(this.siteList);
+    // },
+    // 保存操作
+    submitForm(formName) {
+      const that = this;
+      const params = Object.assign(that.formInfo, {});
+      that.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          that.$message({
+            message: "操作成功！",
+            type: "success",
+          });
+          that.closeDialog(1);
+        } else {
+          return false;
+        }
+      });
+    },
+    // 关闭弹框
+    closeDialog(flag) {
+      this.$refs["formInfo"].resetFields();
+      this.showDialog = false;
+      this.$emit("closeDialog", flag);
+    },
+  },
+};
+</script>
+ 
+<style scoped lang="scss">
+.el-input,
+.el-select {
+  width: 240px;
+}
+</style>

.history/src/views/siteManage/watchDog/index_20210926175401.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="siteManage-main">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <a class="">【测试站点1】站点的所有监控设备</a>
+      <!-- <el-button icon="el-icon-plus" type="success" @click="addItem()">新增</el-button > -->
+      <div>
+        <el-button type="primary">导入</el-button>
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+      :cell-style="cellStyle"
+    >
+      <el-table-column fixed prop="watchStatus" label="状态" width="50" align=>
+         <template slot-scope="scope">
+          <el-avatar class="status"></el-avatar>
+        </template>
+      </el-table-column>
+      <el-table-column prop="watchName" label="名称" width="">
+      </el-table-column>
+      <el-table-column prop="watchCode" label="编号" width="">
+      </el-table-column>
+      <el-table-column prop="ratedVoltage" label="额定电压" width="">
+      </el-table-column>
+      <el-table-column prop="ratedCurrent" label="额定电流" width="">
+      </el-table-column>
+      <el-table-column prop="fzlMx" label="电流负载率门限" width="">
+      </el-table-column>
+      <el-table-column prop="powerAnalysis" label="电能质量分析" width="">
+      </el-table-column>
+      <el-table-column prop="watchAddress" label="表计地址" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.native.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+
+      <el-table-column fixed="right" label="变量" width="180">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.native.prevent="editRow(scope.row)"
+            >变量列表</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+           
+            >克隆</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "WatchDog",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      showDialog: false,
+
+      input: "请输入状态",
+      tableData: [
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+       {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+       {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+      ],
+    };
+  },
+  methods: {
+    // 表头样式设置
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        watchName: "",
+        watchCode: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+    
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/siteManage/watchDog/index_20210926182406.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="siteManage-main">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <a class="">【测试站点1】站点的所有监控设备</a>
+      <!-- <el-button icon="el-icon-plus" type="success" @click="addItem()">新增</el-button > -->
+      <div>
+        <el-button type="primary">导入</el-button>
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+     
+    >
+      <el-table-column fixed prop="watchStatus" label="状态" width="50" align=>
+         <template slot-scope="scope">
+          <el-avatar class="status"></el-avatar>
+        </template>
+      </el-table-column>
+      <el-table-column prop="watchName" label="名称" width="">
+      </el-table-column>
+      <el-table-column prop="watchCode" label="编号" width="">
+      </el-table-column>
+      <el-table-column prop="ratedVoltage" label="额定电压" width="">
+      </el-table-column>
+      <el-table-column prop="ratedCurrent" label="额定电流" width="">
+      </el-table-column>
+      <el-table-column prop="fzlMx" label="电流负载率门限" width="">
+      </el-table-column>
+      <el-table-column prop="powerAnalysis" label="电能质量分析" width="">
+      </el-table-column>
+      <el-table-column prop="watchAddress" label="表计地址" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.native.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+
+      <el-table-column fixed="right" label="变量" width="180">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.native.prevent="editRow(scope.row)"
+            >变量列表</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+           
+            >克隆</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "WatchDog",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      showDialog: false,
+
+      input: "请输入状态",
+      tableData: [
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+       {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+       {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+      ],
+    };
+  },
+  methods: {
+    // 表头样式设置
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        watchName: "",
+        watchCode: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+    
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/siteManage/watchDog/index_20210926182424.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="siteManage-main">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <a class="">【测试站点1】站点的所有监控设备</a>
+      <!-- <el-button icon="el-icon-plus" type="success" @click="addItem()">新增</el-button > -->
+      <div>
+        <el-button type="primary">导入</el-button>
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+     
+    >
+      <el-table-column fixed prop="watchStatus" label="状态" width="50" align="center">
+         <template slot-scope="scope">
+          <el-avatar class="status"></el-avatar>
+        </template>
+      </el-table-column>
+      <el-table-column prop="watchName" label="名称" width="">
+      </el-table-column>
+      <el-table-column prop="watchCode" label="编号" width="">
+      </el-table-column>
+      <el-table-column prop="ratedVoltage" label="额定电压" width="">
+      </el-table-column>
+      <el-table-column prop="ratedCurrent" label="额定电流" width="">
+      </el-table-column>
+      <el-table-column prop="fzlMx" label="电流负载率门限" width="">
+      </el-table-column>
+      <el-table-column prop="powerAnalysis" label="电能质量分析" width="">
+      </el-table-column>
+      <el-table-column prop="watchAddress" label="表计地址" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.native.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+
+      <el-table-column fixed="right" label="变量" width="180">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.native.prevent="editRow(scope.row)"
+            >变量列表</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+           
+            >克隆</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "WatchDog",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      showDialog: false,
+
+      input: "请输入状态",
+      tableData: [
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+       {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+       {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+      ],
+    };
+  },
+  methods: {
+    // 表头样式设置
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        watchName: "",
+        watchCode: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+    
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/layout/index.vue

@@ -57,6 +57,7 @@ export default {
   .app-wrapper {
     @include clearfix;
     position: relative;
+    
     height: 100%;
     width: 100%;
     &.mobile.openSidebar{

src/router/index.js

@@ -66,7 +66,7 @@ export const constantRoutes = [{
             path: 'index',
             name: 'siteManage',
             component: () =>
-                import ('@/views/siteManage/basicInfo/index'),
+                import ('@/views/siteManage/index'),
             meta: { title: '站点管理', icon: 'siteManage' }
         }]
     },
@@ -126,40 +126,31 @@ export const constantRoutes = [{
         path: '/stationManage',
         component: Layout,
         redirect: '/stationManage/index',
+        name: 'stationManage',
+        meta: {
+            title: '台区管理',
+            icon: 'stationManage'
+        },
         children: [{
-                path: 'index',
-                name: 'StationManage',
-                component: () =>
-                    import ('@/views/stationManage/index'),
-                meta: { title: '台区管理', icon: 'stationManage', guidePath: true, jumpPath: '/stationManage/index' }
-            },
-            {
                 path: 'siteList',
-                name: 'StationManage',
                 component: () =>
                     import ('@/views/stationManage/siteList'),
-                meta: { title: '台区管理', icon: 'stationManage', guidePath: true, jumpPath: '/stationManage/siteList' },
+                name: 'EditArticle',
+                meta: { title: '站点列表', noCache: true, activeMenu: '/stationManage/index' },
                 hidden: true
+            },
+            {
+                path: 'index',
+                component: () =>
+                    import ('@/views/stationManage/index'),
+                name: 'Articleindex',
+                meta: { title: '所有台区', icon: 'stationManage' }
             }
         ]
     },
 
 
 
-    // {
-    //     path: '/stationManage',
-    //     component: Layout,
-    //     children: [{
-    //         path: 'siteList',
-    //         name: 'StationManage',
-    //         component: () =>
-    //             import ('@/views/stationManage/siteList'),
-    //         meta: { title: '台区管理', icon: 'stationManage', guidePath: true, jumpPath: '/stationManage/siteList' }
-    //     }],
-    //     hidden: true
-    // },
-
-
 
     {
         path: '/deviceManage',

src/styles/index.scss

@@ -63,6 +63,22 @@ div:focus {
     margin-bottom: 20px
 }
 
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
 .font-16 {
     font-size: 16px
 }
@@ -81,7 +97,8 @@ div:focus {
 
 .app-container {
     padding: 20px;
-    width: 100%;
+    // width: 100%;
+    width: calc(100% - 40px);
     height: 100%;
     margin: 20px;
     background: #fff;
@@ -91,6 +108,12 @@ div:focus {
 .filter-container {
     width: 100%;
     height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
     .el-button+.el-button {
         margin-left: 30px!important;
     }
@@ -106,7 +129,7 @@ div:focus {
 }
 
 .el-button {
-    padding: 10px 12px
+    padding: 10px 12px;
 }
 
 .el-table td,
@@ -143,4 +166,73 @@ div:focus {
     width: 14px;
     height: 14px;
     background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+    .el-form-item.basic-info-page {
+        margin-left: 0px
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    // 图片上传样式 start
+    .el-upload--picture-card {
+        width: 90px;
+        height: 90px;
+    }
+    .el-upload {
+        width: 90px;
+        height: 90px;
+        line-height: 100px;
+    }
+    .el-upload-list--picture-card .el-upload-list__item {
+        width: 92px;
+        height: 92px;
+        line-height: 92px;
+        text-align: center
+    }
+    .el-upload-list--picture-card .el-upload-list__item-thumbnail {
+        width: 90px;
+        height: 90px;
+        line-height: 90px;
+    }
+    .avatar {
+        width: 90px;
+        height: 90px;
+    }
+    margin-right: 24px
 }

src/views/siteManage/basicInfo/dialogComponent.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>搜索</div>
+</template>
+<script>
+export default {
+  name: "DialogComponent",
+};
+</script>

src/views/siteManage/basicInfo/index.vue

@@ -1,171 +1,276 @@
 <template>
-  <div class="app-container page-nesting">
-    <!-- 树形组件start -->
-    <div class="grid-content treeDom">
-      <div style="text-align: center" class="mb-20">
-        <el-button type="primary">添加分组</el-button>
-        <el-button type="primary">添加站点</el-button>
-      </div>
+  <div class="siteManage-main basic-info-page" style="padding:20px 0">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-row>
+        <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="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
 
-      <el-input
-        placeholder="输入关键字进行过滤"
-        v-model="filterText"
-        class="mb-20 searchInput"
-      >
-        <i
-          class="el-icon-search el-input__icon"
-          slot="suffix"
-          
-        >
-        </i>
-      </el-input>
+            <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
+                  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="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="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>
 
-      <el-tree
-        class="filter-tree"
-        :data="data"
-        node-key="id"
-        :props="defaultProps"
-        :expand-on-click-node="false"
-        :render-content="renderContent"
-        default-expand-all
-        :filter-node-method="filterNode"
-        ref="tree"
-      >
-      </el-tree>
-    </div>
-    <!-- 树形组件end -->
+          <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>
 
-    <!-- 站点主题start -->
-    <div class="grid-content nestingDom" style="width: calc(100% -300px)">
-      nestingDom
-    </div>
-    <!-- 站点主题end -->
+          <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 slot="default" class="el-icon-plus"></i>
+                  <div slot="file" slot-scope="{ file }">
+                    <img
+                      class="el-upload-list__item-thumbnail"
+                      :src="file.url"
+                      alt=""
+                    />
+                    <span class="el-upload-list__item-actions">
+                      <span
+                        class="el-upload-list__item-preview"
+                        @click="handlePictureCardPreview(file)"
+                      >
+                        <i class="el-icon-zoom-in"></i>
+                      </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 :visible.sync="dialogVisible">
+                  <img width="100%" :src="dialogImageUrl" alt="" />
+                </el-dialog>
+              </el-form-item>
+
+              <div class="blockTitle mt-40 mb-20">添加更多属性</div>
+              <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>
+            </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 {
-      filterText: "",
-      data: [
-        {
-          label: "一级 1",
-          children: [
-            {
-              label: "二级 1-1",
-            },
-            {
-              label: "二级 1-2",
-            },
-            {
-              label: "二级 1-3",
-            },
-            {
-              label: "二级 1-4",
-            },
-          ],
-        },
-        {
-          label: "一级 2",
-          children: [
-            {
-              label: "二级 2-1",
-            },
-            {
-              label: "二级 2-2",
-            },
-            {
-              label: "二级 2-3",
-            },
-            {
-              label: "二级 2-4",
-            },
-          ],
-        },
-      ],
-      defaultProps: {
-        children: "children",
-        label: "label",
+      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" },
+        ],
+        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" }],
       },
     };
   },
-
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    },
-  },
   methods: {
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-
-    handleNodeClick(data) {
-      console.log(data);
+    handleRemove(file) {
+      console.log(file);
     },
-    append(data) {
-      const newChild = { id: id++, label: "testtest", children: [] };
-      if (!data.children) {
-        this.$set(data, "children", []);
-      }
-      data.children.push(newChild);
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
     },
-
-    remove(node, data) {
-      const parent = node.parent;
-      const children = parent.data.children || parent.data;
-      const index = children.findIndex((d) => d.id === data.id);
-      children.splice(index, 1);
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
     },
-
-    renderContent(h, { node, data, store }) {
-      return (
-        <span class="custom-tree-node">
-          <span>{node.label}</span>
-          <span>
-            <el-button
-              size="mini"
-              type="text"
-              on-click={() => this.remove(node, data)}
-            >
-              Delete
-            </el-button>
-          </span>
-        </span>
-      );
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
     },
   },
 };
 </script>
 <style scoped lang="scss">
-.app-container.page-nesting {
-  padding: 0;
-  background: rgba(0, 0, 0, 0);
-}
-.grid-content {
-  background: #fff;
-  min-height: calc(100vh - 140px);
-}
- .el-input__inner{
-    border-radius:20px!important
-  }
-.treeDom {
-  width: 270px;
-  position: absolute;
-  left: 0;
-  margin-left: 20px;
-  padding: 20px;
- 
-  .el-icon-search{
-    color:#409EFF
-  }
-  .el-button {
-    width: 100px;
-  }
-}
-.nestingDom {
-  margin-left: 290px;
-}
 </style>

src/views/siteManage/basicInfo/menu1-2/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2" type="success">
-      <router-view />
-    </el-alert>
-  </div>
-</template>

src/views/siteManage/basicInfo/menu1-2/menu1-2-1/index.vue

@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-1" type="warning" />
-  </div>
-</template>

src/views/siteManage/basicInfo/menu1-2/menu1-2-2/index.vue

@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-2" type="warning" />
-  </div>
-</template>

src/views/siteManage/basicInfo/menu1-3/index.vue

@@ -1,5 +0,0 @@
-<template functional>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-3" type="success" />
-  </div>
-</template>

src/views/siteManage/basicInfo/tabSelect.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="tabSelect">
+    <div class="active">
+       
+
+    </div>
+    <div>监控设备</div>
+    <div>变量列表</div>
+    <div>费率配置</div>
+    <div>摄像头</div>
+    <div>电能质量评分配置</div>
+  </div>
+</template>
+<script>
+export default {
+  name: "TabSelect",
+};
+</script>
+<style scoped lang="scss">
+
+</style>

src/views/siteManage/index.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="app-container page-nesting">
+    <!-- 树形组件start -->
+    <div class="grid-content treeDom">
+      <div style="text-align: center" class="mb-20">
+        <el-button type="primary">添加分组</el-button>
+        <el-button type="primary">添加站点</el-button>
+      </div>
+      <el-input
+        placeholder="输入关键字进行过滤"
+        v-model="filterText"
+        class="mb-20 searchInput"
+      >
+        <i class="el-icon-search el-input__icon" slot="suffix"> </i>
+      </el-input>
+
+      <el-tree
+        class="filter-tree"
+        :data="data"
+        node-key="id"
+        :props="defaultProps"
+        :expand-on-click-node="false"
+        :render-content="renderContent"
+        default-expand-all
+        :filter-node-method="filterNode"
+        ref="tree"
+      >
+      </el-tree>
+    </div>
+    <!-- 树形组件end -->
+
+    <!-- 站点主题start -->
+    <div class="grid-content nestingDom" style="width: calc(100% -300px)">
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane label="基本信息" name="first">
+          <basic-info class="basicInfo"></basic-info>
+        </el-tab-pane>
+        <el-tab-pane label="监控设备" name="second">
+            <watch-dog></watch-dog>
+        </el-tab-pane>
+        <el-tab-pane label="变量列表" name="third">变量列表</el-tab-pane>
+        <!-- <el-tab-pane label="费率配置" name="fourth">费率配置</el-tab-pane> -->
+        <el-tab-pane label="摄像头" name="five">摄像头</el-tab-pane>
+        <el-tab-pane label="电能质量评分配置" name="six"
+          >电能质量评分配置</el-tab-pane
+        >
+      </el-tabs>
+
+      <!-- <div class="tabSelect">
+        <div class="active">基本信息</div>
+        <div>监控设备</div>
+        <div>变量列表</div>
+        <div>费率配置</div>
+        <div>摄像头</div>
+        <div>电能质量评分配置</div>
+      </div> -->
+    </div>
+    <!-- 站点主题end -->
+  </div>
+</template>
+
+<script>
+import basicInfo from "./basicInfo";
+import WatchDog from "./watchDog";
+
+export default {
+  components: { basicInfo,WatchDog},
+  data() {
+    return {
+      activeName: "second",
+      filterText: "",
+      data: [
+        {
+          label: "所有站点",
+          children: [
+            {
+              label: "分组一",
+              children: [
+                {
+                  label: "站点 1-1",
+                },
+                {
+                  label: "站点 1-2",
+                },
+                {
+                  label: "站点 1-3",
+                },
+                {
+                  label: "站点 1-4",
+                },
+              ],
+            },
+            {
+              label: "分组二",
+              children: [
+                {
+                  label: "站点 2-1",
+                },
+                {
+                  label: "站点 2-2",
+                },
+                {
+                  label: "站点 2-3",
+                },
+                {
+                  label: "站点 2-4",
+                },
+              ],
+            },
+            {
+              label: "其他分组",
+              children: [
+                {
+                  label: "其他 3-1",
+                },
+                {
+                  label: "其他 3-2",
+                },
+                {
+                  label: "其他 3-3",
+                },
+                {
+                  label: "其他 3-4",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+    };
+  },
+
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+
+    handleNodeClick(data) {
+      console.log(data);
+    },
+    append(data) {
+      const newChild = { id: id++, label: "testtest", children: [] };
+      if (!data.children) {
+        this.$set(data, "children", []);
+      }
+      data.children.push(newChild);
+    },
+
+    remove(node, data) {
+      const parent = node.parent;
+      const children = parent.data.children || parent.data;
+      const index = children.findIndex((d) => d.id === data.id);
+      children.splice(index, 1);
+    },
+
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span>{node.label}</span>
+          <span>
+            <el-button
+              size="mini"
+              type="text"
+              on-click={() => this.remove(node, data)}
+            >
+              <i class="el-icon-delete"></i>
+            </el-button>
+          </span>
+        </span>
+      );
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.app-container.page-nesting {
+  padding: 0;
+  background: rgba(0, 0, 0, 0);
+}
+.grid-content {
+  background: #fff;
+  min-height: calc(100vh - 140px);
+}
+.el-input__inner {
+  border-radius: 20px !important;
+}
+.treeDom {
+  width: 270px;
+  position: absolute;
+  left: 0;
+  margin-left: 20px;
+  padding: 20px;
+
+  .el-icon-search {
+    color: #409eff;
+  }
+  .el-button {
+    width: 100px;
+  }
+}
+.nestingDom {
+  margin-left: 290px;
+}
+
+</style>
+<style lang="scss">
+// tab重置样式
+.el-tabs--card>.el-tabs__header .el-tabs__item{
+    line-height: 50px;
+    height:50px;
+    font-size:16px
+}
+.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
+    border-bottom: 2px solid #409EFF;
+    
+}
+.el-tabs__header{
+    margin-bottom:0
+}
+.el-tabs--card>.el-tabs__header .el-tabs__item,.el-tabs--card>.el-tabs__header .el-tabs__nav{
+    border:none
+}
+
+</style>

src/views/siteManage/watchDog/dialogComponent.vue

@@ -0,0 +1,202 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+      class="dialog-component"
+      :visible.sync="showDialog"
+      width="640px"
+      @close="closeDialog(0)"
+    >
+      <el-form
+        ref="formInfo"
+        :model="formInfo"
+        class="demo-form-inline"
+        label-width="100px"
+        :rules="rules"
+      >
+        <el-form-item label="台区名称：" prop="stationName">
+          <el-input v-model="formInfo.stationName"></el-input>
+        </el-form-item>
+        <el-form-item label="台区编号：" prop="stationCode">
+          <el-input v-model="formInfo.stationCode"></el-input>
+        </el-form-item>
+        <el-form-item label="台区地址：" prop="stationAddress">
+          <el-input v-model="formInfo.stationAddress"></el-input>
+        </el-form-item>
+        <el-form-item label="站点列表:" prop="siteList">
+          <el-select
+            v-model="formInfo.siteList"
+            multiple
+            filterable
+            collapse-tags
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="已勾选：" prop="pointNum">
+          <el-input v-model="formInfo.pointNum" style="width: 200px"></el-input>
+          个站点
+        </el-form-item>
+        <el-form-item label="共挂载：" prop="deviceNum">
+          <el-input v-model="formInfo.deviceNum" style="width: 200px"></el-input>
+          个设备
+        </el-form-item>
+        <br />
+        <br />
+        <br />
+        <div style="text-align: right">
+          <el-button @click="closeDialog(0)">取消</el-button>
+          <el-button type="primary" @click="submitForm('formInfo')"
+            >保存</el-button
+          >
+        </div>
+      </el-form>
+    </el-dialog>
+  </transition>
+</template>
+
+<script>
+
+
+
+
+export default {
+  name: "DialogComponent",
+  props: {
+    dialogTitle: {
+      type: String,
+      default: "新增",
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      showDialog: false,
+      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      options: [
+        {
+          value: "选项1",
+          label: "站点一",
+        },
+        {
+          value: "选项2",
+          label: "站点二",
+        },
+        {
+          value: "选项3",
+          label: "站点三",
+        },
+        {
+          value: "选项4",
+          label: "站点四",
+        },
+        {
+          value: "选项5",
+          label: "站点五",
+        },
+      ],
+
+      rules: {
+        stationName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入台区名称", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        stationCode: [
+          { required: true, message: "请输入台区编号", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        stationAddress: [
+          { required: true, message: "请输入台区地址", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        siteList: [
+          { required: true, message: '请选择站点列表', trigger: 'change'}
+        
+        ],
+        pointNum: [
+          { required: true, message: "请输入已选站点个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+        deviceNum: [
+          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    roleValid(rule, value, callback) {
+      if (value.length === 0) {
+        callback(new Error("角色不能为空"));
+      } else {
+        callback();
+      }
+    },
+
+    // onSelectedDrug(event) {
+    //   this.siteList = event;
+    //   console.log(this.siteList);
+    // },
+    // 保存操作
+    submitForm(formName) {
+      const that = this;
+      const params = Object.assign(that.formInfo, {});
+      that.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          that.$message({
+            message: "操作成功！",
+            type: "success",
+          });
+          that.closeDialog(1);
+        } else {
+          return false;
+        }
+      });
+    },
+    // 关闭弹框
+    closeDialog(flag) {
+      this.$refs["formInfo"].resetFields();
+      this.showDialog = false;
+      this.$emit("closeDialog", flag);
+    },
+  },
+};
+</script>
+ 
+<style scoped lang="scss">
+.el-input,
+.el-select {
+  width: 240px;
+}
+</style>

src/views/siteManage/watchDog/index.vue

@@ -1,5 +1,196 @@
 <template>
-  <div style="padding:30px;">
-   监控设备
+  <div class="siteManage-main">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <a class="">【测试站点1】站点的所有监控设备</a>
+      <!-- <el-button icon="el-icon-plus" type="success" @click="addItem()">新增</el-button > -->
+      <div>
+        <el-button type="primary">导入</el-button>
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+     
+    >
+      <el-table-column fixed prop="watchStatus" label="状态" width="50" align="center">
+         <template slot-scope="scope">
+          <el-avatar class="status"></el-avatar>
+        </template>
+      </el-table-column>
+      <el-table-column prop="watchName" label="名称" width="">
+      </el-table-column>
+      <el-table-column prop="watchCode" label="编号" width="">
+      </el-table-column>
+      <el-table-column prop="ratedVoltage" label="额定电压" width="">
+      </el-table-column>
+      <el-table-column prop="ratedCurrent" label="额定电流" width="">
+      </el-table-column>
+      <el-table-column prop="fzlMx" label="电流负载率门限" width="">
+      </el-table-column>
+      <el-table-column prop="powerAnalysis" label="电能质量分析" width="">
+      </el-table-column>
+      <el-table-column prop="watchAddress" label="表计地址" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.native.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+
+      <el-table-column fixed="right" label="变量" width="180">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.native.prevent="editRow(scope.row)"
+            >变量列表</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+           
+            >克隆</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
   </div>
 </template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "WatchDog",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      showDialog: false,
+
+      input: "请输入状态",
+      tableData: [
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+       {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+       {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis:"开启",
+          watchAddress:"1"
+        },
+      ],
+    };
+  },
+  methods: {
+    // 表头样式设置
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        watchName: "",
+        watchCode: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+    
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/stationManage/dialogComponent.vue

@@ -42,12 +42,12 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="已勾选：" prop="done">
-          <el-input v-model="formInfo.done" style="width: 200px"></el-input>
+        <el-form-item label="已勾选：" prop="pointNum">
+          <el-input v-model="formInfo.pointNum" style="width: 200px"></el-input>
           个站点
         </el-form-item>
-        <el-form-item label="共挂载：" prop="guaZai">
-          <el-input v-model="formInfo.guaZai" style="width: 200px"></el-input>
+        <el-form-item label="共挂载：" prop="deviceNum">
+          <el-input v-model="formInfo.deviceNum" style="width: 200px"></el-input>
           个设备
         </el-form-item>
         <br />
@@ -143,11 +143,11 @@ export default {
           { required: true, message: '请选择站点列表', trigger: 'change'}
         
         ],
-        done: [
+        pointNum: [
           { required: true, message: "请输入已选站点个数", trigger: "blur" },
           { trigger: "blur" },
         ],
-        guaZai: [
+        deviceNum: [
           { required: true, message: "请输入挂载设备个数", trigger: "blur" },
           { trigger: "blur" },
         ],

src/views/stationManage/index.vue

@@ -3,7 +3,8 @@
     <!-- 筛选start -->
     <div class="mb-20">所有台区</div>
     <div class="filter-container mb-20">
-      <div class="filter-item">
+      <div>
+        <div class="filter-item">
         台区：
         <el-input
           v-model="input"
@@ -18,6 +19,8 @@
       <el-button icon="el-icon-plus" type="success" @click="addItem()"
         >新增</el-button
       >
+      </div>
+      
     </div>
     <!-- 筛选end -->