diff --git a/anrui-system-ui/package.json b/anrui-system-ui/package.json
index d171e1609e..0b843ebd56 100644
--- a/anrui-system-ui/package.json
+++ b/anrui-system-ui/package.json
@@ -30,6 +30,7 @@
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
     "vue-monoplasty-slide-verify": "^1.3.1",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.6",
     "vuex": "3.1.0",
     "vuex-persistedstate": "^4.0.0",
diff --git a/anrui-system-ui/src/api/notificationannouncement/notificationannouncement.js b/anrui-system-ui/src/api/notificationannouncement/notificationannouncement.js
new file mode 100644
index 0000000000..e853e00cbb
--- /dev/null
+++ b/anrui-system-ui/src/api/notificationannouncement/notificationannouncement.js
@@ -0,0 +1,73 @@
+import request from '@/utils/request'
+
+export function listPage(data) {
+  return request({
+    url: '/portal/v1/SysNotice/listPage',
+    method: 'post',
+    data: data,
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+
+export function details(data) {
+  return request({
+    url: '/portal/v1/SysNotice/getDetails',
+    method: 'get',
+    params: data
+  })
+}
+
+export function setState(data) {
+  return request({
+    url: '/portal/v1/SysNotice/setState',
+    method: 'post',
+    data: data,
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+
+export function setTopping(data) {
+  return request({
+    url: '/portal/v1/SysNotice/setTopping',
+    method: 'post',
+    data: data,
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+
+export function saveOrUpdate(data) {
+  return request({
+    url: '/portal/v1/SysNotice/saveOrUpdate',
+    method: 'post',
+    data: data,
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+
+export function delBySids(data) {
+  return request({
+    url: '/portal/v1/SysNotice/delBySids',
+    method: 'DELETE',
+    data: data,
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+
+// 根据当前登录用户的角色获取菜单分页列表页面右上角按钮的隐藏
+export function getButtonPermissions(data) {
+  return request({
+    url: '/portal/v1/sysfunction/getButtonPermissions',
+    method: 'post',
+    data: data,
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+
+// 根据当前登录人orgSidPath(全路径sid)查询分公司
+export function getOrgSidByPath(data) {
+  return request({
+    url: '/portal/v1/sysstafforg/getOrgSidByPath',
+    method: 'get',
+    params: data
+  })
+}
diff --git a/anrui-system-ui/src/api/system/home/home.js b/anrui-system-ui/src/api/system/home/home.js
index ac5254136b..22c3961139 100644
--- a/anrui-system-ui/src/api/system/home/home.js
+++ b/anrui-system-ui/src/api/system/home/home.js
@@ -7,3 +7,12 @@ export function getTodoNum(data) {
     method: 'get'
   })
 }
+
+// 获取当前用户的待办数量
+export function getLists(data) {
+  return request({
+    url: '/portal/v1/SysNotice/getLists',
+    method: 'get'
+  })
+}
+
diff --git a/anrui-system-ui/src/components/Editor/index.vue b/anrui-system-ui/src/components/Editor/index.vue
new file mode 100644
index 0000000000..5c0880820e
--- /dev/null
+++ b/anrui-system-ui/src/components/Editor/index.vue
@@ -0,0 +1,279 @@
+<template>
+  <div>
+    <el-upload
+      :action="uploadUrl"
+      :before-upload="handleBeforeUpload"
+      :on-success="handleUploadSuccess"
+      :on-error="handleUploadError"
+      name="file"
+      :show-file-list="false"
+      :headers="headers"
+      style="display: none"
+      ref="upload"
+      v-if="this.type == 'url'"
+    >
+    </el-upload>
+    <div class="editor" ref="editor" :style="styles"></div>
+  </div>
+</template>
+
+<script>
+import Quill from 'quill'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'Editor',
+  props: {
+    /* 编辑器的内容 */
+    value: {
+      type: String,
+      default: ''
+    },
+    /* 高度 */
+    height: {
+      type: Number,
+      default: null
+    },
+    /* 最小高度 */
+    minHeight: {
+      type: Number,
+      default: null
+    },
+    /* 只读 */
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    // 上传文件大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5
+    },
+    /* 类型（base64格式、url格式） */
+    type: {
+      type: String,
+      default: 'url'
+    }
+  },
+  data() {
+    return {
+      uploadUrl: process.env.VUE_APP_BASE_API + '/portal/file/upload', // 上传的图片服务器地址
+      headers: {
+        Authorization: 'Bearer ' + getToken()
+      },
+      Quill: null,
+      currentValue: '',
+      options: {
+        theme: 'snow',
+        bounds: document.body,
+        debug: 'warn',
+        modules: {
+          // 工具栏配置
+          toolbar: [
+            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
+            ['blockquote', 'code-block'], // 引用  代码块
+            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
+            [{ indent: '-1' }, { indent: '+1' }], // 缩进
+            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
+            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+            [{ align: [] }], // 对齐方式
+            ['clean'], // 清除文本格式
+            ['link', 'image', 'video'] // 链接、图片、视频
+          ]
+        },
+        placeholder: '请输入内容',
+        readOnly: this.readOnly
+      }
+    }
+  },
+  computed: {
+    styles() {
+      let style = {}
+      if (this.minHeight) {
+        style.minHeight = `${this.minHeight}px`
+      }
+      if (this.height) {
+        style.height = `${this.height}px`
+      }
+      return style
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val !== this.currentValue) {
+          this.currentValue = val === null ? '' : val
+          if (this.Quill) {
+            this.Quill.pasteHTML(this.currentValue)
+          }
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    this.Quill = null
+  },
+  methods: {
+    init() {
+      const editor = this.$refs.editor
+      this.Quill = new Quill(editor, this.options)
+      // 如果设置了上传地址则自定义图片上传事件
+      if (this.type == 'url') {
+        let toolbar = this.Quill.getModule('toolbar')
+        toolbar.addHandler('image', (value) => {
+          this.uploadType = 'image'
+          if (value) {
+            this.$refs.upload.$children[0].$refs.input.click()
+          } else {
+            this.quill.format('image', false)
+          }
+        });
+      }
+      this.Quill.pasteHTML(this.currentValue)
+      this.Quill.on('text-change', (delta, oldDelta, source) => {
+        const html = this.$refs.editor.children[0].innerHTML
+        const text = this.Quill.getText()
+        const quill = this.Quill
+        this.currentValue = html
+        this.$emit('input', html)
+        this.$emit('on-change', { html, text, quill })
+      })
+      this.Quill.on('text-change', (delta, oldDelta, source) => {
+        this.$emit('on-text-change', delta, oldDelta, source)
+      })
+      this.Quill.on('selection-change', (range, oldRange, source) => {
+        this.$emit('on-selection-change', range, oldRange, source)
+      })
+      this.Quill.on('editor-change', (eventName, ...args) => {
+        this.$emit('on-editor-change', eventName, ...args)
+      })
+    },
+    // 上传前校检格式和大小
+    handleBeforeUpload(file) {
+      // 校检文件大小
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize
+        if (!isLt) {
+          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`)
+          return false
+        }
+      }
+      return true
+    },
+    handleUploadSuccess(res, file) {
+      // 获取富文本组件实例
+      let quill = this.Quill
+      // 如果上传成功
+      // if (res.code == 200) {
+      //   // 获取光标所在位置
+      //   let length = quill.getSelection().index;
+      //   // 插入图片  res.url为服务器返回的图片地址
+      //   quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
+      //   // 调整光标到最后
+      //   quill.setSelection(length + 1);
+      if (res.code == '200') {
+        // 获取光标所在位置
+        let length = quill.getSelection().index
+        // 插入图片  res.url为服务器返回的图片地址
+        quill.insertEmbed(length, 'image', res.data.fullUrl)
+        // 调整光标到最后
+        quill.setSelection(length + 1)
+      } else {
+        this.$message.error('图片插入失败')
+      }
+    },
+    handleUploadError() {
+      this.$message.error('图片插入失败')
+    }
+  }
+}
+</script>
+
+<style>
+.editor, .ql-toolbar {
+  white-space: pre-wrap !important;
+  line-height: normal !important;
+}
+.quill-img {
+  display: none;
+}
+.ql-snow .ql-tooltip[data-mode="link"]::before {
+  content: "请输入链接地址:";
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  border-right: 0px;
+  content: "保存";
+  padding-right: 0px;
+}
+
+.ql-snow .ql-tooltip[data-mode="video"]::before {
+  content: "请输入视频地址:";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: "14px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+  content: "10px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+  content: "18px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+  content: "32px";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: "文本";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  content: "标题1";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  content: "标题2";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  content: "标题3";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  content: "标题4";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  content: "标题5";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  content: "标题6";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: "标准字体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+  content: "衬线字体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+  content: "等宽字体";
+}
+</style>
diff --git a/anrui-system-ui/src/components/uploadFile/uploadFile.vue b/anrui-system-ui/src/components/uploadFile/uploadFile.vue
new file mode 100644
index 0000000000..ef92bf00f9
--- /dev/null
+++ b/anrui-system-ui/src/components/uploadFile/uploadFile.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <el-upload class="avatar-uploader" :action="uploadFile" :accept="accept" :file-list="files" :on-remove="removeImage" :on-success="uploadImgSuccess_FuJian">
+      <el-button size="small" type="primary">选择文件</el-button>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { uploadImgFile } from '@/api/Common/Upload'
+
+export default {
+  model: {
+    prop: 'name',
+    event: 'change'
+  },
+  props: {
+    accept: {
+      type: String,
+      default: '.doc, .docx, .pdf, .jpg,.jpeg,.png, .xls, .xlsx'
+    },
+    // 文件名称
+    name: {
+      type: Array,
+      required: true
+    },
+  },
+  data() {
+    return {
+      accessToken: null,
+      uploadFile: uploadImgFile,
+      files: []
+    }
+  },
+  watch: {
+    name: {
+      deep: true,
+      immediate: true,
+      handler(newVal, oldVal) {
+        console.log('aaaa1', newVal)
+        console.log('aaaa2', oldVal)
+        this.files = newVal
+        console.log('aaaa2this.files', this.files)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.Init()
+    })
+  },
+  methods: {
+    // 页面第一次加载
+    Init() {
+      if (this.name !== undefined) {
+        this.files = []
+        for (var i = 0; i < this.name.length; i++) {
+          this.files.push({
+            name: this.name[i],
+            url: this.name[i]
+          })
+        }
+      }
+    },
+    // 上传方案--成功后执行
+    uploadImgSuccess_FuJian(response, file) {
+      console.log('您选择的file:', file)
+      if (file.response.code === '200') {
+        this.files.push({
+          name: file.response.data.sourceFileName,
+          url: file.response.data.fullUrl,
+          size: file.response.data.size
+        })
+        this.$emit('change', this.files)
+      }
+    },
+    removeImage(file) {
+      this.files.splice(this.files.indexOf(file), 1)
+      const imgFiles = []
+      this.files.forEach((o) => {
+        imgFiles.push(o.url)
+      })
+      this.$emit('fileDelete', this.files)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/anrui-system-ui/src/main.js b/anrui-system-ui/src/main.js
index faa5ab71f6..d1e34cf2ce 100644
--- a/anrui-system-ui/src/main.js
+++ b/anrui-system-ui/src/main.js
@@ -6,6 +6,8 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import slideVerify from 'vue-monoplasty-slide-verify'
 Vue.use(slideVerify)
+import quill from 'vue-quill-editor'
+Vue.use(quill)
 
 Vue.use(ElementUI)
 
diff --git a/anrui-system-ui/src/router/index.js b/anrui-system-ui/src/router/index.js
index 0950127a33..e87dd2374b 100644
--- a/anrui-system-ui/src/router/index.js
+++ b/anrui-system-ui/src/router/index.js
@@ -215,6 +215,19 @@ export const constantRoutes = [
       }
     }]
   },
+  {
+    path: '/notificationannouncement',
+    component: Layout,
+    redirect: '/notificationannouncement',
+    children: [{
+      path: '/notificationannouncement',
+      component: () => import('@/views/notificationannouncement/notificationannouncement.vue'),
+      name: 'TongZhiGongGao',
+      meta: {
+        title: '通知公告'
+      }
+    }]
+  },
   {
     path: '/logManage',
     component: Layout,
diff --git a/anrui-system-ui/src/views/Home/Home.vue b/anrui-system-ui/src/views/Home/Home.vue
index 72df35e2b6..df2c617ffc 100644
--- a/anrui-system-ui/src/views/Home/Home.vue
+++ b/anrui-system-ui/src/views/Home/Home.vue
@@ -52,30 +52,10 @@
             <img class="anrui" src="@/assets/home/anrui.png"/>
             <p class="rt_title">通知公告</p>
             <ul>
-              <li>
+              <li v-for="(item, index) in noticeandannouncement" :key="index" @click="lookInfo(item)">
                 <img class="rtImg" src="../../assets/home/notice.png"/>
-                <span class="notice">关于召开2021年公司全体员工大会的通知工大会的通知工大会的通知...</span>
-                <span class="anrui_time">2021-09-01</span>
-              </li>
-              <li>
-                <img src="../../assets/home/notice.png"/>
-                <span class="notice">关于召开2021年公司全体员工大会的通知工大会的通知工大会的通知</span>
-                <span class="anrui_time">2021-09-01</span>
-              </li>
-              <li>
-                <img src="../../assets/home/notice.png"/>
-                <span class="notice">关于召开2021年公司全体员工大会的通知</span>
-                <span class="anrui_time">2021-09-01</span>
-              </li>
-              <li>
-                <img src="../../assets/home/notice.png"/>
-                <span class="notice">关于召开2021年公司全体员工大会的通知</span>
-                <span class="anrui_time">2021-09-01</span>
-              </li>
-              <li>
-                <img src="../../assets/home/notice.png"/>
-                <span class="notice">关于召开2021年公司全体员工大会的通知</span>
-                <span class="anrui_time">2021-09-01</span>
+                <span class="notice bluezi">{{ item.title }}</span>
+                <span class="anrui_time">{{ item.createTime }}</span>
               </li>
             </ul>
           </div>
@@ -89,91 +69,6 @@
       </ul>
       <p class="copy">Copyright © {{ year }} 安瑞集团 All Rights Reserved</p>
     </div>
-    <!--<ul class="nav-box">-->
-    <!--<li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
-      <img src="@/assets/images/jcxx.png">
-      <p>基础信息</p>
-    </li>-->
-
-    <!--<template v-for="(item, i) in menus">
-      <li v-if="item.sourceName == '系统管理'" :key="i" @click="toNav('index','系统管理')" :style="{backgroundColor: item.iconBgColor}">
-        <img :src="item.iconUrl">
-        <p>{{ item.sourceName }}</p>
-      </li>
-      <li v-else :key="i" @click="toNavbar(item.pageUrl)" :style="{backgroundColor: item.iconBgColor}">
-        <img :src="item.iconUrl">
-        <p>{{ item.sourceName }}</p>
-      </li>
-    </template>-->
-    <!-- <li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
-      <img src="@/assets/images/jcxx.png">
-      <p>基础信息</p>
-    </li>
-    <li style="background-color: #e87861;" @click="toNavbar('http://localhost:9529/')">
-      <img src="@/assets/images/jcxx.png">
-      <p>基础信息</p>
-    </li> -->
-    <!-- <li @click="xxzx">
-       <img src="@/assets/images/xxzx.png">
-       <p>消息中心</p>
-     </li>
-     <li @click="xxzx">
-       <img src="@/assets/images/xxzx.png">
-       <p>消息中心</p>
-     </li>
-     <li @click="xxzx">
-       <img src="@/assets/images/xxzx.png">
-       <p>消息中心</p>
-     </li>
-     <li @click="xxzx">
-       <img src="@/assets/images/xxzx.png">
-       <p>消息中心</p>
-     </li>
-     <li style="background-color: #ffb751;" @click="xxzx">
-       <img src="@/assets/images/cxjl.png">
-       <p>诚信计量</p>
-     </li>
-     <li style="background-color: #6fb3e0;" @click="xxzx">
-       <img src="@/assets/images/zwsm.png">
-       <p>C标志自我声明</p>
-     </li>
-     <li style="background-color: #87b880;" @click="xxzx">
-       <img src="@/assets/images/sjcc.png">
-       <p>双随机抽查</p>
-     </li>
-     <li style="background-color: #448fb9;" @click="xxzx">
-       <img src="@/assets/images/jlsc.png">
-       <p>能量计量审查</p>
-     </li>
-     <li style="background-color: #24ca95;" @click="xxzx">
-       <img src="@/assets/images/qjsh.png">
-       <p>强检计量器具审核</p>
-     </li>
-     <li style="background-color: #b4429d;" @click="xxzx">
-       <img src="@/assets/images/jsxd.png">
-       <p>技术规范制修订</p>
-     </li>
-     <li style="background-color: #b3b442;" @click="toNavbar('http://39.104.100.138:8083/')">
-       <img src="@/assets/images/xtbg.png">
-       <p>协同办公</p>
-     </li>
-     <li style="background-color: #eab054;" @click="xxzx">
-       <img src="@/assets/images/tjfx.png">
-       <p>统计分析</p>
-     </li>
-     <li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
-       <img src="@/assets/images/jcxx.png">
-       <p>基础信息</p>
-     </li>
-     <li style="background-color: #e87861;" @click="toNavbar('http://localhost:9529/')">
-       <img src="@/assets/images/jcxx.png">
-       <p>基础信息</p>
-     </li>
-     <li style="background-color: #617be8;" @click="toNav('index','系统管理')">
-       <img src="@/assets/images/xtgl.png">
-       <p>系统管理</p>
-     </li> -->
-    <!--</ul>-->
     <el-dialog center :visible.sync="dialogVisible" width="40%" :show-close="false" :close-on-click-modal="false">
       <el-form :model="form" class="formadd">
         <el-row style="border-top: 1px solid #e0e3eb">
@@ -206,15 +101,41 @@
         <el-button size="small" @click="handleQuXiao">取 消</el-button>
       </div>
     </el-dialog>
+    <el-dialog :visible.sync="TZGGVisible" width="50%">
+      <el-form :model="formobj" class="formaddcopy02">
+        <div style="text-align: center;font-weight: bold;font-size: 16px">{{ formobj.title }}</div>
+        <el-row style="border-left: 0px;margin-top: 10px">
+          <el-col :span="12" style="border-right: 0px;border-bottom: 0px">
+            <div class="span-sty" style="border-right: 0px">发布日期:</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.createTime }}</span></el-form-item>
+          </el-col>
+          <el-col :span="12" style="border-right: 0px;border-bottom: 0px">
+            <div class="span-sty" style="border-right: 0px">有效期至:</div>
+            <el-form-item><span class="addinputInfo">{{ formobj.validityDate }}</span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row style="border-left: 0px">
+          <el-col :span="24" style="border-right: 0px;border-bottom: 0px">
+            <el-form-item><span v-html="formobj.content"></span></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row style="border-left: 0px">
+          <el-col :span="24" style="border-right: 0px;border-bottom: 0px">
+            <div class="span-sty" style="border-right: 0px">附件:</div>
+            <el-form-item><span class="bluezi addinputInfo" v-for="(item, index) in formobj.filesList" :key="index" @click="handleDownLoad(item.url)">{{ item.name }}</span></el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getToken, removeToken, getStorage, removeStorage } from '@/utils/auth'
-import {sourcesofrole} from '@/api/system/Role/role.js'
+import { getStorage, removeStorage } from '@/utils/auth'
 import User from '@/api/User/login.js'
-import { getTodoNum } from '@/api/system/home/home'
+import { getLists, getTodoNum } from '@/api/system/home/home'
 import { getToBeReadNum } from '@/api/flow/read'
+import { details } from '@/api/notificationannouncement/notificationannouncement'
 
 export default {
   data() {
@@ -256,6 +177,7 @@ export default {
         workCount: '',
         toBeReadCount: ''
       },
+      noticeandannouncement: [], // 通知公告内容
       dialogVisible: false,
       form: {
         original: '',
@@ -272,7 +194,20 @@ export default {
       defaultOrgPath: '',
       roleName: '',
       postName: '',
-      year: ''
+      year: '',
+      TZGGVisible: false,
+      formobj: {
+        content: '',
+        createTime: '',
+        filesList: [],
+        sid: '',
+        title: '',
+        topping: '',
+        type: '',
+        typeKey: '',
+        validityDate: '',
+        userSid: ''
+      }
     }
   },
   beforeCreate() {
@@ -292,9 +227,6 @@ export default {
     this.name = window.sessionStorage.getItem('name')
     var nowDate = new Date()
     this.year = nowDate.getFullYear()
-//    sourcesofrole({ psid: '0', roleSid: this.$store.getters.userInfo.roleSid }).then(res => {
-//      this.menus = res.data
-//    })
   },
   methods: {
     getsPasswordByUserSid() {
@@ -303,6 +235,7 @@ export default {
           this.dialogVisible = true
         } else {
           this.getNum()
+          this.getLists()
           this.timer = setInterval(this.getNum, 20000)
         }
       })
@@ -313,17 +246,55 @@ export default {
       })
     },
     getNum() {
+      // 获取待办工作数量
       getTodoNum(window.sessionStorage.getItem('userSid')).then((resp) => {
         if (resp.success) {
           this.shuliang.workCount = resp.data
         }
       })
+      // 获取待阅工作数量
       getToBeReadNum(window.sessionStorage.getItem('userSid')).then((resp) => {
         if (resp.success) {
           this.shuliang.toBeReadCount = resp.data
         }
       })
     },
+    // 获取通知公告内容
+    getLists() {
+      getLists().then((res) => {
+        if (res.success) {
+          this.noticeandannouncement = res.data
+        }
+      })
+    },
+    // 查看通知公告详情
+    lookInfo(item) {
+      if (item.pcUrl !== '' && item.pcUrl !== null) {
+      } else {
+        this.formobj = {
+          content: '',
+          createTime: '',
+          filesList: [],
+          sid: '',
+          title: '',
+          topping: '',
+          type: '',
+          typeKey: '',
+          validityDate: '',
+          userSid: ''
+        }
+        this.TZGGVisible = true
+        details({ sid: item.sid }).then((res) => {
+          if (res.success) {
+            this.formobj = res.data
+          }
+        })
+      }
+    },
+    // 下载通知公告中的附件
+    handleDownLoad(val) {
+      window.open(val, '_parent')
+    },
     handleConirm() {
       if (this.form.original === '') {
         this.$message({ showClose: true, type: 'error', message: '原密码不能为空' })
@@ -382,7 +353,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        User.logout({token: getStorage()}).then(res => {
+        User.logout({ token: getStorage() }).then(res => {
           removeStorage()
           this.$store.commit('user/SET_UESRINFO', '')
           this.$router.push({ path: '/login' })
diff --git a/anrui-system-ui/src/views/notificationannouncement/notificationannouncement.vue b/anrui-system-ui/src/views/notificationannouncement/notificationannouncement.vue
new file mode 100644
index 0000000000..8363719fe4
--- /dev/null
+++ b/anrui-system-ui/src/views/notificationannouncement/notificationannouncement.vue
@@ -0,0 +1,476 @@
+<template>
+  <div class="app-container">
+    <!--列表页面-->
+    <div v-show="viewState == 1">
+      <button-bar view-title="通知公告管理" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
+      <!--Start查询列表部分-->
+      <div class="main-content">
+        <div class="searchcon">
+          <el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>
+          <div v-show="isSearchShow" class="search">
+            <el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
+              <el-form-item label="标题">
+                <el-input v-model="listQuery.params.title" placeholder="" clearable/>
+              </el-form-item>
+              <el-form-item label="发布日期">
+                <el-date-picker v-model="listQuery.params.createDateStart" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
+                <span style="padding: 0 8px">至</span>
+                <el-date-picker v-model="listQuery.params.createDateEnd" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
+              </el-form-item>
+              <el-form-item label="状态">
+                <el-select v-model="listQuery.params.state" clearable filterable>
+                  <el-option v-for="item in state_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="置顶">
+                <el-select v-model="listQuery.params.topping" clearable filterable>
+                  <el-option v-for="item in topping_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"/>
+                </el-select>
+              </el-form-item>
+            </el-form>
+            <div class="btn" style="text-align: center;">
+              <el-button type="primary" icon="el-icon-search" size="small" @click="handleFilter">查询</el-button>
+              <el-button type="primary" icon="el-icon-refresh" size="small" @click="handleReset">重置</el-button>
+            </div>
+          </div>
+        </div>
+        <!--End查询列表部分-->
+        <div class="listtop">
+          <div class="tit">通知公告列表</div>
+          <pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
+        </div>
+        <!--Start 主页面主要部分 -->
+        <div class="">
+          <el-table :key="tableKey" v-loading="listLoading" :data="list" :border="true" style="width: 100%;" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" align="center" width="50"/>
+            <el-table-column label="序号" type="index" width="80" :index="indexMethod" align="center"/>
+            <el-table-column label="标题" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.row.title }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="发布时间" align="center" width="120">
+              <template slot-scope="scope">
+                <span>{{ scope.row.createDate }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="有效期至" align="center" width="120">
+              <template slot-scope="scope">
+                <span>{{ scope.row.validityDate }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="状态" align="center" width="80">
+              <template slot-scope="scope">
+                <span>{{ scope.row.stateValue }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="是否置顶" align="center" width="120">
+              <template slot-scope="scope">
+                <span>{{ scope.row.topping }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <!--End 主页面主要部分-->
+        <div class="pages">
+          <div class="tit"/>
+          <!-- 翻页 -->
+          <pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
+        </div>
+        <!--End查询列表部分-->
+      </div>
+    </div>
+    <!--新增及修改 -->
+    <notificationannouncementAdd v-show="viewState == 2 || viewState == 3" ref="divAdd" @doback="resetState" @reloadlist="getList"/>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/pagination'
+import pageye from '@/components/pagination/pageye'
+import ButtonBar from '@/components/ButtonBar'
+import { listPage, delBySids, setState, setTopping } from '@/api/notificationannouncement/notificationannouncement'
+import notificationannouncementAdd from './notificationannouncementAdd'
+
+export default {
+  name: 'TongZhiGongGao',
+  components: {
+    Pagination,
+    pageye,
+    ButtonBar,
+    notificationannouncementAdd
+  },
+  data() {
+    return {
+      btndisabled: false,
+      btnList: [
+        {
+          type: 'primary',
+          size: 'small',
+          icon: 'plus',
+          btnKey: 'toAdd',
+          btnLabel: '新增'
+        },
+        {
+          type: 'primary',
+          size: 'small',
+          icon: 'edit',
+          btnKey: 'toEdit',
+          btnLabel: '编辑'
+        },
+        {
+          type: 'primary',
+          size: 'small',
+          icon: '',
+          btnKey: 'toOpen',
+          btnLabel: '开启'
+        },
+        {
+          type: 'danger',
+          size: 'small',
+          icon: '',
+          btnKey: 'toBlockUp',
+          btnLabel: '停用'
+        },
+        {
+          type: 'primary',
+          size: 'small',
+          icon: '',
+          btnKey: 'toTop',
+          btnLabel: '置顶'
+        },
+        {
+          type: 'danger',
+          size: 'small',
+          icon: '',
+          btnKey: 'toUntop',
+          btnLabel: '取消置顶'
+        },
+        {
+          type: 'danger',
+          size: 'small',
+          icon: 'del',
+          btnKey: 'doDel',
+          btnLabel: '删除'
+        },
+        {
+          type: 'info',
+          size: 'small',
+          icon: 'cross',
+          btnKey: 'doClose',
+          btnLabel: '关闭'
+        }
+      ],
+      isSearchShow: false,
+      searchxianshitit: '显示查询条件',
+      viewState: 1, // 1、列表 2、新增 3、编辑 4、查看
+      tableKey: 0,
+      list: [],
+      sids: [], // 用于导出的时候保存已选择的SIDs
+      state_list: [
+        {
+          dictKey: '1',
+          dictValue: '开启'
+        },
+        {
+          dictKey: '2',
+          dictValue: '关闭'
+        }
+      ],
+      topping_list: [
+        {
+          dictKey: '1',
+          dictValue: '是'
+        },
+        {
+          dictKey: '0',
+          dictValue: '否'
+        }
+      ],
+      FormLoading: false,
+      listLoading: false,
+      // 翻页
+      listQuery: {
+        current: 1,
+        size: 10,
+        total: 0,
+        params: {
+          createDateEnd: '',
+          createDateStart: '',
+          state: '',
+          title: '',
+          topping: ''
+        }
+      }
+    }
+  },
+  created() {
+    // 初始化变量
+    this.getList()
+  },
+  mounted() {
+    this.$refs['btnbar'].setButtonList(this.btnList)
+  },
+  methods: {
+    // 搜索条件效果
+    clicksearchShow() {
+      this.isSearchShow = !this.isSearchShow
+      if (this.isSearchShow) {
+        this.searchxianshitit = '隐藏查询条件'
+      } else {
+        this.searchxianshitit = '显示查询条件'
+      }
+    },
+    btnHandle(btnKey) {
+      console.log('XXXXXXXXXXXXXXX    ' + btnKey)
+      switch (btnKey) {
+        case 'toAdd':
+          this.toAdd()
+          break
+        case 'toEdit':
+          this.toEdit()
+          break
+        case 'toOpen':
+          this.toOpen()
+          break
+        case 'toBlockUp':
+          this.toBlockUp()
+          break
+        case 'toTop':
+          this.toTop()
+          break
+        case 'toUntop':
+          this.toUntop()
+          break
+        case 'doDel':
+          this.doDel()
+          break
+        case 'doClose':
+          this.doClose()
+          break
+        default:
+          break
+      }
+    },
+    // 信息条数 获取点击时当前的sid
+    handleSelectionChange(row) {
+      const aa = []
+      row.forEach(element => {
+        aa.push(element.sid)
+      })
+      this.sids = aa
+    },
+    // 表中序号
+    indexMethod(index) {
+      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
+      var pageindex = index + 1 + pagestart
+      return pageindex
+    },
+    // 查询列表信息
+    getList() {
+      listPage(this.listQuery).then(response => {
+        this.listLoading = false
+        if (response.success) {
+          this.list = response.data.records
+          this.listQuery.total = response.data.total
+        } else {
+          this.list = []
+          this.listQuery.total = 0
+        }
+      })
+    },
+    // 查询按钮
+    handleFilter() {
+      this.listQuery.current = 1
+      this.getList()
+    },
+    // 点击重置
+    handleReset() {
+      this.listQuery = {
+        current: 1,
+        size: 10,
+        total: 0,
+        params: {
+          createDateEnd: '',
+          createDateStart: '',
+          state: '',
+          title: '',
+          topping: ''
+        }
+      }
+      this.getList()
+    },
+    toAdd() {
+      this.viewState = 2
+      this.$refs['divAdd'].showAdd()
+    },
+    toEdit() {
+      if (this.sids.length === 1) {
+        this.viewState = 3
+        this.$refs['divAdd'].showEdit(this.sids[0])
+      } else {
+        this.$message({ showClose: true, type: 'error', message: '请选择一条记录进行操作' })
+      }
+    },
+    toOpen() {
+      if (this.sids.length === 0) {
+        this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行操作' })
+        return
+      }
+      const tip = '请确认是否开启所选 ' + this.sids.length + ' 条记录?'
+      this.$confirm(tip, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        setState({ sidsList: this.sids, state: '1' }).then(resp => {
+          if (resp.success) {
+            this.$message({ type: 'success', message: resp.msg, showClose: true })
+          }
+          this.getList()
+          loading.close()
+        }).catch(e => {
+          loading.close()
+        })
+      }).catch(() => {
+      })
+    },
+    toBlockUp() {
+      if (this.sids.length === 0) {
+        this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行操作' })
+        return
+      }
+      const tip = '请确认是否停用所选 ' + this.sids.length + ' 条记录?'
+      this.$confirm(tip, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        setState({ sidsList: this.sids, state: '0' }).then(resp => {
+          if (resp.success) {
+            this.$message({ type: 'success', message: resp.msg, showClose: true })
+          }
+          this.getList()
+          loading.close()
+        }).catch(e => {
+          loading.close()
+        })
+      }).catch(() => {
+      })
+    },
+    toTop() {
+      if (this.sids.length === 0) {
+        this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行操作' })
+        return
+      }
+      const tip = '请确认是否置顶所选 ' + this.sids.length + ' 条记录?'
+      this.$confirm(tip, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        setTopping({ sidsList: this.sids, topping: '是' }).then(resp => {
+          if (resp.success) {
+            this.$message({ type: 'success', message: resp.msg, showClose: true })
+          }
+          this.getList()
+          loading.close()
+        }).catch(e => {
+          loading.close()
+        })
+      }).catch(() => {
+      })
+    },
+    toUntop() {
+      if (this.sids.length === 0) {
+        this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行操作' })
+        return
+      }
+      const tip = '请确认是否取消置顶所选 ' + this.sids.length + ' 条记录?'
+      this.$confirm(tip, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        setTopping({ sidsList: this.sids, topping: '否' }).then(resp => {
+          if (resp.success) {
+            this.$message({ type: 'success', message: resp.msg, showClose: true })
+          }
+          this.getList()
+          loading.close()
+        }).catch(e => {
+          loading.close()
+        })
+      }).catch(() => {
+      })
+    },
+    toInfo(row) {
+      this.viewState = 4
+      this.$refs['divInfo'].showInfo(row)
+    },
+    doDel() {
+      if (this.sids.length === 0) {
+        this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行删除操作' })
+        return
+      }
+      const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?'
+      this.$confirm(tip, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        delBySids(this.sids).then(resp => {
+          if (resp.success) {
+            this.$message({ type: 'success', message: resp.msg, showClose: true })
+          }
+          this.getList()
+          loading.close()
+        }).catch(e => {
+          loading.close()
+        })
+      }).catch(() => {
+      })
+    },
+    // 修改、编辑、详情返回列表页面
+    resetState() {
+      this.viewState = 1
+    },
+    doClose() {
+      this.$store.dispatch('tagsView/delView', this.$route)
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+<style scoped>
+</style>
diff --git a/anrui-system-ui/src/views/notificationannouncement/notificationannouncementAdd.vue b/anrui-system-ui/src/views/notificationannouncement/notificationannouncementAdd.vue
new file mode 100644
index 0000000000..aa6129e274
--- /dev/null
+++ b/anrui-system-ui/src/views/notificationannouncement/notificationannouncementAdd.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="app-container">
+    <div class="tab-header webtop">
+      <div>{{ viewTitle }}</div>
+      <div>
+        <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate()">保存</el-button>
+        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+      </div>
+    </div>
+    <div class="listconadd">
+      <el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02">
+        <el-row style="border-top: 1px solid #e0e3eb">
+          <el-col :span="24">
+            <div class="span-sty">标题</div>
+            <el-form-item><el-input class="addinputInfo addinputw" v-model="formobj.title" clearable placeholder="" /></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="span-sty">发布日期</div>
+            <el-form-item><el-date-picker class="addinputInfo" v-model="formobj.createTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期" /></el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <div class="span-sty">有效期至</div>
+            <el-form-item><el-date-picker class="addinputInfo" v-model="formobj.validityDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期" /></el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div class="span-sty">类别</div>
+            <el-form-item>
+              <el-select class="addinputInfo" v-model="formobj.typeKey" placeholder="" @change="typeChange">
+                <el-option v-for="item in type_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <div class="span-sty">是否置顶</div>
+            <el-form-item>
+              <el-radio-group class="addinputInfo" style="font-size: 1px" v-model="formobj.topping">
+                <el-radio label="是">是</el-radio>
+                <el-radio label="否">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="span-sty">内容</div>
+            <el-form-item>
+              <editor class="addinputInfo" :height="300" :min-height="100" :value="formobj.content" @input="contentInput"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="span-sty">附件</div>
+            <el-form-item><uploadFile class="addinputInfo" v-model="formobj.filesList" /></el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { saveOrUpdate, details } from '@/api/notificationannouncement/notificationannouncement'
+import Editor from '@/components/Editor'
+import uploadFile from '@/components/uploadFile/uploadFile'
+import { pullDown } from '@/api/system/postManage/index'
+
+export default {
+  name: 'TongZhiGongGaoAdd',
+  components: {
+    Editor,
+    uploadFile
+  },
+  data() {
+    return {
+      viewTitle: '',
+      submitdisabled: false,
+      type_list: [],
+      formobj: {
+        content: '',
+        createTime: '',
+        filesList: [],
+        sid: '',
+        title: '',
+        topping: '',
+        type: '',
+        typeKey: '',
+        validityDate: '',
+        userSid: ''
+      },
+      rules: {}
+    }
+  },
+  methods: {
+    init() {
+      pullDown({ type: 'noticeType' }).then((resp) => {
+        if (resp.success) {
+          this.type_list = resp.data
+        }
+      })
+    },
+    showAdd() {
+      this.viewTitle = '【新增】通知公告'
+      this.$nextTick(() => {
+        this.$refs['form_obj'].clearValidate()
+      })
+      this.init()
+      var nowDate = new Date()
+      var date = {
+        year: nowDate.getFullYear(),
+        month: nowDate.getMonth() + 1,
+        day: nowDate.getDate()
+      }
+      this.formobj.createTime = date.year + '-' + (date.month >= 10 ? date.month : '0' + date.month) + '-' + (date.day >= 10 ? date.day : '0' + date.day)
+    },
+    showEdit(sid) {
+      this.viewTitle = '【编辑】通知公告'
+      this.$nextTick(() => {
+        this.$refs['form_obj'].clearValidate()
+      })
+      this.init()
+      details({ sid: sid }).then((res) => {
+        if (res.success) {
+          this.formobj = res.data
+        }
+      })
+    },
+    typeChange(value) {
+      const choose = this.type_list.filter((item) => item.dictKey === value)
+      if (choose.length > 0 && choose !== null) {
+        this.formobj.type = choose[0].dictValue
+      } else {
+        this.formobj.type = ''
+      }
+    },
+    contentInput(val) {
+      this.formobj.content = val
+    },
+    saveOrUpdate() {
+      this.formobj.userSid = window.sessionStorage.getItem('userSid')
+      this.$refs['form_obj'].validate((valid) => {
+        if (valid) {
+          this.submitdisabled = true
+          saveOrUpdate(this.formobj).then((res) => {
+            if (res.success) {
+              this.$message({ showClose: true, type: 'success', message: '保存成功' })
+              this.handleReturn('true')
+            } else {
+              this.submitdisabled = false
+            }
+          }).catch(() => {
+            this.submitdisabled = false
+          })
+        }
+      })
+    },
+    handleReturn(isreload) {
+      if (isreload === 'true') this.$emit('reloadlist')
+      this.formobj = {
+        content: '',
+        createTime: '',
+        filesList: [],
+        sid: '',
+        title: '',
+        topping: '',
+        type: '',
+        typeKey: '',
+        validityDate: '',
+        userSid: ''
+      }
+      this.submitdisabled = false
+      this.$emit('doback')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.span-sty {
+  width: 100px !important;
+}
+.addinputInfo {
+  margin-left: 90px !important;
+}
+
+</style>