添加icd文件配置页面

src/components/Home.vue

@@ -33,15 +33,8 @@ export default {
   background-position: center center;
 
   .content-box {
-    position: absolute;
+    width: 100%;
-    left: 0px;
+    height: calc(100% - 72px);
-    right: 0;
-    top: 72px;
-    bottom: 0;
-    //padding-bottom: 30px;
-    -webkit-transition: left 0.3s ease-in-out;
-    transition: left 0.3s ease-in-out;
-    // background: @background-color-base;
     .content {
       width: 100%;
       height: 100%;

src/components/Sidebar.vue

@@ -25,6 +25,10 @@ export default {
         //   path: "/systemManagement",
         //   name: "系统管理",
         // },
+        {
+          path: "/icdConfig",
+          name: "icd配置",
+        },
       ],
     };
   },

src/router/index.js

@@ -38,6 +38,14 @@ const routes = [
           title: "系统管理",
         },
       },
+      {
+        path: "/icdConfig",
+        component: () => import("../views/icdConfig/index.vue"),
+        name: "icdConfig",
+        meta: {
+          title: "icd配置",
+        },
+      },
     ],
   },
 ];

src/utils/api/index.js

@@ -26,6 +26,83 @@ export function getexportApi(data) {
     params: data,
   });
 }
