feat: 电站负荷数据

src/router/router-static.js

@@ -17,6 +17,9 @@ import rainfalldata from "@/views/modules/rainfalldata/list";
 import rainfalldataforecast from "@/views/modules/rainfalldataforecast/list";
 import syslog from "@/views/modules/syslog/list";
 import Station from "@/views/modules/station/list";
+import loadData from "@/views/modules/load-data/index";
+
+
 
 //2.配置路由   注意：名字
 export const routes = [
@@ -38,6 +41,11 @@ export const routes = [
         component: Station,
       },
       {
+        path: "/loadData",
+        name: "电暖变电负荷数据",
+        component: loadData,
+      },
+      {
         path: "/updatePassword",
         name: "修改密码",
         component: UpdatePassword,

src/utils/menu.js

@@ -14,6 +14,17 @@ const menu = {
             ],
             menu: "变电站管理",
           },
+           {
+            child: [
+              {
+                appFrontIcon: "cuIcon-qrcode",
+                menu: "电暖变电负荷数据",
+                menuJump: "列表",
+                tableName: "loadData",
+              },
+            ],
+            menu: "电暖变电负荷数据管理",
+          },
         //   {
         //     child: [
         //       {

src/views/modules/load-data/components/add-or-update.vue

@@ -0,0 +1,618 @@
+<template>
+  <!-- 添加或修改参数配置对话框 -->
+  <el-dialog
+    title="明细"
+    :visible.sync="open"
+    width="1000px"
+    append-to-body
+    destroy-on-close
+  >
+    <el-form ref="ruleForm" :model="ruleForm" label-width="120px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="变电站名称" prop="subNm">
+            <el-input
+              v-model="ruleForm.subNm"
+              placeholder="请输入变电站名称"
+              :disabled="type == 'view'"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="归属县旗" prop="compNm">
+            <el-input
+              v-model="ruleForm.compNm"
+              placeholder="请输入归属县旗名称"
+              :disabled="type == 'view'"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="电压等级" prop="voltageLevel">
+            <el-input
+              type="number"
+              v-model="ruleForm.voltageLevel"
+              placeholder="请输入电压等级"
+              :disabled="type == 'view'"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="主变台数" prop="mainNum">
+            <el-input
+              type="number"
+              style="width: 100%"
+              v-model="ruleForm.mainNum"
+              placeholder="请输入主变台数"
+              :disabled="type == 'view'"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="主变容量(MVA)" prop="mainCapacity">
+            <el-input
+              type="number"
+              style="width: 100%"
+              v-model="ruleForm.mainCapacity"
+              placeholder="请输入主变容量"
+              :disabled="type == 'view'"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="采集日期" prop="dataDate">
+            <el-input v-model="ruleForm.dataDate" :disabled="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="当日温度(℃)" prop="temperature">
+            <el-input
+              v-model="ruleForm.temperature"
+              :disabled="type == 'view'"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="最大负荷(MW)" prop="peakLoad">
+            <el-input v-model="ruleForm.peakLoad" :disabled="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="基础负荷(MW)" prop="baseLoad">
+            <el-input v-model="ruleForm.baseLoad" :disabled="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="电采暖负荷(MW)" prop="electricHeatingLoad">
+            <el-input
+              v-model="ruleForm.electricHeatingLoad"
+              :disabled="type == 'view'"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="电采暖负荷(MW)" prop="electricHeatingLoad">
+            <el-input
+              v-model="ruleForm.electricHeatingLoad"
+              :disabled="type == 'view'"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="用户数" prop="usersNum">
+            <el-input v-model="ruleForm.usersNum" :disabled="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="平房区用户数" prop="pingfangUsers">
+            <el-input
+              v-model="ruleForm.pingfangUsers"
+              :disabled="type == 'view'"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="平房区接入电暖用户数"
+            prop="electricHeatingUsers"
+          >
+            <el-input
+              v-model="ruleForm.electricHeatingUsers"
+              :disabled="type == 'view'"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="平房区已接入电采暖容量(MWA)"
+            prop="pingfangElectricHeatingCapacity"
+          >
+            <el-input
+              v-model="ruleForm.pingfangElectricHeatingCapacity"
+              :disabled="type == 'view'"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="cancel">关 闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      type: "view", // add, edit, view
+      open: false,
+      ruleForm: {},
+    };
+  },
+  props: ["parent"],
+  methods: {
+    openDialog(id, type) {
+      this.type = type;
+      this.open = true;
+      this.resetForm();
+      if (id) this.info(id);
+    },
+    info(id) {
+      this.$http({
+        url: `subLoad/detail/${id}`,
+        method: "get",
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.ruleForm = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    },
+    resetForm() {
+      this.ruleForm = {};
+    },
+    // 返回
+    cancel() {
+      this.open = false;
+      this.resetForm();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.addEdit-block {
+  padding: 30px;
+  background: none;
+  width: 100%;
+}
+.add-update-preview {
+  border-radius: 10px;
+  padding: 40px 25% 40px 18%;
+  background: #ffffff;
+  border-color: #eee;
+  border-width: 1px;
+  border-style: solid;
+}
+.amap-wrapper {
+  width: 100%;
+  height: 500px;
+}
+
+.search-box {
+  position: absolute;
+}
+
+.el-date-editor.el-input {
+  width: auto;
+}
+.add-update-preview ::v-deep .el-form-item {
+  border: 0px solid #eee;
+  padding: 0;
+  margin: 0 0 22px 0;
+  display: inline-block;
+  width: 100%;
+}
+.add-update-preview .el-form-item ::v-deep .el-form-item__label {
+  padding: 0 10px 0 0;
+  color: #6e6e6e;
+  font-weight: 500;
+  width: 180px;
+  font-size: 15px;
+  line-height: 40px;
+  text-align: right;
+}
+
+.add-update-preview .el-form-item ::v-deep .el-form-item__content {
+  margin-left: 180px;
+}
+.add-update-preview .el-form-item span.text {
+  padding: 0 10px;
+  color: #333;
+  background: none;
+  font-weight: 500;
+  display: inline-block;
+  font-size: 15px;
+  line-height: 40px;
+  min-width: 50%;
+}
+
+.add-update-preview .el-input {
+  width: 100%;
+}
+.add-update-preview .el-input ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-width: 50%;
+  height: 40px;
+}
+.add-update-preview .el-input ::v-deep .el-input__inner[readonly="readonly"] {
+  border: 0px solid #ccc;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-input-number {
+  text-align: left;
+  width: 100%;
+}
+.add-update-preview .el-input-number ::v-deep .el-input__inner {
+  text-align: left;
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-width: 50%;
+  height: 40px;
+}
+.add-update-preview .el-input-number ::v-deep .is-disabled .el-input__inner {
+  text-align: left;
+  border: 0px solid #ccc;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-input-number ::v-deep .el-input-number__decrease {
+  display: none;
+}
+.add-update-preview .el-input-number ::v-deep .el-input-number__increase {
+  display: none;
+}
+.add-update-preview .el-select {
+  width: 100%;
+}
+.add-update-preview .el-select ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 10px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-select ::v-deep .is-disabled .el-input__inner {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 4px;
+  padding: 0 10px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 34px;
+}
+.add-update-preview .el-date-editor {
+  width: 100%;
+}
+.add-update-preview .el-date-editor ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview
+  .el-date-editor
+  ::v-deep
+  .el-input__inner[readonly="readonly"] {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .viewBtn {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 15px;
+  margin: 0 20px 0 0;
+  color: #666;
+  background: #fff;
+  width: auto;
+  font-size: 15px;
+  line-height: 34px;
+  height: 34px;
+  .iconfont {
+    margin: 0 2px;
+    color: #666;
+    font-size: 16px;
+    height: 34px;
+  }
+}
+.add-update-preview .viewBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview .downBtn {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 15px;
+  margin: 0 20px 0 0;
+  color: #666;
+  background: #fff;
+  width: auto;
+  font-size: 15px;
+  line-height: 34px;
+  height: 34px;
+  .iconfont {
+    margin: 0 2px;
+    color: #666;
+    font-size: 16px;
+    height: 34px;
+  }
+}
+.add-update-preview .downBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview .unBtn {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 4px;
+  padding: 0 0px;
+  margin: 0 20px 0 0;
+  outline: none;
+  color: #999;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  line-height: 40px;
+  height: 40px;
+  .iconfont {
+    margin: 0 2px;
+    color: #fff;
+    display: none;
+    font-size: 14px;
+    height: 34px;
+  }
+}
+.add-update-preview .unBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview ::v-deep .el-upload--picture-card {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  width: auto;
+  height: auto;
+  line-height: initial;
+  vertical-align: middle;
+}
+
+.add-update-preview ::v-deep .upload .upload-img {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+
+.add-update-preview ::v-deep .el-upload-list .el-upload-list__item {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+
+.add-update-preview ::v-deep .el-upload .el-icon-plus {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+.add-update-preview ::v-deep .el-upload__tip {
+  color: #666;
+  font-size: 15px;
+}
+
+.add-update-preview .el-textarea ::v-deep .el-textarea__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-height: 150px;
+  height: auto;
+}
+.add-update-preview
+  .el-textarea
+  ::v-deep
+  .el-textarea__inner[readonly="readonly"] {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  min-width: 400px;
+  height: auto;
+}
+.add-update-preview .el-form-item.btn {
+  padding: 0;
+  margin: 20px 0 0;
+  .btn1 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #0356bb;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn1:hover {
+    opacity: 0.8;
+  }
+  .btn2 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #39c9ee;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 34px;
+    }
+  }
+  .btn2:hover {
+    opacity: 0.8;
+  }
+  .btn3 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #6ea0dc;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn3:hover {
+    opacity: 0.8;
+  }
+  .btn4 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #4abcff;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn4:hover {
+    opacity: 0.8;
+  }
+  .btn5 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #0977fd;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn5:hover {
+    opacity: 0.8;
+  }
+}
+</style>

