From c5794c24f4f9d2b22e57786c254f74f9651efded Mon Sep 17 00:00:00 2001
From: renpy <peiyu_ren@163.com>
Date: Mon, 4 Sep 2023 18:04:17 +0800
Subject: [PATCH] =?UTF-8?q?system=E6=A8=A1=E5=9D=97=20default=20Nuclide=20?=
 =?UTF-8?q?=E6=8A=A5=E8=AD=A6=E8=A7=84=E5=88=99=EF=BC=8C=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91=E5=8F=8A?=
 =?UTF-8?q?=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/views/system/DefaultNuclide/AlarmRule.vue | 339 +++++++++++++++
 .../system/DefaultNuclide/AutoProcess.vue     | 404 ++++++++++++++++++
 vue.config.js                                 |  13 +
 4 files changed, 757 insertions(+)
 create mode 100644 src/views/system/DefaultNuclide/AlarmRule.vue
 create mode 100644 src/views/system/DefaultNuclide/AutoProcess.vue

diff --git a/package.json b/package.json
index bbea7cf..44eb672 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "xss": "^1.0.13"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/polyfill": "^7.2.5",
     "@types/crypto-js": "^4.1.1",
     "@vue/cli-plugin-babel": "^3.3.0",
diff --git a/src/views/system/DefaultNuclide/AlarmRule.vue b/src/views/system/DefaultNuclide/AlarmRule.vue
new file mode 100644
index 0000000..8b213cf
--- /dev/null
+++ b/src/views/system/DefaultNuclide/AlarmRule.vue
@@ -0,0 +1,339 @@
+<template>
+  <div style="height: 100%;">
+    <div class="header">
+      <a-button type="primary" @click="handleAdd">
+          <img src="@/assets/images/global/add.png" alt="" />
+          Edit
+        </a-button>
+    </div>
+    <!-- 列表 -->
+    <div>
+      <custom-table
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :list="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        @change="handleTableChange"
+        :scroll="{ y: 'calc(100vh - 365px)' }"
+      >
+        <template slot="index" slot-scope="{ index }">
+          {{ index + 1 }}
+        </template>
+        <template slot="roles" slot-scope="{ text }">
+          <span v-for="role of text" :key="role.id">
+            {{ role.roleName }}
+          </span>
+        </template>
+      </custom-table>
+    </div>
+    <!-- 列表结束 -->
+    <a-modal 
+      title='Edit'
+      :width="845" 
+      v-model="visible" 
+      @ok="handleOk" 
+      destroy-on-close
+    >
+      <a-spin :spinning="spinning">
+        <div class="group-assign">
+          <a-transfer
+            :dataSource="dataList"
+            :target-keys="targetKeys"
+            show-search
+            :render="item => item.title"
+            :operations="['Assign', 'Remove']"
+            :titles="['Total Nuclides', 'User Nuclides']"
+            @change="handleChange"
+            @search="handleSearch"
+          >
+          </a-transfer>
+        </div>
+      </a-spin>
+      <template slot="footer">
+        <slot name="custom-footer"></slot>
+        <a-space class="operators" :size="20">
+          <a-button type="success" @click="handleOk" >Save</a-button>
+          <a-button type="warn" @click="onCancel">Cancel</a-button>
+        </a-space>
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { getAction, putAction } from '@/api/manage'
+const columns = [
+  {
+    title: 'NO',
+    align: 'left',
+    width: 170,
+    scopedSlots: {
+      customRender: 'index'
+    },
+    customHeaderCell: () => {
+      return {
+        style: {
+          'padding-left': '60px !important'
+        }
+      }
+    },
+    customCell: () => {
+      return {
+        style: {
+          'padding-left': '60px !important'
+        }
+      }
+    }
+  },
+  {
+    title: 'NUCLIDE NAME',
+    align: 'left',
+    dataIndex: 'nuclideName'
+  },
+  {
+    title: 'CREATE TIME',
+    align: 'left',
+    dataIndex: 'createTime'
+  },
+]
+export default {
+  data() {
+    return {
+      columns,
+      dataSource: [],
+      url: {
+        list: '/sys/defaultNuclide/findPage',
+      },
+      ipagination:{
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          const { current, pageSize } = this.ipagination
+          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      loading: false,
+      targetKeys: [],
+      visible: false,
+      dataList: [],
+      spinning: false
+    }
+  },
+  mounted () {
+    this.getRulesList();
+  },
+  methods: {
+    getRulesList() {
+      this.loading = true
+      let params = {
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize,
+        useType: 2
+      }
+      getAction(this.url.list, params).then(res => {
+        this.loading = false
+        if (res.success) {
+          this.dataSource = res.result.records
+          this.ipagination.total = res.result.total
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+        
+      })
+    },
+    handleTableChange(pagination, filters, sorter) {
+      this.ipagination.current = pagination.current
+      this.ipagination.pageSize = pagination.pageSize
+      this.getRulesList();
+    },
+    handleAdd() {
+      this.visible = true
+      this.spinning = true
+      this.getNuclideListAll()
+      this.getNuclideList()
+    },
+    getNuclideListAll() {
+      getAction("/gardsNuclLib/allName").then(res => {
+        this.spinning = false
+        if (res.success) {
+          if (res.result.length > 0) {
+            this.dataList = res.result.map((item,index) => {
+              return {
+                key: item,
+                title: item
+              }
+            })
+          } else {
+            this.dataList = []
+          }
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    getNuclideList() {
+      getAction("/sys/defaultNuclide/allName",{useType:2}).then(res => {
+        if (res.success) {
+          if (res.result.length > 0) {
+            this.targetKeys = res.result.map(item => item)
+          } else {
+            this.targetKeys = []
+          }
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    handleChange(targetKeys, direction, moveKeys) {
+      this.targetKeys= targetKeys;
+    },
+    handleSearch(dir, value) {
+      console.log('search:', dir, value)
+    },
+    handleOk() {
+      let params = {
+        nuclideNames: this.targetKeys,
+        useType: 2
+      }
+      putAction("/sys/defaultNuclide/add",params).then(res => {
+        this.visible = false
+        if (res.success) {
+          this.$message(res.message)
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    onCancel() {
+      this.visible = false
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.header{
+  height: 54px;
+  border-top: 1px solid rgba(12, 235, 201, 0.3);
+  border-bottom: 1px solid rgba(12, 235, 201, 0.3);
+  display: flex;
+  align-items: center;
+  background-color: rgba(12, 235, 201, 0.05);
+  padding: 0 10px;
+  margin-bottom: 18px;
+}
+.operators {
+  width: 100%;
+  justify-content: center;
+  .ant-btn {
+    width: 92px;
+  }
+}
+.group-assign{
+  position: relative;
+  width: 690px;
+  margin: 0 auto;
+  .ant-transfer {
+    margin-bottom: 10px;
+    ::v-deep {
+      .ant-transfer-list {
+        width: 291px;
+        height: 411px;
+        padding-top: 0;
+        &-header {
+          height: 37px;
+          &-selected {
+            span:first-child {
+              display: none;
+            }
+          }
+          &-title {
+            left: 16px;
+          }
+        }
+        &-body{
+          height: calc(100% - 37px);
+        }
+        &-content {
+          &-item {
+            &:hover {
+              background-color: transparent;
+            }
+          }
+        }
+  
+        &:last-child {
+          height: 411px;
+          position: relative;
+          // top: 35px;
+        }
+      }
+  
+      .ant-transfer-operation {
+        .ant-btn {
+          width: 92px;
+          height: 26px;
+          padding: 0;
+          .anticon {
+            display: none;
+          }
+          span {
+            margin-left: 0;
+          }
+          &:first-child {
+            margin-bottom: 52px;
+            &::after {
+              display: inline-block;
+              margin-left: 13px;
+              content: '';
+              width: 18px;
+              height: 10px;
+              background: url(~@/assets/images/system/transfer-right.png) no-repeat;
+              background-size: contain;
+            }
+          }
+          &:nth-child(2) {
+            &::before {
+              display: inline-block;
+              margin-right: 6px;
+              content: '';
+              width: 18px;
+              height: 10px;
+              background: url(~@/assets/images/system/transfer-left.png) no-repeat;
+              background-size: contain;
+              position: static;
+              opacity: initial;
+            }
+          }
+        }
+      }
+      .ant-transfer-list-header{
+        position: relative;
+        .ant-checkbox-wrapper{
+          position: absolute;
+          right: 10px;
+        }
+      }
+      .ant-transfer-list-content-item{
+        position: relative;
+        .ant-checkbox-wrapper{
+          position: absolute;
+          right: 10px;
+        }
+      }
+      .ant-transfer-list-content-item-text{
+        padding-left: 22px;
+      }
+    }
+  }
+}
+/deep/.ant-modal-title{
+  letter-spacing: 1px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/DefaultNuclide/AutoProcess.vue b/src/views/system/DefaultNuclide/AutoProcess.vue
new file mode 100644
index 0000000..32ffb68
--- /dev/null
+++ b/src/views/system/DefaultNuclide/AutoProcess.vue
@@ -0,0 +1,404 @@
+<template>
+  <div style="height: 100%;">
+    <div class="header">
+      <div>
+        <span class="item-label">Nuclide Type</span>
+        <a-select 
+          style="width: 180px;display: inline-block;" 
+          v-model="type" 
+          :options="typeOptions" 
+          show-arrow 
+          allowClear
+          placeholder="select..." 
+          @change="onTypeChange"
+        >
+          <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+        </a-select>
+      </div>
+      <a-button type="primary" @click="handleAdd">
+        <img src="@/assets/images/global/add.png" alt="" />
+        Edit
+      </a-button>
+    </div>
+    <!-- 列表 -->
+    <div>
+      <custom-table
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :list="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        @change="handleTableChange"
+        :scroll="{ y: 'calc(100vh - 365px)' }"
+      >
+        <template slot="index" slot-scope="{ index }">
+          {{ index + 1 }}
+        </template>
+        <template slot="roles" slot-scope="{ text }">
+          <span v-for="role of text" :key="role.id">
+            {{ role.roleName }}
+          </span>
+        </template>
+      </custom-table>
+    </div>
+    <!-- 列表结束 -->
+    <a-modal 
+      title='Edit'
+      :width="845" 
+      v-model="visible" 
+      @ok="handleOk" 
+      destroy-on-close
+    >
+      <a-spin :spinning="spinning">
+        <div style="padding-left: 52px;margin-bottom: 20px;">
+          <span class="item-label">Nuclide Type</span>
+          <a-select 
+            style="width: 180px;display: inline-block;" 
+            v-model="currType" 
+            :options="typeOptions" 
+            show-arrow 
+            allowClear
+            placeholder="select..." 
+            @change="onCurrTypeChange"
+          >
+            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+          </a-select>
+        </div>
+        <div class="group-assign">
+          <a-transfer
+            :dataSource="dataList"
+            :target-keys="targetKeys"
+            show-search
+            :render="item => item.title"
+            :operations="['Assign', 'Remove']"
+            :titles="['Total Nuclides', 'User Nuclides']"
+            @change="handleChange"
+            @search="handleSearch"
+          >
+          </a-transfer>
+        </div>
+      </a-spin>
+      <template slot="footer">
+        <slot name="custom-footer"></slot>
+        <a-space class="operators" :size="20">
+          <a-button type="success" @click="handleOk" >Save</a-button>
+          <a-button type="warn" @click="onCancel">Cancel</a-button>
+        </a-space>
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import {getAction } from '@/api/manage'
+const columns = [
+  {
+    title: 'NO',
+    align: 'left',
+    width: 170,
+    scopedSlots: {
+      customRender: 'index'
+    },
+    customHeaderCell: () => {
+      return {
+        style: {
+          'padding-left': '60px !important'
+        }
+      }
+    },
+    customCell: () => {
+      return {
+        style: {
+          'padding-left': '60px !important'
+        }
+      }
+    }
+  },
+  {
+    title: 'NUCLIDE NAME',
+    align: 'left',
+    dataIndex: 'nuclideName'
+  },
+  {
+    title: 'NUCLIDE TYPE',
+    align: 'left',
+    dataIndex: 'nuclideType'
+  },
+  {
+    title: 'CREATE TIME',
+    align: 'left',
+    dataIndex: 'createTime'
+  },
+]
+export default {
+  data() {
+    return {
+      columns,
+      dataSource: [],
+      url: {
+        list: '/sys/defaultNuclide/findPage',
+      },
+      ipagination:{
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          const { current, pageSize } = this.ipagination
+          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      loading: false,
+      typeOptions: [
+        {
+          label: "P",
+          value: "P"
+        },
+        {
+          label: "G",
+          value: "G"
+        }
+      ],
+      type: undefined,
+      currType: "P",
+      targetKeys: [],
+      visible: false,
+      dataList: [],
+      spinning: false
+    }
+  },
+  mounted () {
+    this.getAuroPeocessList();
+  },
+  methods: {
+    getAuroPeocessList() {
+      this.loading = true
+      let params = {
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize,
+        useType: 1,
+        nuclideType: this.type || ""
+      }
+      getAction(this.url.list, params).then(res => {
+        this.loading = false
+        if (res.success) {
+          this.dataSource = res.result.records
+          this.ipagination.total = res.result.total
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+        
+      })
+    },
+    handleTableChange(pagination, filters, sorter) {
+      this.ipagination.current = pagination.current
+      this.ipagination.pageSize = pagination.pageSize
+      this.getAuroPeocessList();
+    },
+    onTypeChange(val) {
+      this.type = val
+      this.getAuroPeocessList();
+    },
+    onCurrTypeChange(val) {
+      this.currType = val
+    },
+    handleAdd() {
+      this.visible = true
+      this.spinning = true
+      this.getNuclideListAll()
+      this.getNuclideList()
+    },
+    getNuclideListAll() {
+      getAction("/gardsNuclLib/allName").then(res => {
+        this.spinning = false
+        if (res.success) {
+          if (res.result.length > 0) {
+            this.dataList = res.result.map((item,index) => {
+              return {
+                key: item,
+                title: item
+              }
+            })
+          } else {
+            this.dataList = []
+          }
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    getNuclideList() {
+      getAction("/sys/defaultNuclide/allName",{useType:1}).then(res => {
+        if (res.success) {
+          if (res.result.length > 0) {
+            this.targetKeys = res.result.map(item => item)
+          } else {
+            this.targetKeys = []
+          }
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    handleChange(targetKeys, direction, moveKeys) {
+      console.log(targetKeys, direction, moveKeys);
+      this.targetKeys= targetKeys;
+    },
+    handleSearch(dir, value) {
+      console.log('search:', dir, value)
+    },
+    handleOk() {
+      let params = {
+        nuclideNames: this.targetKeys,
+        nuclideType: this.currType,
+        useType: 1
+      }
+      putAction("/sys/defaultNuclide/add",params).then(res => {
+        this.visible = false
+        if (res.success) {
+          this.$message(res.message)
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    onCancel() {
+      this.visible = false
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.header{
+  height: 54px;
+  border-top: 1px solid rgba(12, 235, 201, 0.3);
+  border-bottom: 1px solid rgba(12, 235, 201, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: rgba(12, 235, 201, 0.05);
+  padding: 0 10px;
+  margin-bottom: 18px;
+}
+.item-label{
+  display: inline-block;
+  font-size: 16px;
+  font-family: ArialMT;
+  color: #ade6ee;
+  line-height: 32px;
+  height: 32px;
+  margin-right: 10px;
+}
+.operators {
+  width: 100%;
+  justify-content: center;
+  .ant-btn {
+    width: 92px;
+  }
+}
+.group-assign{
+  position: relative;
+  width: 690px;
+  margin: 0 auto;
+  .ant-transfer {
+    margin-bottom: 10px;
+    ::v-deep {
+      .ant-transfer-list {
+        width: 291px;
+        height: 411px;
+        padding-top: 0;
+        &-header {
+          height: 37px;
+          &-selected {
+            span:first-child {
+              display: none;
+            }
+          }
+          &-title {
+            left: 16px;
+          }
+        }
+        &-body{
+          height: calc(100% - 37px);
+        }
+        &-content {
+          &-item {
+            &:hover {
+              background-color: transparent;
+            }
+          }
+        }
+  
+        &:last-child {
+          height: 411px;
+          position: relative;
+          // top: 35px;
+        }
+      }
+  
+      .ant-transfer-operation {
+        .ant-btn {
+          width: 92px;
+          height: 26px;
+          padding: 0;
+          .anticon {
+            display: none;
+          }
+          span {
+            margin-left: 0;
+          }
+          &:first-child {
+            margin-bottom: 52px;
+            &::after {
+              display: inline-block;
+              margin-left: 13px;
+              content: '';
+              width: 18px;
+              height: 10px;
+              background: url(~@/assets/images/system/transfer-right.png) no-repeat;
+              background-size: contain;
+            }
+          }
+          &:nth-child(2) {
+            &::before {
+              display: inline-block;
+              margin-right: 6px;
+              content: '';
+              width: 18px;
+              height: 10px;
+              background: url(~@/assets/images/system/transfer-left.png) no-repeat;
+              background-size: contain;
+              position: static;
+              opacity: initial;
+            }
+          }
+        }
+      }
+      .ant-transfer-list-header{
+        position: relative;
+        .ant-checkbox-wrapper{
+          position: absolute;
+          right: 10px;
+        }
+      }
+      .ant-transfer-list-content-item{
+        position: relative;
+        .ant-checkbox-wrapper{
+          position: absolute;
+          right: 10px;
+        }
+      }
+      .ant-transfer-list-content-item-text{
+        padding-left: 22px;
+      }
+    }
+  }
+}
+/deep/.ant-modal-title{
+  letter-spacing: 1px;
+}
+</style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 1c90d4c..6ac77a3 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -69,6 +69,19 @@ module.exports = {
       .use()
       .loader('babel-loader')
       .end()
+    config.module
+      .rule('ol')
+      .test(/\.js$/)
+      .include
+        .add(resolve('node_modules/ol'))
+        .end()
+      .use()
+      .loader('babel-loader')
+      .options({
+        presets: ['@babel/preset-env'],
+        plugins: ['@babel/plugin-proposal-nullish-coalescing-operator']
+      })
+      .end()
   },
 
   css: {