+
+//icd上传文件
+export function icdUploadApi(data) {
+  return request({
+    url: "/icdconfig/upload",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "multipart/form-data", // set the content type to multipart/form-data
+    },
+  });
+}
+//icd查询全部类型列表
+export function icdListApi(data) {
+  return request({
+    url: "/icdconfig/list",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//ied查询全部类型列表
+export function iedListApi(data) {
+  return request({
+    url: "/icdconfig/iedList",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//icd删除
+export function icdDeleteApi(data) {
+  return request({
+    url: "/icdconfig/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//icd更新类型
+export function icdUpdateApi(data) {
+  return request({
+    url: "/icdconfig/update",
+    method: "post",
+    data,
+  });
+}
+
+//查询data表名
+export function tableListApi(data) {
+  return request({
+    url: "/icdconfig/tableList",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//查询data表字段名
+export function colListApi(data) {
+  return request({
+    url: "/icdconfig/colList",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
 // export function getexportApi() {
 //   return request({
 //     url: "/sensor/export",

src/views/icdConfig/index.vue

@@ -0,0 +1,467 @@
+<template>
+  <div class="icdConfig">
+    <div class="configHead">
+      <div class="upgradeBox">
+        <h3 class="lableBox">文件上传：</h3>
+        <el-upload
+          class="upload-demo"
+          ref="upload"
+          action="/cac-api/icdconfig/upload"
+          :limit="1"
+          :file-list="fileList"
+          :data="reportData"
+          :auto-upload="false"
+          :on-success="handleAvatarSuccess"
+          @before-upload="beforeAvatarUpload"
+        >
+          <el-button slot="trigger" size="small" type="primary"
+            >选取文件</el-button
+          >
+        </el-upload>
+      </div>
+      <el-button
+        class="uploadBtn"
+        size="small"
+        type="primary"
+        @click="submitUpload"
+        >上传到服务器</el-button
+      >
+    </div>
+    <div class="iedContain">
+      <div class="leftMenu">
+        <p
+          class="iedame"
+          v-for="(item, index) in iedListData"
+          :key="index"
+          :class="{ 'is-selected': selectedIndex === index }"
+          @click="handleClick(item, index)"
+        >
+          <i class="el-icon-document"></i>{{ item }}
+        </p>
+      </div>
+      <div class="icdTableBox" v-if="iedListData.length !== 0">
+        <h3>{{ iedNameTitle }}</h3>
+        <el-table
+          v-loading="icdLoading"
+          :data="icdTableData"
+          stripe
+          border
+          style="width: 100%"
+          height="calc(100% - 40px)"
+        >
+          <el-table-column prop="iedName" label="iedName"> </el-table-column>
+          <el-table-column prop="ldeviceInst" label="ldeviceInst">
+          </el-table-column>
+          <el-table-column prop="lnClass" label="lnClass"> </el-table-column>
+          <el-table-column prop="doName" label="doName"> </el-table-column>
+          <el-table-column prop="tableName" label="tableName"></el-table-column>
+          <el-table-column prop="colName" label="colName"> </el-table-column>
+
+          <el-table-column label="操作" width="300" class-name="editClass">
+            <template slot-scope="scope">
+              <el-link
+                type="primary"
+                @click="handleEditClick(scope.row)"
+                size="small"
+                icon="el-icon-document"
+                >修改</el-link
+              >
+              <el-link
+                type="danger"
+                @click="handleDeleteClick(scope.row)"
+                size="small"
+                icon="el-icon-delete"
+                >删除</el-link
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <el-dialog
+      class="editDialogBox"
+      title="修改配置"
+      :visible.sync="editDialogshow"
+      width="520px"
+    >
+      <el-form
+        label-position="left"
+        ref="formInfo"
+        label-width="104px"
+        :rules="rules"
+        :model="formData"
+      >
+        <el-form-item label="tableName：" prop="tableName">
+          <el-select
+            v-model="formData.tableName"
+            placeholder="请选择"
+            @change="changeTablename"
+          >
+            <el-option
+              v-for="item in tableOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
+          </el-select>
+          <!-- <el-input
+            placeholder="请输入tableName"
+            v-model="formData.tableName"
+            autocomplete="off"
+          ></el-input> -->
+        </el-form-item>
+
+        <el-form-item label="colName：" prop="colName">
+          <el-select v-model="formData.colName" placeholder="请选择">
+            <el-option
+              v-for="item in colOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
+          </el-select>
+          <!-- <el-input
+            placeholder="请输入colName"
+            v-model="formData.colName"
+          ></el-input> -->
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="editDialogshow = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  iedListApi,
+  icdListApi,
+  icdUploadApi,
+  icdUpdateApi,
+  icdDeleteApi,
+  tableListApi,
+  colListApi,
+} from "@/utils/api/index";
+export default {
+  data() {
+    var validateInput = (rule, value, callback) => {
+      const reg = /^[a-zA-Z0-9_]+$/; // 允许英文、数字和下划线
+      if (!reg.test(value)) {
+        callback(new Error("请只输入英文、数字和下划线"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      fileList: [], //上传列表
+      reportData: {},
+      iedListData: [], //左侧ied列表
+      selectedIndex: 0, //默认选中第一个
+      iedNameTitle: "", //标题
+      icdTableData: [], //表格数据
+      icdLoading: true,
+      editDialogshow: false,
+      formData: {}, //需要修改的数据
+      rules: {
+        tableName: [
+          {
+            required: true,
+
+            validator: validateInput,
+            trigger: "blur",
+          },
+        ],
+
+        colName: [
+          {
+            required: true,
+
+            validator: validateInput,
+            trigger: "blur",
+          },
+          // { min: 6, max: 8, message: "请输入6-8位字符", trigger: "blur" },
+        ],
+      },
+      tableOptions: [],
+      colOptions: [],
+    };
+  },
+  mounted() {
+    this.getiedList(); //获取iedName列表
+  },
+  methods: {
+    //点击升级确定
+    beforeAvatarUpload(file) {
+      console.log(this.reportData.title);
+      console.log(file);
+    },
+    //上传apk
+    submitUpload() {
+      this.$refs.upload.submit();
+    },
+    handleAvatarSuccess(res, file) {
+      console.log(res);
+      if (res.success) {
+        this.$message({
+          duration: 1500,
+          showClose: true,
+          message: "文件上传成功",
+          type: "success",
+        });
+
+        this.$refs.upload.clearFiles();
+        this.getiedList(); //获取iedName列表
+      } else {
+        this.$message({
+          duration: 1500,
+          showClose: true,
+          message: "文件上传失败，请重新上传",
+          type: "error",
+        });
+        this.$refs.upload.clearFiles();
+      }
+    },
+    //获取ied左侧列表
+    getiedList() {
+      iedListApi()
+        .then((res) => {
+          console.log(res);
+          this.iedListData = res.data;
+          this.handleClick(res.data[0], 0);
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //通过iedname 获取列表
+    handleClick(item, index) {
+      this.selectedIndex = index;
+      console.log(item, index);
+      this.iedNameTitle = item;
+      this.icdLoading = true;
+      this.geticdList(item);
+      this.getTableList();
+    },
+    //获取修改的tableList和colLost
+    getTableList() {
+      tableListApi()
+        .then((res) => {
+          console.log(res);
+          this.tableOptions = res.data;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    changeTablename(val) {
+      this.formData.tableName = val;
+      this.getColList();
+    },
+    getColList() {
+      colListApi({ tableName: this.formData.tableName })
+        .then((res) => {
+          console.log(res);
+          this.colOptions = res.data;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //获取icd
+    geticdList(val) {
+      this.icdTableData = [];
+      icdListApi({
+        iedName: val,
+      })
+        .then((res) => {
+          console.log(res);
+          this.icdLoading = false;
+          this.icdTableData = res.data;
+        })
+        .catch((err) => {
+          this.icdLoading = false;
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //更新icd类型
+    handleEditClick(val) {
+      this.formData = { ...val };
+      this.editDialogshow = true;
+    },
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          icdUpdateApi(this.formData)
+            .then((res) => {
+              if (res.success) {
+                this.editDialogshow = false;
+                this.geticdList(this.formData.iedName);
+              }
+            })
+            .catch((err) => {});
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //删除icd类型配置
+    handleDeleteClick(val) {
+      console.log(val);
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          icdDeleteApi({
+            id: val.id,
+          })
+            .then((res) => {
+              console.log(res);
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "文件删除成功",
+                type: "success",
+              });
+              this.geticdList(val.iedName);
+            })
+            .catch((err) => {});
+          //this.getactivityList();
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.icdConfig {
+  width: calc(100% - 24px);
+  overflow-x: hidden;
+  background: rgba(8, 9, 36, 0.28);
+
+  box-shadow: inset 0 4px 44px 0 #106cde;
+  padding: 0px 12px;
+  height: 100%;
+  .configHead {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    display: flex;
+    align-items: center;
+
+    .upgradeBox {
+      display: flex;
+      .lableBox {
+        font-size: 14px;
+        font-weight: normal;
+        width: 78px;
+      }
+      .upload-demo {
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex-direction: row-reverse;
+        margin-right: 16px;
+        .el-upload-list {
+          width: 320px;
+          height: 32px;
+          line-height: 32px;
+          border: 1px solid #dcdfe6;
+          background: #fff;
+          margin-right: 12px;
+          border-radius: 4px;
+          .el-upload-list__item {
+            transition: none;
+            font-size: 14px;
+            color: #606266;
+            position: relative;
+            box-sizing: border-box;
+            border-radius: 4px;
+            width: 100%;
+            height: 32px;
+            line-height: 32px;
+            margin-top: 0px !important;
+            .el-icon-close {
+              top: 10px;
+            }
+          }
+        }
+      }
+    }
+    .uploadBtn {
+    }
+  }
+  .iedContain {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    margin-top: 10px;
+    height: calc(100% - 60px);
+    display: flex;
+    .leftMenu {
+      width: 200px;
+      //padding: 0px 10px 0px 10px;
+      height: calc(100% - 2px);
+      border: 1px solid #dcdfe6;
+      overflow-y: auto;
+      .iedame {
+        line-height: 28px;
+        height: 28px;
+        color: #333;
+        font-size: 14px;
+        padding-left: 10px;
+        padding-right: 10px;
+        cursor: pointer;
+        i {
+          margin-right: 4px;
+        }
+        &:hover {
+          background: #3889cf;
+          color: #fff;
+        }
+      }
+      .is-selected {
+        background: #3889cf;
+        color: #fff;
+      }
+    }
+
+    .icdTableBox {
+      flex: 1;
+      min-width: 0;
+      margin-left: 12px;
+      //border: 1px solid #dcdfe6;
+      height: calc(100% - 2px);
+      h3 {
+        height: 32px;
+        line-height: 32px;
+        margin-bottom: 8px;
+        color: #333;
+        font-size: 14px;
+      }
+      .el-table {
+        .editClass {
+          .el-link.el-link--primary {
+            margin-right: 14px;
+          }
+        }
+      }
+    }
+  }
+  .editDialogBox {
+    .el-dialog {
+      margin-top: 0 !important;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      .el-select {
+        width: 376px;
+      }
+    }
+  }
+}
+</style>

vue.config.js

@@ -20,8 +20,8 @@ module.exports = defineConfig({
     proxy: {
       "/cac-api": {
         //表示拦截以/api开头的请求路径
-        //target: "http://192.168.50.200:88", //200服务器
+        target: "http://192.168.1.190:88", //200服务器
-        target: "http://dev.xinyingpower.com:40080/", //dell服务器
+        //target: "http://dev.xinyingpower.com:40080/", //dell服务器
         changOrigin: true, //是否开启跨域
         pathRewrite: {
           "^/api": "/cac-api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
@@ -29,5 +29,4 @@ module.exports = defineConfig({
       },
     },
   },
-  assetsInclude: ["**/*.tga"],
 });