src/views/modules/load-data/components/uploadModal.vue

@@ -0,0 +1,189 @@
+<template>
+  <el-dialog
+    title="上传数据文件"
+    :visible.sync="open"
+    width="500px"
+    append-to-body
+    destroy-on-close
+  >
+    <el-form ref="ruleForm" :model="form" label-width="80px">
+      <el-form-item
+        label="归属县旗"
+        prop="compNm"
+        :rules="[
+          { required: true, message: '请选择归属县旗', trigger: 'change' },
+        ]"
+      >
+        <el-select
+          style="width: 200px"
+          v-model="form.compNm"
+          placeholder="请选择归属县旗"
+        >
+          <el-option
+            v-for="item in compList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.label"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item class="upload" label="选择文件">
+        <el-upload
+          class="upload-demo"
+          action="#"
+          ref="upload"
+          :on-change="handleFileChange"
+          :limit="1"
+          :on-exceed="handleExceed"
+          :before-upload="beforeUpload"
+          :file-list="fileList"
+        >
+          <el-button slot="trigger" size="small" type="primary"
+            >点击上传</el-button
+          >
+          <!-- <div class="el-upload__text">
+            <el-button
+              type="primary"
+              size="small"
+              >点击选择</el-button
+            >
+            
+          </div> -->
+        </el-upload>
+      </el-form-item>
+    </el-form>
+
+    <!-- 点击确定上传文件 -->
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="onSubmit" :loading="loading"
+          >确 定</el-button
+        >
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "FileUpload",
+  data() {
+    return {
+      loading: false,
+      fileList: [], //深拷贝，判断重名及第一步时的文件信息展示f
+      form: {
+        compNm: "",
+        fileInfo: undefined,
+      },
+      open: false,
+      compList: [],
+    };
+  },
+  methods: {
+    // 获取公司列表
+    async getCompList() {
+      this.compList = [];
+      const { data } = await this.$http({
+        url: `/company/lists`,
+        method: "get",
+      });
+      if (data && data.code === 0) {
+        this.compList = data.data.map((item) => ({
+          label: item.compName,
+          value: String(item.id),
+        }));
+      }
+    },
+    // 打开弹窗
+    openDialog() {
+      this.open = true;
+      this.getCompList();
+    },
+    // 处理超出图片个数操作
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
+      );
+    },
+    // 移除之前的操作
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    // 上传前的校验
+    beforeUpload(file) {
+      const isExcel =
+        file.type === "application/vnd.ms-excel" ||
+        file.type ===
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+      const isXLS = file.name.endsWith(".xls");
+      const isXLSX = file.name.endsWith(".xlsx");
+
+      if (!isExcel && !isXLS && !isXLSX) {
+        this.$message.error("上传文件必须是 Excel 格式！");
+        return false;
+      }
+      return true;
+    },
+    // 处理文件选择操作
+    handleFileChange(file, fileList) {
+      console.log(file, "file");
+      this.form.fileInfo = file;
+    },
+    // 处理文件上传操作
+    handleFileUpload() {
+      console.log(this.form.fileInfo, "sss");
+      const formData = new FormData();
+      formData.append("file", this.form.fileInfo);
+      formData.append("compNm", this.form.compNm);
+      this.loading = true;
+      // 调用后端服务器的接口
+      this.$http({
+        url: `subLoad/importExcel`,
+        method: "post",
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+        data: formData,
+      })
+        .then((resp) => {
+          this.$message.success("文件上传成功");
+          this.$refs.upload.clearFiles();
+          this.cancel();
+        })
+        .catch((e) => {
+          this.$message.error(e.message);
+          this.$refs.upload.clearFiles();
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    // 提交表单
+    onSubmit() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          if (this.form.fileInfo) {
+            this.handleFileUpload();
+          } else {
+            this.$message.error("请选择文件");
+          }
+        } else {
+          this.$message.error("请选择归属县旗");
+        }
+      });
+    },
+    // 取消操作
+    cancel() {
+      this.loading = false;
+      this.fileList = [];
+      this.form.compNm = "";
+      this.form.fileInfo = undefined;
+      this.open = false;
+    },
+  },
+};
+</script>

