新页面排版

src/router/index.js

@@ -43,6 +43,7 @@ export const constantRoutes = [{
         hidden: true
     },
 
+
     // my start
 
     {
@@ -53,8 +54,8 @@ export const constantRoutes = [{
             path: 'alarmManage',
             name: 'alarmManage',
             component: () =>
-                import ('@/views/alarmManage/index'), //aa页面路径
-            meta: { title: '告警管理', icon: 'alarmManage' } //aa title 菜单标题&meta title
+                import ('@/views/alarmManage/index'),
+            meta: { title: '告警管理', icon: 'alarmManage' }
         }]
     },
     {
@@ -112,13 +113,40 @@ export const constantRoutes = [{
         path: '/stationManage',
         component: Layout,
         children: [{
-            path: 'index',
-            name: 'StationManage',
-            component: () =>
-                import ('@/views/stationManage/index'),
-            meta: { title: '台区管理', icon: 'stationManage' }
-        }]
+                path: 'index',
+                name: 'StationManage',
+                component: () =>
+                    import ('@/views/stationManage/index'),
+                meta: { title: '台区管理', icon: 'stationManage' }
+            },
+            {
+                path: 'siteList',
+                name: 'StationManage',
+                component: () =>
+                    import ('@/views/stationManage/siteList'),
+                meta: { title: '台区管理', icon: 'stationManage' },
+                hidden: true
+            }
+        ]
     },
+
+
+
+    // {
+    //     path: '/stationManage',
+    //     component: Layout,
+    //     children: [{
+    //         path: 'siteList',
+    //         name: 'StationManage',
+    //         component: () =>
+    //             import ('@/views/stationManage/siteList'),
+    //         meta: { title: '台区管理', icon: 'stationManage' }
+    //     }],
+    //     hidden: true
+    // },
+
+
+
     {
         path: '/deviceManage',
         component: Layout,
@@ -369,7 +397,8 @@ export const constantRoutes = [{
                 name: 'rolePermission',
                 component: () =>
                     import ('@/views/systemManage/rolePermission/index'),
-                meta: { title: '角色权限' }
+                hidden: true,
+                meta: { title: '角色权限' },
             },
         ]
     },

src/styles/index.scss

@@ -63,6 +63,18 @@ div:focus {
     margin-bottom: 20px
 }
 
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
 .delete-text {
     color: #F80000
 }
@@ -113,4 +125,16 @@ div:focus {
     margin: 0 auto 20px;
 }
 
-// 弹框样式end
+// 弹框样式end
+// 台区列表
+.siteTitle {
+    font-size: 16px;
+    padding: 10px 20px 30px 20px;
+    text-align: center;
+    position: relative;
+    .goBack {
+        position: absolute;
+        left: 0;
+        top: 0
+    }
+}

src/views/stationManage/dialogComponent.vue

@@ -3,7 +3,6 @@
     <el-dialog
       v-if="showDialog"
       :title="dialogTitle"
-     
       class="dialog-component"
       :visible.sync="showDialog"
       width="640px"
@@ -14,9 +13,9 @@
         :model="formInfo"
         class="demo-form-inline"
         label-width="100px"
-          :rules="rules"
+        :rules="rules"
       >
-        <el-form-item label="台区名称：" prop="stationName" >
+        <el-form-item label="台区名称：" prop="stationName">
           <el-input v-model="formInfo.stationName"></el-input>
         </el-form-item>
         <el-form-item label="台区编号：" prop="stationCode">
@@ -25,36 +24,51 @@
         <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"  placeholder="" >
-            <el-option label="请选择" value=""></el-option>
-            <el-option label="站点一" value="3"></el-option>
-            <el-option label="站点二" value="4"></el-option>
+        <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="done" >
-          <el-input v-model="formInfo.done" style="width:200px"></el-input>  个站点
+        <el-form-item label="已勾选：" prop="done">
+          <el-input v-model="formInfo.done" 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-input v-model="formInfo.guaZai" style="width: 200px"></el-input>
+          个设备
         </el-form-item>
-        <br>
-        <br>
-        <br>
-        <div style="text-align: right;">
-             <el-button @click="closeDialog(0)">取消</el-button>
+        <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: {
@@ -73,37 +87,86 @@ export default {
     return {
       showDialog: false,
       formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
-       rules: {
+      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"},
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
         ],
-         stationCode: [
+        stationCode: [
           { required: true, message: "请输入台区编号", trigger: "blur" },
-          { min: 3,max: 6, message: "用户名长度在 3 到 6 个字符", 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"},
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
         ],
-         siteList: [
-          { required: true, message: "请选择站点列表", trigger: "blur" },
-          {  trigger: "blur"},
+        siteList: [
+          { required: true, message: '请选择站点列表', trigger: 'change' }
+        
         ],
         done: [
           { required: true, message: "请输入已选站点个数", trigger: "blur" },
-          {  trigger: "blur"},
+          { trigger: "blur" },
         ],
         guaZai: [
           { required: true, message: "请输入挂载设备个数", trigger: "blur" },
-          {  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;
@@ -132,9 +195,8 @@ export default {
 </script>
  
 <style scoped lang="scss">
-
-.el-input,.el-select{
-    width:240px
+.el-input,
+.el-select {
+  width: 240px;
 }
-
 </style>

src/views/stationManage/index.vue

@@ -20,7 +20,6 @@
       >
     </div>
     <!-- 筛选end -->
-    <!-- <el-divider></el-divider> -->
 
     <!-- 表格start -->
     <el-table
@@ -60,8 +59,6 @@
     </el-table>
     <!-- 表格end -->
 
-    <!-- 新增修改弹框start -->
-
     <!--弹框组件开始-----------------------start-->
     <dialog-component
       v-if="showDialog"
@@ -72,7 +69,6 @@
     ></dialog-component>
     <!--弹框组件开始-----------------------end-->
 
-    <!-- 新增修改弹框end -->
   </div>
 </template>
 
@@ -126,6 +122,21 @@ export default {
     };
   },
   methods: {
+
+    // 表头样式设置
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    //自定义列样式
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 3) {
+        return `color:#0284E8;`;
+      } else {
+        return "";
+      }
+    },
+
     // 添加操作
     addItem() {
       this.tableItem = {
@@ -133,7 +144,7 @@ export default {
         stationName: "",
         stationCode: "",
         stationAddress: "",
-        siteList: "",
+        siteList: [],
         done: "",
         guaZai: "",
       };
@@ -162,23 +173,16 @@ export default {
       this.showDialog = false;
     },
 
-    // 表头样式设置
-    headClass() {
-      return "background:#FAFAFA;";
-    },
-    cellStyle({ row, column, rowIndex, columnIndex }) {
-      if (columnIndex === 3) {
-        return `color:#0284E8;`;
-      } else {
-        return "";
-      }
-    },
+    
 
-    handleEdit(index, row) {
-      console.log(index, row);
-    },
+    // handleEdit(index, row) {
+    //   console.log(index, row);
+    // },
+
+    //删除操作
     handleDelete(index, row) {
       console.log(index, row);
+      alert(index)
     },
   },
 };

src/views/stationManage/siteList.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="app-container">
+    <!-- 返回start -->
+    <div class="siteTitle">
+      <el-button class="goBack">返回</el-button>
+      台区1-站点列表
+    </div>
+    <!-- 返回end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+      :cell-style="cellStyle"
+    >
+      <el-table-column fixed prop="stationName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="stationStatus" label="状态" width="">
+        <!-- <template slot-scope="scope">
+          <i class="el-icon-time"></i>
+          <span style="margin-left: 10px">{{ scope.row.date }}</span>
+        </template> -->
+         <template>
+          <i class="status" style="width:5px;height:5px;border-radius:50%;display:inline-block;color:red"></i>
+        </template>
+      </el-table-column>
+      <el-table-column prop="deviceName" label="设备名称" width="">
+      </el-table-column>
+      <el-table-column prop="siteNo" label="编号" width=""> </el-table-column>
+      <el-table-column prop="eddy" label="额定电压" width=""> </el-table-column>
+      <el-table-column prop="eddl" label="额定电流" width=""> </el-table-column>
+      <el-table-column prop="dlfzl" label="电流负载率门限" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="250">
+        <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-->
+    <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";
+// import { mapGetters } from "vuex";
+
+export default {
+  // name: "Dashboard",
+  // computed: {
+  //   ...mapGetters(["name"]),
+  // },
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      showDialog: false,
+
+      input: "请输入站点名称",
+      tableData: [
+        {
+          stationName: "测试站点1",
+          stationStatus: "~",
+          deviceName: "电力监测设备",
+          siteNo: "cssb1",
+          eddy: "10",
+          eddl: "12",
+          dlfzl: "80%",
+        },
+        {
+          stationName: "测试站点1",
+          stationStatus: "~",
+          deviceName: "视频监测设备",
+          siteNo: "cssb1",
+          eddy: "10",
+          eddl: "12",
+          dlfzl: "80%",
+        },
+        {
+          stationName: "测试站点1",
+          stationStatus: "~",
+          deviceName: "电力监测设备",
+          siteNo: "spjcsdb1",
+          eddy: "10",
+          eddl: "12",
+          dlfzl: "80%",
+        },
+        {
+          stationName: "测试站点1",
+          stationStatus: "~",
+          deviceName: "电力监测设备",
+          siteNo: "cssb1",
+          eddy: "10",
+          eddl: "12",
+          dlfzl: "80%",
+        },
+      ],
+    };
+  },
+  methods: {
+    // 表头样式设置
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    //自定义列样式
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 1) {
+        return `color:#04F21C`;
+      } else {
+        return "";
+      }
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        stationStatus: "",
+        deviceName: "",
+        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;
+    },
+
+    // handleEdit(index, row) {
+    //   console.log(index, row);
+    // },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>