61850配置添加服务端管理和控制台

src/App.vue

@@ -30,6 +30,8 @@ export default {
     },
     getSocketData(res) {
       console.log(res);
+      // let a = JsON.parse(res.detail);
+      // console.log(a.type);
       this.$notify({
         title: "告警",
         message: res.detail.data,

src/components/Sidebar.vue

@@ -60,19 +60,33 @@ export default {
           subs: [
             {
               path: "/icdConfig",
-              name: "icd配置",
+              name: "客户端lcd配置",
             },
             {
               path: "/paramBinding",
-              name: "icd绑定",
+              name: "客户端lcd绑定",
             },
             {
               path: "/rptparam",
-              name: "rptparam配置",
+              name: "客户端RptParam绑定",
             },
+
+            {
+              path: "/clientDownFile",
+              name: " 客户端采集文件配置",
+            },
+            {
+              path: "/serverIcd",
+              name: " 服务端lcd管理",
+            },
+            {
+              path: "/mappingConfig",
+              name: " 采集转换映射配置",
+            },
+
             {
               path: "/iecserver",
-              name: "IEC服务器",
+              name: "控制台",
             },
           ],
         },

src/router/index.js

@@ -119,7 +119,7 @@ const routes = [
         component: () => import("../views/icdConfig/index.vue"),
         name: "icdConfig",
         meta: {
-          title: "icd配置",
+          title: "客户端lcd配置",
         },
       },
       {
@@ -127,7 +127,7 @@ const routes = [
         component: () => import("../views/paramBinding/index.vue"),
         name: "paramBinding",
         meta: {
-          title: "icd绑定",
+          title: "客户端lcd绑定",
         },
       },
       {
@@ -135,7 +135,52 @@ const routes = [
         component: () => import("../views/rptparam/index.vue"),
         name: "rptparam",
         meta: {
-          title: "rptparam配置",
+          title: "客户端RptParam绑定",
+        },
+      },
+      {
+        path: "/clientDownFile",
+        component: () => import("../views/clientDownFile/index.vue"),
+        name: "clientDownFile",
+        meta: {
+          title: "客户端采集文件配置",
+        },
+        redirect: "/clientDownFile/server",
+        children: [
+          {
+            path: "/clientDownFile/server",
+            component: () => import("../views/clientDownFile/server/index.vue"),
+            name: "server",
+            meta: {
+              title: "下载文件配置",
+            },
+          },
+
+          {
+            path: "/clientDownFile/downrecord",
+            component: () =>
+              import("../views/clientDownFile/downrecord/index.vue"),
+            name: "downrecord",
+            meta: {
+              title: "下载记录",
+            },
+          },
+        ],
+      },
+      {
+        path: "/serverIcd",
+        component: () => import("../views/serverIcd/index.vue"),
+        name: "serverIcd",
+        meta: {
+          title: "服务端lcd管理",
+        },
+      },
+      {
+        path: "/mappingConfig",
+        component: () => import("../views/mappingConfig/index.vue"),
+        name: "mappingConfig",
+        meta: {
+          title: "采集转换映射配置",
         },
       },
       {
@@ -155,12 +200,6 @@ const routes = [
         },
       },
       {
-        path: "/I2config",
-        component: () => import("../views/I2config/index.vue"),
-        name: "I2config",
-        meta: {
-          title: "I2配置",
-        },
         path: "/I2config",
         component: () => import("../views/I2config/index.vue"),
         name: "I2config",
@@ -202,13 +241,7 @@ const routes = [
         meta: {
           title: "数据转移",
         },
-        path: "/dataTransfer",
-        component: () => import("../views/dataTransfer/index.vue"),
-        name: "dataTransfer",
         redirect: "/dataTransfer/server",
-        meta: {
-          title: "数据转移",
-        },
         children: [
           {
             path: "/dataTransfer/server",

src/utils/api/index.js

@@ -130,7 +130,17 @@ export function icdFileApi(data) {
     },
   });
 }
-
+//查询客户端icd文件的IED列表
+export function listIedApi(data) {
+  return request({
+    url: "/icdconfig/listIed",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
 //查询data表名
 export function tableListApi(data) {
   return request({
@@ -182,6 +192,43 @@ export function generateRptApi(data) {
   });
 }
 
+// /icdconfig/listled 查询客户端icd文件的IED列表
+export function listIedConfigApi(data) {
+  return request({
+    url: "/icdconfig/listIed",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//开始实时采集转发
+
+export function startCollectApi(data) {
+  return request({
+    url: "/icdconfig/startCollect",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//停止实时采集转发
+
+export function stopCollectApi(data) {
+  return request({
+    url: "/icdconfig/stopCollect",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
 //设备台账管理列表api
 //变电站相关接口
 //新增
@@ -951,3 +998,71 @@ export function serverstopApi(data) {
     },
   });
 }
+
+//上传服务端icd文件 /iecserver/upload
+
+//​/iecserver​/listFile查询服务端icd文件列表
+export function ieclistFileApi(data) {
+  return request({
+    url: "/iecserver/listFile",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//61850下载文件相关接口 Ied Dl Controller
+//获取所有列表
+export function ieddlServerApi(data) {
+  return request({
+    url: "/ieddl/listAll",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//新增
+
+export function ieddlAddApi(data) {
+  return request({
+    url: "/ieddl/add",
+    method: "post",
+    data,
+  });
+}
+//修改
+export function ieddlUpdateApi(data) {
+  return request({
+    url: "/ieddl/update",
+    method: "post",
+    data,
+  });
+}
+
+//删除导出类型
+export function ieddlDelApi(data) {
+  return request({
+    url: "/ieddl/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//下载记录
+export function ieddlDownloadAllApi(data) {
+  return request({
+    url: "/ieddl/listDownload",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}

src/views/clientDownFile/downrecord/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="recordBoxdown">
+    <div class="reportHead">
+      <h3>下载记录</h3>
+    </div>
+    <div class="page-body">
+      <div class="title">
+        <span>选择服务器：</span>
+        <el-select v-model="serverVal" @change="changeServer">
+          <el-option
+            v-for="item in serverOption"
+            :key="item.id"
+            :label="item.sensor.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="zsbTableBox">
+        <el-table
+          :data="recordData"
+          style="width: 100%"
+          height="calc(100% - 0px)"
+          v-loading="recordLoading"
+        >
+          <el-table-column label="文件名称">
+            <template slot-scope="scope">
+              <span>{{ scope.row.config.sensor.name }}</span>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="id" prop="id">
+            <template slot-scope="scope">
+              <span>{{ scope.row.id }}</span>
+            </template>
+          </el-table-column> -->
+          <el-table-column label="path" prop="path">
+            <template slot-scope="scope">
+              <span>{{ scope.row.path }}</span>
+            </template>
+          </el-table-column>
+
+          <!-- <el-table-column label="path" prop="path">
+            <template slot-scope="scope">
+              <span>{{ scope.row.path }}</span>
+            </template>
+          </el-table-column> -->
+          <el-table-column label="filename" prop="filename">
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                @click="downFile(scope.row)"
+                class="buttonText"
+                >{{ scope.row.filename }}</el-button
+              >
+              <!-- <span>{{ scope.row.filename }}</span> -->
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" prop="createTime">
+            <template slot-scope="scope">
+              <span>{{ scope.row.createTime }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pageNation">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+            :current-page="page"
+            :page-size="pageSize"
+            :page-sizes="[20, 40, 100]"
+            layout="sizes, prev, pager, next, jumper,total"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ieddlDownloadAllApi, ieddlServerApi } from "@/utils/api/index";
+// import addzsbDialog from "./components/addzsbDialog";
+export default {
+  name: "record",
+  components: {},
+  data() {
+    return {
+      recordData: [],
+      recordLoading: false,
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+      serverOption: [{ id: -1, sensor: { name: "全部" } }], //服务器名称
+      serverVal: "",
+    };
+  },
+  created() {
+    this.getServerList();
+  },
+  mounted() {},
+  watch: {},
+  methods: {
+    //获取服务器
+    getServerList() {
+      ieddlServerApi()
+        .then((res) => {
+          console.log(res);
+          this.serverOption = this.serverOption.concat(res.data);
+          console.log(this.serverOption);
+          this.serverVal = this.serverOption[0].id;
+          this.getdownAll();
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //切换服务器
+    //选中的值获取tablename
+    changeServer(val) {
+      console.log(val);
+      let selectedOption = this.serverOption.find((item) => item.id === val);
+      if (selectedOption) {
+        // 如果找到了匹配的项，访问它的 tablename
+        this.serverVal = selectedOption.id;
+        console.log(this.serverVal); // 或者根据你的需求使用 tablename
+        this.getdownAll();
+      }
+    },
+    getdownAll() {
+      console.log(this.serverVal);
+      let params = { pageNum: this.page, pageSize: this.pageSize };
+      if (this.serverVal !== -1) {
+        params.configId = this.serverVal;
+      }
+      ieddlDownloadAllApi(params)
+        .then((res) => {
+          console.log(res);
+          this.recordData = res.data.content;
+          this.total = res.data.totalPages;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //下载文件
+    downFile(row) {
+      // 创建一个新的a标签元素
+      const a = document.createElement("a");
+      // 设置a标签的href属性为文件的URL
+      a.href = row.path;
+      console.log(a.href);
+      // 设置文件名（可选，取决于服务器配置）
+      a.download = row.filename; // 你希望保存的文件名
+      // 触发点击事件
+      document.body.appendChild(a);
+      a.click();
+      // 然后移除a标签
+      document.body.removeChild(a);
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.recordData = [];
+      this.getdownAll();
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.recordData = [];
+      this.getdownAll();
+    },
+  },
+};
+</script>
+<style lang="less">
+.recordBoxdown {
+  width: 100%;
+  height: 100%;
+  .page-body {
+    width: calc(100% - 24px);
+    height: calc(100% - 74px);
+    padding: 12px;
+    background: #eee;
+    .title {
+      display: flex;
+      align-items: center;
+      span {
+        color: #000;
+        font-size: 14px;
+      }
+    }
+    .zsbTableBox {
+      margin-top: 8px;
+      height: calc(100% - 72px);
+      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+      .pageNation {
+        margin-top: 6px;
+        display: flex;
+        justify-content: flex-end;
+      }
+      .buttonText {
+        cursor: pointer;
+        white-space: pre-wrap;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/clientDownFile/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="clientDownFileBox">
+    <div class="equimentList">
+      <div class="sideNav">
+        <h3><i class="el-icon-s-tools"></i>客户端下载文件配置</h3>
+        <ul class="navList">
+          <li v-for="(item, index) in navlist" :key="index">
+            <router-link :to="item.path">
+              <span>{{ item.name }}</span
+              ><i class="el-icon-arrow-right"></i>
+            </router-link>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="reportTable">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+<script>
+import {} from "@/utils/api/index";
+export default {
+  name: "clientDownFile",
+  components: {},
+  data() {
+    return {
+      activeIndex: 0,
+      navlist: [
+        {
+          name: "下载文件配置",
+          path: "/clientDownFile/server",
+        },
+
+        {
+          name: "下载记录",
+          path: "/clientDownFile/downrecord",
+        },
+      ],
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  methods: {},
+};
+</script>
+<style lang="less">
+.clientDownFileBox {
+  display: flex;
+  height: 100%;
+  .equimentList {
+    min-width: 240px;
+    max-width: 240px;
+    height: 100%;
+    overflow: auto;
+    //border: 1px solid #fff;
+    margin-right: 24px;
+    background: rgba(8, 9, 36, 0.28);
+
+    box-shadow: inset 0 4px 44px 0 #106cde;
+    //padding: 0px 12px;
+    .sideNav {
+      margin: 10px;
+
+      height: calc(100% - 20px);
+      background-color: #fff;
+    }
+    h3 {
+      font-weight: normal;
+      display: block;
+      height: 38px;
+      line-height: 36px;
+      margin: 0;
+      padding: 0 16px 0 16px;
+      -webkit-text-shadow: none !important;
+      text-shadow: none !important;
+      font-size: 14px;
+      text-decoration: none;
+      color: #262626;
+      display: flex;
+      align-items: center;
+      i {
+        margin-right: 6px;
+      }
+      .el-tag {
+        margin-left: auto;
+        cursor: pointer;
+      }
+    }
+    .navList {
+      box-shadow: inset 0 4px 4px -2px rgba(0, 0, 0, 0.15),
+        inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15);
+      position: relative;
+      background-color: #fbfbfb;
+      li {
+        padding: 0 16px 0 38px;
+        color: #262626;
+        height: 38px;
+        line-height: 36px;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: "";
+          display: block;
+          position: absolute;
+          z-index: 1;
+          left: 23px;
+          top: 0;
+          bottom: 19px;
+          border-left: 1px solid #e2e2e2;
+        }
+        &:hover {
+          a {
+            cursor: pointer;
+            color: #106cde;
+          }
+        }
+        a {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          color: #262626;
+          &::before {
+            content: "";
+            display: inline-block;
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            left: -18px;
+            top: 16px;
+            background-color: #fff;
+            border: 1px solid #e2e2e2;
+            z-index: 2;
+            border-radius: 4px;
+          }
+        }
+        .router-link-active {
+          color: #106cde;
+        }
+      }
+    }
+  }
+  .reportTable {
+    flex: 1;
+    overflow-x: hidden;
+    background: rgba(8, 9, 36, 0.28);
+    // -webkit-backdrop-filter: blur(10px);
+    // backdrop-filter: blur(10px);
+    box-shadow: inset 0 4px 44px 0 #106cde;
+    padding: 0px 12px;
+    .reportHead {
+      height: 40px;
+      line-height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      h3 {
+        font-size: 14px;
+        color: #fff;
+        font-weight: normal;
+        height: 40px;
+        line-height: 40px;
+      }
+    }
+    .el-table .el-table__cell {
+      text-align: center;
+    }
+    .editClass {
+      .el-link.el-link--primary {
+        margin-right: 14px;
+      }
+    }
+  }
+}
+</style>

src/views/clientDownFile/server/components/addserverDialog.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="filedAddBoxServer">
+    <el-dialog
+      class="AddDialogBox"
+      :title="title"
+      :visible.sync="serverDialogShow"
+      @close="hide"
+      width="520px"
+      :close-on-click-modal="false"
+    >
+      <div class="filedInfo">
+        <el-form
+          label-position="left"
+          ref="formInforef"
+          label-width="104px"
+          :rules="rules"
+          :model="formInfo"
+        >
+          <el-form-item label="IED：" prop="iedId">
+            <el-select v-model="formInfo.iedId" filterable placeholder="请选择">
+              <el-option
+                v-for="item in iedOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="传感器：" prop="devId">
+            <el-select v-model="formInfo.devId" filterable placeholder="请选择">
+              <el-option
+                v-for="item in devIdOptions"
+                :key="item.devId"
+                :label="item.name"
+                :value="item.devId"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="路径：" prop="path">
+            <el-input
+              type="textarea"
+              :autosize="{ minRows: 4, maxRows: 4 }"
+              v-model="formInfo.path"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="下载文件：" prop="suffix">
+            <el-select v-model="formInfo.suffix" placeholder="请选择">
+              <el-option
+                v-for="item in suffixOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态：" prop="active">
+            <el-radio-group v-model="formInfo.active">
+              <el-radio :label="1">启用</el-radio>
+              <el-radio :label="0">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="下载后删除：" prop="todel">
+            <el-radio-group v-model="formInfo.todel">
+              <el-radio :label="1">是</el-radio>
+              <el-radio :label="0">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="hide">取 消</el-button>
+        <el-button type="primary" @click="submitForm()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  ieddlAddApi,
+  ieddlUpdateApi,
+  listIedApi,
+  monitoringListAllApi,
+} from "@/utils/api/index";
+export default {
+  props: ["title"],
+  data() {
+    return {
+      serverDialogShow: false,
+      formInfo: {
+        active: 1,
+        todel: 0,
+      },
+      rules: {},
+      pathObjects: [], // 用于存储转换后的对象数组
+      suffixOptions: [
+        {
+          value: "全部",
+          label: "",
+        },
+        {
+          value: "dat",
+          label: "dat",
+        },
+      ],
+      iedOptions: [],
+      devIdOptions: [],
+    };
+  },
+  created() {},
+  mounted() {
+    // 初始化时，给每个对象添加 selected 和 value 属性
+  },
+  watch: {},
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      this.formInfo = JSON.parse(JSON.stringify(val));
+    },
+    submitForm() {
+      this.$refs.formInforef.validate((valid) => {
+        if (valid) {
+          if (this.title == "新增客户端服务器") {
+            console.log(this.formInfo);
+            // const pathArray = this.formInfo.pathList
+            //   .split("\n")
+            //   .map((path) => path.trim())
+            //   .filter((path) => path);
+            let params = {
+              devId: this.formInfo.devId,
+              iedId: this.formInfo.iedId,
+
+              path: this.formInfo.path,
+              active: this.formInfo.active,
+              todel: this.formInfo.todel,
+              suffix: this.formInfo.suffix,
+            };
+            console.log(params);
+            ieddlAddApi(params)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getServerList(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          } else {
+            console.log(this.formInfo);
+            // const pathArray = this.formInfo.pathList
+            //   .split("\n")
+            //   .map((path) => path.trim())
+            //   .filter((path) => path);
+            let params = {
+              id: this.formInfo.id,
+              devId: this.formInfo.devId,
+              iedId: this.formInfo.iedId,
+              path: this.formInfo.path,
+              active: this.formInfo.active,
+              todel: this.formInfo.todel,
+              suffix: this.formInfo.suffix,
+            };
+            ieddlUpdateApi(params)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getServerList(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //获取查询客户端icd文件的IED列表
+    getlistIed() {
+      listIedApi()
+        .then((res) => {
+          console.log(res);
+          this.iedOptions = res.data;
+        })
+        .catch((err) => {});
+    },
+    //获取传感器
+    getmonitorList() {
+      monitoringListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.devIdOptions = res.data;
+        })
+        .catch((err) => {});
+    },
+    //获取监测设备类型
+
+    display() {
+      this.serverDialogShow = true;
+      this.getlistIed();
+      this.getmonitorList();
+    },
+    hide() {
+      this.serverDialogShow = false;
+      console.log("我关闭了");
+      this.formInfo = {};
+      this.$refs.formInforef.resetFields(); // 重置表单字段值
+      console.log(this.formInfo);
+    },
+  },
+};
+</script>
+<style lang="less">
+.filedAddBoxServer {
+  .AddDialogBox {
+    .el-select {
+      width: 376px;
+    }
+    .filedInfo {
+      .colListBox {
+        overflow: auto;
+        height: 400px;
+        .coltitle {
+          display: flex;
+          align-items: center;
+          margin-bottom: 8px;
+          span {
+            font-weight: bold;
+            &:first-child {
+              width: 40%;
+              margin-right: 24px;
+            }
+            &:last-child {
+              width: 50%;
+            }
+          }
+        }
+        .selectCol {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+          .el-checkbox {
+            width: 40%;
+            margin-right: 24px;
+          }
+          .el-input {
+            width: 50%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/clientDownFile/server/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="ieddlServer">
+    <div class="reportHead">
+      <h3>客户端服务器</h3>
+    </div>
+    <div class="page-body">
+      <el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
+        >新增</el-button
+      >
+      <div class="zsbTableBox">
+        <el-table
+          :data="serverData"
+          style="width: 100%"
+          height="calc(100% - 0px)"
+        >
+          <el-table-column label="ied名称" prop="name">
+            <template slot-scope="scope">
+              <span>{{ scope.row.ied.name }}</span>
+            </template></el-table-column
+          >
+          <el-table-column label="传感器名称" prop="name">
+            <template slot-scope="scope">
+              <span>{{ scope.row.sensor.name }}</span>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="端口" prop="port">
+            <template slot-scope="scope">
+              <span>{{ scope.row.port }}</span>
+            </template>
+          </el-table-column> -->
+          <el-table-column label="路径" prop="path">
+            <!-- <template slot-scope="scope">
+              <p v-for="(item, index) in scope.row.pathList">
+                {{ item }}
+              </p>
+            </template> -->
+          </el-table-column>
+          <el-table-column label="状态" prop="active">
+            <template slot-scope="scope">
+              <span>{{ scope.row.active == 1 ? "启用" : "停用" }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="下载文件后缀" prop="suffix">
+          </el-table-column>
+          <el-table-column label="操作" 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>
+    <addserverDialog ref="serverAddRef" :title="title"></addserverDialog>
+  </div>
+</template>
+<script>
+import { ieddlServerApi, ieddlDelApi } from "@/utils/api/index";
+import addserverDialog from "./components/addserverDialog";
+export default {
+  components: {
+    addserverDialog,
+  },
+  name: "server",
+  data() {
+    return {
+      filedLoading: false,
+      serverData: [],
+      title: "",
+    };
+  },
+  created() {
+    this.getServerList();
+  },
+  mounted() {},
+  watch: {},
+  methods: {
+    //获取字段映射
+    getServerList() {
+      this.filedLoading = true;
+      ieddlServerApi()
+        .then((res) => {
+          console.log(res);
+          this.serverData = res.data;
+
+          this.filedLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //新增
+    handleAddClick() {
+      this.title = "新增客户端服务器";
+      this.$refs.serverAddRef.display();
+    },
+    handleEditClick(data) {
+      this.title = "修改";
+      this.$refs.serverAddRef.display();
+      this.$refs.serverAddRef.getdataform(data);
+    },
+    //删除数据
+    handleDeleteClick(data) {
+      console.log(data);
+      this.$confirm(`确定要删除${data.ied.name}客户端服务器记录吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          ieddlDelApi({ id: data.id }).then((res) => {
+            if (res.success) {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "success",
+                message: "删除成功",
+              });
+              this.getServerList(); //刷新
+            } else {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "error",
+                message: res.errorMsg,
+              });
+            }
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.ieddlServer {
+  width: 100%;
+  height: 100%;
+  .page-body {
+    width: calc(100% - 24px);
+    height: calc(100% - 74px);
+    padding: 12px;
+    background: #eee;
+    .zsbTableBox {
+      margin-top: 8px;
+      height: calc(100% - 38px);
+      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+</style>

src/views/iceserver/index.vue

@@ -1,51 +1,96 @@
 <template>
   <div class="iceConfig">
-    <div
-      class="cardBox"
-      v-loading="serveLoading"
-      element-loading-text="请稍等"
-      element-loading-spinner="el-icon-loading"
-      element-loading-background="rgba(0, 0, 0, 0.7)"
-    >
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span> IEC服务器状态</span>
-        </div>
-        <div class="concard">
-          <p>端口：{{ port }}</p>
-          <p>filename：{{ filename }}</p>
-          <div class="flieSet">
-            <h5>选择文件：</h5>
-            <el-select
-              v-model="fileNameVal"
-              placeholder="请选择"
-              :disabled="serverStatus"
-            >
-              <el-option
-                v-for="item in icdFileOptions"
-                :key="item.id"
-                :label="item.filename"
-                :value="item.id"
+    <div class="left">
+      <div
+        class="cardBox"
+        v-loading="serveLoading"
+        element-loading-text="请稍等"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.7)"
+      >
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span> IEC服务器状态</span>
+          </div>
+          <div class="concard">
+            <p>端口：{{ port }}</p>
+            <p>filename：{{ filename }}</p>
+            <div class="flieSet">
+              <h5>选择文件：</h5>
+              <el-select
+                v-model="fileNameVal"
+                placeholder="请选择"
+                :disabled="serverStatus"
               >
-              </el-option>
-            </el-select>
+                <el-option
+                  v-for="item in icdFileOptions"
+                  :key="item.id"
+                  :label="item.filename"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <p>
+              服务器状态：
+              <el-tag type="success" v-if="serverStatus">开启</el-tag>
+              <el-tag type="danger" v-else>关闭</el-tag>
+            </p>
+            <el-switch
+              v-model="serverVal"
+              active-text="服务器开启"
+              inactive-text="服务器关闭"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              @change="changeStatus"
+            >
+            </el-switch>
           </div>
-          <p>
-            服务器状态：
-            <el-tag type="success" v-if="serverStatus">开启</el-tag>
-            <el-tag type="danger" v-else>关闭</el-tag>
-          </p>
-          <el-switch
-            v-model="serverVal"
-            active-text="服务器开启"
-            inactive-text="服务器关闭"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
-            @change="changeStatus"
-          >
-          </el-switch>
-        </div>
-      </el-card>
+        </el-card>
+      </div>
+    </div>
+    <el-divider direction="vertical"></el-divider>
+    <div class="right">
+      <div
+        class="cardBox2"
+        v-loading="ledLoading"
+        element-loading-text="请稍等"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.7)"
+      >
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span> 订阅转发</span>
+          </div>
+          <div class="concard">
+            <el-table
+              :data="ledList"
+              border
+              style="width: 100%"
+              max-height="400px"
+            >
+              <el-table-column prop="name" label="名称" width="150px">
+              </el-table-column>
+              <el-table-column prop="ip" label="ip" width="100px">
+              </el-table-column>
+
+              <el-table-column fixed="right" label="操作" width="200px">
+                <template slot-scope="scope">
+                  <el-switch
+                    v-model="scope.row.start"
+                    active-text="开启"
+                    inactive-text="关闭"
+                    active-color="#13ce66"
+                    inactive-color="#ff4949"
+                    @change="changeIedStatus(scope.row)"
+                  >
+                  </el-switch>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+      </div>
     </div>
   </div>
 </template>
@@ -54,7 +99,10 @@ import {
   serverstartApi,
   serverstatusApi,
   serverstopApi,
-  icdFileApi,
+  ieclistFileApi,
+  listIedConfigApi,
+  startCollectApi,
+  stopCollectApi,
 } from "@/utils/api/index";
 
 export default {
@@ -68,11 +116,14 @@ export default {
       fileNameVal: "",
       icdFileOptions: [],
       serveLoading: false,
+      ledList: [],
+      ledLoading: false,
     };
   },
   mounted() {
     this.geticeStatus(); //获取iedName列表
     this.getIcdListFile();
+    this.getLedList(); //获取LedList列表
   },
   methods: {
     //获取ice服务器状态
@@ -154,7 +205,7 @@ export default {
       }
     },
     getIcdListFile() {
-      icdFileApi()
+      ieclistFileApi()
         .then((res) => {
           if (res.success) {
             console.log(res);
@@ -175,6 +226,73 @@ export default {
           console.log(err); //代码错误、请求失败捕获
         });
     },
+
+    //获取ledList列表
+    getLedList() {
+      listIedConfigApi()
+        .then((res) => {
+          console.log(res);
+          this.ledList = res.data;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    changeIedStatus(val) {
+      this.ledLoading = true;
+      if (val.start) {
+        startCollectApi({
+          iedId: val.id,
+        })
+          .then((res) => {
+            if (res.success) {
+              console.log(res);
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "服务器开始成功",
+                type: "success",
+              });
+              this.getLedList();
+              this.ledLoading = false;
+            } else {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: res.errorMsg,
+                type: "error",
+              });
+              this.getLedList();
+              this.ledLoading = false;
+            }
+          })
+          .catch((err) => {
+            console.log(err); //代码错误、请求失败捕获
+          });
+      } else {
+        stopCollectApi({
+          iedId: val.id,
+        })
+          .then((res) => {
+            if (res.success) {
+              console.log(res);
+              this.ledLoading = false;
+              this.getLedList();
+            } else {
+              this.ledLoading = false;
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: res.errorMsg,
+                type: "error",
+              });
+            }
+          })
+          .catch((err) => {
+            console.log(err); //代码错误、请求失败捕获
+          });
+      }
+    },
   },
 };
 </script>
@@ -183,13 +301,23 @@ export default {
   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%;
+  display: flex;
+  .left {
+    width: 50%;
+  }
+  .right {
+    width: 50%;
+  }
+  .el-divider--vertical {
+    height: 100%;
+  }
   .cardBox {
     width: 360px;
     margin-top: 20px;
+    height: 240px;
     .el-card__header {
       padding: 12px;
     }
@@ -218,5 +346,17 @@ export default {
       }
     }
   }
+  .cardBox2 {
+    width: 480px;
+    margin-top: 20px;
+    margin-left: 12px;
+    //height: 472px;
+    .el-card__header {
+      padding: 12px;
+    }
+    .el-card__body {
+      padding: 12px;
+    }
+  }
 }
 </style>

src/views/mappingConfig/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="iceConfig">采集转换映射配置</div>
+</template>
+<script>
+import {} from "@/utils/api/index";
+
+export default {
+  components: {},
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="less">
+.iceConfig {
+  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%;
+}
+</style>

src/views/serverIcd/index.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="icdConfigBox">
+    <div class="configHead">
+      <div class="upgradeBox">
+        <h3 class="lableBox">文件上传：</h3>
+        <el-upload
+          class="upload-demo"
+          ref="upload"
+          action="/cac-api/iecserver/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="icdTableBox" v-if="icdTableData.length !== 0">
+        <el-table
+          v-loading="icdLoading"
+          :data="icdTableData"
+          stripe
+          border
+          style="width: 100%"
+          height="calc(100% - 40px)"
+        >
+          <el-table-column prop="filename" label="文件名称"> </el-table-column>
+          <el-table-column prop="md5" label="md5"> </el-table-column>
+          <el-table-column prop="start" label="是否启用">
+            <template slot-scope="scope">
+              <el-tag type="success" v-if="scope.row.start == 1">启用</el-tag>
+              <el-tag type="danger" v-else>未启用</el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="icdTableBox" v-else>
+        <el-empty description="暂无数据"></el-empty>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ieclistFileApi } from "@/utils/api/index";
+
+export default {
+  components: {},
+  data() {
+    return {
+      fileList: [], //上传列表
+      reportData: {},
+      icdTableData: [], //表格数据
+      icdLoading: true,
+    };
+  },
+  mounted() {
+    this.geticdList(); //获取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.geticdList(); //获取iedName列表
+      } else {
+        this.$message({
+          duration: 1500,
+          showClose: true,
+          message: res.errorMsg,
+          type: "error",
+        });
+        this.$refs.upload.clearFiles();
+      }
+    },
+    //获取ied左侧列表
+    geticdList() {
+      ieclistFileApi()
+        .then((res) => {
+          console.log(res);
+          this.icdTableData = res.data;
+          this.icdLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</script>
+<style lang="less">
+.icdConfigBox {
+  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 {
+    }
+    .grouprpt {
+      margin-left: auto;
+    }
+    // .clearBtn {
+    // }
+  }
+  .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: #3889cf;
+        }
+      }
+      .is-selected {
+        background: #3889cf;
+        color: #fff;
+        &:hover {
+          color: #fff;
+        }
+      }
+    }
+    .el-empty {
+      height: 100%;
+      .el-empty__image {
+        width: 100px;
+      }
+    }
+    .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;
+          }
+          .el-link.el-link--success {
+            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>