diff --git a/src/components/Charts/Keyboard.vue b/src/components/Charts/Keyboard.vue
new file mode 100644
index 0000000..0b258f3
--- /dev/null
+++ b/src/components/Charts/Keyboard.vue
@@ -0,0 +1,155 @@
+<template>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      const xAxisData = []
+      const data = []
+      const data2 = []
+      for (let i = 0; i < 50; i++) {
+        xAxisData.push(i)
+        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
+        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
+      }
+      this.chart.setOption({
+        backgroundColor: '#08263a',
+        grid: {
+          left: '5%',
+          right: '5%'
+        },
+        xAxis: [{
+          show: false,
+          data: xAxisData
+        }, {
+          show: false,
+          data: xAxisData
+        }],
+        visualMap: {
+          show: false,
+          min: 0,
+          max: 50,
+          dimension: 0,
+          inRange: {
+            color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+          }
+        },
+        yAxis: {
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#4a657a'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#08263f'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [{
+          name: 'back',
+          type: 'bar',
+          data: data2,
+          z: 1,
+          itemStyle: {
+            normal: {
+              opacity: 0.4,
+              barBorderRadius: 5,
+              shadowBlur: 3,
+              shadowColor: '#111'
+            }
+          }
+        }, {
+          name: 'Simulate Shadow',
+          type: 'line',
+          data,
+          z: 2,
+          showSymbol: false,
+          animationDelay: 0,
+          animationEasing: 'linear',
+          animationDuration: 1200,
+          lineStyle: {
+            normal: {
+              color: 'transparent'
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: '#08263a',
+              shadowBlur: 50,
+              shadowColor: '#000'
+            }
+          }
+        }, {
+          name: 'front',
+          type: 'bar',
+          data,
+          xAxisIndex: 1,
+          z: 3,
+          itemStyle: {
+            normal: {
+              barBorderRadius: 5
+            }
+          }
+        }],
+        animationEasing: 'elasticOut',
+        animationEasingUpdate: 'elasticOut',
+        animationDelay(idx) {
+          return idx * 20
+        },
+        animationDelayUpdate(idx) {
+          return idx * 20
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/Charts/LineMarker.vue b/src/components/Charts/LineMarker.vue
new file mode 100644
index 0000000..3dd7436
--- /dev/null
+++ b/src/components/Charts/LineMarker.vue
@@ -0,0 +1,227 @@
+<template>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      this.chart.setOption({
+        backgroundColor: '#394056',
+        title: {
+          top: 20,
+          text: 'Requests',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: '#F1F1F3'
+          },
+          left: '1%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        },
+        legend: {
+          top: 20,
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['CMCC', 'CTCC', 'CUCC'],
+          right: '4%',
+          textStyle: {
+            fontSize: 12,
+            color: '#F1F1F3'
+          }
+        },
+        grid: {
+          top: 100,
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '(%)',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        }],
+        series: [{
+          name: 'CMCC',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(137, 189, 27, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(137, 189, 27, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(137,189,27)',
+              borderColor: 'rgba(137,189,2,0.27)',
+              borderWidth: 12
+
+            }
+          },
+          data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
+        }, {
+          name: 'CTCC',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(0, 136, 212, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(0, 136, 212, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(0,136,212)',
+              borderColor: 'rgba(0,136,212,0.2)',
+              borderWidth: 12
+
+            }
+          },
+          data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
+        }, {
+          name: 'CUCC',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(219, 50, 51, 0.3)'
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)'
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(219,50,51)',
+              borderColor: 'rgba(219,50,51,0.2)',
+              borderWidth: 12
+            }
+          },
+          data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
+        }]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/Charts/MixChart.vue b/src/components/Charts/MixChart.vue
new file mode 100644
index 0000000..c416542
--- /dev/null
+++ b/src/components/Charts/MixChart.vue
@@ -0,0 +1,271 @@
+<template>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      const xData = (function() {
+        const data = []
+        for (let i = 1; i < 13; i++) {
+          data.push(i + 'month')
+        }
+        return data
+      }())
+      this.chart.setOption({
+        backgroundColor: '#344b58',
+        title: {
+          text: 'statistics',
+          x: '20',
+          top: '20',
+          textStyle: {
+            color: '#fff',
+            fontSize: '22'
+          },
+          subtextStyle: {
+            color: '#90979c',
+            fontSize: '16'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            textStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          borderWidth: 0,
+          top: 150,
+          bottom: 95,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        legend: {
+          x: '5%',
+          top: '10%',
+          textStyle: {
+            color: '#90979c'
+          },
+          data: ['female', 'male', 'average']
+        },
+        calculable: true,
+        xAxis: [{
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#90979c'
+            }
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0
+
+          },
+          data: xData
+        }],
+        yAxis: [{
+          type: 'value',
+          splitLine: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#90979c'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0
+          },
+          splitArea: {
+            show: false
+          }
+        }],
+        dataZoom: [{
+          show: true,
+          height: 30,
+          xAxisIndex: [
+            0
+          ],
+          bottom: 30,
+          start: 10,
+          end: 80,
+          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+          handleSize: '110%',
+          handleStyle: {
+            color: '#d3dee5'
+
+          },
+          textStyle: {
+            color: '#fff' },
+          borderColor: '#90979c'
+
+        }, {
+          type: 'inside',
+          show: true,
+          height: 15,
+          start: 1,
+          end: 35
+        }],
+        series: [{
+          name: 'female',
+          type: 'bar',
+          stack: 'total',
+          barMaxWidth: 35,
+          barGap: '10%',
+          itemStyle: {
+            normal: {
+              color: 'rgba(255,144,128,1)',
+              label: {
+                show: true,
+                textStyle: {
+                  color: '#fff'
+                },
+                position: 'insideTop',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            709,
+            1917,
+            2455,
+            2610,
+            1719,
+            1433,
+            1544,
+            3285,
+            5208,
+            3372,
+            2484,
+            4078
+          ]
+        },
+
+        {
+          name: 'male',
+          type: 'bar',
+          stack: 'total',
+          itemStyle: {
+            normal: {
+              color: 'rgba(0,191,183,1)',
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: 'top',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            327,
+            1776,
+            507,
+            1200,
+            800,
+            482,
+            204,
+            1390,
+            1001,
+            951,
+            381,
+            220
+          ]
+        }, {
+          name: 'average',
+          type: 'line',
+          stack: 'total',
+          symbolSize: 10,
+          symbol: 'circle',
+          itemStyle: {
+            normal: {
+              color: 'rgba(252,230,48,1)',
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: 'top',
+                formatter(p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              }
+            }
+          },
+          data: [
+            1036,
+            3693,
+            2962,
+            3810,
+            2519,
+            1915,
+            1748,
+            4675,
+            6209,
+            4323,
+            2865,
+            4298
+          ]
+        }
+        ]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/Charts/Normal.vue b/src/components/Charts/Normal.vue
new file mode 100644
index 0000000..d648a37
--- /dev/null
+++ b/src/components/Charts/Normal.vue
@@ -0,0 +1,72 @@
+<template>
+  <div :class="className" :style="{height: height,width: width}" ref="echarts"/>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  export default {
+    name: 'chart',
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '350px'
+      },
+      autoResize: {
+        type: Boolean,
+        default: true
+      },
+      options: {
+        type: Object,
+        default: {},
+        required: true
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    watch: {
+      options: {
+        deep: true,
+        handler(options) {
+          if (!this.chart && options) {
+            this.initChart()
+          } else {
+            this.chart.setOption(this.options, true)
+          }
+        }
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$refs.echarts, 'macarons')
+        this.chart.setOption(this.options)
+      }
+    }
+  }
+</script>
diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js
new file mode 100644
index 0000000..b1e76e9
--- /dev/null
+++ b/src/components/Charts/mixins/resize.js
@@ -0,0 +1,56 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}
diff --git a/src/components/ColumnSettings/index.vue b/src/components/ColumnSettings/index.vue
new file mode 100644
index 0000000..faf66be
--- /dev/null
+++ b/src/components/ColumnSettings/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <el-tooltip :content="$t('common.columnSettings')" placement="top">
+    <el-popover width="200" popper-class="columnSetting-popover">
+      <el-link icon="icon-ym icon-ym-options NCC-common-head-icon" :underline="false"
+        slot="reference" />
+      <NCC-table :data="data" class="columnTable" :hasNO="false" size="mini" ref="columnTable"
+        @selection-change="columnSelectionChange" @row-click="handleRowClick">
+        <el-table-column prop="label" label="列表字段" />
+        <el-table-column type="selection" width="50" align="center" />
+      </NCC-table>
+    </el-popover>
+  </el-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'ColumnSettings',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: Array,
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  mounted() {
+    this.$refs.columnTable.$refs.NCCTable.toggleAllSelection()
+  },
+  methods: {
+    handleRowClick(row) {
+      this.$refs.columnTable.$refs.NCCTable.toggleRowSelection(row)
+    },
+    columnSelectionChange(val) {
+      this.$emit('change', val)
+    }
+  }
+}
+</script>
+<style lang="scss">
+.columnSetting-popover {
+  padding: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/CompanyForm/index.vue b/src/components/CompanyForm/index.vue
index 962b2a4..3210517 100644
--- a/src/components/CompanyForm/index.vue
+++ b/src/components/CompanyForm/index.vue
@@ -66,7 +66,7 @@
 			</el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="close">取消</el-button>
-        <el-button type="primary" @click="confirm">确认</el-button>
+        <el-button type="primary" @click="confirm" :loading="btnLoading">确认</el-button>
       </span>
     </el-dialog>
   </div>
@@ -79,35 +79,36 @@ export default {
   props: {},
   data() {
     return {
-      visible: false,
-      loading: false,
-      dataForm: {
-				id: '',
-				id: undefined,
-				companyName: undefined,
-				socialCreditAgency: undefined,
-				legalPerson: undefined,
-				address: undefined,
-				contactInformation: undefined,
-				qualificationCertificate: [],
-				otherInfo: undefined,
-			},
-			rules: {
-				companyName: [
-					{
-						required: true,
-						message: '请输入公司名称',
-						trigger: 'blur'
-					},
-				],
-				contactInformation: [
-					{
-						pattern: /^1[3456789]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
-						message: '请输入正确的联系方式',
-						trigger: 'blur'
-					},
-				],
-			},
+     	visible: false,
+     	loading: false,
+     	dataForm: {
+			id: '',
+			id: undefined,
+			companyName: undefined,
+			socialCreditAgency: undefined,
+			legalPerson: undefined,
+			address: undefined,
+			contactInformation: undefined,
+			qualificationCertificate: [],
+			otherInfo: undefined,
+		},
+		rules: {
+			companyName: [
+				{
+					required: true,
+					message: '请输入公司名称',
+					trigger: 'blur'
+				},
+			],
+			contactInformation: [
+				{
+					pattern: /^1[3456789]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
+					message: '请输入正确的联系方式',
+					trigger: 'blur'
+				},
+			],
+		},
+		btnLoading: false
     };
   },
   watch: {},
@@ -122,25 +123,27 @@ export default {
 			this.$refs['elForm'].resetFields();
     },
     async confirm() {
-      this.$refs['elForm'].validate((valid) => {
-				if (valid) {
-          request({
-							url: `/Extend/BaseComapnyInfo`,
-							method: 'post',
-							data: this.dataForm,
-						}).then((res) => {
-							this.$message({
-								message: res.msg,
-								type: 'success',
-								duration: 1000,
-								onClose: () => {
-									this.visible = false,
-										this.$emit('refresh', true)
-								}
-							})
-						})
-        }})
-    
+      	this.$refs['elForm'].validate((valid) => {
+			if (valid) {
+				this.btnLoading = true;
+          		request({
+					url: `/Extend/BaseComapnyInfo`,
+					method: 'post',
+					data: this.dataForm,
+				}).then((res) => {
+					this.btnLoading = false;
+					this.$message({
+						message: res.msg,
+						type: 'success',
+						duration: 1000,
+						onClose: () => {
+							this.visible = false,
+								this.$emit('refresh', true)
+						}
+					})
+				}).catch(() => {this.btnLoading = false})
+    	    }
+		})
     },
   },
 };
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
new file mode 100644
index 0000000..abc993d
--- /dev/null
+++ b/src/components/Hamburger/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div style="padding: 0 15px;" @click="toggleClick">
+    <i class="icon-ym icon-ym-header-collapse1" v-if='isActive'></i>
+    <i class="icon-ym icon-ym-header-expand" v-else></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.icon-ym {
+  font-size: 20px;
+  color: #666666;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
new file mode 100644
index 0000000..d901d84
--- /dev/null
+++ b/src/components/HeaderSearch/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <div :class="{'show':show}" class="header-search">
+    <i class="el-icon-search search-icon" @click.stop="click"></i>
+    <el-select ref="headerSearchSelect" v-model="search" :remote-method="querySearch" filterable
+      default-first-option remote placeholder="搜索：导航菜单" class="header-search-select"
+      @change="change">
+      <el-option v-for="item in options" :key="item.path" :value="item"
+        :label="item.title.join(' > ')" />
+    </el-select>
+  </div>
+</template>
+
+<script>
+// fuse is a lightweight fuzzy-search module
+// make search results more in line with expectations
+import Fuse from 'fuse.js'
+import path from 'path'
+import i18n from '@/lang'
+
+export default {
+  name: 'HeaderSearch',
+  data() {
+    return {
+      search: '',
+      options: [],
+      searchPool: [],
+      show: false,
+      fuse: undefined
+    }
+  },
+  computed: {
+    routes() {
+      return this.$store.getters.permission_routes
+    },
+    lang() {
+      return this.$store.getters.language
+    }
+  },
+  watch: {
+    lang() {
+      this.searchPool = this.generateRoutes(this.routes)
+    },
+    routes() {
+      this.searchPool = this.generateRoutes(this.routes)
+    },
+    searchPool(list) {
+      this.initFuse(list)
+    },
+    show(value) {
+      if (value) {
+        document.body.addEventListener('click', this.close)
+      } else {
+        document.body.removeEventListener('click', this.close)
+      }
+    }
+  },
+  mounted() {
+    this.searchPool = this.generateRoutes(this.routes)
+  },
+  methods: {
+    click() {
+      this.show = !this.show
+      if (this.show) {
+        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
+      }
+    },
+    close() {
+      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
+      this.options = []
+      this.show = false
+    },
+    change(val) {
+      this.$router.push(val.path)
+      this.search = ''
+      this.options = []
+      this.$nextTick(() => {
+        this.show = false
+      })
+    },
+    initFuse(list) {
+      this.fuse = new Fuse(list, {
+        shouldSort: true,
+        threshold: 0.4,
+        location: 0,
+        distance: 100,
+        maxPatternLength: 32,
+        minMatchCharLength: 1,
+        keys: [{
+          name: 'title',
+          weight: 0.7
+        }, {
+          name: 'path',
+          weight: 0.3
+        }]
+      })
+    },
+    // Filter out the routes that can be displayed in the sidebar
+    // And generate the internationalized title
+    generateRoutes(routes, basePath = '/', prefixTitle = []) {
+      let res = []
+
+      for (const router of routes) {
+        // console.log(router);
+
+        // skip hidden router
+        if (router.hidden) { continue }
+
+        const data = {
+          path: path.resolve(basePath, router.path),
+          title: [...prefixTitle]
+        }
+
+        if (router.meta && router.meta.title) {
+          // generate internationalized title
+          const i18ntitle = i18n.t(`route.${router.meta.title}`)
+
+          let title = i18ntitle
+          if (i18ntitle.indexOf('route.') > -1) title = router.meta.zhTitle
+          data.title = [...data.title, title]
+
+          if (router.redirect !== 'noRedirect') {
+            // only push the routes with title
+            // special case: need to exclude parent router without redirect
+            res.push(data)
+          }
+        }
+
+        // recursive child routes
+        if (router.children) {
+          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
+          if (tempRoutes.length >= 1) {
+            res = [...res, ...tempRoutes]
+          }
+        }
+      }
+      return res
+    },
+    querySearch(query) {
+      if (query !== '') {
+        this.options = this.fuse.search(query)
+      } else {
+        this.options = []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-search {
+  font-size: 0 !important;
+
+  .search-icon {
+    cursor: pointer;
+    font-size: 16px;
+    vertical-align: middle;
+  }
+
+  .header-search-select {
+    font-size: 20px;
+    transition: width 0.2s;
+    width: 0;
+    overflow: hidden;
+    background: transparent;
+    border-radius: 0;
+    display: inline-block;
+    vertical-align: middle;
+
+    >>> .el-input__inner {
+      border-radius: 0;
+      border: 0;
+      // padding-left: 0;
+      // padding-right: 0;
+      box-shadow: none !important;
+      border-bottom: 1px solid #d9d9d9;
+      vertical-align: middle;
+    }
+  }
+
+  &.show {
+    .header-search-select {
+      width: 210px;
+      margin-left: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/components/InfoForm/index.vue b/src/components/InfoForm/index.vue
index a336adb..2bd0d98 100644
--- a/src/components/InfoForm/index.vue
+++ b/src/components/InfoForm/index.vue
@@ -220,7 +220,7 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="close">取消</el-button>
-        <el-button type="primary" @click="confirm">确认</el-button>
+        <el-button type="primary" @click="confirm" :loading="btnLoading">确认</el-button>
       </span>
     </el-dialog>
   </div>
@@ -312,6 +312,7 @@ export default {
       systemTypeOptions: [],
       systemClassOptions: [],
       areaOptions: [],
+      btnLoading: false,
     };
   },
   watch: {},
@@ -388,6 +389,7 @@ export default {
     async confirm() {
       this.$refs["infoForm"].validate((valid) => {
         if (valid) {
+          this.btnLoading = true;
           switch (this.type) {
             case "add":
               addSystem(this.infoForm).then((res) => {
@@ -395,9 +397,10 @@ export default {
                   message: "恭喜你，新增成功",
                   type: "success",
                 });
+                this.btnLoading = false;
                 this.$emit('reInit');
                 this.close();
-              });
+              }).catch(() => { this.btnLoading = false });
               break;
             case "edit":
               this.infoForm.id = this.systemId;
@@ -406,9 +409,10 @@ export default {
                   message: "恭喜你，修改成功",
                   type: "success",
                 });
+                this.btnLoading = false;
                 this.$emit('reInit');
                 this.close();
-              });
+              }).catch(() => { this.btnLoading = false });;
               break;
 
             default:
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
new file mode 100644
index 0000000..e8dc038
--- /dev/null
+++ b/src/components/LangSelect/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <el-dropdown class="international" @command="handleSetLanguage">
+    <div>
+      <i class="icon-ym icon-ym-header-language"></i>
+    </div>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item :disabled="language==='zh'" command="zh">
+        简体中文
+      </el-dropdown-item>
+      <el-dropdown-item :disabled="language==='zhtw'" command="zhtw">
+        繁体中文
+      </el-dropdown-item>
+      <el-dropdown-item :disabled="language==='en'" command="en">
+        English
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+import { UpdateLanguage } from '@/api/permission/userSetting'
+import getPageTitle from '@/utils/get-page-title'
+export default {
+  computed: {
+    language() {
+      return this.$store.getters.language
+    }
+  },
+  methods: {
+    handleSetLanguage(lang) {
+      UpdateLanguage({ language: lang }).then(res => { })
+      this.$i18n.locale = lang
+      this.$store.dispatch('app/setLanguage', lang)
+      let text = '切换成功'
+      if (lang === 'en') text = 'Switch Language Success'
+      if (lang === 'zhtw') text = '切換成功'
+      document.title = getPageTitle(this.$route.meta.title, this.$route.meta.zhTitle)
+      this.$message({
+        message: text,
+        type: 'success'
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/MarkdownEditor/default-options.js b/src/components/MarkdownEditor/default-options.js
new file mode 100644
index 0000000..303aa13
--- /dev/null
+++ b/src/components/MarkdownEditor/default-options.js
@@ -0,0 +1,31 @@
+// doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditor
+export default {
+  minHeight: '200px',
+  previewStyle: 'vertical',
+  useCommandShortcut: true,
+  useDefaultHTMLSanitizer: true,
+  usageStatistics: false,
+  hideModeSwitch: false,
+  toolbarItems: [
+    'heading',
+    'bold',
+    'italic',
+    'strike',
+    'divider',
+    'hr',
+    'quote',
+    'divider',
+    'ul',
+    'ol',
+    'task',
+    'indent',
+    'outdent',
+    'divider',
+    'table',
+    'image',
+    'link',
+    'divider',
+    'code',
+    'codeblock'
+  ]
+}
diff --git a/src/components/MarkdownEditor/index.vue b/src/components/MarkdownEditor/index.vue
new file mode 100644
index 0000000..1a8a01e
--- /dev/null
+++ b/src/components/MarkdownEditor/index.vue
@@ -0,0 +1,118 @@
+<template>
+  <div :id="id" />
+</template>
+
+<script>
+// deps for editor
+import 'codemirror/lib/codemirror.css' // codemirror
+import 'tui-editor/dist/tui-editor.css' // editor ui
+import 'tui-editor/dist/tui-editor-contents.css' // editor content
+
+import Editor from 'tui-editor'
+import defaultOptions from './default-options'
+
+export default {
+  name: 'MarkdownEditor',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    id: {
+      type: String,
+      required: false,
+      default() {
+        return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
+      }
+    },
+    options: {
+      type: Object,
+      default() {
+        return defaultOptions
+      }
+    },
+    mode: {
+      type: String,
+      default: 'markdown'
+    },
+    height: {
+      type: String,
+      required: false,
+      default: '300px'
+    },
+    language: {
+      type: String,
+      required: false,
+      default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
+    }
+  },
+  data() {
+    return {
+      editor: null
+    }
+  },
+  computed: {
+    editorOptions() {
+      const options = Object.assign({}, defaultOptions, this.options)
+      options.initialEditType = this.mode
+      options.height = this.height
+      options.language = this.language
+      return options
+    }
+  },
+  watch: {
+    value(newValue, preValue) {
+      if (newValue !== preValue && newValue !== this.editor.getValue()) {
+        this.editor.setValue(newValue)
+      }
+    },
+    language(val) {
+      this.destroyEditor()
+      this.initEditor()
+    },
+    height(newValue) {
+      this.editor.height(newValue)
+    },
+    mode(newValue) {
+      this.editor.changeMode(newValue)
+    }
+  },
+  mounted() {
+    this.initEditor()
+  },
+  destroyed() {
+    this.destroyEditor()
+  },
+  methods: {
+    initEditor() {
+      this.editor = new Editor({
+        el: document.getElementById(this.id),
+        ...this.editorOptions
+      })
+      if (this.value) {
+        this.editor.setValue(this.value)
+      }
+      this.editor.on('change', () => {
+        this.$emit('input', this.editor.getValue())
+      })
+    },
+    destroyEditor() {
+      if (!this.editor) return
+      this.editor.off('change')
+      this.editor.remove()
+    },
+    setValue(value) {
+      this.editor.setValue(value)
+    },
+    getValue() {
+      return this.editor.getValue()
+    },
+    setHtml(value) {
+      this.editor.setHtml(value)
+    },
+    getHtml() {
+      return this.editor.getHtml()
+    }
+  }
+}
+</script>
diff --git a/src/components/NCC-TreeTransfer/array.js b/src/components/NCC-TreeTransfer/array.js
new file mode 100644
index 0000000..b1edecf
--- /dev/null
+++ b/src/components/NCC-TreeTransfer/array.js
@@ -0,0 +1,91 @@
+/**
+ * auth: weilan
+ * github: https://github.com/hql7
+ * description: 一个数组操作函数库
+ */
+
+// 从树形数据中递归筛选目标值
+function valInDeep(arr = [], val, id, childs) {
+  return arr.reduce((flat, item) => {
+    return flat.concat(
+      item[id] == val ? item : valInDeep(item[childs] || [], val, id, childs)
+    );
+  }, []);
+}
+
+// 将树形数据向下递归为一维数组
+function flattenDeep(arr = [], childs) {
+  return arr.reduce((flat, item) => {
+    return flat.concat(
+      item,
+      item[childs] ? flattenDeep(item[childs], childs) : []
+    );
+  }, []);
+}
+
+// 将树形数据向上将此支线递归为一维数组
+function flattenDeepParents(arr, parent) {
+  return arr.reduce((flat, item) => {
+    return flat.concat(
+      item[parent] || [],
+      item[parent] ? flattenDeepParents([item[parent]], parent) : []
+    );
+  }, []);
+}
+
+// 根据条件递归祖先元素
+function regDeepParents(row, parent, reg) {
+  if (row[parent]) {
+    reg && reg(row[parent]);
+    regDeepParents(row[parent], parent, reg);
+  }
+}
+
+// 将数组转化成树结构
+function arrayToTree(
+  array = [],
+  options = { id: "id", pid: "pid", children: "children" }
+) {
+  let array_ = []; // 创建储存剔除叶子节点后的骨架节点数组
+  let unique = {}; // 创建盒子辅助本轮children合并去重
+  array.forEach(item => {
+    // 适应el-tree-transfer 将根节点pid重置为 0
+    let root = ["undefined", undefined, null].includes(item[options.pid]);
+    if (root) item[options.pid] = 0;
+    // 筛选可以插入当前节点的所有子节点
+    let children_array = array.filter(
+      it => it[options.pid] === item[options.id]
+    );
+    if (item.children && item.children instanceof Array) {
+      // 去重合并数组
+      item.children.map(i => (unique[i[options.id]] = 1));
+      item.children.push(
+        ...children_array.filter(i => unique[i[options.id]] !== 1)
+      );
+    } else {
+      item.children = children_array;
+    }
+    // 当children_array有数据时插入下一轮array_，当无数据时将最后留下来的根节点树形插入数组
+    let has_children = children_array.length > 0;
+    if (
+      has_children ||
+      (!has_children && [0, "0"].includes(item[options.pid]))
+    ) {
+      array_.push(item);
+    }
+  });
+  // 当数组内仅有根节点时退出，否组继续处理 最终递归深度次
+  if (!array_.every(item => [0, "0"].includes(item[options.pid]))) {
+    return arrayToTree(array_, options);
+  } else {
+    return array_;
+  }
+}
+
+export {
+  valInDeep,
+  flattenDeep,
+  flattenDeepParents,
+  regDeepParents,
+  arrayToTree
+};
diff --git a/src/components/NCC-TreeTransfer/index.vue b/src/components/NCC-TreeTransfer/index.vue
new file mode 100644
index 0000000..b692bff
--- /dev/null
+++ b/src/components/NCC-TreeTransfer/index.vue
@@ -0,0 +1,811 @@
+<template>
+  <div class="transfer" :style="{ width, height }">
+    <template>
+      <!-- 左侧穿梭框 原料框 -->
+      <div class="transfer-left">
+        <h3 class="transfer-title">
+          <el-checkbox :indeterminate="from_is_indeterminate" v-model="from_check_all"
+            @change="fromAllBoxChange" />
+          <span>{{ fromTitle }}</span>
+          <slot name="title-left"></slot>
+        </h3>
+        <!-- 内容区 -->
+        <div class="transfer-main">
+          <slot name="from"></slot>
+          <el-input v-if="filter" :placeholder="placeholder" v-model="filterFrom"
+            class="filter-tree" clearable />
+          <el-tree ref="from-tree" show-checkbox :lazy="lazy" :node-key="node_key"
+            :load="leftloadNode" :props="defaultProps" :data="self_from_data"
+            :default-expand-all="openAll" :highlight-current="highLight"
+            :render-content="renderContentLeft" :filter-node-method="filterNodeFrom"
+            :default-checked-keys="defaultCheckedKeys" :default-expanded-keys="from_expanded_keys"
+            @check="fromTreeChecked">
+            <div slot-scope="{ node, data }">
+              <i :class="data.icon" />
+              <span style="padding-left: 4px;">{{ node.label }}</span>
+            </div>
+          </el-tree>
+          <slot name="left-footer"></slot>
+        </div>
+      </div>
+      <!-- 穿梭区 按钮框 -->
+      <div class="transfer-center">
+        <template v-if="button_text">
+          <p class="transfer-center-item">
+            <el-button type="primary" @click="addToAims(true)" :disabled="from_disabled">
+              {{ fromButton || "添加" }}
+              <i class="el-icon-arrow-right"></i>
+            </el-button>
+          </p>
+          <p class="transfer-center-item">
+            <el-button type="primary" @click="removeToSource" :disabled="to_disabled"
+              icon="el-icon-arrow-left">{{ toButton || "移除" }}</el-button>
+          </p>
+        </template>
+        <template v-else>
+          <p class="transfer-center-item">
+            <el-button type="primary" @click="addToAims(true)" icon="el-icon-arrow-right"
+              :disabled="from_disabled" />
+          </p>
+          <p class="transfer-center-item">
+            <el-button type="primary" @click="removeToSource" :disabled="to_disabled"
+              icon="el-icon-arrow-left" />
+          </p>
+        </template>
+      </div>
+      <!-- 右侧穿梭框 目标框 -->
+      <div class="transfer-right">
+        <h3 class="transfer-title">
+          <el-checkbox :indeterminate="to_is_indeterminate" v-model="to_check_all"
+            @change="toAllBoxChange" />
+          <span>{{ toTitle }}</span>
+          <slot name="title-right"></slot>
+        </h3>
+        <!-- 内容区 -->
+        <div class="transfer-main">
+          <slot name="to"></slot>
+          <el-input v-if="filter" :placeholder="placeholder" v-model="filterTo" size="small"
+            class="filter-tree" clearable />
+          <el-tree slot="to" ref="to-tree" show-checkbox :lazy="lazyRight" :data="self_to_data"
+            :node-key="node_key" :props="defaultProps" :load="rightloadNode"
+            :default-expand-all="openAll" :highlight-current="highLight"
+            :render-content="renderContentRight" :filter-node-method="filterNodeTo"
+            :default-expanded-keys="to_expanded_keys" @check="toTreeChecked">
+            <div slot-scope="{ node, data }">
+              <i :class="data.icon" />
+              <span style="padding-left: 4px;">{{ node.label }}</span>
+            </div>
+          </el-tree>
+          <slot name="right-footer"></slot>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { arrayToTree } from './array';
+export default {
+  name: 'NCC-tree-transfer',
+  data() {
+    return {
+      from_is_indeterminate: false, // 源数据是否半选
+      from_check_all: false, // 源数据是否全选
+      to_is_indeterminate: false, // 目标数据是否半选
+      to_check_all: false, // 目标数据是否全选
+      from_expanded_keys: [], // 源数据展开节点
+      to_expanded_keys: [], // 目标数据展开节点
+      from_disabled: true, // 添加按钮是否禁用
+      to_disabled: true, // 移除按钮是否禁用
+      from_check_keys: [], // 源数据选中key数组 以此属性关联穿梭按钮，总全选、半选状态
+      to_check_keys: [], // 目标数据选中key数组 以此属性关联穿梭按钮，总全选、半选状态
+      filterFrom: "", // 源数据筛选
+      filterTo: "", // 目标数据筛选
+    }
+  },
+  props: {
+    // 宽度
+    width: {
+      type: String,
+      default: "100%"
+    },
+    // 高度
+    height: {
+      type: String,
+      default: "320px"
+    },
+    // 标题
+    title: {
+      type: Array,
+      default: () => ["源列表", "目标列表"]
+    },
+    // 穿梭按钮名字
+    button_text: Array,
+    // 源数据
+    from_data: {
+      type: Array,
+      default: () => []
+    },
+    // 选中数据
+    to_data: {
+      type: Array,
+      default: () => []
+    },
+    // el-tree 配置项
+    defaultProps: {
+      type: Object,
+      default: () => {
+        return { label: "fullName", children: "children" };
+      }
+    },
+    // el-tree node-key 必须唯一
+    node_key: {
+      type: String,
+      default: "id"
+    },
+    // 自定义 pid参数名
+    pid: {
+      type: String,
+      default: "parentId"
+    },
+    // 是否启用筛选
+    filter: {
+      type: Boolean,
+      default: false
+    },
+    // 是否展开所有节点
+    openAll: {
+      type: Boolean,
+      default: false
+    },
+    // 左侧自定义树节点
+    renderContentLeft: Function,
+    // 右侧自定义树节点
+    renderContentRight: Function,
+    // 是否展开节点
+    transferOpenNode: {
+      type: Boolean,
+      default: true
+    },
+    // 源数据 默认选中节点
+    defaultCheckedKeys: {
+      type: Array,
+      default: () => []
+    },
+    // 源数据 默认展开节点
+    defaultExpandedKeys: {
+      type: Array,
+      default: () => []
+    },
+    // 筛选placeholder
+    placeholder: {
+      type: String,
+      default: "输入关键词"
+    },
+    // 自定义筛选函数
+    filterNode: Function,
+    // 默认穿梭一次默认选中数据
+    defaultTransfer: {
+      type: Boolean,
+      default: false
+    },
+    // 是否开启arrayToTree
+    arrayToTree: {
+      type: Boolean,
+      default: false
+    },
+    // 是否启用懒加载
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    // 右侧是否启用懒加载
+    lazyRight: {
+      type: Boolean,
+      default: false
+    },
+    // 懒加载的回调函数
+    lazyFn: Function,
+    // 是否高亮当前选中节点，默认值是 false。
+    highLight: {
+      type: Boolean,
+      default: false
+    }
+  },
+  created() {
+    this.from_check_keys = this.defaultCheckedKeys;
+    this.from_expanded_keys = this.defaultExpandedKeys;
+    this.to_expanded_keys = this.defaultExpandedKeys;
+    if (this.defaultTransfer && this.defaultCheckedKeys.length > 0) {
+      this.$nextTick(() => {
+        this.addToAims(false);
+      });
+    }
+  },
+  methods: {
+    // -------------------------------提供输出函数---------------------
+    /**
+     * 清空选中节点
+     * type：string left左边 right右边 all全部 默认all
+     */
+    clearChecked(type = "all") {
+      if (type === "left") {
+        this.$refs["from-tree"].setCheckedKeys([]);
+        this.from_is_indeterminate = false;
+        this.from_check_all = false;
+      } else if (type === "right") {
+        this.$refs["to-tree"].setCheckedKeys([]);
+        this.to_is_indeterminate = false;
+        this.to_check_all = false;
+      } else {
+        this.$refs["from-tree"].setCheckedKeys([]);
+        this.$refs["to-tree"].setCheckedKeys([]);
+        this.from_is_indeterminate = false;
+        this.from_check_all = false;
+        this.to_is_indeterminate = false;
+        this.to_check_all = false;
+      }
+    },
+    // 添加按钮
+    addToAims(emit) {
+      // 获取选中通过穿梭框的keys - 仅用于传送纯净的id数组到父组件同后台通信
+      let keys = this.$refs["from-tree"].getCheckedKeys();
+      // 获取半选通过穿梭框的keys - 仅用于传送纯净的id数组到父组件同后台通信
+      let harfKeys = this.$refs["from-tree"].getHalfCheckedKeys();
+      // 选中节点数据
+      let arrayCheckedNodes = this.$refs["from-tree"].getCheckedNodes();
+      // 获取选中通过穿梭框的nodes - 仅用于传送选中节点数组到父组件同后台通信需求
+      let nodes = JSON.parse(JSON.stringify(arrayCheckedNodes));
+      // 半选中节点数据
+      let arrayHalfCheckedNodes = this.$refs["from-tree"].getHalfCheckedNodes();
+      // 获取半选通过穿梭框的nodes - 仅用于传送选中节点数组到父组件同后台通信需求
+      let halfNodes = JSON.parse(JSON.stringify(arrayHalfCheckedNodes));
+
+      // 自定义参数读取设置
+      let children__ = this.defaultProps.children || "children";
+      let pid__ = this.pid || "parentId";
+      let id__ = this["node_key"] || "id";
+
+      /*
+       * 先整合目标树没有父节点的叶子节点选中，需要整理出来此叶子节点的父节点直到根节点路径 - 此时所有骨架节点已有
+       * 再将所有末端叶子节点根据pid直接推入目标树即可
+       * 声明新盒子将所有半选节点的子节点清除 - 只保留骨架 因为排序是先父后子 因此不存在子元素处理好插入时父元素还没处理的情况
+       * 下面一二步是为了搭建出来目标树没有根节点躯干节点时的叶子选中，给此叶子搭建出根节点和躯干节点
+       */
+
+      // let不存在状态提升 因此在函数调用之前赋值 并递归为以为数组！
+      let self_to_data = JSON.stringify(this.self_to_data);
+      // 第一步
+      let skeletonHalfCheckedNodes = JSON.parse(
+        JSON.stringify(arrayHalfCheckedNodes)
+      ); // 深拷贝数据 - 半选节点
+      // 筛选目标树不存在的骨架节点 - 半选内的节点
+      let newSkeletonHalfCheckedNodes = [];
+      skeletonHalfCheckedNodes.forEach(item => {
+        if (!inquireIsExist(item)) {
+          newSkeletonHalfCheckedNodes.push(item);
+        }
+      });
+      // 筛选到目标树不存在的骨架后在处理每个骨架节点-非末端叶子节点 - 半选节点
+      newSkeletonHalfCheckedNodes.forEach(item => {
+        item[children__] = [];
+        [0, "-1"].includes(item[pid__])
+          ? this.$refs["to-tree"].append(item)
+          : this.$refs["to-tree"].append(item, item[pid__]);
+      });
+
+      // 第二步
+      // 筛选目标树不存在的骨架节点 - 全选内的节点
+      let newSkeletonCheckedNodes = [];
+      nodes.forEach(item => {
+        if (!inquireIsExist(item)) {
+          newSkeletonCheckedNodes.push(item);
+        }
+      });
+      // 筛选到目标树不存在的骨架后在处理每个骨架节点-非末端叶子节点 - 全选节点
+      newSkeletonCheckedNodes.forEach(item => {
+        if (item[children__] && item[children__].length > 0) {
+          item[children__] = [];
+          [0, "-1"].includes(item[pid__])
+            ? this.$refs["to-tree"].append(item)
+            : this.$refs["to-tree"].append(item, item[pid__]);
+        }
+      });
+
+      // 第三步 处理末端叶子元素 - 声明新盒子筛选出所有末端叶子节点
+      let leafCheckedNodes = arrayCheckedNodes.filter(
+        item => !item[children__] || item[children__].length === 0
+      );
+      // 末端叶子插入目标树
+      leafCheckedNodes.forEach(item => {
+        if (!inquireIsExist(item)) {
+          this.$refs["to-tree"].append(item, item[pid__]);
+        }
+      });
+
+      // 递归查询data内是否存在item函数
+      function inquireIsExist(item, strData = self_to_data) {
+        // 将树形数据格式化成一维字符串 然后通过匹配来判断是否已存在
+        let strItem =
+          typeof item[id__] == "number"
+            ? `"${id__}":${item[id__]},`
+            : `"${id__}":"${item[id__]}"`;
+        let reg = RegExp(strItem);
+        let existed = reg.test(strData);
+        return existed;
+      }
+
+      // 左侧删掉选中数据
+      arrayCheckedNodes.map(item => this.$refs["from-tree"].remove(item));
+
+      // 处理完毕按钮恢复禁用状态
+      this.from_check_keys = [];
+
+      // 目标数据节点展开
+      if (this.transferOpenNode && !this.lazy) {
+        this.to_expanded_keys = keys;
+      }
+
+      // 传递信息给父组件
+      emit &&
+        this.$emit("addBtn", this.self_from_data, this.self_to_data, {
+          keys,
+          nodes,
+          harfKeys,
+          halfNodes
+        });
+
+      // 处理完毕取消选中
+      this.$refs["from-tree"].setCheckedKeys([]);
+    },
+    // 移除按钮
+    removeToSource() {
+      // 获取选中通过穿梭框的keys - 仅用于传送纯净的id数组到父组件同后台通信
+      let keys = this.$refs["to-tree"].getCheckedKeys();
+      // 获取半选通过穿梭框的keys - 仅用于传送纯净的id数组到父组件同后台通信
+      let harfKeys = this.$refs["to-tree"].getHalfCheckedKeys();
+      // 获取选中通过穿梭框的nodes 选中节点数据
+      let arrayCheckedNodes = this.$refs["to-tree"].getCheckedNodes();
+      // 获取选中通过穿梭框的nodes - 仅用于传送选中节点数组到父组件同后台通信需求
+      let nodes = JSON.parse(JSON.stringify(arrayCheckedNodes));
+      // 半选中节点数据
+      let arrayHalfCheckedNodes = this.$refs["to-tree"].getHalfCheckedNodes();
+      // 获取半选通过穿梭框的nodes - 仅用于传送选中节点数组到父组件同后台通信需求
+      let halfNodes = JSON.parse(JSON.stringify(arrayHalfCheckedNodes));
+
+      // 自定义参数读取设置
+      let children__ = this.defaultProps.children || "children";
+      let pid__ = this.pid || "parentId";
+      let id__ = this["node_key"] || "id";
+
+      /*
+       * 先整合目标树没有父节点的叶子节点选中，需要整理出来此叶子节点的父节点直到根节点路径 - 此时所有骨架节点已有
+       * 再将所有末端叶子节点根据pid直接推入目标树即可
+       * 声明新盒子将所有半选节点的子节点清除 - 只保留骨架 因为排序是先父后子 因此不存在子元素处理好插入时父元素还没处理的情况
+       * 下面一二步是为了搭建出来目标树没有根节点躯干节点时的叶子选中，给此叶子搭建出根节点和躯干节点
+       */
+
+      // let不存在状态提升 因此在函数调用之前赋值 并递归为以为数组！
+      let self_from_data = JSON.stringify(this.self_from_data);
+      // 第一步
+      let skeletonHalfCheckedNodes = JSON.parse(
+        JSON.stringify(arrayHalfCheckedNodes)
+      ); // 深拷贝数据 - 半选节点
+      // 筛选目标树不存在的骨架节点 - 半选内的节点
+      let newSkeletonHalfCheckedNodes = [];
+      skeletonHalfCheckedNodes.forEach(item => {
+        if (!inquireIsExist(item)) {
+          newSkeletonHalfCheckedNodes.push(item);
+        }
+      });
+      // 筛选到目标树不存在的骨架后在处理每个骨架节点-非末端叶子节点 - 半选节点
+      newSkeletonHalfCheckedNodes.forEach(item => {
+        item[children__] = [];
+        [0, "-1"].includes(item[pid__])
+          ? this.$refs["from-tree"].append(item)
+          : this.$refs["from-tree"].append(item, item[pid__]);
+      });
+
+      // 第二步
+      // 筛选目标树不存在的骨架节点 - 全选内的节点
+      let newSkeletonCheckedNodes = [];
+      nodes.forEach(item => {
+        if (!inquireIsExist(item)) {
+          newSkeletonCheckedNodes.push(item);
+        }
+      });
+      // 筛选到目标树不存在的骨架后在处理每个骨架节点-非末端叶子节点 - 全选节点
+      newSkeletonCheckedNodes.forEach(item => {
+        if (item[children__] && item[children__].length > 0) {
+          item[children__] = [];
+          [0, "-1"].includes(item[pid__])
+            ? this.$refs["from-tree"].append(item)
+            : this.$refs["from-tree"].append(item, item[pid__]);
+        }
+      });
+
+      // 第三步 处理末端叶子元素 - 声明新盒子筛选出所有末端叶子节点
+      let leafCheckedNodes = arrayCheckedNodes.filter(
+        item => !item[children__] || item[children__].length == 0
+      );
+      // 末端叶子插入目标树
+      leafCheckedNodes.forEach(item => {
+        if (!inquireIsExist(item)) {
+          this.$refs["from-tree"].append(item, item[pid__]);
+        }
+      });
+
+      // 递归查询data内是否存在item函数
+      function inquireIsExist(item, strData = self_from_data) {
+        // 将树形数据格式化成一维字符串 然后通过匹配来判断是否已存在
+        let strItem =
+          typeof item[id__] == "number"
+            ? `"${id__}":${item[id__]},`
+            : `"${id__}":"${item[id__]}"`;
+        let reg = RegExp(strItem);
+        let existed = reg.test(strData);
+        return existed;
+      }
+
+      // 右侧删掉选中数据
+      arrayCheckedNodes.map(item => this.$refs["to-tree"].remove(item));
+
+      // 处理完毕按钮恢复禁用状态
+      this.to_check_keys = [];
+
+      // 目标数据节点展开
+      if (this.transferOpenNode && !this.lazy) {
+        this.from_expanded_keys = keys;
+      }
+
+      // 传递信息给父组件
+      this.$emit("removeBtn", this.self_from_data, this.self_to_data, {
+        keys,
+        nodes,
+        harfKeys,
+        halfNodes
+      });
+      // 处理完毕取消选中
+      this.$refs["to-tree"].setCheckedKeys([]);
+    },
+    // 异步加载左侧
+    leftloadNode(node, resolve) {
+      if (node.level === 0) {
+        return resolve(this.self_from_data);
+      }
+      this.lazyFn && this.lazyFn(node, resolve, "left");
+    },
+    // 异步加载右侧
+    rightloadNode(node, resolve) {
+      if (node.level === 0) {
+        return resolve(this.self_to_data);
+      }
+
+      this.lazyFn && this.lazyFn(node, resolve, "right");
+    },
+    // 源树选中事件 - 是否禁用穿梭按钮
+    fromTreeChecked(nodeObj, treeObj) {
+      this.from_check_keys = treeObj.checkedNodes
+      this.$nextTick(() => {
+
+        this.$emit("left-check-change", nodeObj, treeObj, this.from_check_all)
+      })
+    },
+    // 目标树选中事件 - 是否禁用穿梭按钮
+    toTreeChecked(nodeObj, treeObj) {
+      this.to_check_keys = treeObj.checkedNodes;
+      this.$nextTick(() => {
+        this.$emit("right-check-change", nodeObj, treeObj, this.to_check_all);
+      });
+    },
+    // 源数据 总全选checkbox
+    fromAllBoxChange(val) {
+      if (this.self_from_data.length === 0) {
+        return;
+      }
+      if (val) {
+        this.from_check_keys = this.self_from_data;
+        this.$refs["from-tree"].setCheckedNodes(this.self_from_data);
+      } else {
+        this.$refs["from-tree"].setCheckedNodes([]);
+        this.from_check_keys = [];
+      }
+      this.$emit("left-check-change", null, null, this.from_check_all);
+    },
+    // 目标数据 总全选checkbox
+    toAllBoxChange(val) {
+      if (this.self_to_data.length === 0) {
+        return;
+      }
+      if (val) {
+        this.to_check_keys = this.self_to_data;
+        this.$refs["to-tree"].setCheckedNodes(this.self_to_data);
+      } else {
+        this.$refs["to-tree"].setCheckedNodes([]);
+        this.to_check_keys = [];
+      }
+      this.$emit("right-check-change", null, null, this.to_check_all);
+    },
+    // 源数据 筛选
+    filterNodeFrom(value, data) {
+      if (this.filterNode) {
+        return this.filterNode(value, data, "form");
+      }
+      if (!value) return true;
+      return data[this.defaultProps.label].indexOf(value) !== -1;
+    },
+    // 目标数据筛选
+    filterNodeTo(value, data) {
+      if (this.filterNode) {
+        return this.filterNode(value, data, "to");
+      }
+      if (!value) return true;
+      return data[this.defaultProps.label].indexOf(value) !== -1;
+    },
+  },
+  computed: {
+    // 左侧数据
+    self_from_data() {
+      let from_array = [...this.from_data];
+      if (!this.arrayToTree) {
+        from_array.forEach(item => {
+          item[this.pid] = 0;
+        });
+        return from_array;
+      } else {
+        return arrayToTree(from_array, {
+          id: this.node_key,
+          pid: this.pid,
+          children: this.defaultProps.children
+        });
+      }
+    },
+    // 右侧数据
+    self_to_data() {
+      let to_array = [...this.to_data];
+      if (!this.arrayToTree) {
+        to_array.forEach(item => {
+          item[this.pid] = 0;
+        });
+        return to_array;
+      } else {
+        return arrayToTree(to_array, {
+          id: this.node_key,
+          pid: this.pid,
+          children: this.defaultProps.children
+        });
+      }
+    },
+    // 左侧菜单名
+    fromTitle() {
+      let [text] = this.title;
+      return text;
+    },
+    // 右侧菜单名
+    toTitle() {
+      let [, text] = this.title;
+      return text;
+    },
+    // 右侧菜单名2
+    toTitleSecond() {
+      let [, , text] = this.title;
+      return text;
+    },
+    // 右侧菜单名3
+    toTitleThird() {
+      let [, , , text] = this.title;
+      return text;
+    },
+    // 上部按钮名
+    fromButton() {
+      if (this.button_text == undefined) {
+        return;
+      }
+
+      let [text] = this.button_text;
+      return text;
+    },
+    // 下部按钮名
+    toButton() {
+      if (this.button_text == undefined) {
+        return;
+      }
+      let [, text] = this.button_text;
+      return text;
+    }
+  },
+  watch: {
+    // 左侧 状态监测
+    from_check_keys(val) {
+      if (val.length > 0) {
+        // 穿梭按钮是否禁用
+        this.from_disabled = false;
+        // 总半选是否开启
+        this.from_is_indeterminate = true;
+
+        // 总全选是否开启 - 根据选中节点中为根节点的数量是否和源数据长度相等
+        let allCheck = val.filter(item => item[this.pid] === 0);
+        if (allCheck.length == this.self_from_data.length) {
+          // 关闭半选 开启全选
+          this.from_is_indeterminate = false;
+          this.from_check_all = true;
+        } else {
+          this.from_is_indeterminate = true;
+          this.from_check_all = false;
+        }
+      } else {
+        this.from_disabled = true;
+        this.from_is_indeterminate = false;
+        this.from_check_all = false;
+      }
+    },
+    // 右侧 状态监测
+    to_check_keys(val) {
+      if (val.length > 0) {
+        // 穿梭按钮是否禁用
+        this.to_disabled = false;
+        // 总半选是否开启
+        this.to_is_indeterminate = true;
+
+        // 总全选是否开启 - 根据选中节点中为根节点的数量是否和源数据长度相等
+        let allCheck = val.filter(item => item[this.pid] === 0);
+        if (allCheck.length == this.self_to_data.length) {
+          // 关闭半选 开启全选
+          this.to_is_indeterminate = false;
+          this.to_check_all = true;
+        } else {
+          this.to_is_indeterminate = true;
+          this.to_check_all = false;
+        }
+      } else {
+        this.to_disabled = true;
+        this.to_is_indeterminate = false;
+        this.to_check_all = false;
+      }
+    },
+    // 左侧 数据筛选
+    filterFrom(val) {
+      this.$refs["from-tree"].filter(val);
+    },
+    // 右侧 数据筛选
+    filterTo(val) {
+      this.$refs["to-tree"].filter(val);
+    },
+    // 监视默认选中
+    defaultCheckedKeys(val) {
+      if (this.defaultTransfer && val.length > 0) {
+        this.$nextTick(() => {
+          this.addToAims(false);
+        });
+      }
+    },
+    // 监视默认展开
+    defaultExpandedKeys(val) {
+      let _form = new Set(this.from_expanded_keys.concat(val));
+      this.from_expanded_keys = [..._form];
+      let _to = new Set(this.to_expanded_keys.concat(val));
+      this.to_expanded_keys = [..._to];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.el-tree {
+  min-width: 100%;
+  display: inline-block !important;
+}
+
+.transfer {
+  position: relative;
+  overflow: hidden;
+}
+
+.transfer-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.transfer-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.transfer-right-item {
+  height: calc((100% - 41px) / 2);
+}
+
+.transfer-right-small {
+  height: 41px;
+}
+
+.transfer-right-only {
+  height: 100%;
+}
+
+.transfer-main {
+  padding: 10px;
+  // height: calc(100% - 41px);
+  box-sizing: border-box;
+  overflow: hidden;
+  .el-tree {
+    height: calc(100vh - 590px);
+    overflow: auto;
+  }
+}
+
+.transfer-left,
+.transfer-right {
+  border: 1px solid #ebeef5;
+  width: 40%;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: 5px;
+  vertical-align: middle;
+}
+
+.transfer-center {
+  position: absolute;
+  top: 50%;
+  left: 40%;
+  width: 20%;
+  transform: translateY(-50%);
+  text-align: center;
+}
+
+.transfer-center-item {
+  padding: 10px;
+  overflow: hidden;
+}
+
+.address-list-center {
+  height: 100%;
+}
+
+.address-list-center > .transfer-center-item {
+  height: 50%;
+  padding: 70px 10px 0;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.address-list-center > .address-only-item {
+  height: 100%;
+  position: relative;
+}
+
+.address-only-item > .address-first-btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.transfer-title {
+  border-bottom: 1px solid #ebeef5;
+  padding: 0 15px;
+  height: 40px;
+  line-height: 40px;
+  color: #333;
+  font-size: 16px;
+  background-color: #f5f7fa;
+  font-weight: normal;
+}
+
+.transfer-title .el-checkbox {
+  margin-right: 10px;
+}
+
+.filter-tree {
+  margin-bottom: 10px;
+}
+
+.u-clear {
+  float: right;
+  color: #67c23a;
+  font-size: 14px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/NCC-enlarge/index.vue b/src/components/NCC-enlarge/index.vue
new file mode 100644
index 0000000..3ec56bd
--- /dev/null
+++ b/src/components/NCC-enlarge/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="enlarge-main">
+    <img :src="img" class="enlarge-img" @click="dialogVisible = true" title="点击查看放大" />
+    <el-dialog :visible.sync="dialogVisible" append-to-body width="600px"
+      class="NCC-dialog NCC-dialog_center enlarge-dialog">
+      <img width="100%" :src="img" alt />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["img"],
+  data() {
+    return {
+      dialogVisible: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.enlarge-main {
+  cursor: pointer;
+  display: inline-block;
+  width: 120px;
+  height: 120px;
+  overflow: hidden;
+  margin: 0 8px 8px 0;
+  border: 1px solid #c0ccda;
+  border-radius: 6px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  .enlarge-img {
+    width: 120px;
+    height: 120px;
+    object-fit: contain;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NCC-tableOperation/index.vue b/src/components/NCC-tableOperation/index.vue
new file mode 100644
index 0000000..a040e56
--- /dev/null
+++ b/src/components/NCC-tableOperation/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="ncc-table-opts">
+    <!--左侧插槽-->
+    <slot name="left" />
+    <template v-if="isJudgePer">
+      <el-button size="mini" type="text" @click="edit()" v-if="hasEdit" :disabled="editDisabled"
+        v-has="editPerCode">{{ editText === '编辑' ? $t(`common.editBtn`) : editText }}</el-button>
+    </template>
+    <template v-else>
+      <el-button size="mini" type="text" @click="edit()" v-if="hasEdit" :disabled="editDisabled">
+        {{ editText === '编辑' ? $t(`common.editBtn`) : editText }}</el-button>
+    </template>
+    <!-- 中间插槽 -->
+    <slot name="center" />
+    <template v-if="isJudgePer">
+      <el-button size="mini" type="text" class="NCC-table-delBtn" @click="del()" v-if="hasDel"
+        :disabled="delDisabled" v-has="delPerCode">
+        {{ delText === '删除' ? $t(`common.delBtn`) : delText }}</el-button>
+    </template>
+    <template v-else>
+      <el-button size="mini" type="text" class="NCC-table-delBtn" @click="del()" v-if="hasDel"
+        :disabled="delDisabled">{{ delText === '删除' ? $t(`common.delBtn`) : delText }}</el-button>
+    </template>
+    <!-- 默认右侧插槽 -->
+    <slot />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    delText: {
+      type: String,
+      default: '删除'
+    },
+    editText: {
+      type: String,
+      default: '编辑'
+    },
+    // 是否展示编辑按钮
+    hasEdit: {
+      type: Boolean,
+      default: true
+    },
+    // 是否展示删除按钮
+    hasDel: {
+      type: Boolean,
+      default: true
+    },
+    editDisabled: {
+      type: Boolean,
+      default: false
+    },
+    delDisabled: {
+      type: Boolean,
+      default: false
+    },
+    // 编辑按钮权限标识
+    editPerCode: {
+      type: String,
+      default: 'btn_edit'
+    },
+    // 删除按钮权限标识
+    delPerCode: {
+      type: String,
+      default: 'btn_remove'
+    },
+    // 是否开启权限判断
+    isJudgePer: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    del() {
+      this.$emit('del')
+    },
+    edit() {
+      this.$emit('edit')
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/NCC-topOperation/index.vue b/src/components/NCC-topOperation/index.vue
new file mode 100644
index 0000000..1af18ee
--- /dev/null
+++ b/src/components/NCC-topOperation/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="ncc-opts">
+    <!--左侧插槽-->
+    <slot name="left" />
+    <template v-if="isJudgePer">
+      <el-button type="primary" @click="add" icon="el-icon-plus" v-has="addPerCode">
+        {{ addText === '新建' ? $t(`common.addBtn`) : addText }}
+      </el-button>
+    </template>
+    <template v-else>
+      <el-button type="primary" @click="add" icon="el-icon-plus">
+        {{ addText === '新建' ? $t(`common.addBtn`) : addText }}
+      </el-button>
+    </template>
+    <!-- 默认右侧插槽 -->
+    <slot />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    refreshText: {
+      type: String,
+      default: '刷新'
+    },
+    addText: {
+      type: String,
+      default: '新建'
+    },
+    // 刷新加载状态
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 是否展示刷新按钮
+    hasRefresh: {
+      type: Boolean,
+      default: true
+    },
+    // 新增按钮权限标识
+    addPerCode: {
+      type: String,
+      default: 'btn_add'
+    },
+    // 是否开启权限判断
+    isJudgePer: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    refresh() {
+      this.$emit('refresh')
+    },
+    add() {
+      this.$emit('add')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ncc-opts {
+  display: inline-block;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NCC-uploadBtn/index.vue b/src/components/NCC-uploadBtn/index.vue
new file mode 100644
index 0000000..4dda851
--- /dev/null
+++ b/src/components/NCC-uploadBtn/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <el-upload :action="define.comUrl+url" :headers="{ Authorization: $store.getters.token}"
+    :on-success="handleSuccess" :before-upload="beforeUpload" :show-file-list="false"
+    class="upload-btn">
+    <el-button :type="buttonType" icon="el-icon-upload2" :loading="loading">{{buttonText}}
+    </el-button>
+  </el-upload>
+</template>
+
+<script>
+export default {
+  name: 'NCC-uploadBtn',
+  data() {
+    return {
+      loading: false
+    }
+  },
+  props: {
+    url: {
+      type: String,
+      default: ""
+    },
+    buttonText: {
+      type: String,
+      default: '导入'
+    },
+    buttonType: {
+      type: String,
+      default: 'text'
+    }
+  },
+  methods: {
+    beforeUpload() {
+      this.loading = true
+    },
+    handleSuccess(res) {
+      this.loading = false
+      if (res.code == 200) {
+        this.$message({
+          message: res.msg,
+          type: 'success',
+          duration: 1000
+        })
+        this.$emit('on-success')
+      } else {
+        this.$message({
+          message: res.msg,
+          type: 'error',
+          duration: 1000
+        })
+      }
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.upload-btn {
+  display: inline-block;
+  margin: 0 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NCC-userBox/index.vue b/src/components/NCC-userBox/index.vue
new file mode 100644
index 0000000..577eb18
--- /dev/null
+++ b/src/components/NCC-userBox/index.vue
@@ -0,0 +1,92 @@
+<template>
+  <el-dialog :title="'选择'+title" :close-on-click-modal="false" :visible.sync="visible"
+    class="NCC-dialog NCC-dialog_center NCC-dialog-tree" lock-scroll append-to-body
+    width='450px'>
+    <el-input placeholder="输入姓名或者编号进行过滤" v-model="keyword" clearable @keyup.enter.native="getList">
+      <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
+    </el-input>
+    <el-tree :data="treeData" :props="props" highlight-current :expand-on-click-node="false"
+      check-on-click-node @node-click="handleNodeClick" class="NCC-common-el-tree" node-key="id"
+      v-loading="loading" lazy :load="loadNode">
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <i :class="data.icon"></i>
+        <span class="text">{{node.label}}</span>
+      </span>
+    </el-tree>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{$t('common.confirmButton')}}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getImUserSelector } from '@/api/permission/user'
+export default {
+  name: 'UserBox',
+  props: {
+    title: {
+      type: String,
+      default: '审批人'
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      id: '',
+      nodeId: '0',
+      props: {
+        children: 'children',
+        label: 'fullName',
+        value: 'id',
+        isLeaf: 'isLeaf'
+      },
+      treeData: [],
+      loading: false,
+      keyword: ''
+    }
+  },
+  methods: {
+    init() {
+      this.visible = true
+      this.keyword = ''
+      this.nodeId = '0'
+      this.getList()
+    },
+    getList() {
+      this.loading = true
+      if (this.keyword) this.nodeId = '0'
+      getImUserSelector(this.nodeId, this.keyword).then(res => {
+        this.treeData = res.data.list
+        this.loading = false
+      })
+    },
+    loadNode(node, resolve) {
+      if (node.level === 0) {
+        this.nodeId = '0'
+        return resolve(this.treeData)
+      }
+      this.nodeId = node.data.id
+      getImUserSelector(this.nodeId).then(res => {
+        resolve(res.data.list)
+      })
+    },
+    handleNodeClick(data) {
+      if (data.type !== 'user') return
+      this.id = data.id
+    },
+    dataFormSubmit() {
+      if (!this.id) {
+        this.$message({
+          message: `请选择${this.title}`,
+          type: 'error',
+          duration: 1000,
+        })
+        return
+      }
+      this.visible = false
+      this.$emit('submit', this.id)
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/NCC-userSelect/index.vue b/src/components/NCC-userSelect/index.vue
new file mode 100644
index 0000000..8161866
--- /dev/null
+++ b/src/components/NCC-userSelect/index.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="userSelect-container">
+    <div class="userSelect-input" @click="openDialog">
+      <el-input :placeholder="placeholder" v-model="innerValue" readonly :disabled="disabled">
+        <i slot="suffix" class="el-input__icon el-icon-circle-close" @click.stop="clear"
+          v-if="clearable"></i>
+        <i slot="suffix" class="el-input__icon el-icon-arrow-down"
+          :class="{'clearable':clearable}"></i>
+      </el-input>
+    </div>
+    <el-dialog title="选择用户" :close-on-click-modal="false" :visible.sync="visible"
+      class="NCC-dialog NCC-dialog_center transfer-dialog" lock-scroll append-to-body
+      width="800px" :modal-append-to-body="false">
+      <div class="transfer__body" :element-loading-text="$t('common.loadingText')">
+        <div class="transfer-pane">
+          <div class="transfer-pane__tools">
+            <el-input placeholder="输入关键词进行搜索" v-model="keyword" @keyup.enter.native="getList">
+              <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
+            </el-input>
+          </div>
+          <div class="transfer-pane__body">
+            <el-tree :data="treeData" :props="props" highlight-current :expand-on-click-node="false"
+              check-on-click-node @node-click="handleNodeClick" class="NCC-common-el-tree"
+              node-key="id" v-loading="loading" lazy :load="loadNode">
+              <span class="custom-tree-node" slot-scope="{ node, data }">
+                <i :class="data.icon"></i>
+                <span class="text">{{node.label}}</span>
+              </span>
+            </el-tree>
+          </div>
+        </div>
+        <div class="transfer-pane">
+          <div class="transfer-pane__tools">
+            <span>已选</span>
+            <el-button @click="removeAll" type="text">清空列表</el-button>
+          </div>
+          <div class="transfer-pane__body shadow right-pane">
+            <template>
+              <div v-for="(item, index) in selectedData" :key=" index" class="selected-item">
+                <span>{{ item.fullName}}</span>
+                <i class="el-icon-delete" @click="removeData(index)"></i>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="visible=false">{{$t('common.cancelButton')}}</el-button>
+        <el-button type="primary" @click="confirm">{{$t('common.confirmButton')}}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getImUserSelector, getUserInfoList } from '@/api/permission/user'
+export default {
+  name: 'userSelect',
+  props: {
+    value: {
+      default: ''
+    },
+    interfaceId: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      keyword: '',
+      nodeId: '',
+      innerValue: '',
+      loading: false,
+      props: {
+        children: 'children',
+        label: 'fullName',
+        isLeaf: 'isLeaf'
+      },
+      treeData: [],
+      selectedData: [],
+    }
+  },
+  watch: {
+    value(val) {
+      this.setDefault()
+    }
+  },
+  created() {
+    this.setDefault()
+  },
+  methods: {
+    clear() {
+      if (this.disabled) return
+      this.innerValue = ''
+      this.selectedData = []
+      this.$emit('input', '')
+      this.$emit('change', '', '')
+    },
+    openDialog() {
+      if (this.disabled) return
+      this.visible = true
+      this.keyword = ''
+      this.nodeId = '0'
+      this.getList()
+    },
+    confirm() {
+      let txt = '', ids = ''
+      for (let i = 0; i < this.selectedData.length; i++) {
+        txt += (i ? ',' : '') + this.selectedData[i].fullName
+        ids += (i ? ',' : '') + this.selectedData[i].id
+      }
+      this.innerValue = txt
+      this.$emit('input', ids)
+      this.$emit('change', ids, this.selectedData)
+      this.visible = false
+    },
+    setDefault() {
+      this.selectedData = []
+      if (!this.value) return this.innerValue = ''
+      const arr = this.value.split(',')
+      getUserInfoList(arr).then(res => {
+        const list = res.data.list
+        this.selectedData = list
+        let txt = ''
+        for (let i = 0; i < list.length; i++) {
+          txt += (i ? ',' : '') + list[i].fullName
+        }
+        this.innerValue = txt
+      })
+    },
+    getList() {
+      this.loading = true
+      if (this.keyword) this.nodeId = '0'
+      getImUserSelector(this.nodeId, this.keyword).then(res => {
+        this.treeData = res.data.list
+        this.loading = false
+      })
+    },
+    loadNode(node, resolve) {
+      if (node.level === 0) {
+        this.nodeId = '0'
+        return resolve(this.treeData)
+      }
+      this.nodeId = node.data.id
+      getImUserSelector(this.nodeId).then(res => {
+        resolve(res.data.list)
+      })
+    },
+    handleNodeClick(data) {
+      if (data.type !== 'user') return
+      const boo = this.selectedData.some(o => o.id === data.id)
+      if (boo) return
+      const item = {
+        id: data.id,
+        fullName: data.fullName
+      }
+      this.multiple ? this.selectedData.push(item) : this.selectedData = [item]
+    },
+    removeAll() {
+      this.selectedData = []
+    },
+    removeData(index) {
+      this.selectedData.splice(index, 1)
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.userSelect-container {
+  width: 100%;
+  .userSelect-input {
+    width: 100%;
+    cursor: pointer;
+    .is-disabled {
+      &:hover {
+        .el-icon-circle-close {
+          display: none;
+        }
+        .el-icon-arrow-down {
+          display: inline-block;
+        }
+      }
+      >>> input {
+        cursor: not-allowed;
+      }
+    }
+    >>> input {
+      cursor: pointer;
+    }
+    .el-icon-circle-close {
+      display: none;
+    }
+    &:hover {
+      .el-icon-circle-close {
+        display: block;
+      }
+      .el-icon-arrow-down.clearable {
+        display: none;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NCCEditor/quill.vue b/src/components/NCCEditor/quill.vue
index 6eff03f..d09bca5 100644
--- a/src/components/NCCEditor/quill.vue
+++ b/src/components/NCCEditor/quill.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="prefixCls">
-    <quill-editor v-model="content" ref="myQuillEditor" :content="value" :options="editorOption"
+    <quill-editor v-model="content" ref="myQuillEditor" :content="value" :options="editorOption" :disabled="disabled"
       @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"
       @change="onEditorChange($event)">
     </quill-editor>
@@ -29,6 +29,10 @@ export default {
     placeholder: {
       type: String,
       default: '请输入内容...'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -47,11 +51,11 @@ export default {
             [{ align: [] }],
             [{ direction: "rtl" }],
             ["clean"],
-            ["link", "image"],
+            // ["link", "image"],
           ]
         },
         theme: 'snow',
-        placeholder: this.placeholder
+        placeholder: this.placeholder,
       }
     }
   },
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
new file mode 100644
index 0000000..86f45c3
--- /dev/null
+++ b/src/components/SizeSelect/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-dropdown trigger="click" @command="handleSetSize">
+    <div>
+      <i class="ym-custom ym-custom-format-size" />
+    </div>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value"
+        :command="item.value">
+        {{
+          item.label }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      sizeOptions: [
+        { label: 'Default', value: 'default' },
+        { label: 'Medium', value: 'medium' },
+        { label: 'Small', value: 'small' },
+        { label: 'Mini', value: 'mini' }
+      ]
+    }
+  },
+  computed: {
+    size() {
+      return this.$store.getters.size
+    }
+  },
+  methods: {
+    handleSetSize(size) {
+      this.$ELEMENT.size = size
+      this.$store.dispatch('app/setSize', size)
+      this.refreshView()
+      this.$message({
+        message: 'Switch Size Success',
+        type: 'success'
+      })
+    },
+    refreshView() {
+      // In order to make the cached page re-rendered
+      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
+
+      const { fullPath } = this.$route
+
+      this.$nextTick(() => {
+        this.$router.replace({
+          path: '/redirect' + fullPath
+        })
+      })
+    }
+  }
+
+}
+</script>
diff --git a/src/components/VisualPortal/CommonFunc/index.vue b/src/components/VisualPortal/CommonFunc/index.vue
new file mode 100644
index 0000000..1fcb3ba
--- /dev/null
+++ b/src/components/VisualPortal/CommonFunc/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <el-card shadow="never" class="commonFunc-box">
+    <div slot="header" class="portal-common-title">
+      <span>{{title}}</span>
+    </div>
+    <div class="commonFunc-box-body">
+      <router-link class="item" :to="'/'+item.urlAddress" v-for="(item,i) in menuList" :key="i">
+        <i :class="item.icon" :style="{color:item.iconBackgroundColor||'#1890FF'}"></i>
+        <p class="name">{{item.fullName}}</p>
+      </router-link>
+    </div>
+  </el-card>
+</template>
+<script>
+export default {
+  props: {
+    title: { type: String, default: '' },
+    list: { type: Array, default: () => [] }
+  },
+  data() {
+    return {
+      menuList: []
+    }
+  },
+  created() {
+    this.menuList = this.list.filter(o => o.id)
+  },
+  watch: {
+    list: {
+      handler(val) {
+        this.menuList = val.filter(o => o.id)
+      },
+      deep: true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.commonFunc-box {
+  >>> .el-card__body {
+    width: 100%;
+    height: calc(100% - 55px);
+  }
+  .commonFunc-box-body {
+    padding: 0 30px;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .item {
+      display: block;
+      text-align: center;
+      i {
+        display: inline-block;
+        height: 40px;
+        font-size: 40px;
+        margin-bottom: 10px;
+      }
+      .name {
+        font-size: 14px;
+        line-height: 20px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/VisualPortal/DataBoard/index.vue b/src/components/VisualPortal/DataBoard/index.vue
new file mode 100644
index 0000000..7580f93
--- /dev/null
+++ b/src/components/VisualPortal/DataBoard/index.vue
@@ -0,0 +1,108 @@
+<template>
+  <el-row :gutter="10" class="dataBoard">
+    <el-col :span="6" class="dataBoard-item" v-for="(item,i) in menuList" :key="i">
+      <el-card shadow="never">
+        <div class="dataBoard-body">
+          <i :class="item.icon+' dataBoard-body-item dataBoard-body-item'+(i+1)"></i>
+          <div class="text">
+            <p class="num">{{item.num}}</p>
+            <p class="name">{{item.fullName}}</p>
+          </div>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+<script>
+import { getCountData } from '@/api/home'
+export default {
+  props: {
+    title: { type: String, default: '' },
+   // list: { type: Array, default: () => [] }
+  },
+  data() {
+    return {
+      menuList: []
+    }
+  },
+  created() {
+     this.getData()
+  },
+   methods: {
+    getData() {
+      getCountData().then(res => {
+        this.menuList = res.data.list
+      })
+    }
+   },
+  watch: {
+    list: {
+      handler(val) {
+        this.menuList = val
+      },
+      deep: true
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.dataBoard {
+  height: 100%;
+  overflow: hidden;
+  .dataBoard-item {
+    height: 100%;
+  }
+  >>> .el-card {
+    width: 100%;
+    height: 100%;
+    .el-card__body {
+      padding: 0;
+      height: 100%;
+    }
+  }
+  .dataBoard-body {
+    padding-left: 30px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    .dataBoard-body-item {
+      width: 66px;
+      height: 66px;
+      margin-right: 16px;
+      border-radius: 50%;
+      text-align: center;
+      line-height: 66px;
+      font-size: 36px;
+      flex-shrink: 0;
+      &.dataBoard-body-item1 {
+        background: #f2ebfb;
+        color: #7b1ae1;
+      }
+      &.dataBoard-body-item2 {
+        background: #edf8fe;
+        color: #4ab8ff;
+      }
+      &.dataBoard-body-item3 {
+        background: #fff7e4;
+        color: #ff8b58;
+      }
+      &.dataBoard-body-item4 {
+        background: #fff2f5;
+        color: #fc5b87;
+      }
+    }
+    .text {
+      display: inline-block;
+      height: 56px;
+      .num {
+        font-size: 20px;
+        line-height: 36px;
+      }
+      .name {
+        font-size: 14px;
+        color: #666;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/VisualPortal/HAnnularChart/index.vue b/src/components/VisualPortal/HAnnularChart/index.vue
new file mode 100644
index 0000000..91c9b57
--- /dev/null
+++ b/src/components/VisualPortal/HAnnularChart/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-card shadow="never" class="portal-eChart-box">
+    <div slot="header" class="portal-common-title">
+      <span>{{title}}</span>
+    </div>
+    <div class="eChart-box-body">
+      <div ref="chart" id="chart" v-show="!isEmpty"></div>
+      <div class="portal-common-noData portal-common-noData-eChart" v-show="isEmpty">
+        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img">
+        <p class="noData-txt">暂无数据</p>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script>
+import echartMixin from '@/components/VisualPortal/mixins'
+export default {
+  mixins: [echartMixin]
+}
+</script>
diff --git a/src/components/VisualPortal/HAreaChart/index.vue b/src/components/VisualPortal/HAreaChart/index.vue
new file mode 100644
index 0000000..91c9b57
--- /dev/null
+++ b/src/components/VisualPortal/HAreaChart/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-card shadow="never" class="portal-eChart-box">
+    <div slot="header" class="portal-common-title">
+      <span>{{title}}</span>
+    </div>
+    <div class="eChart-box-body">
+      <div ref="chart" id="chart" v-show="!isEmpty"></div>
+      <div class="portal-common-noData portal-common-noData-eChart" v-show="isEmpty">
+        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img">
+        <p class="noData-txt">暂无数据</p>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script>
+import echartMixin from '@/components/VisualPortal/mixins'
+export default {
+  mixins: [echartMixin]
+}
+</script>
diff --git a/src/components/VisualPortal/HBarChart/index.vue b/src/components/VisualPortal/HBarChart/index.vue
new file mode 100644
index 0000000..ea50dc1
--- /dev/null
+++ b/src/components/VisualPortal/HBarChart/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <el-card shadow="never" class="portal-eChart-box">
+    <div slot="header" class="portal-common-title">
+      <span>{{title}}</span>
+    </div>
+    <div class="eChart-box-body">
+      <div ref="chart" id="chart" v-show="!isEmpty"></div>
+      <div class="portal-common-noData portal-common-noData-eChart" v-show="isEmpty">
+        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img">
+        <p class="noData-txt">暂无数据</p>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script>
+import { getProjectMonthLine } from "@/api/home";
+import echarts from 'echarts'
+import resize from '@/components/Charts/mixins/resize'
+export default {
+  mixins: [resize],
+  props: {
+    title: { type: String, default: '' },
+    option: { type: Object, default: () => { } }
+  },
+  data() {
+    return {
+      chart: null,
+      currOption: {},
+      isEmpty: false
+    }
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      getProjectMonthLine().then((res) => {
+        window.console.log("柱状图:" + res.data.chartdata);
+        this.currOption = res.data.chartdata;
+        this.initChart();
+      });
+    },
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart);
+      this.chart.setOption(this.currOption);
+      setTimeout(() => {
+        this.$nextTick(() => {
+          this.chart.resize();
+        });
+      }, 50);
+    },
+  },
+  beforeDestroy() {
+    if (!this.chart) return;
+    this.chart.dispose();
+    this.chart = null;
+  },
+}
+</script>
\ No newline at end of file
diff --git a/src/components/VisualPortal/HEmail/index.vue b/src/components/VisualPortal/HEmail/index.vue
new file mode 100644
index 0000000..3511756
--- /dev/null
+++ b/src/components/VisualPortal/HEmail/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <el-card shadow="never" class="portal-todoList-box">
+    <div slot="header" class="portal-common-title">
+      <span>{{title}}</span>
+    </div>
+    <div class="portal-todoList-box-body">
+      <template v-if="list.length">
+        <router-link class="item" to="/extend/email" v-for="(item, i) in list" :key="i">
+          <span class="name">{{item.fullName}}</span>
+          <span class="time">{{item.creatorTime | toDateText()}}</span>
+        </router-link>
+      </template>
+      <div class="portal-common-noData" v-else>
+        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img">
+        <p class="noData-txt">暂无数据</p>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script>
+import { getEmail } from '@/api/home'
+export default {
+  props: {
+    title: { type: String, default: '' }
+  },
+  data() {
+    return {
+      list: []
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      getEmail().then(res => {
+        this.list = res.data.list.slice(0, 7)
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/VisualPortal/HLineChart/index.vue b/src/components/VisualPortal/HLineChart/index.vue
new file mode 100644
index 0000000..8422188
--- /dev/null
+++ b/src/components/VisualPortal/HLineChart/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-card shadow="never" class="portal-eChart-box">
+    <div slot="header" class="portal-common-title">
+      <span>{{title}}</span>
+    </div>
+    <div class="eChart-box-body">
+      <div ref="chart" id="chart" v-show="!isEmpty"></div>
+      <div class="portal-common-noData portal-common-noData-eChart" v-show="isEmpty">
+        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img">
+        <p class="noData-txt">暂无数据</p>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script>
+import echartMixin from '@/components/VisualPortal/mixins'
+export default {
+  mixins: [echartMixin]
+}
+</script>
\ No newline at end of file
diff --git a/src/components/VisualPortal/HNotice/index.vue b/src/components/VisualPortal/HNotice/index.vue
new file mode 100644
index 0000000..61ceb71
--- /dev/null
+++ b/src/components/VisualPortal/HNotice/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <el-card shadow="never" class="portal-todoList-box">
+    <div slot="header" class="portal-common-title">
+      <span>{{title}}</span>
+    </div>
+    <div class="portal-todoList-box-body">
+      <template v-if="list.length">
+        <router-link class="item" to="/messageRecord" v-for="(item, i) in list" :key="i">
+          <span class="name">{{item.fullName}}</span>
+          <span class="time">{{item.creatorTime | toDate('yyyy-MM-dd')}}</span>
+        </router-link>
+      </template>
+      <div class="portal-common-noData" v-else>
+        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img">
+        <p class="noData-txt">暂无数据</p>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script>
+import { getArticle } from '@/api/home'
+export default {
+  props: {
+    title: { type: String, default: '' }
+  },
+  data() {
+    return {
+      list: []
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      getArticle().then(res => {
+        this.list = res.data.list.slice(0, 7)
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/VisualPortal/HPieChart/index.vue b/src/components/VisualPortal/HPieChart/index.vue
new file mode 100644
index 0000000..8422188
--- /dev/null
+++ b/src/components/VisualPortal/HPieChart/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-card shadow="never" class="portal-eChart-box">
+    <div slot="header" class="portal-common-title">
+      <span>{{title}}</span>
+    </div>
+    <div class="eChart-box-body">
+      <div ref="chart" id="chart" v-show="!isEmpty"></div>
+      <div class="portal-common-noData portal-common-noData-eChart" v-show="isEmpty">
+        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img">
+        <p class="noData-txt">暂无数据</p>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script>
+import echartMixin from '@/components/VisualPortal/mixins'
+export default {
+  mixins: [echartMixin]
+}
+</script>
\ No newline at end of file
diff --git a/src/components/VisualPortal/HRadarChart/index.vue b/src/components/VisualPortal/HRadarChart/index.vue
new file mode 100644
index 0000000..8422188
--- /dev/null
+++ b/src/components/VisualPortal/HRadarChart/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-card shadow="never" class="portal-eChart-box">
+    <div slot="header" class="portal-common-title">
+      <span>{{title}}</span>
+    </div>
+    <div class="eChart-box-body">
+      <div ref="chart" id="chart" v-show="!isEmpty"></div>
+      <div class="portal-common-noData portal-common-noData-eChart" v-show="isEmpty">
+        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img">
+        <p class="noData-txt">暂无数据</p>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script>
+import echartMixin from '@/components/VisualPortal/mixins'
+export default {
+  mixins: [echartMixin]
+}
+</script>
\ No newline at end of file
diff --git a/src/components/VisualPortal/Layout/index.vue b/src/components/VisualPortal/Layout/index.vue
new file mode 100644
index 0000000..4a3b7f2
--- /dev/null
+++ b/src/components/VisualPortal/Layout/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <el-scrollbar class="layout-area">
+    <template v-if="layout.length">
+      <grid-layout :layout.sync="layout" :row-height="40" :is-draggable="false"
+        :is-resizable="false">
+        <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h"
+          :i="item.i" :key="item.i" static>
+          <Todo v-if="item.nccKey==='todo'" :title="item.title" />
+          <CommonFunc v-if="item.nccKey==='commonFunc'" :title="item.title" :list="item.list" />
+          <TodoList v-if="item.nccKey==='todoList'" :title="item.title" />
+          <HNotice v-if="item.nccKey==='notice'" :title="item.title" />
+          <HEmail v-if="item.nccKey==='email'" :title="item.title" />
+          <DataBoard v-if="item.nccKey==='dataBoard'" :title="item.title" :list="item.list" />
+          <HBarChart v-if="item.nccKey==='barChart'" :title="item.title" :option="item.option"
+            :dataType="item.dataType" :propsApi="item.propsApi" />
+          <HAnnularChart v-if="item.nccKey==='annularChart'" :title="item.title"
+            :option=" item.option" :dataType="item.dataType" :propsApi="item.propsApi" />
+          <HAreaChart v-if="item.nccKey==='areaChart'" :title="item.title" :option="item.option"
+            :dataType="item.dataType" :propsApi="item.propsApi" />
+          <HLineChart v-if="item.nccKey==='lineChart'" :title="item.title" :option="item.option"
+            :dataType="item.dataType" :propsApi="item.propsApi" />
+          <HPieChart v-if="item.nccKey==='pieChart'" :title="item.title" :option="item.option"
+            :dataType="item.dataType" :propsApi="item.propsApi" />
+          <HRadarChart v-if="item.nccKey==='radarChart'" :title="item.title" :option="item.option"
+            :dataType="item.dataType" :propsApi="item.propsApi" />
+          <div class="mask" v-if="mask"></div>
+        </grid-item>
+      </grid-layout>
+    </template>
+    <div class="portal-layout-nodata" v-else>
+      <img src="@/assets/images/dashboard-nodata.png" alt="" class="layout-nodata-img">
+      <p class="layout-nodata-txt">暂无数据</p>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script>
+import {
+  Todo,
+  CommonFunc,
+  TodoList,
+  HNotice,
+  HEmail,
+  DataBoard,
+  HBarChart,
+  HAnnularChart,
+  HAreaChart,
+  HLineChart,
+  HPieChart,
+  HRadarChart
+} from "@/components/VisualPortal"
+import VueGridLayout from 'vue-grid-layout'
+export default {
+  props: {
+    layout: { type: Array, default: () => [] },
+    mask: { type: Boolean, default: false },
+  },
+  components: {
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem,
+    Todo,
+    CommonFunc,
+    TodoList,
+    HNotice,
+    HEmail,
+    DataBoard,
+    HBarChart,
+    HAnnularChart,
+    HAreaChart,
+    HLineChart,
+    HPieChart,
+    HRadarChart
+  },
+}
+</script>
+<style lang="scss" scoped>
+.layout-area {
+  height: 100%;
+  overflow: hidden;
+  >>> .el-scrollbar__wrap {
+    margin-bottom: 0 !important;
+    overflow-x: auto;
+  }
+  >>> .el-scrollbar__bar.is-horizontal > div {
+    display: none;
+  }
+  >>> .el-card {
+    width: 100%;
+    height: 100%;
+    .el-card__body {
+      padding: 0;
+    }
+  }
+  .vue-grid-item {
+    position: relative;
+    .mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/VisualPortal/Todo/index.vue b/src/components/VisualPortal/Todo/index.vue
new file mode 100644
index 0000000..ff070f4
--- /dev/null
+++ b/src/components/VisualPortal/Todo/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <el-card shadow="never" class="todo-box">
+    <div slot="header" class="portal-common-title">
+      <span>{{title}}</span>
+    </div>
+    <div class="todo-box-body">
+      <router-link class="item" to="/workFlow/flowTodo">
+        <i class="icon-ym icon-ym-flowTodo"></i>
+        <div class="text">
+          <p class="num">{{toBeReviewed}}</p>
+          <p class="name">待我审核</p>
+        </div>
+      </router-link>
+      <router-link class="item" to="/workFlow/entrust">
+        <i class="icon-ym icon-ym-flowEntrust"></i>
+        <div class="text">
+          <p class="num">{{entrust}}</p>
+          <p class="name">流程委托</p>
+        </div>
+      </router-link>
+      <router-link class="item" to="/workFlow/flowDone">
+        <i class="icon-ym icon-ym-flowDone"></i>
+        <div class="text">
+          <p class="num">{{flowDone}}</p>
+          <p class="name">已办事宜</p>
+        </div>
+      </router-link>
+    </div>
+  </el-card>
+</template>
+<script>
+import { getFlowTodoCount } from '@/api/home'
+export default {
+  props: {
+    title: { type: String, default: '' }
+  },
+  data() {
+    return {
+      entrust: 0,
+      flowDone: 0,
+      toBeReviewed: 0
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      getFlowTodoCount().then(res => {
+        this.entrust = res.data.entrust || 0
+        this.flowDone = res.data.flowDone || 0
+        this.toBeReviewed = res.data.toBeReviewed || 0
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.todo-box {
+  >>> .el-card__body {
+    width: 100%;
+    height: calc(100% - 55px);
+  }
+  .todo-box-body {
+    padding: 0 30px;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .item {
+      height: 56px;
+      display: block;
+      i {
+        width: 56px;
+        height: 56px;
+        margin-right: 14px;
+        border-radius: 50%;
+        color: #fff;
+        display: inline-block;
+        vertical-align: top;
+        text-align: center;
+        line-height: 56px;
+        font-size: 30px;
+        &.icon-ym-flowTodo {
+          background: #f68900;
+        }
+        &.icon-ym-flowEntrust {
+          background: #1890ff;
+        }
+        &.icon-ym-flowDone {
+          background: #7b1ae1;
+        }
+      }
+      .text {
+        display: inline-block;
+        height: 56px;
+        .num {
+          font-size: 20px;
+          line-height: 36px;
+        }
+        .name {
+          font-size: 14px;
+          color: #666;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/VisualPortal/TodoList/index.vue b/src/components/VisualPortal/TodoList/index.vue
new file mode 100644
index 0000000..ad69765
--- /dev/null
+++ b/src/components/VisualPortal/TodoList/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <el-card shadow="never" class="portal-todoList-box">
+    <div slot="header" class="portal-common-title">
+      <span>{{title}}</span>
+    </div>
+    <div class="portal-todoList-box-body">
+      <template v-if="list.length">
+        <router-link class="item" to="/workFlow/flowTodo" v-for="(item, i) in list" :key="i">
+          <span class="name">{{item.fullName}}</span>
+          <span class="time">{{item.creatorTime | toDate('yyyy-MM-dd')}}</span>
+        </router-link>
+      </template>
+      <div class="portal-common-noData" v-else>
+        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img">
+        <p class="noData-txt">暂无数据</p>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script>
+import { getFlowTodo } from '@/api/home'
+export default {
+  props: {
+    title: { type: String, default: '' }
+  },
+  data() {
+    return {
+      list: []
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      getFlowTodo().then(res => {
+        this.list = res.data.list.slice(0, 7)
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/VisualPortal/index.js b/src/components/VisualPortal/index.js
new file mode 100644
index 0000000..7c06492
--- /dev/null
+++ b/src/components/VisualPortal/index.js
@@ -0,0 +1,13 @@
+// 门户设计专供
+export { default as Todo } from '@/components/VisualPortal/Todo'
+export { default as CommonFunc } from '@/components/VisualPortal/CommonFunc'
+export { default as TodoList } from '@/components/VisualPortal/TodoList'
+export { default as HNotice } from '@/components/VisualPortal/HNotice'
+export { default as HEmail } from '@/components/VisualPortal/HEmail'
+export { default as DataBoard } from '@/components/VisualPortal/DataBoard'
+export { default as HBarChart } from '@/components/VisualPortal/HBarChart'
+export { default as HAnnularChart } from '@/components/VisualPortal/HAnnularChart'
+export { default as HAreaChart } from '@/components/VisualPortal/HAreaChart'
+export { default as HLineChart } from '@/components/VisualPortal/HLineChart'
+export { default as HPieChart } from '@/components/VisualPortal/HPieChart'
+export { default as HRadarChart } from '@/components/VisualPortal/HRadarChart'
\ No newline at end of file
diff --git a/src/components/VisualPortal/mixins/index.js b/src/components/VisualPortal/mixins/index.js
new file mode 100644
index 0000000..124fff6
--- /dev/null
+++ b/src/components/VisualPortal/mixins/index.js
@@ -0,0 +1,77 @@
+import echarts from 'echarts'
+import resize from '@/components/Charts/mixins/resize'
+import { previewDataInterface } from '@/api/systemData/dataInterface'
+
+export default {
+  mixins: [resize],
+  props: {
+    title: { type: String, default: '' },
+    dataType: { type: String, default: 'static' },
+    propsApi: { type: String, default: '' },
+    option: { type: Object, default: () => {} }
+  },
+  data() {
+    return {
+      chart: null,
+      currOption: {},
+      isEmpty: false
+    }
+  },
+  mounted() {
+    if (this.dataType === 'dynamic') {
+      if (!this.propsApi) return
+      previewDataInterface(this.propsApi).then(res => {
+        this.currOption = res.data
+        this.resetChart()
+      })
+    } else {
+      this.currOption = this.option
+      this.initChart()
+    }
+  },
+  watch: {
+    option: {
+      handler(val) {
+        this.currOption = val
+        this.resetChart()
+      },
+      deep: true
+    },
+    dataType(val) {
+      if (val !== 'dynamic') {
+        this.currOption = this.option
+        this.resetChart()
+      }
+    },
+    propsApi(val) {
+      if (this.dataType === 'static') return
+      if (!val) return
+      previewDataInterface(val).then(res => {
+        this.currOption = res.data
+        this.resetChart()
+      })
+    }
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption(this.currOption)
+      setTimeout(() => {
+        this.$nextTick(() => {
+          this.chart.resize();
+        })
+      }, 50);
+    },
+    resetChart() {
+      this.isEmpty = JSON.stringify(this.currOption) === "{}"
+      this.chart && this.chart.dispose()
+      this.chart = null
+      if (!this.isEmpty) this.initChart()
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) return
+    this.chart.dispose()
+    this.chart = null
+  }
+}
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index 40cc8fc..5867ebf 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -12,6 +12,28 @@ import Screenfull from '@/components/Screenfull'
 import NCCTreeSelect from '@/components/NCC-treeSelect'
 import NCCAddress from '@/components/Generator/components/Address'
 import SelsctLoad from '@/components/SelsctLoad'
+import topOperation from '@/components/NCC-topOperation/index'
+import tableOperation from '@/components/NCC-tableOperation'
+import UserBox from '@/components/NCC-userBox'
+import ColumnSettings from '@/components/ColumnSettings'
+import UserSelect from '@/components/NCC-userSelect'
+import uploadBtn from '@/components/NCC-uploadBtn'
+// 代码生成器专供
+import NCCText from '@/components/Generator/components/NCCText'
+import NCCUploadImg from '@/components/Generator/components/Upload/UploadImg'
+import PopupSelect from '@/components/Generator/components/PopupSelect'
+import NumRange from '@/components/Generator/components/NumRange'
+import ComSelect from '@/components/Generator/components/ComSelect'
+import PosSelect from '@/components/Generator/components/PosSelect'
+import DicSelect from '@/components/Generator/components/DicSelect'
+import BillRule from '@/components/Generator/components/BillRule'
+import NCCInputTable from '@/components/Generator/components/InputTable'
+import GroupTitle from '@/components/Generator/components/GroupTitle'
+import RelationForm from '@/components/Generator/components/RelationForm'
+import RelationFormAttr from '@/components/Generator/components/RelationFormAttr'
+import RelationFlow from '@/components/Generator/components/RelationFlow'
+import RelationFlowAttr from '@/components/Generator/components/RelationFlowAttr'
+import Calculate from '@/components/Generator/components/Calculate'
 
 export default {
   install(Vue, options) {
@@ -22,13 +44,34 @@ export default {
     Vue.component('InfoEditRecord', InfoEditRecord)
     Vue.component('Pagination', Pagination)
     Vue.component('NCCTable', NCCTable)
+    Vue.component('SelsctLoad', SelsctLoad)
+    Vue.component('NCCTreeSelect', NCCTreeSelect)
+    Vue.component('topOpts', topOperation)
+    Vue.component('tableOpts', tableOperation)
+    Vue.component('uploadBtn', uploadBtn)
+    Vue.component('UserBox', UserBox)
+    Vue.component('NCCText', NCCText)
     Vue.component('NCCUploadFz', NCCUploadFz)
-    Vue.component('NCCQuill', NCCQuill)
+    Vue.component('NCCUploadImg', NCCUploadImg)
+    Vue.component('PopupSelect', PopupSelect)
+    Vue.component('NumRange', NumRange)
+    Vue.component('ComSelect', ComSelect)
     Vue.component('DepSelect', DepSelect)
-    Vue.component('NCCTreeSelect', NCCTreeSelect)
-    Vue.component('Screenfull', Screenfull)
+    Vue.component('PosSelect', PosSelect)
+    Vue.component('UserSelect', UserSelect)
+    Vue.component('DicSelect', DicSelect)
+    Vue.component('BillRule', BillRule)
+    Vue.component('NCCInputTable', NCCInputTable)
     Vue.component('NCCAddress', NCCAddress)
-    Vue.component('SelsctLoad', SelsctLoad)
+    Vue.component('GroupTitle', GroupTitle)
+    Vue.component('RelationForm', RelationForm)
+    Vue.component('RelationFormAttr', RelationFormAttr)
+    Vue.component('RelationFlow', RelationFlow)
+    Vue.component('RelationFlowAttr', RelationFlowAttr)
+    Vue.component('Calculate', Calculate)
+    Vue.component('NCCQuill', NCCQuill)
+    Vue.component('Screenfull', Screenfull)
+    Vue.component('ColumnSettings', ColumnSettings)
 
   }
 }
\ No newline at end of file
diff --git a/src/views/baseSpecialAction/dynamicModel/list/Form.vue b/src/views/baseSpecialAction/dynamicModel/list/Form.vue
index 66866c1..31069c8 100644
--- a/src/views/baseSpecialAction/dynamicModel/list/Form.vue
+++ b/src/views/baseSpecialAction/dynamicModel/list/Form.vue
@@ -51,6 +51,7 @@ import Parser from '@/components/Generator/parser/Parser'
 import ParserMixin from '@/components/Generator/parser/mixin'
 import PrintBrowse from '@/components/PrintBrowse'
 import { deepClone } from '@/utils'
+import request from "@/utils/request";
 export default {
   components: { Parser, PrintBrowse },
   mixins: [ParserMixin],
@@ -69,6 +70,7 @@ export default {
       useFormPermission: false,
       printBrowseVisible: false,
       formOperates: [],
+      taskId: '',
     }
   },
   methods: {
@@ -79,12 +81,13 @@ export default {
       if (this.isPreview) return this.$message({ message: '功能预览不支持打印', type: 'warning' })
       this.printBrowseVisible = true
     },
-    init(formConf, modelId, id, isPreview, useFormPermission) {
+    init(formConf, modelId, id, isPreview, useFormPermission, taskId) {
       this.formConf = deepClone(JSON.parse(formConf))
       this.modelId = modelId
       this.isPreview = isPreview
       this.useFormPermission = useFormPermission
       this.dataForm.id = id || ''
+      this.taskId = taskId
       this.getFormOperates()
       this.loading = true
       this.$nextTick(() => {
@@ -150,20 +153,33 @@ export default {
       const formMethod = this.dataForm.id ? updateModel : createModel
       formMethod(this.modelId, this.dataForm).then(res => {
         console.info(res);
-        alert(res.data.Id);
+        let itemId = !this.dataForm.id ? res.data.Id : '';
         this.$message({
           message: res.msg,
           type: 'success',
           duration: 1500,
-          onClose: () => {
+          onClose: async () => {
             if (callback && typeof callback === "function") callback()
             this.visible = false
             this.btnLoading = false
+            !this.dataForm.id && this.toSaveItemid(itemId)
             this.$emit('refreshDataList', true)
           }
         })
       }).catch(() => { this.btnLoading = false })
     },
+    async toSaveItemid(itemId) {
+      console.log(11);
+      let res = await request({
+        url: '/Extend/BaseSpecialActionInfo/UpdateState',
+        method: "PUT",
+        data: {
+          id: this.taskId,
+          itemId
+        },
+      })
+      return res
+    },
     dataFormSubmit() {
       if (this.isPreview) return this.$message({ message: '功能预览不支持数据保存', type: 'warning' })
       this.$refs.dynamicForm && this.$refs.dynamicForm.submitForm()
diff --git a/src/views/baseSpecialAction/index.vue b/src/views/baseSpecialAction/index.vue
index 30783cd..c36a424 100644
--- a/src/views/baseSpecialAction/index.vue
+++ b/src/views/baseSpecialAction/index.vue
@@ -49,10 +49,10 @@
               </el-table-column>
               <el-table-column prop="deadline" label="截止日期" align="left" :formatter="ncc.tableDateFormat" show-overflow-tooltip/>
               <el-table-column prop="creatorUserId" show-overflow-tooltip label="创建用户" align="left"/>
-              <el-table-column label="操作" fixed="right" width="130">
+              <el-table-column label="操作" fixed="right" width="100">
                 <template slot-scope="scope">
-                  <el-button type="text" @click="addOrUpdateHandle(scope.row.id)">发布任务</el-button>
-                  <el-button type="text" @click="toDetail(scope.row)" v-if="scope.row.state == '已发布'">行动情况</el-button>
+                  <el-button type="text" @click="addOrUpdateHandle(scope.row.id)" v-if="scope.row.state == '未发布'">发布任务</el-button>
+                  <el-button type="text" @click="toDetail(scope.row)" v-else>处理情况</el-button>
                 </template>
               </el-table-column>
             </NCC-table>
diff --git a/src/views/baseSpecialhandle/index.vue b/src/views/baseSpecialhandle/index.vue
index a16a8cd..d948ff2 100644
--- a/src/views/baseSpecialhandle/index.vue
+++ b/src/views/baseSpecialhandle/index.vue
@@ -39,7 +39,8 @@
                 show-overflow-tooltip />
               <el-table-column label="操作" fixed="right" width="130">
                 <template slot-scope="scope">
-                  <el-button type="text" @click="toFillForm(scope.row)">处理</el-button>
+                  <el-button type="text" @click="toFillForm(scope.row)">{{scope.row.state == '已填写' ? '修改' : '处理'}}</el-button>
+                  <!-- <el-button type="text" @click="toFillForm(scope.row)" v-if="scope.row.state == '已填写'">详情</el-button> -->
                 </template>
               </el-table-column>
             </NCC-table>
@@ -49,7 +50,7 @@
         </div>
       </div>
     </div>
-    <NCCForm v-if="dialogVisible" ref="NCCForm" @refresh="refresh" />
+    <NCCForm v-if="dialogVisible" ref="NCCForm" @refreshDataList="refresh" />
     <!-- <el-dialog title="专项行动处理" :visible.sync="dialogVisible" fullscreen :modal="false">
         <iframe 
           :src="nestedPageUrl" 
@@ -86,6 +87,7 @@ export default {
       dialogVisible: false,
       nestedPageUrl: '',
       viewportHeight: 0,
+      taskId: '',
     };
   },
   created() {
@@ -135,9 +137,9 @@ export default {
     },
     toFillForm(row) {
       this.dialogVisible = true;
-      var  Itemid= "588014226493146373";//数据id，没有的话就是新增 ，有的话就是修改
-      Itemid="";
-      var  modelId=row.formId;//关联的表单id
+      var  Itemid = row.itemId || '';//数据id，没有的话就是新增 ，有的话就是修改
+      var  modelId = row.formId;//关联的表单id
+      var taskId = row.id; // 当前专项行动id
       var isPreview = false;//固定死，值不变
       var useFormPermission = false;//固定死，值不变
       var formData = [];
@@ -147,7 +149,8 @@ export default {
         params:null
       }).then(res => {
         formData = res.data.formData;
-        this.$refs.NCCForm.init(formData, modelId, Itemid, isPreview, useFormPermission)
+        console.log(res, formData, modelId, Itemid, isPreview, useFormPermission);
+        this.$refs.NCCForm.init(formData, modelId, Itemid, isPreview, useFormPermission, taskId)
       });
     
       // this.nestedPageUrl = `http://8.130.38.56:8043/old/#/previewModel?isPreview=1&id=${row.originId}`;
@@ -195,6 +198,7 @@ export default {
       this.formVisible = false;
       if (isrRefresh) this.reset();
     },
+  
     reset() {
       for (let key in this.query) {
         this.query[key] = undefined;
diff --git a/src/views/overView/Overview.vue b/src/views/overView/Overview.vue
index d604f20..6711e7e 100644
--- a/src/views/overView/Overview.vue
+++ b/src/views/overView/Overview.vue
@@ -3,10 +3,18 @@
     <el-row :gutter="20">
       <el-col :span="16">
         <div class="item-box todo">
-          <div class="item-title">事件中心</div>
+          <div class="item-title">
+            <div class="left">任务中心</div>
+            <div class="right">
+              <!-- <el-button type="success" size="mini" style="margin-right: 10px;" v-if="isSHILevel" @click="announceMsg">发布</el-button> -->
+              <el-tooltip effect="dark" content="刷新" placement="top">
+                <el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="resetTask"/>
+              </el-tooltip>
+            </div>
+          </div>
           <div class="item-body">
             <template>
-              <el-table :data="todoTableData" style="width: 100%" stripe>
+              <el-table :data="taskList" style="width: 100%" stripe v-loading="taskLoading">
                 <el-table-column type="index" width="50"> </el-table-column>
                 <el-table-column
                   prop="teskName"
@@ -44,6 +52,7 @@
                   </template>
                 </el-table-column>
               </el-table>
+              <pagination :total="taskTotal" :page.sync="taskListQuery.currentPage" :limit.sync="taskListQuery.pageSize" @pagination="getAllTaskList" />
             </template>
           </div>
         </div>
@@ -111,60 +120,74 @@
         <div class="item-box msg">
           <div class="item-title">
             <div class="left">通知公告</div>
-            <el-tooltip effect="dark" content="刷新" placement="top">
-              <el-link
-                icon="icon-ym icon-ym-Refresh NCC-common-head-icon"
-                :underline="false"
-                @click="resetMsg()"
-              />
-            </el-tooltip>
+            <div class="right">
+              <el-button type="success" size="mini" style="margin-right: 10px;" v-if="isSHILevel" @click="announceMsg">发布</el-button>
+              <el-tooltip effect="dark" content="刷新" placement="top">
+                <el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="resetMsg"/>
+              </el-tooltip>
+            </div>
           </div>
           <div class="item-body">
             <template>
-              <el-table :data="msgList" style="width: 100%" stripe>
-                <el-table-column
-                  prop="teskName"
-                  label="内容"
-                  show-overflow-tooltip
-                >
+              <el-table :data="msgList" style="width: 100%" stripe v-loading="msgLoading">
+                <el-table-column prop="title" label="标题" show-overflow-tooltip>
                 </el-table-column>
-                <el-table-column
-                  prop="teskCode"
-                  label="事件"
-                  show-overflow-tooltip
-                >
+                <el-table-column label="操作" fixed="right" width="80">
+                  <template slot-scope="scope">
+                    <el-button type="text" @click="checkDetail(scope.row)">详情</el-button>
+                  </template>
                 </el-table-column>
               </el-table>
+              <pagination :total="msgTotal" :page.sync="msgListQuery.currentPage" :limit.sync="msgListQuery.pageSize" @pagination="getAllMsgList" />
             </template>
           </div>
         </div>
       </el-col>
     </el-row>
+    <MsgForm v-if="MsgFormVisible" ref="MsgForm" @refreshDataList="msgRefresh"/>
   </div>
 </template>
 
 <script>
-import {
-  todoObj,
-  tipObj,
-  areaObj,
-  chObj,
-} from "@/assets/mockdata/demodata.json";
-import { computed } from "vue";
+import request from "@/utils/request";
+import MsgForm from "./msgForm.vue"
 export default {
   name: "Overview",
+  components: { MsgForm },
   data() {
     return {
       todoTableData: [],
-      msgList: [],
       tipTableData: [],
       aimList: [],
+
+      msgLoading: false,
+      msgListQuery: {
+        currentPage: 1,
+        pageSize: 20,
+      },
+      msgQuery: {
+        keyword: ''
+      },
+      msgList: [],
+      msgTotal: 0,
+      MsgFormVisible: false,
+
+      taskLoading: false,
+      taskListQuery: {
+        currentPage: 1,
+        pageSize: 20,
+      },
+      taskQuery: {
+        keyword: ''
+      },
+      taskList: [],
+      taskTotal: 0,
+      TaskFormVisible: false
     };
   },
   created() {
-    this.getMsgList();
-    this.getTipList();
-    this.getAimList();
+    this.getAllMsgList();
+    this.getAllTaskList();
   },
   computed: {
     isSHILevel() {
@@ -173,29 +196,90 @@ export default {
     },
   },
   methods: {
-    getMsgList() {
-      for (let index = 0; index < 10; index++) {
-        this.msgList.push(todoObj);
-        this.todoTableData.push(todoObj);
+    // 通知公告
+    getAllMsgList() {
+      this.msgLoading = true;
+      let _query = {
+        ...this.msgListQuery,
+        ...this.msgQuery,
+      };
+      let query = {};
+      for (let key in _query) {
+        if (Array.isArray(_query[key])) {
+          query[key] = _query[key].join();
+        } else {
+          query[key] = _query[key];
+        }
       }
+      request({
+        url: '/SubDev/ZyOaArticle',
+        method: "GET",
+        params: query,
+      }).then((res) => {
+        this.msgList = res.data.list;
+        this.msgTotal = res.data.pagination.total;
+        this.msgLoading = false;
+      });
     },
     resetMsg() {
       this.msgList = [];
-      this.getMsgList();
+      this.msgListQuery = {
+        currentPage: 1,
+        pageSize: 20,
+      };
+      this.getAllMsgList();
     },
-    getTipList() {
-      for (let index = 0; index < 10; index++) {
-        this.tipTableData.push(tipObj);
-      }
+    msgRefresh(val) {
+      this.MsgFormVisible = false;
+      val && this.getAllMsgList();
+    },
+    checkDetail(row) {
+      console.log(row);
+      this.MsgFormVisible = true;
+      this.$nextTick(() => {
+        this.$refs.MsgForm.init(row.id, true);
+      })
     },
-    getAimList() {
-      for (let index = 0; index < 12; index++) {
-        if (Math.random() > 0.5) {
-          this.aimList.push(areaObj);
+    // 发布消息通知
+    announceMsg() {
+      this.MsgFormVisible = true;
+      this.$nextTick(() => {
+        this.$refs.MsgForm.init();
+      })
+    },
+
+    // 任务中心
+    getAllTaskList() {
+      this.taskLoading = true;
+      let _query = {
+        ...this.taskListQuery,
+        ...this.taskQuery,
+      };
+      let query = {};
+      for (let key in _query) {
+        if (Array.isArray(_query[key])) {
+          query[key] = _query[key].join();
         } else {
-          this.aimList.push(chObj);
+          query[key] = _query[key];
         }
       }
+      request({
+        url: '/Extend/BaseTaskCenter/GetListByCurretUser',
+        method: "GET",
+        params: query,
+      }).then((res) => {
+        this.taskList = res.data.list;
+        this.taskTotal = res.data.pagination.total;
+        this.taskLoading = false;
+      });
+    },
+    resetTask() {
+      this.taskList = [];
+      this.taskListQuery = {
+        currentPage: 1,
+        pageSize: 20,
+      };
+      this.getAllTaskList();
     },
   },
 };
@@ -234,7 +318,7 @@ export default {
       }
     }
     .item-body {
-      height: calc(100% - 68px);
+      height: calc(100% - 95px);
       margin: 0 13px;
       // padding-bottom: 28px;
       .el-table {
diff --git a/src/views/overView/msgForm.vue b/src/views/overView/msgForm.vue
new file mode 100644
index 0000000..2d06d56
--- /dev/null
+++ b/src/views/overView/msgForm.vue
@@ -0,0 +1,131 @@
+<template>
+    <el-dialog
+      :title="isDetail ? '通知详情' : '发布通知'"
+      :close-on-click-modal="false"
+      :visible.sync="visible"
+      class="NCC-dialog NCC-dialog_center msg-dialog"
+      lock-scroll
+      width="50%"
+    >
+      <el-row :gutter="15" style="padding-top: 10px">
+        <el-form
+            ref="elForm"
+            :model="dataForm"
+            size="small"
+            label-width="100px"
+            label-position="right"
+            :disabled="!!isDetail"
+            :rules="rules">
+            <el-col :span="24">
+              <el-form-item label="通知标题" prop="title">
+                <el-input v-model="dataForm.title"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="内容" prop="bodyContent">
+                <NCC-Quill v-model="dataForm.bodyContent" placeholder="请输入内容..." :disabled="!!isDetail" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="图片上传" prop="imgUrl">
+                <NCC-UploadFz v-model="dataForm.imgUrl" :fileSize="5" sizeUnit="MB" :limit="9" buttonText="点击上传" />
+              </el-form-item>
+            </el-col>
+        </el-form>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="visible = false">取 消</el-button>
+        <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
+      </span>
+    </el-dialog>
+  </template>
+  <script>
+  import request from "@/utils/request";
+  export default {
+    components: {},
+    props: [],
+    data() {
+      return {
+        loading: false,
+        visible: false,
+        isDetail: false,
+        dataForm: {
+            id: '',
+            title: '',
+            bodyContent: '',
+            imgUrl: [],
+            categoryId: 'cc225c68421644f79037aaf624ccccc0',
+            isType: '0',
+        },
+        rules: {
+            title: [
+                { required: true, message: '请输入标题', trigger: 'blur' },
+            ],
+            bodyContent: [
+                { required: true, message: '请输入内容', trigger: 'blur' },
+            ],
+        },
+      };
+    },
+    computed: {},
+    watch: {},
+    created() {
+     
+    },
+    mounted() {},
+    beforeDestroy() {
+    },
+    methods: {
+
+      goBack() {
+        this.$emit("refresh");
+      },
+      init(id, isDetail) {
+        this.dataForm.id = id || 0;
+        this.visible = true;
+        this.isDetail = isDetail || false;
+        this.$nextTick(() => {
+            this.$refs["elForm"].resetFields();
+            if(this.dataForm.id) {
+                request({
+                  url: `/SubDev/ZyOaArticle/${this.dataForm.id}`,
+                  method: "GET",
+                }).then((res) => {
+                    this.dataForm = res.data;
+                    console.log(this.dataForm);
+                });
+            }
+        });
+      },
+      dataFormSubmit() {
+        this.$refs['elForm'].validate((valid) => {
+			if (valid) {
+                request({
+					url: `/SubDev/ZyOaArticle`,
+					method: 'post',
+					data: this.dataForm,
+				}).then((res) => {
+					this.$message({
+						message: res.msg,
+						type: 'success',
+						duration: 1000,
+						onClose: () => {
+							this.visible = false, this.$emit('refresh', true)
+						}
+					})
+				})
+            }
+        })
+      },
+    },
+  };
+  </script>
+  <style lang="scss" scoped>
+  .msg-dialog {
+    :deep(.el-dialog__body) {
+      max-height: 50vh;
+      overflow-y: scroll;
+    }
+  }
+  </style>
+  
\ No newline at end of file