计划停电

.eslintrc.js

@@ -14,7 +14,7 @@ module.exports = {
     // add your custom rules here
     //it is base on https://github.com/vuejs/eslint-config-vue
     rules: {
-        "vue/max-attributes-per-line": [warn, {
+        "vue/max-attributes-per-line": [2, {
             "singleline": 10,
             "multiline": {
                 "max": 1,

src/views/monthReport/index.vue

@@ -1,89 +1,61 @@
 <template>
-  <div class="dashboard-container">
-    <div class="dashboard-text">月度报告</div>
+  <div class="app-container">
 
-    <el-tree default-expand-all :data="data">
-      <span
-        class="custom-tree-node"
-        slot-scope="{ node, data }"
-        style="width: 100%"
-        @mouseenter="mouseenter(data)"
-        @mouseleave="mouseleave(data)"
-      >
-        <span>{{ node.label }}</span>
-        <el-link
-          v-show="data.show"
-          size="mini"
-          style="margin-left: 5px"
-          type="primary"
-          icon="el-icon-plus"
-        ></el-link>
-        <el-link
-          v-show="data.show"
-          size="mini"
-          style="margin-left: 5px"
-          type="primary"
-          icon="el-icon-delete"
-        ></el-link>
-      </span>
-    </el-tree>
+    计划停电
+    <br>
+    <br>
+
+    <el-date-picker
+      v-model="beginTime"
+      format="yyyy-MM-dd HH:mm:ss"
+      value-format="yyyy-MM-dd HH:mm:ss"
+      type="datetime"
+      placeholder="选择日期时间"
+      :picker-options="pickerBeginDate"
+      clearable
+    ></el-date-picker>
+    <br>
+    <br>
+    <el-date-picker
+      v-model="endTime"
+      format="yyyy-MM-dd HH:mm:ss"
+      value-format="yyyy-MM-dd HH:mm:ss"
+      type="datetime"
+      placeholder="选择日期时间"
+      :picker-options="pickerEndDate"
+      clearable
+    ></el-date-picker>
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-
 export default {
-  name: "Dashboard",
-  computed: {
-    ...mapGetters(["name"]),
-  },
   data() {
+    //限制不能选之后的日期
+    this.pickerBeginDate = {
+      disabledDate: (time) => {
+        let endTime = this.endTime;
+        if (endTime) {
+          return time.getTime() > new Date(endTime).getTime();
+        }
+      },
+    };
+    // /限制不能选之前的时间
+    this.pickerEndDate = {
+      disabledDate: (time) => {
+        let beginTime = this.beginTime;
+        if (beginTime) {
+          return time.getTime() < new Date(beginTime).getTime();
+        }
+      },
+    };
     return {
-      data: [
-        {
-          id: 0,
-          label: "水果",
-          show: false,
-          children: [
-            {
-              id: 1,
-              label: "苹果",
-              show: false,
-            },
-            {
-              id: 2,
-              label: "芒果",
-              show: false,
-            },
-          ],
-        },
-      ],
+      beginTime: "",
+      endTime: "",
     };
   },
-  methods: {
-    mouseenter(data) {
-      alert(1)
-      console.log(data);
-      data.show = true;
-    },
-
-    mouseleave(data) {
-      console.log(data);
-      data.show = false;
-    },
-  },
+  methods: {},
 };
 </script>
 
-<style lang="scss" scoped>
-.dashboard {
-  &-container {
-    margin: 30px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
-</style>
+

src/views/planOutage/dialogComponent.vue

@@ -0,0 +1,206 @@
+<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="watchName" label-width="150px">
+          <el-input v-model="formInfo.watchName"></el-input>
+        </el-form-item>
+        <el-form-item label="开始停电时间：" prop="watchCode" label-width="150px">
+          <el-input v-model="formInfo.watchCode"></el-input >
+        </el-form-item>
+        <el-form-item label="结束停电时间:" prop="routeAddress" label-width="150px">
+          <el-select
+            v-model="formInfo.routeAddress"
+            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="ratedVoltage" label-width="150px">
+          <el-input v-model="formInfo.ratedVoltage"></el-input>
+        </el-form-item>
+        <el-form-item label="提交人：" prop="stationAddress" label-width="150px">
+          <el-input v-model="formInfo.ratedCurrent"></el-input>
+        </el-form-item>
+        <el-form-item label="状态：" prop="fzlMx" label-width="150px">
+          <el-input v-model="formInfo.fzlMx"></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 {
+       checked: true,
+      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: {
+        watchName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入站点名称", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        watchCode: [
+          { required: true, message: "请输入开始停电时间", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        routeAddress: [
+          { required: true, message: "请选则结束停电时间", trigger: "change" },
+         
+        ],
+        ratedVoltage: [
+          { required: true, message: '请选择站点列表', trigger: 'change'}
+        
+        ],
+        ratedCurrent: [
+          { required: true, message: "请输入已选站点个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+        fzlMx: [
+          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    roleValid(rule, value, callback) {
+      if (value.length === 0) {
+        callback(new Error("角色不能为空"));
+      } else {
+        callback();
+      }
+    },
+
+    // onSelectedDrug(event) {
+    //   this.routeAddress = event;
+    //   console.log(this.routeAddress);
+    // },
+    // 保存操作
+    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;
+}
+
+// label样式
+.el-form-item__label {
+    width: 150px
+}
+.el-form-item__content {
+    margin-left: 150px
+}
+</style>

src/views/planOutage/index.vue

@@ -1,30 +1,255 @@
 <template>
-  <div class="dashboard-container">
-    <div class="dashboard-text">计划停电</div>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导入</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" 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>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import DialogComponent from "./dialogComponent";
 
 export default {
-  name: 'Dashboard',
-  computed: {
-    ...mapGetters([
-      'name'
-    ])
-  }
-}
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      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>
-.dashboard {
-  &-container {
-    margin: 30px;
-  }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
-  }
-}
 </style>