src/views/modules/load-data/index.vue

@@ -0,0 +1,715 @@
+<template>
+  <div
+    class="main-content"
+    :style="{ width: '100%', padding: '20px 30px', fontSize: '15px' }"
+  >
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="变电站负荷数据" name="stationLoad"
+        >
+        <stationLoadList/>
+        </el-tab-pane
+      >
+      <el-tab-pane label="线路负荷数据" name="lineLoad"
+        >线路负荷数据</el-tab-pane
+      >
+    </el-tabs>
+  </div>
+</template>
+<script>
+import stationLoadList from "@/views/modules/load-data/components/stationLoadList.vue";
+export default {
+  data() {
+    return {
+      activeName: "stationLoad",
+    };
+  },
+  created() {},
+  mounted() {},
+  components: {
+    stationLoadList,
+  },
+  methods: {
+    handleClick(tab) {
+      console.log(tab);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.center-form-pv {
+  .el-date-editor.el-input {
+    width: auto;
+  }
+}
+
+.el-input {
+  width: auto;
+}
+
+// form
+.center-form-pv .el-input {
+  width: auto;
+}
+.center-form-pv .el-input ::v-deep .el-input__inner {
+  border: 1px solid #ddd;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  width: 150px;
+  font-size: 15px;
+  height: 40px;
+}
+.center-form-pv .el-select {
+  width: auto;
+}
+.center-form-pv .el-select ::v-deep .el-input__inner {
+  border: 1px solid #ddd;
+  border-radius: 0px;
+  padding: 0 10px;
+  color: #666;
+  width: 150px;
+  font-size: 15px;
+  height: 40px;
+}
+.center-form-pv .el-date-editor {
+  width: auto;
+}
+
+.center-form-pv .el-date-editor ::v-deep .el-input__inner {
+  border: 1px solid #ddd;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  width: 150px;
+  font-size: 15px;
+  height: 40px;
+}
+
+.center-form-pv .search {
+  border: 0;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 20px;
+  color: #fff;
+  background: #0977fd;
+  width: auto;
+  font-size: 16px;
+  min-width: 90px;
+  height: 40px;
+}
+
+.center-form-pv .search:hover {
+  opacity: 0.8;
+}
+
+.center-form-pv .actions .add {
+  border: 1px solid #0977fd60;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 4px;
+  color: #0977fd;
+  background: #fff;
+  width: auto;
+  font-size: inherit;
+  height: 34px;
+}
+
+.center-form-pv .actions .add:hover {
+  opacity: 0.8;
+}
+
+.center-form-pv .actions .del {
+  border: 1px solid #cc000060;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 4px;
+  color: #c00;
+  background: #fff;
+  width: auto;
+  font-size: inherit;
+  height: 34px;
+}
+
+.center-form-pv .actions .del:hover {
+  opacity: 0.8;
+}
+
+.center-form-pv .actions .statis {
+  border: 1px solid #e0970460;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 20px;
+  margin: 4px;
+  color: #e09704;
+  background: #fff;
+  width: auto;
+  font-size: inherit;
+  height: 34px;
+}
+
+.center-form-pv .actions .statis:hover {
+  opacity: 0.8;
+}
+
+.center-form-pv .actions .btn18 {
+  border: 1px solid #ed9a0d60;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 4px;
+  color: #ed9a0d;
+  background: #fff;
+  width: auto;
+  font-size: inherit;
+  height: 34px;
+}
+
+.center-form-pv .actions .btn18:hover {
+  opacity: 0.8;
+}
+
+// table
+.el-table ::v-deep .el-table__header-wrapper thead {
+  color: #999;
+  background: #fff;
+  font-weight: 500;
+  width: 100%;
+}
+
+.el-table ::v-deep .el-table__header-wrapper thead tr {
+  background: #cae2ff;
+}
+
+.el-table ::v-deep .el-table__header-wrapper thead tr th {
+  padding: 8px 0;
+  background: none;
+  border-color: #f6f6f6;
+  border-width: 0 0px 0px 0;
+  border-style: solid;
+  text-align: left;
+}
+
+.el-table ::v-deep .el-table__header-wrapper thead tr th .cell {
+  padding: 0 0 0 5px;
+  word-wrap: normal;
+  color: #0977fd;
+  white-space: normal;
+  font-weight: bold;
+  display: flex;
+  vertical-align: middle;
+  font-size: 14px;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  width: 100%;
+  align-items: center;
+  position: relative;
+  min-width: 110px;
+}
+
+.el-table ::v-deep .el-table__body-wrapper {
+  position: relative;
+}
+.el-table ::v-deep .el-table__body-wrapper tbody {
+  width: 100%;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr {
+  background: #fff;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td {
+  padding: 4px 0;
+  color: #333;
+  background: #fff;
+  font-size: inherit;
+  border-color: #0977fd30;
+  border-width: 0 0px 1px 0;
+  border-style: solid;
+  text-align: left;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr:hover td {
+  padding: 4px 0;
+  color: #333;
+  background: #f4f9ff;
+  border-color: #0977fd30;
+  border-width: 0 0px 1px 0;
+  border-style: solid;
+  text-align: left;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td {
+  padding: 4px 0;
+  color: #333;
+  background: #fff;
+  font-size: inherit;
+  border-color: #0977fd30;
+  border-width: 0 0px 1px 0;
+  border-style: solid;
+  text-align: left;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .cell {
+  padding: 0 0 0 5px;
+  overflow: hidden;
+  word-break: break-all;
+  white-space: normal;
+  font-size: inherit;
+  line-height: 24px;
+  text-overflow: ellipsis;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .view {
+  border: 1px solid #0977fd60;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 0 5px 5px 0;
+  color: #0977fd;
+  background: #fff;
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .view:hover {
+  opacity: 0.8;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .add {
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .add:hover {
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .edit {
+  border: 1px solid #21c79260;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 0 5px 5px 0;
+  color: #21c792;
+  background: #fff;
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .edit:hover {
+  opacity: 0.8;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .del {
+  border: 1px solid #cc000060;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 0 5px 5px 0;
+  color: #c00;
+  background: #fff;
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .del:hover {
+  opacity: 0.8;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .btn8 {
+  border: 1px solid #ed9a0d60;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 10px;
+  margin: 0 5px 5px 0;
+  color: #ed9a0d;
+  background: #fff;
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.el-table ::v-deep .el-table__body-wrapper tbody tr td .btn8:hover {
+  opacity: 0.8;
+}
+
+// pagination
+.main-content .el-pagination ::v-deep .el-pagination__total {
+  margin: 0 10px 0 0;
+  color: #666;
+  font-weight: 400;
+  display: inline-block;
+  vertical-align: top;
+  font-size: inherit;
+  line-height: 28px;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .btn-prev {
+  border: none;
+  border-radius: 100px;
+  padding: 0;
+  margin: 0 5px;
+  color: #fff;
+  background: #000;
+  display: inline-block;
+  vertical-align: top;
+  width: 28px;
+  font-size: 16px;
+  line-height: auto;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .btn-next {
+  border: none;
+  border-radius: 100%;
+  padding: 0;
+  margin: 0 5px;
+  color: #fff;
+  background: #000;
+  display: inline-block;
+  vertical-align: top;
+  width: 28px;
+  font-size: 16px;
+  line-height: auto;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .btn-prev:disabled {
+  border: none;
+  cursor: not-allowed;
+  padding: 0;
+  margin: 0 5px;
+  color: #666;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 16px;
+  line-height: auto;
+  border-radius: 100px;
+  background: #ccc;
+  width: 28px;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .btn-next:disabled {
+  border: none;
+  cursor: not-allowed;
+  padding: 0;
+  margin: 0 5px;
+  color: #666;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 16px;
+  line-height: auto;
+  border-radius: 100px;
+  background: #ccc;
+  width: 28px;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pager {
+  padding: 0;
+  margin: 0;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.main-content .el-pagination ::v-deep .el-pager .number {
+  cursor: pointer;
+  border-radius: 100%;
+  padding: 0 10px;
+  margin: 0 2px;
+  color: #fff;
+  background: #b9b9b9;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 16px;
+  line-height: 28px;
+  text-align: center;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pager .number:hover {
+  cursor: pointer;
+  border-radius: 100%;
+  padding: 0 10px;
+  margin: 0 2px;
+  color: #fff;
+  background: #0977fd;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 16px;
+  line-height: 28px;
+  text-align: center;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pager .number.active {
+  cursor: default;
+  border-radius: 100%;
+  padding: 0 10px;
+  margin: 0 2px;
+  color: #fff;
+  background: #0977fd;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 16px;
+  line-height: 28px;
+  text-align: center;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pagination__sizes {
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+  line-height: 28px;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input {
+  margin: 0 5px;
+  width: 100px;
+  position: relative;
+}
+
+.main-content
+  .el-pagination
+  ::v-deep
+  .el-pagination__sizes
+  .el-input
+  .el-input__inner {
+  border: 1px solid #dcdfe6;
+  cursor: pointer;
+  padding: 0 25px 0 8px;
+  color: #606266;
+  display: inline-block;
+  font-size: 15px;
+  line-height: 28px;
+  border-radius: 10px;
+  outline: 0;
+  background: #fff;
+  width: 100%;
+  text-align: center;
+  height: 28px;
+}
+
+.main-content
+  .el-pagination
+  ::v-deep
+  .el-pagination__sizes
+  .el-input
+  span.el-input__suffix {
+  top: 0;
+  position: absolute;
+  right: 0;
+  height: 100%;
+}
+
+.main-content
+  .el-pagination
+  ::v-deep
+  .el-pagination__sizes
+  .el-input
+  .el-input__suffix
+  .el-select__caret {
+  cursor: pointer;
+  color: #c0c4cc;
+  width: 25px;
+  font-size: 14px;
+  line-height: 28px;
+  text-align: center;
+}
+
+.main-content .el-pagination ::v-deep .el-pagination__jump {
+  margin: 0 0 0 24px;
+  color: #606266;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+  line-height: 28px;
+  height: 28px;
+}
+
+.main-content .el-pagination ::v-deep .el-pagination__jump .el-input {
+  border-radius: 3px;
+  padding: 0 2px;
+  margin: 0 2px;
+  display: inline-block;
+  width: 50px;
+  font-size: 15px;
+  line-height: 18px;
+  position: relative;
+  text-align: center;
+  height: 28px;
+}
+
+.main-content
+  .el-pagination
+  ::v-deep
+  .el-pagination__jump
+  .el-input
+  .el-input__inner {
+  border: 1px solid #dcdfe6;
+  cursor: pointer;
+  padding: 0 3px;
+  color: #606266;
+  display: inline-block;
+  font-size: 15px;
+  line-height: 28px;
+  border-radius: 3px;
+  outline: 0;
+  background: #fff;
+  width: 100%;
+  text-align: center;
+  height: 28px;
+}
+
+// list one
+.one .list1-view {
+  border: 0;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0 15px;
+  margin: 0 5px 5px 0;
+  outline: none;
+  color: #fff;
+  background: #157ed2;
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.one .list1-view:hover {
+  opacity: 0.8;
+}
+
+.one .list1-edit {
+  border: 0;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0 15px;
+  margin: 0 5px 5px 0;
+  outline: none;
+  color: #fff;
+  background: #409eff;
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.one .list1-edit:hover {
+  opacity: 0.8;
+}
+
+.one .list1-del {
+  border: 0;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0 15px;
+  margin: 0 5px 5px 0;
+  outline: none;
+  color: #fff;
+  background: rgba(255, 0, 0, 1);
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.one .list1-del:hover {
+  opacity: 0.8;
+}
+
+.one .list1-btn8 {
+  border: 0;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0 24px;
+  margin: 0 5px 5px 0;
+  outline: none;
+  color: #fff;
+  background: rgba(255, 128, 0, 1);
+  width: auto;
+  font-size: 14px;
+  height: 32px;
+}
+
+.one .list1-btn8:hover {
+  opacity: 0.8;
+}
+
+.main-content .el-table .el-switch {
+  display: inline-flex;
+  vertical-align: middle;
+  line-height: 30px;
+  position: relative;
+  align-items: center;
+  height: 30px;
+}
+.main-content .el-table .el-switch ::v-deep .el-switch__label--left {
+  cursor: pointer;
+  margin: 0 10px 0 0;
+  color: #333;
+  font-weight: 500;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 16px;
+  transition: 0.2s;
+  height: 30px;
+}
+.main-content .el-table .el-switch ::v-deep .el-switch__label--right {
+  cursor: pointer;
+  margin: 0 0 0 10px;
+  color: #333;
+  font-weight: 500;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 16px;
+  transition: 0.2s;
+  height: 30px;
+}
+.main-content .el-table .el-switch ::v-deep .el-switch__core {
+  border: 1px solid #75c0d6;
+  cursor: pointer;
+  border-radius: 15px;
+  margin: 0;
+  background: #75c0d6;
+  display: inline-block;
+  width: 42px;
+  box-sizing: border-box;
+  transition: border-color 0.3s, background-color 0.3s;
+  height: 20px;
+}
+.main-content .el-table .el-switch ::v-deep .el-switch__core::after {
+  border-radius: 100%;
+  top: 1px;
+  left: 1px;
+  background: #fff;
+  width: 16px;
+  position: absolute;
+  transition: all 0.3s;
+  height: 16px;
+}
+.main-content .el-table .el-switch.is-checked ::v-deep .el-switch__core::after {
+  margin: 0 0 0 -18px;
+  left: 100%;
+}
+
+.main-content .el-table .el-rate ::v-deep .el-rate__item {
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0;
+  position: relative;
+}
+.main-content .el-table .el-rate ::v-deep .el-rate__item .el-rate__icon {
+  margin: 0 3px;
+  display: inline-block;
+  font-size: 18px;
+  position: relative;
+  transition: 0.3s;
+}
+</style>

src/views/modules/station/components/add-or-update.vue

@@ -14,6 +14,39 @@
           :disabled="type == 'view'"
         />
       </el-form-item>
+      <el-form-item label="归属市名称" prop="cityId">
+        <el-select
+          style="width: 100%"
+          v-model="ruleForm.cityId"
+          placeholder="请选择归属市名称"
+          :disabled="type == 'view'"
+          @change="cityChange"
+        >
+          <el-option
+            v-for="item in cityList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="归属县旗" prop="compId">
+        <el-select
+          style="width: 100%"
+          v-model="ruleForm.compId"
+          placeholder="请选择县旗"
+          :disabled="type == 'view'"
+        >
+          <el-option
+            v-for="item in compList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
       <el-form-item label="电压等级" prop="voltageLevel">
         <el-input
           @change="ruleForm.mainNum = parseInt(ruleForm.mainNum)"
@@ -53,38 +86,6 @@
           :disabled="type == 'view'"
         />
       </el-form-item>
-      <el-form-item label="归属市" prop="cityId">
-        <el-select
-          style="width: 100%"
-          v-model="ruleForm.cityId"
-          placeholder="请选择归属市"
-          :disabled="type == 'view'"
-          @change="getCompList"
-        >
-          <el-option
-            v-for="item in cityList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item label="归属县旗" prop="compId">
-        <el-select
-          style="width: 100%"
-          v-model="ruleForm.compId"
-          placeholder="请选择县旗"
-          :disabled="type == 'view'"
-        >
-          <el-option
-            v-for="item in compList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
 
       <el-form-item label="备注" prop="remark">
         <el-input
@@ -106,7 +107,10 @@
   </el-dialog>
 </template>
 <script>
+import { myMixin } from "../selectMixin";
+
 export default {
+  mixins: [myMixin],
   data() {
     return {
       type: "add", // add, edit, view
@@ -140,10 +144,14 @@ export default {
         alarmThreshold: [
           { required: true, message: "负荷报警阀值不能为空", trigger: "blur" },
         ],
-        cityId: [{ required: true, message: "归属市不能为空", trigger: "change" }],
-        compId: [{ required: true, message: "归属县旗不能为空", trigger: "change" }],
+        cityId: [
+          { required: true, message: "归属市名称不能为空", trigger: "change" },
+        ],
+        compId: [
+          { required: true, message: "归属县旗不能为空", trigger: "change" },
+        ],
       },
-      cityList: [],
+      // cityList: [],
       compList: [],
     };
   },
@@ -158,23 +166,13 @@ export default {
     },
   },
   methods: {
-    //获取市列表
-    async getCityList() {
-      const { data } = await this.$http({
-        url: `/city/lists`,
-        method: "get",
-      });
-      if (data && data.code === 0) {
-        this.cityList = data.data.map((item) => ({
-          label: item.cityName,
-          value: item.id,
-        }));
-      }
+    cityChange() {
+      this.ruleForm.compId = undefined;
+      this.ruleForm.compName = undefined;
+      this.getCompList();
     },
     // 获取公司列表
     async getCompList() {
-      this.ruleForm.compId = undefined;
-      this.ruleForm.compName = undefined;
       this.compList = [];
       const { data } = await this.$http({
         url: `/company/lists`,
@@ -186,7 +184,7 @@ export default {
       if (data && data.code === 0) {
         this.compList = data.data.map((item) => ({
           label: item.compName,
-          value: String(item.id),
+          value: item.id,
         }));
       }
     },
@@ -204,7 +202,11 @@ export default {
       }).then(({ data }) => {
         if (data && data.code === 0) {
           this.ruleForm = data.data;
+          this.ruleForm.compId = this.ruleForm.compId
+            ? Number(this.ruleForm.compId)
+            : undefined;
           if (this.ruleForm.cityId) this.getCompList();
+
         } else {
           this.$message.error(data.msg);
         }

src/views/modules/station/list.vue

@@ -56,6 +56,80 @@
               clearable
             ></el-input>
           </div>
+          <div
+            :style="{
+              alignItems: 'center',
+              margin: '0 10px 0 0',
+              display: 'flex',
+            }"
+          >
+            <label
+              :style="{
+                margin: '0 10px 0 0',
+                whiteSpace: 'nowrap',
+                color: '#666',
+                display: 'inline-block',
+                lineHeight: '40px',
+                fontSize: 'inherit',
+                fontWeight: '500',
+                height: '40px',
+              }"
+              class="item-label"
+              >归属市名称</label
+            >
+            <el-select
+              style="width: 100%"
+              v-model="searchForm.cityId"
+              placeholder="归属市名称"
+              @keydown.enter.native="search()"
+              @change="getCompList()"
+              clearable
+            >
+              <el-option
+                v-for="item in cityList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+          <div
+            :style="{
+              alignItems: 'center',
+              margin: '0 10px 0 0',
+              display: 'flex',
+            }"
+          >
+            <label
+              :style="{
+                margin: '0 10px 0 0',
+                whiteSpace: 'nowrap',
+                color: '#666',
+                display: 'inline-block',
+                lineHeight: '40px',
+                fontSize: 'inherit',
+                fontWeight: '500',
+                height: '40px',
+              }"
+              class="item-label"
+              >归属县旗</label
+            >
+            <el-select
+              style="width: 100%"
+              v-model="searchForm.compId"
+              placeholder="归属县旗名称"
+              @keydown.enter.native="search()"
+              clearable
+            >
+              <el-option
+                v-for="item in compList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+
           <el-button class="search" type="success" @click="search()">
             <span
               class="icon iconfont icon-fangdajing07"
@@ -159,6 +233,7 @@
             type="index"
             width="50"
           />
+
           <el-table-column
             :resizable="true"
             :sortable="true"
@@ -172,63 +247,64 @@
           <el-table-column
             :resizable="true"
             :sortable="true"
-            prop="voltageLevel"
-            label="电压等级"
+            prop="cityName"
+            label="归属市名称"
           >
             <template slot-scope="scope">
-              {{ scope.row.voltageLevel }}
+              {{ scope.row.cityName }}
             </template>
           </el-table-column>
           <el-table-column
             :resizable="true"
             :sortable="true"
-            prop="mainNum"
-            label="主变台数"
+            prop="compName"
+            label="归属旗县"
           >
             <template slot-scope="scope">
-              {{ scope.row.mainNum }}
+              {{ scope.row.compName }}
             </template>
           </el-table-column>
           <el-table-column
             :resizable="true"
             :sortable="true"
-            prop="mainCapacity"
-            label="主变容量(MVA)"
+            prop="voltageLevel"
+            label="电压等级"
           >
             <template slot-scope="scope">
-              {{ scope.row.mainCapacity }}
+              {{ scope.row.voltageLevel }}
             </template>
           </el-table-column>
           <el-table-column
             :resizable="true"
             :sortable="true"
-            prop="alarmThreshold"
-            label="负荷报警阀值"
+            prop="mainNum"
+            label="主变台数"
           >
             <template slot-scope="scope">
-              {{ scope.row.alarmThreshold }}
+              {{ scope.row.mainNum }}
             </template>
           </el-table-column>
           <el-table-column
             :resizable="true"
             :sortable="true"
-            prop="cityName"
-            label="归属市名称"
+            prop="mainCapacity"
+            label="主变容量(MVA)"
           >
             <template slot-scope="scope">
-              {{ scope.row.cityName }}
+              {{ scope.row.mainCapacity }}
             </template>
           </el-table-column>
           <el-table-column
             :resizable="true"
             :sortable="true"
-            prop="compName"
-            label="归属旗县"
+            prop="alarmThreshold"
+            label="负荷报警阀值"
           >
             <template slot-scope="scope">
-              {{ scope.row.compName }}
+              {{ scope.row.alarmThreshold }}
             </template>
           </el-table-column>
+
           <el-table-column
             :resizable="true"
             :sortable="true"
@@ -350,11 +426,16 @@
 <script>
 import AddOrUpdate from "./components/add-or-update";
 import LineList from "./components/line-list";
+import { myMixin } from "./selectMixin";
+
 export default {
+  mixins: [myMixin],
   data() {
     return {
       searchForm: {
         subName: "",
+        cityId: "",
+        compId: "",
       },
       form: {},
       dataList: [],
@@ -364,9 +445,11 @@ export default {
       dataListLoading: false,
       dataListSelections: [],
       layouts: ["prev", "pager", "next", "sizes"],
+      compList: [],
     };
   },
   created() {
+    this.getCityList();
     this.getDataList();
   },
   mounted() {},
@@ -376,6 +459,24 @@ export default {
     LineList,
   },
   methods: {
+    // 获取公司列表
+    async getCompList() {
+      this.searchForm.compName = undefined;
+      this.compList = [];
+      const { data } = await this.$http({
+        url: `/company/lists`,
+        method: "get",
+        params: {
+          cityId: this.searchForm.cityId,
+        },
+      });
+      if (data && data.code === 0) {
+        this.compList = data.data.map((item) => ({
+          label: item.compName,
+          value: String(item.id),
+        }));
+      }
+    },
     search() {
       this.pageIndex = 1;
       this.getDataList();
@@ -398,6 +499,12 @@ export default {
       ) {
         params["subName"] = "%" + this.searchForm.subName + "%";
       }
+      if (this.searchForm.cityId != "" && this.searchForm.cityId != undefined) {
+        params["cityId"] = Number(this.searchForm.cityId);
+      }
+      if (this.searchForm.compId != "" && this.searchForm.compId != undefined) {
+        params["compId"] = Number(this.searchForm.compId);
+      }
       this.$http({
         url: "/sub/page",
         method: "get",

src/views/modules/station/selectMixin.js

@@ -0,0 +1,23 @@
+// mixin.js
+export const myMixin = {
+  data() {
+    return {
+      cityList: [],
+    }
+  },
+  methods: {
+       //获取市列表
+    async getCityList() {
+      const { data } = await this.$http({
+        url: `/city/lists`,
+        method: "get",
+      });
+      if (data && data.code === 0) {
+        this.cityList = data.data.map((item) => ({
+          label: item.cityName,
+          value: item.id,
+        }));
+      }
+    },
+  }
+}