| 对比新文件 |
| | |
|---|
| | | # Build and Release Folders |
|---|
| | | bin-debug/ |
|---|
| | | bin-release/ |
|---|
| | | [Oo]bj/ |
|---|
| | | [Bb]in/ |
|---|
| | | node_modules |
|---|
| | | |
|---|
| | | # Other files and folders |
|---|
| | | .settings/ |
|---|
| | | |
|---|
| | | # Executables |
|---|
| | | *.swf |
|---|
| | | *.air |
|---|
| | | *.ipa |
|---|
| | | *.apk |
|---|
| | | |
|---|
| | | # Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties` |
|---|
| | | # should NOT be excluded as they contain compiler settings and other important |
|---|
| | | # information for Eclipse / Flash Builder. |
|---|
| | |
|---|
| | | # 自然灾害二期 |
|---|
| | | ### 1、菜单代码位置 |
|---|
| | | |
|---|
| | | #### 介绍 |
|---|
| | | 自然灾害响应回执系统 |
|---|
| | | /src/layout/menu |
|---|
| | | |
|---|
| | | #### 软件架构 |
|---|
| | | 软件架构说明 |
|---|
| | | ### 2、首页最近叫应组件 |
|---|
| | | |
|---|
| | | /src/components/Home/Dynamic |
|---|
| | | |
|---|
| | | #### 安装教程 |
|---|
| | | ### 3、其他首页组件 |
|---|
| | | |
|---|
| | | 1. xxxx |
|---|
| | | 2. xxxx |
|---|
| | | 3. xxxx |
|---|
| | | /src/components/Home/ |
|---|
| | | |
|---|
| | | #### 使用说明 |
|---|
| | | ### 4、组件路由备忘，建议直接查看路由文件 |
|---|
| | | |
|---|
| | | 1. xxxx |
|---|
| | | 2. xxxx |
|---|
| | | 3. xxxx |
|---|
| | | |
|---|
| | | #### 参与贡献 |
|---|
| | | |
|---|
| | | 1. Fork 本仓库 |
|---|
| | | 2. 新建 Feat_xxx 分支 |
|---|
| | | 3. 提交代码 |
|---|
| | | 4. 新建 Pull Request |
|---|
| | | |
|---|
| | | |
|---|
| | | #### 特技 |
|---|
| | | |
|---|
| | | 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md |
|---|
| | | 2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) |
|---|
| | | 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 |
|---|
| | | 4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 |
|---|
| | | 5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) |
|---|
| | | 6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) |
|---|
| | | /views/Admin/Notice |
|---|
| 对比新文件 |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ], |
|---|
| | | plugins: [ |
|---|
| | | ['import', { |
|---|
| | | 'libraryName': 'ant-design-vue', |
|---|
| | | 'libraryDirectory': 'es', |
|---|
| | | 'style': 'css' |
|---|
| | | }] |
|---|
| | | ] |
|---|
| | | } |
|---|
| 对比新文件 |
| | |
|---|
| | | { |
|---|
| | | "name": "response", |
|---|
| | | "version": "0.1.0", |
|---|
| | | "private": true, |
|---|
| | | "scripts": { |
|---|
| | | "serve": "vue-cli-service serve --open", |
|---|
| | | "build": "vue-cli-service build" |
|---|
| | | }, |
|---|
| | | "dependencies": { |
|---|
| | | "ant-design-vue": "^1.7.7", |
|---|
| | | "core-js": "^3.6.5", |
|---|
| | | "echarts": "^5.1.2", |
|---|
| | | "moment": "^2.29.1", |
|---|
| | | "quill-image-resize-module": "^3.0.0", |
|---|
| | | "vue": "^2.6.11", |
|---|
| | | "vue-quill-editor": "^3.0.6", |
|---|
| | | "vue-router": "^3.2.0", |
|---|
| | | "vuex": "^3.4.0" |
|---|
| | | }, |
|---|
| | | "devDependencies": { |
|---|
| | | "@vue/cli-plugin-babel": "~4.5.0", |
|---|
| | | "@vue/cli-plugin-router": "~4.5.0", |
|---|
| | | "@vue/cli-plugin-vuex": "~4.5.0", |
|---|
| | | "@vue/cli-service": "~4.5.0", |
|---|
| | | "babel-plugin-import": "^1.13.3", |
|---|
| | | "less": "^3.0.4", |
|---|
| | | "less-loader": "^5.0.0", |
|---|
| | | "vue-template-compiler": "^2.6.11" |
|---|
| | | }, |
|---|
| | | "browserslist": [ |
|---|
| | | "> 1%", |
|---|
| | | "last 2 versions", |
|---|
| | | "not dead" |
|---|
| | | ] |
|---|
| | | } |
|---|
| 对比新文件 |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang=""> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|---|
| | | <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|---|
| | | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
|---|
| | | <title><%= htmlWebpackPlugin.options.title %></title> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <noscript> |
|---|
| | | <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
|---|
| | | </noscript> |
|---|
| | | <div id="app"></div> |
|---|
| | | <!-- built files will be auto injected --> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <div id="app"> |
|---|
| | | <router-view/> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <style lang="less"> |
|---|
| | | #app { |
|---|
| | | font-family: Avenir, Helvetica, Arial, sans-serif; |
|---|
| | | -webkit-font-smoothing: antialiased; |
|---|
| | | -moz-osx-font-smoothing: grayscale; |
|---|
| | | } |
|---|
| | | * { |
|---|
| | | margin: 0px; |
|---|
| | | padding: 0px; |
|---|
| | | } |
|---|
| | | .inner{ |
|---|
| | | background-color: #fff;padding: 20px 10px; |
|---|
| | | height: 100vh; |
|---|
| | | } |
|---|
| | | .ftright{ |
|---|
| | | float:right; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <a-card title="最新叫应记录"> |
|---|
| | | <a-list item-layout="horizontal" :data-source="lists"> |
|---|
| | | <a-list-item slot="renderItem" slot-scope="item"> |
|---|
| | | <a-list-item-meta |
|---|
| | | :description="item.created | filterTime" |
|---|
| | | > |
|---|
| | | <a slot="title" href="#">{{ item.title }}</a> |
|---|
| | | <a-avatar |
|---|
| | | slot="avatar" |
|---|
| | | src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" |
|---|
| | | /> |
|---|
| | | </a-list-item-meta> |
|---|
| | | </a-list-item> |
|---|
| | | </a-list> |
|---|
| | | </a-card> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: "Dynamic", |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | lists: [ |
|---|
| | | { |
|---|
| | | title: "阿勒泰地区莽村 李有田 在 20230301大风红色预警提示 进行了“已安排部署”叫应。", |
|---|
| | | created: '2023-03-1 12:12:12' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: "李宏伟 在 20230301大风红色预警提示 进行了“已安排部署”叫应。", |
|---|
| | | created: '2023-03-12 12:12:12' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: "李宏伟 在 20230301大风红色预警提示 进行了“已安排部署”叫应。", |
|---|
| | | created: '2023-03-12 12:12:12' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: "李宏伟 在 20230301大风红色预警提示 进行了“已安排部署”叫应。", |
|---|
| | | created: '2023-03-12 12:12:12' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: "阿勒泰地区莽村 李有田 在 20230311大风红色预警工作通知 进行了“已安排部署”叫应。", |
|---|
| | | created: '2023-03-12 12:12:12' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: "木木 在 20230301大风红色预警提示 进行了“已安排部署”叫应。", |
|---|
| | | created: '2023-03-12 12:12:12' |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <a-card title="综合预警指数"> |
|---|
| | | <div id="echartsMain" style="height: 300px;"></div> |
|---|
| | | </a-card> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as echarts from 'echarts' |
|---|
| | | export default { |
|---|
| | | name: "index-echarts", |
|---|
| | | data() { |
|---|
| | | return {}; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.initEchart(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | initEchart() { |
|---|
| | | let chartDom = document.getElementById("echartsMain"); |
|---|
| | | let myChart = echarts.init(chartDom); |
|---|
| | | myChart.setOption({ |
|---|
| | | legend: { |
|---|
| | | data: ["红", "橙", "黄"], |
|---|
| | | bottom: '10', |
|---|
| | | icon: 'circle' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | show: true, |
|---|
| | | axisPointer: { |
|---|
| | | type: 'cross', |
|---|
| | | animation: true |
|---|
| | | }, |
|---|
| | | backgroundColor: 'rgba(255, 255, 255, .5)' |
|---|
| | | }, |
|---|
| | | radar: { |
|---|
| | | shape: 'circle', |
|---|
| | | indicator: [ |
|---|
| | | { name: "地震", max: 80 }, |
|---|
| | | { name: "森林草原火灾", max: 80 }, |
|---|
| | | { name: "水旱", max: 80 }, |
|---|
| | | { name: "地质", max: 80 }, |
|---|
| | | { name: "气象", max: 80 } |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: "radar", |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: [10, 40, 20, 60, 10, 60], |
|---|
| | | name: "红", |
|---|
| | | lineStyle:{ |
|---|
| | | color:'red' |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | color:'red' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: [50, 14, 28, 26, 42, 21], |
|---|
| | | name: "橙", |
|---|
| | | lineStyle:{ |
|---|
| | | color:'#f66d05' |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | color:'#f66d05' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: [60, 20, 43, 73, 12, 80], |
|---|
| | | name: "黄", |
|---|
| | | lineStyle:{ |
|---|
| | | color:'#f7ad00' |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | color:'#f7ad00' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <a-card title="近期通知" class="projecting"> |
|---|
| | | <a slot="extra" href="#" style="color: rgb(19, 194, 194)">全部通知</a> |
|---|
| | | <a-card-grid style="width:33.33%;text-align:center" v-for="(item, index) in lists" :key="'projecting' + index"> |
|---|
| | | <div class="title"> |
|---|
| | | <img :src="item.img" :alt="item.title"> |
|---|
| | | <span>{{ item.title }}</span> |
|---|
| | | </div> |
|---|
| | | <p>{{ item.content }}</p> |
|---|
| | | <div class="project-item"> |
|---|
| | | <b>{{ item.name }}</b> |
|---|
| | | <span>{{ item.created | filterTime }}</span> |
|---|
| | | </div> |
|---|
| | | </a-card-grid> |
|---|
| | | </a-card> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'projecting', |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | lists: [ |
|---|
| | | { |
|---|
| | | img: require('@/assets/user.png'), |
|---|
| | | title: '气象 红色预警',//显示灾害种类和对应颜色级别 |
|---|
| | | content: '根据中央气象台消息，全疆近日气温将……', |
|---|
| | | name: '自治区', |
|---|
| | | created: '2020-10-12 12:12:12' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | img: require('@/assets/user.png'), |
|---|
| | | title: '气象 红色预警', |
|---|
| | | content: '今日阿勒泰地区将持续低温，请各单位……', |
|---|
| | | name: '阿勒泰地区', |
|---|
| | | created: '2021-08-21 12:12:12' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | img: require('@/assets/user.png'), |
|---|
| | | title: '气象 黄色预警', |
|---|
| | | content: '根据中央气象台消息，全疆近日气温将……', |
|---|
| | | name: '自治区', |
|---|
| | | created: '2022-10-12 12:12:12' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | img: require('@/assets/user.png'), |
|---|
| | | title: '气象 红色预警', |
|---|
| | | content: '根据中央气象台消息，全疆近日气温将……', |
|---|
| | | name: '自治区', |
|---|
| | | created: '2022-08-21 12:12:12' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | img: require('@/assets/user.png'), |
|---|
| | | title: '气象 红色预警', |
|---|
| | | content: '根据中央气象台消息，全疆近日气温将……', |
|---|
| | | name: '自治区', |
|---|
| | | created: '2022-10-12 12:12:12' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | img: require('@/assets/user.png'), |
|---|
| | | title: '气象 红色预警', |
|---|
| | | content: '根据中央气象台消息，全疆近日气温将……', |
|---|
| | | name: '自治区', |
|---|
| | | created: '2022-08-25 12:12:12' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .projecting { |
|---|
| | | .title { |
|---|
| | | text-align: left; |
|---|
| | | margin-bottom: 10px; |
|---|
| | | img { |
|---|
| | | width: 32px; |
|---|
| | | height: 32px; |
|---|
| | | margin-right: 16px; |
|---|
| | | } |
|---|
| | | span { |
|---|
| | | color: rgba(0, 0, 0, 0.85); |
|---|
| | | font-weight: 500; |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | p { |
|---|
| | | text-align: left; |
|---|
| | | height: 44px; |
|---|
| | | line-height: 22px; |
|---|
| | | overflow: hidden; |
|---|
| | | color: rgba(0, 0, 0, 0.45); |
|---|
| | | } |
|---|
| | | .project-item { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | span { |
|---|
| | | &:first-child { |
|---|
| | | &:hover { |
|---|
| | | color: rgb(19, 194, 194); |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <a-card title="快捷操作" class="quick"> |
|---|
| | | <a style="color:blue">待叫应（1）</a> |
|---|
| | | <a >待审核</a> |
|---|
| | | <a>发布通知</a> |
|---|
| | | <a>查看统计</a> |
|---|
| | | <a>用户管理</a> |
|---|
| | | <!-- <a-button><a-icon type="plus" />添加</a-button> --> |
|---|
| | | </a-card> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'quick-navigation' |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .quick { |
|---|
| | | a { |
|---|
| | | display: inline-block; |
|---|
| | | width: 25%; |
|---|
| | | font-size: 14px; |
|---|
| | | margin-bottom: 13px; |
|---|
| | | color: #333; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <a-card title="各地区统计数据"> |
|---|
| | | <div class="item" v-for="(item, index) in lists" :key="'team' + index"> |
|---|
| | | <a style="border: 1px solid #1890ff;padding: 5px 8px;border-radius: 5px;">{{ item.title }}</a> |
|---|
| | | </div> |
|---|
| | | </a-card> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'Team', |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | lists: [ |
|---|
| | | { |
|---|
| | | title: '全疆汇总', |
|---|
| | | url:'' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '乌鲁木齐市', |
|---|
| | | url:'' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '吐鲁番市', |
|---|
| | | url:'' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '昌吉市', |
|---|
| | | url:'' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '巴音郭楞蒙古自治州', |
|---|
| | | url:'' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '伊犁哈萨克自治州', |
|---|
| | | url:'' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '阿克苏地区', |
|---|
| | | url:'' |
|---|
| | | }, |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .item { |
|---|
| | | width: 50%; |
|---|
| | | display: inline-block; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | img { |
|---|
| | | width: 32px; |
|---|
| | | height: 32px; |
|---|
| | | margin-right: 20px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <ul> |
|---|
| | | <li v-for="(page, index) in pageList" :key="index" :class="page.path == activePage ? 'act' : ''"> |
|---|
| | | <span @click="onTabClick(page.path)">{{page.title}}</span> |
|---|
| | | <a-icon type="close" @click="onClose(page.path)"/> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: 'tabs-header', |
|---|
| | | props: { |
|---|
| | | pageList: Array, |
|---|
| | | activePage: String |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onTabClick(key) { |
|---|
| | | if(this.activePage !== key) { |
|---|
| | | this.$emit('change', key) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onClose(key) { |
|---|
| | | this.$emit('close', key) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="less" scoped> |
|---|
| | | ul { |
|---|
| | | display: flex; |
|---|
| | | list-style-type: none; |
|---|
| | | padding-left: 16px; |
|---|
| | | margin-top: 16px; |
|---|
| | | margin-bottom: 0px; |
|---|
| | | li { |
|---|
| | | padding: 5px 10px; |
|---|
| | | background-color: rgb(250,250,250); |
|---|
| | | margin-right: 10px; |
|---|
| | | border-radius: 5px; |
|---|
| | | cursor: pointer; |
|---|
| | | span { |
|---|
| | | font-size: 14px; |
|---|
| | | margin-right: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .act { |
|---|
| | | background-color: #fff; |
|---|
| | | color: rgb(24,144,255); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | const menuData = [{
|
|---|
| | | MenuTitle: "首页",
|
|---|
| | | Icon: "home",
|
|---|
| | | MenuID: "1",
|
|---|
| | | Children: [{
|
|---|
| | | MenuID: "11",
|
|---|
| | | MenuTitle: "控制面板",
|
|---|
| | | MenuPath: "/home",
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuID: "18",
|
|---|
| | | MenuTitle: "实时气象",
|
|---|
| | | MenuPath: "/wendy",
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuID: "12",
|
|---|
| | | MenuTitle: "我收到的",
|
|---|
| | | MenuPath: "/list"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuID: "14",
|
|---|
| | | MenuTitle: "我发布的",
|
|---|
| | | MenuPath: "/release"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuID: "13",
|
|---|
| | | MenuTitle: "数据统计",
|
|---|
| | | MenuPath: "/audit"
|
|---|
| | | }
|
|---|
| | | ],
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuTitle: "预警信息管理",
|
|---|
| | | Icon: "mail",
|
|---|
| | | MenuID: "2",
|
|---|
| | | Children: [{
|
|---|
| | | MenuID: "21",
|
|---|
| | | MenuTitle: "信息编辑",
|
|---|
| | | MenuPath: "/torelease",
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuID: "24",
|
|---|
| | | MenuTitle: "信息发布",
|
|---|
| | | MenuPath: "/report",
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuID: "22",
|
|---|
| | | MenuTitle: "历史信息",
|
|---|
| | | MenuPath: "/history",
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuID: "23",
|
|---|
| | | MenuTitle: "叫应记录",
|
|---|
| | | MenuPath: "/responses",
|
|---|
| | | },
|
|---|
| | | ],
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuTitle: "短信管理",
|
|---|
| | | Icon: "message",
|
|---|
| | | MenuID: "3",
|
|---|
| | | Children: [{
|
|---|
| | | MenuID: "31",
|
|---|
| | | MenuTitle: "常规群发",
|
|---|
| | | MenuPath: "/module",
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuID: "32",
|
|---|
| | | MenuTitle: "短信记录",
|
|---|
| | | MenuPath: "/",
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuID: "33",
|
|---|
| | | MenuTitle: "平级接收人管理",
|
|---|
| | | MenuPath: "/samelevel",
|
|---|
| | | },
|
|---|
| | | ],
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuTitle: "设置",
|
|---|
| | | Icon: "setting",
|
|---|
| | | MenuID: "4",
|
|---|
| | | Children: [{
|
|---|
| | | MenuID: "41",
|
|---|
| | | MenuTitle: "用户管理",
|
|---|
| | | MenuPath: "/user",
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuID: "42",
|
|---|
| | | MenuTitle: "短信平台设置",
|
|---|
| | | MenuPath: "/smssetting",
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | MenuID: "43",
|
|---|
| | | MenuTitle: "菜单权限",
|
|---|
| | | MenuPath: "/munu",
|
|---|
| | | },
|
|---|
| | | ],
|
|---|
| | | },
|
|---|
| | | ]
|
|---|
| | |
|
|---|
| | | export default menuData; |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <a-menu |
|---|
| | | theme="dark" |
|---|
| | | mode="inline" |
|---|
| | | :selectedKeys="[$route.path]" |
|---|
| | | :openKeys="openKeys" |
|---|
| | | @openChange="onOpenChange" |
|---|
| | | > |
|---|
| | | <a-sub-menu :key="nav.MenuID" v-for="nav in navData"> |
|---|
| | | <div slot="title"> |
|---|
| | | <a-icon :type="nav.Icon" /> |
|---|
| | | <span>{{ nav.MenuTitle }} </span> |
|---|
| | | </div> |
|---|
| | | <a-menu-item :key="nChild.MenuPath" v-for="nChild in nav.Children"> |
|---|
| | | <router-link :to="nChild.MenuPath"> |
|---|
| | | {{ nChild.MenuTitle }} |
|---|
| | | </router-link> |
|---|
| | | </a-menu-item> |
|---|
| | | </a-sub-menu> |
|---|
| | | </a-menu> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import menuData from './menu' |
|---|
| | | export default { |
|---|
| | | name: "menu-sider", |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | navData: menuData, |
|---|
| | | openKeys: ['1','2','3','4'] |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | onOpenChange(openKeys) { |
|---|
| | | if (openKeys.length !== 0) { |
|---|
| | | this.openKeys = [openKeys[1]] |
|---|
| | | } else { |
|---|
| | | this.openKeys = [''] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| 对比新文件 |
| | |
|---|
| | | import Vue from 'vue' |
|---|
| | | import App from './App.vue' |
|---|
| | | import router from './router' |
|---|
| | | import store from './store' |
|---|
| | | import './util/AntDesign' |
|---|
| | | import 'ant-design-vue/dist/antd.css' |
|---|
| | | import moment from 'moment' |
|---|
| | | //设置组件默认中文 |
|---|
| | | import 'moment/locale/zh-cn'; |
|---|
| | | moment.locale('zh-cn'); |
|---|
| | | |
|---|
| | | Vue.config.productionTip = false |
|---|
| | | |
|---|
| | | Vue.filter('filterTime', (value) => { |
|---|
| | | moment.locale('zh-cn') // 使用中文 |
|---|
| | | // 判断当前日期是否是7天之前 |
|---|
| | | if (moment(value).isBefore(moment().subtract(7, 'days'))) { |
|---|
| | | return moment(value).format('YYYY-MM-DD') |
|---|
| | | } else { |
|---|
| | | // 1小时前 |
|---|
| | | return moment(value).from(moment()) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | new Vue({ |
|---|
| | | router, |
|---|
| | | store, |
|---|
| | | render: h => h(App) |
|---|
| | | }).$mount('#app') |
|---|
| 对比新文件 |
| | |
|---|
| | | import Vue from "vue"; |
|---|
| | | import VueRouter from "vue-router"; |
|---|
| | | |
|---|
| | | |
|---|
| | | Vue.use(VueRouter); |
|---|
| | | |
|---|
| | | const routes = [ |
|---|
| | | { |
|---|
| | | path: '/', |
|---|
| | | name: 'login', |
|---|
| | | component: () => import('@/views/Login'), |
|---|
| | | meta: { title: '登录' }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/home', |
|---|
| | | name: 'home', |
|---|
| | | component: () => import('@/views/Home'), |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | path: '/home', |
|---|
| | | name: 'default', |
|---|
| | | meta: { title: '控制面板' }, |
|---|
| | | component: () => import('@/views/Admin/HomeDefault'), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/wendy', |
|---|
| | | name: 'default', |
|---|
| | | meta: { title: '实时气象' }, |
|---|
| | | component: () => import('@/views/Admin/Wendy'), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/release', |
|---|
| | | name: 'release', |
|---|
| | | meta: { title: '我发布的' }, |
|---|
| | | component: () => import('@/views/Admin/Release'), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/list', |
|---|
| | | name: 'list', |
|---|
| | | meta: { title: '我收到的' }, |
|---|
| | | component: () => import('@/views/Admin/List'), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/details', |
|---|
| | | name: 'detail', |
|---|
| | | meta: { title: '信息详情' }, |
|---|
| | | component: () => import('@/views/Admin/Details'), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/audit', |
|---|
| | | name: 'audit', |
|---|
| | | meta: { title: '数据统计' }, |
|---|
| | | component: () => import('@/views/Admin/Audit'), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/torelease', |
|---|
| | | name: 'torelease', |
|---|
| | | meta: { title: '信息编辑' }, |
|---|
| | | component: () => import('@/views/Admin/Notice'), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/report', |
|---|
| | | name: 'report', |
|---|
| | | meta: { title: '信息发布' }, |
|---|
| | | component: () => import('@/views/Admin/Report'), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/history', |
|---|
| | | name: 'history', |
|---|
| | | meta: { title: '历史信息' }, |
|---|
| | | component: () => import('@/views/Admin/History'), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/responses', |
|---|
| | | name: 'response', |
|---|
| | | meta: { title: '叫应记录' }, |
|---|
| | | component: () => import('@/views/Admin/Response'), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/samelevel', |
|---|
| | | name: 'samelevel', |
|---|
| | | meta: { title: '叫应记录' }, |
|---|
| | | component: () => import('@/views/SameLevel'), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | path: '/user', |
|---|
| | | name: 'user', |
|---|
| | | meta: { title: '管理' }, |
|---|
| | | component: () => import('@/views/Admin/UserManage'), |
|---|
| | | }, |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | const router = new VueRouter({ |
|---|
| | | mode: "history", |
|---|
| | | base: process.env.BASE_URL, |
|---|
| | | routes, |
|---|
| | | }); |
|---|
| | | // 全局后置钩子
|
|---|
| | | router.afterEach((to) => {
|
|---|
| | | // 设置title
|
|---|
| | | document.title = to.meta.title;
|
|---|
| | | }); |
|---|
| | | |
|---|
| | | export default router; |
|---|
| 对比新文件 |
| | |
|---|
| | | import Vue from 'vue' |
|---|
| | | import Vuex from 'vuex' |
|---|
| | | |
|---|
| | | Vue.use(Vuex) |
|---|
| | | |
|---|
| | | export default new Vuex.Store({ |
|---|
| | | state: { |
|---|
| | | }, |
|---|
| | | mutations: { |
|---|
| | | }, |
|---|
| | | actions: { |
|---|
| | | }, |
|---|
| | | modules: { |
|---|
| | | } |
|---|
| | | }) |
|---|
| 对比新文件 |
| | |
|---|
| | | import Vue from "vue"; |
|---|
| | | import { |
|---|
| | | Button, |
|---|
| | | Layout, |
|---|
| | | Menu, |
|---|
| | | Icon, |
|---|
| | | Form, |
|---|
| | | Input, |
|---|
| | | Tabs, |
|---|
| | | Checkbox, |
|---|
| | | Row, |
|---|
| | | Col, |
|---|
| | | Avatar, |
|---|
| | | Divider, |
|---|
| | | Card, |
|---|
| | | List, |
|---|
| | | Tooltip, |
|---|
| | | Dropdown, |
|---|
| | | Select, |
|---|
| | | Radio, |
|---|
| | | DatePicker, |
|---|
| | | Table, |
|---|
| | | Tag, |
|---|
| | | Modal, |
|---|
| | | TreeSelect, |
|---|
| | | Alert |
|---|
| | | } from "ant-design-vue"; |
|---|
| | | Vue.use(Alert); |
|---|
| | | Vue.use(TreeSelect); |
|---|
| | | Vue.use(Button); |
|---|
| | | Vue.use(Layout); |
|---|
| | | Vue.use(Menu); |
|---|
| | | Vue.use(Icon); |
|---|
| | | Vue.use(Form); |
|---|
| | | Vue.use(Input); |
|---|
| | | Vue.use(Tabs); |
|---|
| | | Vue.use(Checkbox); |
|---|
| | | Vue.use(Row); |
|---|
| | | Vue.use(Col); |
|---|
| | | Vue.use(Avatar); |
|---|
| | | Vue.use(Divider); |
|---|
| | | Vue.use(Card); |
|---|
| | | Vue.use(List); |
|---|
| | | Vue.use(Tooltip); |
|---|
| | | Vue.use(Dropdown); |
|---|
| | | Vue.use(Select); |
|---|
| | | Vue.use(Radio); |
|---|
| | | Vue.use(DatePicker); |
|---|
| | | Vue.use(Table); |
|---|
| | | Vue.use(Tag); |
|---|
| | | Vue.use(Modal); |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <div>数据统计模块待呈现</div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <div class="inner"> |
|---|
| | | <h2>标题：{{title}}</h2> |
|---|
| | | <p><b>类别：</b>{{category}}</p> |
|---|
| | | <p><b>级别：</b><a-tag :color="level === '黄色' ? 'yellow' :level === '橙色'? 'orange':level === '红色'?'red':'blue'">
|
|---|
| | | {{ level }}
|
|---|
| | | </a-tag></p> |
|---|
| | | <p><b>发布单位：</b>{{department}}</p> |
|---|
| | | <p><b>短信内容：</b><i>{{smsmessage}}</i></p> |
|---|
| | | <p><b>附件内容：</b><a :href=attachment.url><a-icon type="link" /> {{attachment.title}}</a></p> |
|---|
| | | <p><b>响应状态：</b> |
|---|
| | | <span v-if="receipt=='待叫应'"
|
|---|
| | | style='background-color:blue;padding:5px;color:#fff;border-radius: 5px;'>{{receipt}}</span>
|
|---|
| | | <span v-else-if="receipt=='已叫应'"
|
|---|
| | | style='background-color:limegreen;padding:5px;color:#2a2a2a;border-radius: 5px;'>{{receipt}}</span>
|
|---|
| | | <span v-else style='background-color:red;padding:5px;color:#fff;border-radius: 5px;'>{{receipt}}
|
|---|
| | | </span></p> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default{ |
|---|
| | | data(){ |
|---|
| | | return{ |
|---|
| | | key: 1, |
|---|
| | | id:1001, |
|---|
| | | time: '2023年5月3日 15:30', |
|---|
| | | department: '自治区预警中心', |
|---|
| | | category: '气象', |
|---|
| | | level: '黄色', |
|---|
| | | title: '标题：全疆（地区）高温橙色预警', |
|---|
| | | attachment: { |
|---|
| | | title:'中央气象台2023年5月3日报告', |
|---|
| | | url:'http://www.baidu.com' |
|---|
| | | }, |
|---|
| | | smsmessage: '【自然灾害预警提示】中央气象台2023年5月3日报告，我省南部将持续高温天气，请各部门注意采取相应措施。发布单位：自治区预警中心', |
|---|
| | | receipt: '已叫应' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | p{ |
|---|
| | | font-size:16px; |
|---|
| | | } |
|---|
| | | i{ |
|---|
| | | background-color: aliceblue; |
|---|
| | | padding: 2px 5px; |
|---|
| | | } |
|---|
| | | .inner{ |
|---|
| | | padding:25px 25px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template>
|
|---|
| | | <div class="inner">
|
|---|
| | | <template>
|
|---|
| | | <a-alert message="提示：此处显示您及您辖区下的所有历史发布信息。" type="info" close-text="关闭提示" />
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <br />
|
|---|
| | | <a-radio-group v-model="category">
|
|---|
| | | <a-radio-button value="default">
|
|---|
| | | 全部
|
|---|
| | | </a-radio-button>
|
|---|
| | | <a-radio-button value="1">
|
|---|
| | | 紧临
|
|---|
| | | </a-radio-button>
|
|---|
| | | <a-radio-button value="2">
|
|---|
| | | 常规
|
|---|
| | | </a-radio-button>
|
|---|
| | | </a-radio-group>
|
|---|
| | | <div style="float:right">
|
|---|
| | | 时间区间筛选：<a-range-picker :placeholder="['开始时间', '结束时间']" @change="onChange" />
|
|---|
| | | </div>
|
|---|
| | | <br /><br />
|
|---|
| | | <!-- 表格实体部分-->
|
|---|
| | | <a-table :columns="columns" :data-source="data" bordered>
|
|---|
| | | <span slot="level" slot-scope="text">
|
|---|
| | | <a-tag :color="text === '黄色' ? 'yellow' :text === '橙色'? 'orange':text === '红色'?'red':'blue'">
|
|---|
| | | {{ text }}
|
|---|
| | | </a-tag>
|
|---|
| | | </span>
|
|---|
| | | <template slot="attachment" slot-scope="text">
|
|---|
| | | <span v-if="text==='无'">无</span>
|
|---|
| | | <a v-else><b><a-icon type="paper-clip" /> {{text}}</b></a>
|
|---|
| | | </template>
|
|---|
| | | <template slot="operation" slot-scope="text, record, index">
|
|---|
| | | <div class="editable-row-operations">
|
|---|
| | | <a @click="showModal" style="color:orangered">
|
|---|
| | | 叫应列表</a>
|
|---|
| | | <router-link :to="{path:'/details',query: {id: record.id}}">信息详情</router-link>
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | | </a-table>
|
|---|
| | | <!-- 对话框 -->
|
|---|
| | | <a-modal title="查看叫应详情" okText="确认" cancelText="关闭" :visible="visible" :confirm-loading="confirmLoading"
|
|---|
| | | @ok="handleOk" @cancel="handleOk">
|
|---|
| | | </a-modal>
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | | <script>
|
|---|
| | | const columns = [{
|
|---|
| | | title: '序号',
|
|---|
| | | dataIndex: 'key',
|
|---|
| | | width: '8%',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '发布时间',
|
|---|
| | | dataIndex: 'time',
|
|---|
| | | width: '15%',
|
|---|
| | | scopedSlots: {
|
|---|
| | | customRender: 'time'
|
|---|
| | | }, //设置定制化表格数据
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '发布单位',
|
|---|
| | | dataIndex: 'department',
|
|---|
| | | width: '12%',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '类别',
|
|---|
| | | dataIndex: 'category',
|
|---|
| | | width: '8%',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '级别',
|
|---|
| | | dataIndex: 'level',
|
|---|
| | | scopedSlots: {
|
|---|
| | | customRender: 'level'
|
|---|
| | | }, //设置定制化表格数据
|
|---|
| | | width: '8%',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '信息标题',
|
|---|
| | | dataIndex: 'title',
|
|---|
| | | width: '16%',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '附件',
|
|---|
| | | dataIndex: 'attachment',
|
|---|
| | | width: '6%',
|
|---|
| | | scopedSlots: {
|
|---|
| | | customRender: 'attachment'
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '叫应情况',
|
|---|
| | | dataIndex: 'receipt',
|
|---|
| | | width: '10%',
|
|---|
| | | scopedSlots: {
|
|---|
| | | customRender: 'receipt'
|
|---|
| | | }, //设置定制化表格数据
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '操作',
|
|---|
| | | dataIndex: 'operation',
|
|---|
| | | scopedSlots: {
|
|---|
| | | customRender: 'operation'
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | ];
|
|---|
| | | const data = [{
|
|---|
| | | key: 1,
|
|---|
| | | id: 1001,
|
|---|
| | | time: '2023年5月3日 15:30',
|
|---|
| | | department: '自治区预警中心',
|
|---|
| | | category: '气象',
|
|---|
| | | level: '黄色',
|
|---|
| | | title: '全疆高温黄色预警',
|
|---|
| | | attachment: '1',
|
|---|
| | | receipt: '部分叫应'
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | key: 2,
|
|---|
| | | id: 1002,
|
|---|
| | | time: '2023年5月3日 15:30',
|
|---|
| | | department: '自治区预警中心',
|
|---|
| | | category: '气象',
|
|---|
| | | level: '黄色',
|
|---|
| | | title: '全疆高温黄色预警',
|
|---|
| | | attachment: '1',
|
|---|
| | | receipt: '全部叫应'
|
|---|
| | | }, {
|
|---|
| | | key: 3,
|
|---|
| | | id: 1003,
|
|---|
| | | time: '2023年5月3日 15:30',
|
|---|
| | | department: '自治区预警中心',
|
|---|
| | | category: '气象',
|
|---|
| | | level: '黄色',
|
|---|
| | | title: '全疆高温黄色预警',
|
|---|
| | | attachment: '1',
|
|---|
| | | receipt: '均未叫应'
|
|---|
| | | }, {
|
|---|
| | | key: 4,
|
|---|
| | | id: 1004,
|
|---|
| | | time: '2023年5月3日 15:30',
|
|---|
| | | department: '阿克苏应急管理局',
|
|---|
| | | category: '气象',
|
|---|
| | | level: '红色',
|
|---|
| | | title: '阿克苏地区高温红色预警',
|
|---|
| | | attachment: '1',
|
|---|
| | | receipt: '均未叫应'
|
|---|
| | | }, {
|
|---|
| | | key: 5,
|
|---|
| | | id: 1005,
|
|---|
| | | time: '2023年5月1日 15:30',
|
|---|
| | | department: '阿克苏应急管理局',
|
|---|
| | | category: '气象',
|
|---|
| | | level: '红色',
|
|---|
| | | title: '全疆高温红色预警',
|
|---|
| | | attachment: '1',
|
|---|
| | | receipt: '均未叫应'
|
|---|
| | | }
|
|---|
| | | ]
|
|---|
| | | export default {
|
|---|
| | | data() {
|
|---|
| | | return {
|
|---|
| | | category: 'default',
|
|---|
| | | data,
|
|---|
| | | columns,
|
|---|
| | | visible: false,
|
|---|
| | | confirmLoading: false,
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | //弹出层
|
|---|
| | | showModal() {
|
|---|
| | | this.visible = true;
|
|---|
| | | },
|
|---|
| | | handleOk(e) {
|
|---|
| | | this.visible = false;
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | </script> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <div class="home-default"> |
|---|
| | | <div class="home-default-header"> |
|---|
| | | <h1>工作台</h1> |
|---|
| | | <div class="content"> |
|---|
| | | <div class="content-left"> |
|---|
| | | <img src="./../../assets/user.png" alt=""> |
|---|
| | | <div class="user"> |
|---|
| | | <h2>{{ dateTime + '，李静，欢迎使用自治区自然灾害综合风险预警发布及响应联动系统。' }}</h2> |
|---|
| | | <p>自治区预警中心干部 工作人员</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="content-right"> |
|---|
| | | <div class="item"> |
|---|
| | | <p>本月通知数</p> |
|---|
| | | <span>646</span> |
|---|
| | | </div> |
|---|
| | | <a-divider type="vertical" style="height: 100%; margin: 0px 16px"/> |
|---|
| | | <div class="item"> |
|---|
| | | <p>叫应数</p> |
|---|
| | | <span>568</span> |
|---|
| | | </div> |
|---|
| | | <a-divider type="vertical" style="height: 100%; margin: 0px 16px"/> |
|---|
| | | <div class="item"> |
|---|
| | | <p>叫应率</p> |
|---|
| | | <span>88%</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="home-default-content"> |
|---|
| | | <div class="left"> |
|---|
| | | <Projecting /> |
|---|
| | | <Dynamic style="margin-top: 20px"/> |
|---|
| | | </div> |
|---|
| | | <div class="right"> |
|---|
| | | <QuickNavigation /> |
|---|
| | | <IndexEcharts style="margin-top: 20px"/> |
|---|
| | | <Team style="margin-top: 20px"/> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import Projecting from '@/components/Home/Projecting' |
|---|
| | | import Dynamic from '@/components/Home/Dynamic' |
|---|
| | | import QuickNavigation from '@/components/Home/QuickNavigation' |
|---|
| | | import IndexEcharts from '@/components/Home/IndexEcharts' |
|---|
| | | import Team from '@/components/Home/Team' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: 'home-default', |
|---|
| | | components: { |
|---|
| | | Projecting, |
|---|
| | | Dynamic, |
|---|
| | | QuickNavigation, |
|---|
| | | IndexEcharts, |
|---|
| | | Team |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | dateTime () { |
|---|
| | | let date = new Date() |
|---|
| | | if (date.getHours() >= 0 && date.getHours() < 12) { |
|---|
| | | return '上午好' |
|---|
| | | } else if (date.getHours() >= 12 && date.getHours() < 18) { |
|---|
| | | return '下午好' |
|---|
| | | } else { |
|---|
| | | return '晚上好' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .home-default { |
|---|
| | | .home-default-header { |
|---|
| | | background-color: #fff; |
|---|
| | | padding: 24px; |
|---|
| | | h1 { |
|---|
| | | font-size: 20px; |
|---|
| | | color: rgba(0, 0, 0, 0.85); |
|---|
| | | margin-bottom: 16px; |
|---|
| | | } |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | .content-left { |
|---|
| | | display: flex; |
|---|
| | | img { |
|---|
| | | width: 64px; |
|---|
| | | height: 64px; |
|---|
| | | margin-right: 20px; |
|---|
| | | } |
|---|
| | | .user { |
|---|
| | | p { |
|---|
| | | margin-bottom: 0px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .content-right { |
|---|
| | | display: flex; |
|---|
| | | .item { |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .home-default-content { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | margin-top: 20px; |
|---|
| | | .left { |
|---|
| | | width: 66%; |
|---|
| | | } |
|---|
| | | .right { |
|---|
| | | width: 33%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template>
|
|---|
| | | <div class="inner">
|
|---|
| | | <a-radio-group v-model="category">
|
|---|
| | | <a-radio-button value="default">
|
|---|
| | | 全部
|
|---|
| | | </a-radio-button>
|
|---|
| | | <a-radio-button value="1">
|
|---|
| | | 待叫应
|
|---|
| | | </a-radio-button>
|
|---|
| | | <a-radio-button value="2">
|
|---|
| | | 已叫应
|
|---|
| | | </a-radio-button>
|
|---|
| | | <a-radio-button value="3">
|
|---|
| | | 超时未叫应
|
|---|
| | | </a-radio-button>
|
|---|
| | | </a-radio-group>
|
|---|
| | | <div style="float:right">
|
|---|
| | | 时间区间筛选：<a-range-picker :placeholder="['开始时间', '结束时间']" @change="onChange" />
|
|---|
| | | </div>
|
|---|
| | | <br /><br />
|
|---|
| | | <!-- 表格实体部分-->
|
|---|
| | | <a-table :columns="columns" :data-source="data" bordered> |
|---|
| | | <template slot="time" slot-scope="text,record"> |
|---|
| | | <a v-if="!record.readed" style="color:red">[未读]</a>{{text}} |
|---|
| | | </template>
|
|---|
| | | <span slot="level" slot-scope="text">
|
|---|
| | | <a-tag :color="text === '黄色' ? 'yellow' :text === '橙色'? 'orange':text === '红色'?'red':'blue'">
|
|---|
| | | {{ text }}
|
|---|
| | | </a-tag>
|
|---|
| | | </span> |
|---|
| | | <template slot="attachment" slot-scope="text"> |
|---|
| | | <span v-if="text==='无'">无</span> |
|---|
| | | <a v-else><b><a-icon type="paper-clip" /> {{text}}</b></a> |
|---|
| | | </template >
|
|---|
| | | <template slot="receipt" slot-scope="text">
|
|---|
| | | <span v-if="text=='待叫应'"
|
|---|
| | | style='background-color:blue;padding:5px;color:#fff;border-radius: 5px;'>{{text}}</span>
|
|---|
| | | <span v-else-if="text=='已叫应'"
|
|---|
| | | style='background-color:limegreen;padding:5px;color:#2a2a2a;border-radius: 5px;'>{{text}}</span>
|
|---|
| | | <span v-else style='background-color:red;padding:5px;color:#fff;border-radius: 5px;'>{{text}}
|
|---|
| | | </span>
|
|---|
| | | </template>
|
|---|
| | | <template slot="operation" slot-scope="text, record, index">
|
|---|
| | | <div class="editable-row-operations">
|
|---|
| | | <div v-if="record.receipt==='待叫应'">
|
|---|
| | | <a @click="showModal" style="color:orangered"><a-icon type="notification" />
|
|---|
| | | 确认已收到</a>
|
|---|
| | | </div>
|
|---|
| | | <br />
|
|---|
| | | <router-link :to="{path:'/torelease'}">转发</router-link>
|
|---|
| | | <router-link :to="{path:'/details',query: {id: record.id}}">查看详情</router-link>
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | | </a-table>
|
|---|
| | | <!-- 对话框 -->
|
|---|
| | | <a-modal title="回执" |
|---|
| | | okText="确认已安排部署" |
|---|
| | | cancelText="取消" |
|---|
| | | :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk"
|
|---|
| | | @cancel="handleCancel">
|
|---|
| | | <p>{{ ModalText }}</p>
|
|---|
| | | </a-modal>
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | const columns = [{
|
|---|
| | | title: '序号',
|
|---|
| | | dataIndex: 'key',
|
|---|
| | | width: '5%',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '发布时间',
|
|---|
| | | dataIndex: 'time',
|
|---|
| | | width: '15%', |
|---|
| | | scopedSlots: { |
|---|
| | | customRender: 'time' |
|---|
| | | }, //设置定制化表格数据
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '发布单位',
|
|---|
| | | dataIndex: 'department',
|
|---|
| | | width: '12%',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '类别',
|
|---|
| | | dataIndex: 'category',
|
|---|
| | | width: '8%',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '级别',
|
|---|
| | | dataIndex: 'level',
|
|---|
| | | scopedSlots: {
|
|---|
| | | customRender: 'level'
|
|---|
| | | }, //设置定制化表格数据
|
|---|
| | | width: '8%',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '信息标题',
|
|---|
| | | dataIndex: 'title',
|
|---|
| | | width: '16%',
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '附件',
|
|---|
| | | dataIndex: 'attachment',
|
|---|
| | | width: '6%', |
|---|
| | | scopedSlots: { |
|---|
| | | customRender: 'attachment' |
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '叫应状态',
|
|---|
| | | dataIndex: 'receipt',
|
|---|
| | | width: '10%',
|
|---|
| | | scopedSlots: {
|
|---|
| | | customRender: 'receipt'
|
|---|
| | | }, //设置定制化表格数据
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | title: '操作',
|
|---|
| | | dataIndex: 'operation',
|
|---|
| | | scopedSlots: {
|
|---|
| | | customRender: 'operation'
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | ];
|
|---|
| | |
|
|---|
| | | const data = [{
|
|---|
| | | key: 1, |
|---|
| | | id:1001, |
|---|
| | | readed:false,
|
|---|
| | | time: '2023年5月3日 15:30',
|
|---|
| | | department: '自治区预警中心',
|
|---|
| | | category: '气象',
|
|---|
| | | level: '黄色',
|
|---|
| | | title: '全疆高温红色预警',
|
|---|
| | | attachment: '1',
|
|---|
| | | receipt: '待叫应'
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | key: 2, |
|---|
| | | readed:true, |
|---|
| | | id:1002,
|
|---|
| | | time: '2023年5月2日 15:30',
|
|---|
| | | department: '自治区预警中心',
|
|---|
| | | category: '气象',
|
|---|
| | | level: '橙色',
|
|---|
| | | title: '全疆高温红色预警',
|
|---|
| | | attachment: '1',
|
|---|
| | | receipt: '已叫应'
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | key: 3, |
|---|
| | | readed:true, |
|---|
| | | id:1003,
|
|---|
| | | time: '2023年5月1日 15:30',
|
|---|
| | | department: '自治区预警中心',
|
|---|
| | | category: '气象',
|
|---|
| | | level: '橙色',
|
|---|
| | | title: '全疆高温红色预警',
|
|---|
| | | attachment: '1',
|
|---|
| | | receipt: '已叫应'
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | key: 4, |
|---|
| | | readed:true, |
|---|
| | | id:1004,
|
|---|
| | | time: '2023年5月1日 15:30',
|
|---|
| | | department: '自治区预警中心',
|
|---|
| | | category: '气象',
|
|---|
| | | level: '橙色',
|
|---|
| | | title: '全疆高温红色预警',
|
|---|
| | | attachment: '2',
|
|---|
| | | receipt: '超时未叫应'
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | key: 5, |
|---|
| | | readed:true, |
|---|
| | | id:1005,
|
|---|
| | | time: '2023年4月21日 15:30',
|
|---|
| | | department: '自治区预警中心',
|
|---|
| | | category: '气象',
|
|---|
| | | level: '橙色',
|
|---|
| | | title: '全疆高温红色预警',
|
|---|
| | | attachment: '无',
|
|---|
| | | receipt: '已叫应'
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | key: 6, |
|---|
| | | readed:true, |
|---|
| | | id:1006,
|
|---|
| | | time: '2023年4月21日 15:30',
|
|---|
| | | department: '自治区预警中心',
|
|---|
| | | category: '气象',
|
|---|
| | | level: '橙色',
|
|---|
| | | title: '全疆高温红色预警',
|
|---|
| | | attachment: '1',
|
|---|
| | | receipt: '已叫应'
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | key: 7, |
|---|
| | | readed:true, |
|---|
| | | id:1007,
|
|---|
| | | time: '2023年1月21日 15:30',
|
|---|
| | | department: '自治区预警中心',
|
|---|
| | | category: '气象',
|
|---|
| | | level: '红色',
|
|---|
| | | title: '全疆低温红色预警',
|
|---|
| | | attachment: '1',
|
|---|
| | | receipt: '已叫应'
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | ];
|
|---|
| | |
|
|---|
| | | export default {
|
|---|
| | | data() {
|
|---|
| | | this.cacheData = data.map(item => ({
|
|---|
| | | ...item
|
|---|
| | | }));
|
|---|
| | | return {
|
|---|
| | | data,
|
|---|
| | | columns,
|
|---|
| | | editingKey: '',
|
|---|
| | | category: 'default',
|
|---|
| | | ModalText: '确认已经安排部署？',
|
|---|
| | | visible: false,
|
|---|
| | | confirmLoading: false,
|
|---|
| | | };
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | handleChange(value) {
|
|---|
| | | console.log(`Selected: ${value}`);
|
|---|
| | | },
|
|---|
| | | popupScroll() {
|
|---|
| | | console.log('popupScroll');
|
|---|
| | | },
|
|---|
| | | onChange(date, dateString) {
|
|---|
| | | console.log(date, dateString);
|
|---|
| | | },
|
|---|
| | | //叫应回执时间
|
|---|
| | | showModal() {
|
|---|
| | | this.visible = true;
|
|---|
| | | },
|
|---|
| | | handleOk(e) {
|
|---|
| | | this.ModalText = '正在提交您的叫应状态...';
|
|---|
| | | this.confirmLoading = true;
|
|---|
| | | setTimeout(() => {
|
|---|
| | | this.visible = false;
|
|---|
| | | this.confirmLoading = false;
|
|---|
| | | }, 2000);
|
|---|
| | | },
|
|---|
| | | handleCancel(e) {
|
|---|
| | | this.visible = false;
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | };
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <style>
|
|---|
| | |
|
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <div class="module-one"> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | |
|---|
| | | </script> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template>
|
|---|
| | | <div class="inner">
|
|---|
| | | <h2>预警信息发布</h2>
|
|---|
| | | <div class="left">
|
|---|
| | | <a-input placeholder="请输入标题" style="height: 50px; font-size: 20px;" />
|
|---|
| | | <br /><br />
|
|---|
| | | <a-radio-group v-model="value" @change="onChange">
|
|---|
| | | <a-radio :value="1">
|
|---|
| | | 蓝色
|
|---|
| | | </a-radio>
|
|---|
| | | <a-radio :value="2">
|
|---|
| | | 黄色
|
|---|
| | | </a-radio>
|
|---|
| | | <a-radio :value="3">
|
|---|
| | | 橙色
|
|---|
| | | </a-radio>
|
|---|
| | | <a-radio :value="4">
|
|---|
| | | 红色
|
|---|
| | | </a-radio>
|
|---|
| | | </a-radio-group>
|
|---|
| | | <br /><br />
|
|---|
| | | <a-radio-group default-value="a" button-style="solid">
|
|---|
| | | <a-radio-button value="a">
|
|---|
| | | 常规
|
|---|
| | | </a-radio-button>
|
|---|
| | | <a-radio-button value="b">
|
|---|
| | | 紧临
|
|---|
| | | </a-radio-button>
|
|---|
| | | </a-radio-group>
|
|---|
| | | <div class="ftright">
|
|---|
| | | 平级接收人选择：
|
|---|
| | | <a-select mode="multiple" placeholder="选择平级接收单位" :value="selectedItems" style="width: 180px"
|
|---|
| | | @change="handle">
|
|---|
| | | <a-select-option v-for="item in filteredOptions" :key="item" :value="item">
|
|---|
| | | {{ item }}
|
|---|
| | | </a-select-option>
|
|---|
| | | </a-select>
|
|---|
| | | |
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <br /><br />
|
|---|
| | | <a-textarea v-model="message" placeholder="请输入短信通知内容部分" :auto-size="{ minRows: 3, maxRows: 5 }" />
|
|---|
| | | <br /><br /> |
|---|
| | | <a-button>上传附件</a-button> <div style="float: right;width:50%;text-align: right;">超时设置： <a-input style="width:100px;" placeholder="输入时间" /> 分钟</div> |
|---|
| | | <br /><br />
|
|---|
| | | <span><b>发布单位：</b>{{department}}</span> |
|---|
| | | <br/><br/> |
|---|
| | | <!-- 子单位--> |
|---|
| | | <b>选择接收单位：</b> |
|---|
| | | <a-tree-select |
|---|
| | | show-search |
|---|
| | | style="width: 100%" |
|---|
| | | :value="svalue" |
|---|
| | | :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" |
|---|
| | | placeholder="选择工作通知接收单位" |
|---|
| | | allow-clear |
|---|
| | | multiple |
|---|
| | | tree-default-expand-all |
|---|
| | | @change="onChanges" |
|---|
| | | @search="onSearch" |
|---|
| | | @select="onSelect" |
|---|
| | | > |
|---|
| | | <a-tree-select-node key="0-1" value="乌鲁木齐" title="乌鲁木齐(张XX 13268813610)"> |
|---|
| | | <a-tree-select-node key="0-1-1" value="米东区" title="米东区(张XX 13268813610)"> |
|---|
| | | <a-tree-select-node key="0-1-1-1" value="XX村1" title="XX村(李有田 13268813610)" /> |
|---|
| | | </a-tree-select-node> |
|---|
| | | <a-tree-select-node key="0-1-2" value="天山区" title="天山区"> |
|---|
| | | <a-tree-select-node key="0-1-2-1" value="XX村2"> |
|---|
| | | <b slot="title" style="color: #08c">XX村</b> |
|---|
| | | </a-tree-select-node> |
|---|
| | | </a-tree-select-node> |
|---|
| | | </a-tree-select-node> |
|---|
| | | </a-tree-select> |
|---|
| | | |
|---|
| | | <br/><br/>
|
|---|
| | | <div style="float: right;"><b>选择审批领导：</b> <a-select show-search placeholder="请选择审批领导"
|
|---|
| | | option-filter-prop="children" style="width: 200px" :filter-option="filterOption"
|
|---|
| | | @focus="handleFocus" @blur="handleBlur" @change="handleChange">
|
|---|
| | | <a-select-option value="jack">
|
|---|
| | | 裴小威
|
|---|
| | | </a-select-option>
|
|---|
| | | <a-select-option value="lucy">
|
|---|
| | | 赵东升
|
|---|
| | | </a-select-option>
|
|---|
| | | <a-select-option value="tom">
|
|---|
| | | 王卫萍
|
|---|
| | | </a-select-option>
|
|---|
| | | </a-select></div>
|
|---|
| | | <br /><br />
|
|---|
| | | <a-button type="primary" class="ftright">
|
|---|
| | | 确认并提交审核
|
|---|
| | | </a-button>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <div class="right">
|
|---|
| | | <h2>短信预览</h2>
|
|---|
| | | <div class="mobile">
|
|---|
| | | <div class="mesg">
|
|---|
| | | <P>【{{signname}}】{{message}}。发布单位：{{department}}</P>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | |
|
|---|
| | | |
|---|
| | | const OPTIONS = ['自治区消防（李XX）', '自治区公安厅（王XX）', '自治区自然资源厅（刘XX）'];
|
|---|
| | | export default {
|
|---|
| | | name: "release",
|
|---|
| | | data() {
|
|---|
| | | return {
|
|---|
| | | value: 1,
|
|---|
| | | message: '',
|
|---|
| | | signname: '自然灾害风险预警提示',
|
|---|
| | | department: '自治区自然灾害综合监测预警中心',
|
|---|
| | | selectedItems: [], |
|---|
| | | svalue:undefined,
|
|---|
| | | };
|
|---|
| | | },
|
|---|
| | | components: {},
|
|---|
| | | computed: {
|
|---|
| | | filteredOptions() {
|
|---|
| | | return OPTIONS.filter(o => !this.selectedItems.includes(o));
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | methods: { |
|---|
| | | //选择子部门部分 |
|---|
| | | onChanges(value) { |
|---|
| | | console.log(value); |
|---|
| | | this.svalue = value; |
|---|
| | | }, |
|---|
| | | onSearch() { |
|---|
| | | console.log(...arguments); |
|---|
| | | }, |
|---|
| | | onSelect() { |
|---|
| | | console.log(...arguments); |
|---|
| | | }, |
|---|
| | | //选择平级部门部分
|
|---|
| | | handle(selectedItems) {
|
|---|
| | | this.selectedItems = selectedItems;
|
|---|
| | | }, |
|---|
| | | onChange(){ |
|---|
| | | console.log(this.value) |
|---|
| | | },
|
|---|
| | | handleChange(value) {
|
|---|
| | | console.log(`selected ${value}`);
|
|---|
| | | },
|
|---|
| | | handleBlur() {
|
|---|
| | | console.log('blur');
|
|---|
| | | },
|
|---|
| | | handleFocus() {
|
|---|
| | | console.log('focus');
|
|---|
| | | },
|
|---|
| | | filterOption(input, option) {
|
|---|
| | | return (
|
|---|
| | | option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|---|
| | | );
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | }
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <style lang="less" scoped>
|
|---|
| | | .left {
|
|---|
| | | width: 58%;
|
|---|
| | | float: left;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .right {
|
|---|
| | | width: 39%;
|
|---|
| | | float: right;
|
|---|
| | | border-left: 1px silver solid;
|
|---|
| | | padding-left: 18px;
|
|---|
| | |
|
|---|
| | | .mobile {
|
|---|
| | | position: relative;
|
|---|
| | | background: black;
|
|---|
| | | border: 1px solid black;
|
|---|
| | | width: 280px;
|
|---|
| | | min-height: 500px;
|
|---|
| | | border-radius: 25px;
|
|---|
| | | margin-left: 20px;
|
|---|
| | |
|
|---|
| | | .mesg {
|
|---|
| | | width: 260px;
|
|---|
| | | margin: 25px auto;
|
|---|
| | | min-height: 450px;
|
|---|
| | | background: white;
|
|---|
| | | padding-top: 10px;
|
|---|
| | |
|
|---|
| | | p {
|
|---|
| | | padding: 15px;
|
|---|
| | | background-color: #f5f5f5;
|
|---|
| | | border-radius: 10px;
|
|---|
| | | font-size: 16px;
|
|---|
| | | margin: 15px 10px;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | }
|
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <div class="inner"> |
|---|
| | | <a-radio-group v-model="category"> |
|---|
| | | <a-radio-button value="default"> |
|---|
| | | 全部 |
|---|
| | | </a-radio-button> |
|---|
| | | <a-radio-button value="1"> |
|---|
| | | 紧临 |
|---|
| | | </a-radio-button> |
|---|
| | | <a-radio-button value="2"> |
|---|
| | | 常规 |
|---|
| | | </a-radio-button> |
|---|
| | | </a-radio-group> |
|---|
| | | <div style="float:right"> |
|---|
| | | 时间区间筛选：<a-range-picker :placeholder="['开始时间', '结束时间']" @change="onChange" /> |
|---|
| | | </div> |
|---|
| | | <br/><br/> |
|---|
| | | <!-- 表格实体部分--> |
|---|
| | | <a-table :columns="columns" :data-source="data" bordered> |
|---|
| | | <span slot="level" slot-scope="text"> |
|---|
| | | <a-tag :color="text === '黄色' ? 'yellow' :text === '橙色'? 'orange':text === '红色'?'red':'blue'"> |
|---|
| | | {{ text }} |
|---|
| | | </a-tag> |
|---|
| | | </span> |
|---|
| | | <template slot="attachment" slot-scope="text"> |
|---|
| | | <span v-if="text==='无'">无</span> |
|---|
| | | <a v-else><b><a-icon type="paper-clip" /> {{text}}</b></a> |
|---|
| | | </template > |
|---|
| | | <template slot="operation" slot-scope="text, record, index"> |
|---|
| | | <div class="editable-row-operations"> |
|---|
| | | <a @click="showModal" style="color:orangered"> |
|---|
| | | 叫应列表</a> |
|---|
| | | <router-link :to="{path:'/details',query: {id: record.id}}">信息详情</router-link> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | </a-table> |
|---|
| | | <!-- 对话框 --> |
|---|
| | | <a-modal title="查看叫应详情" |
|---|
| | | okText="确认" |
|---|
| | | cancelText="关闭" |
|---|
| | | :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleOk"> |
|---|
| | | </a-modal> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | const columns = [{ |
|---|
| | | title: '序号', |
|---|
| | | dataIndex: 'key', |
|---|
| | | width: '8%', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '发布时间', |
|---|
| | | dataIndex: 'time', |
|---|
| | | width: '15%', |
|---|
| | | scopedSlots: { |
|---|
| | | customRender: 'time' |
|---|
| | | }, //设置定制化表格数据 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '发布单位', |
|---|
| | | dataIndex: 'department', |
|---|
| | | width: '12%', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '类别', |
|---|
| | | dataIndex: 'category', |
|---|
| | | width: '8%', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '级别', |
|---|
| | | dataIndex: 'level', |
|---|
| | | scopedSlots: { |
|---|
| | | customRender: 'level' |
|---|
| | | }, //设置定制化表格数据 |
|---|
| | | width: '8%', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '信息标题', |
|---|
| | | dataIndex: 'title', |
|---|
| | | width: '16%', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '附件', |
|---|
| | | dataIndex: 'attachment', |
|---|
| | | width: '6%', |
|---|
| | | scopedSlots: { |
|---|
| | | customRender: 'attachment' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '叫应情况', |
|---|
| | | dataIndex: 'receipt', |
|---|
| | | width: '10%', |
|---|
| | | scopedSlots: { |
|---|
| | | customRender: 'receipt' |
|---|
| | | }, //设置定制化表格数据 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '操作', |
|---|
| | | dataIndex: 'operation', |
|---|
| | | scopedSlots: { |
|---|
| | | customRender: 'operation' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | const data = [{ |
|---|
| | | key: 1, |
|---|
| | | id:1001, |
|---|
| | | readed:false, |
|---|
| | | time: '2023年5月3日 15:30', |
|---|
| | | department: '自治区预警中心', |
|---|
| | | category: '气象', |
|---|
| | | level: '黄色', |
|---|
| | | title: '全疆高温红色预警', |
|---|
| | | attachment: '1', |
|---|
| | | receipt: '部分叫应' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | key: 2, |
|---|
| | | id:1002, |
|---|
| | | readed:false, |
|---|
| | | time: '2023年5月3日 15:30', |
|---|
| | | department: '自治区预警中心', |
|---|
| | | category: '气象', |
|---|
| | | level: '黄色', |
|---|
| | | title: '全疆高温红色预警', |
|---|
| | | attachment: '1', |
|---|
| | | receipt: '全部叫应' |
|---|
| | | },{ |
|---|
| | | key: 3, |
|---|
| | | id:1003, |
|---|
| | | readed:false, |
|---|
| | | time: '2023年5月3日 15:30', |
|---|
| | | department: '自治区预警中心', |
|---|
| | | category: '气象', |
|---|
| | | level: '黄色', |
|---|
| | | title: '全疆高温红色预警', |
|---|
| | | attachment: '1', |
|---|
| | | receipt: '均未叫应' |
|---|
| | | }] |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | category: 'default', |
|---|
| | | data, |
|---|
| | | columns, |
|---|
| | | visible: false, |
|---|
| | | confirmLoading: false, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | //弹出层 |
|---|
| | | showModal() { |
|---|
| | | this.visible = true; |
|---|
| | | }, |
|---|
| | | handleOk(e) { |
|---|
| | | this.visible = false; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | </script> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <div class="inner"> |
|---|
| | | <a-radio-group v-model="category"> |
|---|
| | | <a-radio-button value="default"> |
|---|
| | | 全部 |
|---|
| | | </a-radio-button> |
|---|
| | | <a-radio-button value="1"> |
|---|
| | | 已审核 |
|---|
| | | </a-radio-button> |
|---|
| | | <a-radio-button value="2"> |
|---|
| | | 未审核 |
|---|
| | | </a-radio-button> |
|---|
| | | </a-radio-group> |
|---|
| | | <div style="float:right"> |
|---|
| | | 时间区间筛选：<a-range-picker :placeholder="['开始时间', '结束时间']" @change="onChange" /> |
|---|
| | | </div> |
|---|
| | | <br/><br/> |
|---|
| | | <!-- 表格实体部分--> |
|---|
| | | <a-table :columns="columns" :data-source="data" bordered> |
|---|
| | | <span slot="level" slot-scope="text"> |
|---|
| | | <a-tag :color="text === '黄色' ? 'yellow' :text === '橙色'? 'orange':text === '红色'?'red':'blue'"> |
|---|
| | | {{ text }} |
|---|
| | | </a-tag> |
|---|
| | | </span> |
|---|
| | | <template slot="attachment" slot-scope="text"> |
|---|
| | | <span v-if="text==='无'">无</span> |
|---|
| | | <a v-else><b><a-icon type="paper-clip" /> {{text}}</b></a> |
|---|
| | | </template > |
|---|
| | | <template slot="operation" slot-scope="text, record, index"> |
|---|
| | | <div class="editable-row-operations"> |
|---|
| | | <a-button v-if="record.audit==='已审核'" type="primary" @click="showModal(record.id)" > |
|---|
| | | 确认发布</a-button> |
|---|
| | | <router-link :to="{path:'/details',query: {id: record.id}}">信息详情</router-link> |
|---|
| | | <a style="color:red">删除</a> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | </a-table> |
|---|
| | | <!-- 对话框 --> |
|---|
| | | <a-modal title="信息发布" |
|---|
| | | okText="确认发布" |
|---|
| | | cancelText="取消" |
|---|
| | | :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel"> |
|---|
| | | <p>确认发布 “[{{show_id}}]2023年5月23日，全疆黄色高温预警信息”？</p> |
|---|
| | | </a-modal> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | const columns = [{ |
|---|
| | | title: '编号', |
|---|
| | | dataIndex: 'id', |
|---|
| | | width: '8%', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '提交审核时间', |
|---|
| | | dataIndex: 'time', |
|---|
| | | width: '13%', |
|---|
| | | scopedSlots: { |
|---|
| | | customRender: 'time' |
|---|
| | | }, //设置定制化表格数据 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '发布单位', |
|---|
| | | dataIndex: 'department', |
|---|
| | | width: '12%', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '类别', |
|---|
| | | dataIndex: 'category', |
|---|
| | | width: '6%', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '级别', |
|---|
| | | dataIndex: 'level', |
|---|
| | | scopedSlots: { |
|---|
| | | customRender: 'level' |
|---|
| | | }, //设置定制化表格数据 |
|---|
| | | width: '6%', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '信息标题', |
|---|
| | | dataIndex: 'title', |
|---|
| | | width: '16%', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '附件', |
|---|
| | | dataIndex: 'attachment', |
|---|
| | | width: '6%', |
|---|
| | | scopedSlots: { |
|---|
| | | customRender: 'attachment' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '审核情况', |
|---|
| | | dataIndex: 'audit', |
|---|
| | | width: '10%', |
|---|
| | | scopedSlots: { |
|---|
| | | customRender: 'audit' |
|---|
| | | }, //设置定制化表格数据 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | title: '操作', |
|---|
| | | dataIndex: 'operation', |
|---|
| | | scopedSlots: { |
|---|
| | | customRender: 'operation' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | const data = [{ |
|---|
| | | key: 1, |
|---|
| | | id:1001, |
|---|
| | | readed:false, |
|---|
| | | time: '2023年5月3日 15:30', |
|---|
| | | department: '自治区预警中心', |
|---|
| | | category: '气象', |
|---|
| | | level: '黄色', |
|---|
| | | title: '全疆高温红色预警', |
|---|
| | | attachment: '1', |
|---|
| | | audit: '已审核' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | key: 2, |
|---|
| | | id:1002, |
|---|
| | | readed:false, |
|---|
| | | time: '2023年5月3日 15:30', |
|---|
| | | department: '自治区预警中心', |
|---|
| | | category: '气象', |
|---|
| | | level: '黄色', |
|---|
| | | title: '全疆高温红色预警', |
|---|
| | | attachment: '1', |
|---|
| | | audit: '未审核' |
|---|
| | | },{ |
|---|
| | | key: 3, |
|---|
| | | id:1003, |
|---|
| | | readed:false, |
|---|
| | | time: '2023年5月3日 15:30', |
|---|
| | | department: '自治区预警中心', |
|---|
| | | category: '气象', |
|---|
| | | level: '黄色', |
|---|
| | | title: '全疆高温红色预警', |
|---|
| | | attachment: '1', |
|---|
| | | audit: '已审核' |
|---|
| | | }] |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | category: 'default', |
|---|
| | | data, |
|---|
| | | columns, |
|---|
| | | visible: false, |
|---|
| | | confirmLoading: false, |
|---|
| | | show_id:'' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | showModal(id) { |
|---|
| | | this.visible = true; |
|---|
| | | this.show_id=id |
|---|
| | | }, |
|---|
| | | //确认发布 |
|---|
| | | handleOk(e) { |
|---|
| | | this.ModalText = '正在发布，请稍候...'; |
|---|
| | | this.confirmLoading = true; |
|---|
| | | setTimeout(() => { |
|---|
| | | this.visible = false; |
|---|
| | | this.confirmLoading = false; |
|---|
| | | }, 2000); |
|---|
| | | }, |
|---|
| | | handleCancel(e) { |
|---|
| | | this.visible = false; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | </script> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <div>UserManage</div> |
|---|
| | | </template> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <div class="inner"> |
|---|
| | | <iframe width="100%" height="600" src="https://embed.windy.com/embed2.html?lat=43.419&lon=87.613&detailLat=43.598&detailLon=87.613&width=800&height=600&zoom=9&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=true&type=map&location=coordinates&detail=true&metricWind=default&metricTemp=default&radarRange=-1" frameborder="0"></iframe> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template>
|
|---|
| | | <div>
|
|---|
| | | <a-layout id="components-layout-demo-custom-trigger" :style="{ height: '100vh' }">
|
|---|
| | | <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
|
|---|
| | | <div class="logo">{{ collapsed ? collapsed : '预警响应系统' }}</div>
|
|---|
| | | <menuSider />
|
|---|
| | | </a-layout-sider>
|
|---|
| | | <a-layout>
|
|---|
| | | <a-layout-header style="background: #fff; padding: 0">
|
|---|
| | | <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
|
|---|
| | | @click="() => (collapsed = !collapsed)" />
|
|---|
| | | <a-dropdown>
|
|---|
| | | <a class="ant-dropdown-link" @click="e => e.preventDefault()">
|
|---|
| | | 您好，李静 <a-icon type="down" />
|
|---|
| | | </a>
|
|---|
| | | <a-menu slot="overlay">
|
|---|
| | | <a-menu-item>
|
|---|
| | | <a href="javascript:;">修改密码</a>
|
|---|
| | | </a-menu-item>
|
|---|
| | | <a-menu-item>
|
|---|
| | | <a href="javascript:;">回到首页</a>
|
|---|
| | | </a-menu-item>
|
|---|
| | | <a-menu-item>
|
|---|
| | | <a @click="logout">退出登录</a>
|
|---|
| | | </a-menu-item>
|
|---|
| | | </a-menu>
|
|---|
| | | </a-dropdown>
|
|---|
| | |
|
|---|
| | | </a-layout-header>
|
|---|
| | | <TabsHeader :pageList="pageList" :activePage="activePage" @change="changePage" @close="remove" />
|
|---|
| | | <a-layout-content :style="{
|
|---|
| | | margin: '15px 16px 24px 16px',
|
|---|
| | | }">
|
|---|
| | | <!-- Content -->
|
|---|
| | | <router-view ref="tabContent"></router-view>
|
|---|
| | | <div style="height: 30px"></div>
|
|---|
| | | </a-layout-content>
|
|---|
| | | </a-layout>
|
|---|
| | |
|
|---|
| | | </a-layout>
|
|---|
| | | <center style="textAlign: center;margin-left: 5%;margin-top:50px;">
|
|---|
| | | 技术支持：中国科学院
|
|---|
| | | </center>
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | import menuSider from "@/layout/menuSider";
|
|---|
| | | import TabsHeader from '@/components/TabsHeader';
|
|---|
| | | export default {
|
|---|
| | | name: "Home",
|
|---|
| | | data() {
|
|---|
| | | return {
|
|---|
| | | collapsed: false, //返回logo图片或表述
|
|---|
| | | pageList: [],
|
|---|
| | | activePage: '',
|
|---|
| | | multiPage: 24
|
|---|
| | | };
|
|---|
| | | },
|
|---|
| | | components: {
|
|---|
| | | menuSider,
|
|---|
| | | TabsHeader,
|
|---|
| | | },
|
|---|
| | | created() {
|
|---|
| | | const route = this.$route
|
|---|
| | | if (this.pageList.findIndex(item => item.path === route.path) === -1) {
|
|---|
| | | this.pageList.push(this.createPage(route))
|
|---|
| | | }
|
|---|
| | | this.activePage = route.path
|
|---|
| | | if (this.multiPage) {
|
|---|
| | | this.$nextTick(() => {
|
|---|
| | | this.setCachedKey(route)
|
|---|
| | | })
|
|---|
| | | this.addListener()
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | watch: {
|
|---|
| | | '$route': function(newRoute) {
|
|---|
| | | this.activePage = newRoute.path
|
|---|
| | | const page = this.pageList.find(item => item.path === newRoute.path)
|
|---|
| | | if (!this.multiPage) {
|
|---|
| | | this.pageList = [this.createPage(newRoute)]
|
|---|
| | | } else if (page) {
|
|---|
| | | page.fullPath = newRoute.fullPath
|
|---|
| | | } else if (!page) {
|
|---|
| | | this.pageList.push(this.createPage(newRoute))
|
|---|
| | | }
|
|---|
| | | if (this.multiPage) {
|
|---|
| | | this.$nextTick(() => {
|
|---|
| | | this.setCachedKey(newRoute)
|
|---|
| | | })
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | methods: { |
|---|
| | | logout(){ |
|---|
| | | this.$router.push('/') |
|---|
| | | },
|
|---|
| | | changePage(key) {
|
|---|
| | | this.activePage = key
|
|---|
| | | const page = this.pageList.find(item => item.path === key)
|
|---|
| | | this.$router.push(page.fullPath)
|
|---|
| | | },
|
|---|
| | | remove(key, next) {
|
|---|
| | | if (this.pageList.length === 1) {
|
|---|
| | | return;
|
|---|
| | | }
|
|---|
| | | //清除缓存
|
|---|
| | | let index = this.pageList.findIndex(item => item.path === key)
|
|---|
| | | this.clearCaches = this.pageList.splice(index, 1).map(page => page.cachedKey)
|
|---|
| | | if (next) {
|
|---|
| | | this.$router.push(next)
|
|---|
| | | } else if (key === this.activePage) {
|
|---|
| | | index = index >= this.pageList.length ? this.pageList.length - 1 : index
|
|---|
| | | this.activePage = this.pageList[index].path
|
|---|
| | | this.$router.push(this.activePage)
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | createPage(route) {
|
|---|
| | | return {
|
|---|
| | | keyPath: route.matched[route.matched.length - 1].path,
|
|---|
| | | fullPath: route.fullPath,
|
|---|
| | | loading: false,
|
|---|
| | | path: route.path,
|
|---|
| | | title: route.meta && route.meta.title,
|
|---|
| | | unclose: route.meta && route.meta.page && (route.meta.page.closable === false),
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | /**
|
|---|
| | | * 设置页面缓存的key
|
|---|
| | | * @param route 页面对应的路由
|
|---|
| | | */
|
|---|
| | | setCachedKey(route) {
|
|---|
| | | const page = this.pageList.find(item => item.path === route.path)
|
|---|
| | | page.unclose = route.meta && route.meta.page && (route.meta.page.closable === false)
|
|---|
| | | if (!page._init_) {
|
|---|
| | | const vnode = this.$refs.tabContent.$vnode
|
|---|
| | | page.cachedKey = vnode.key + vnode.componentOptions.Ctor.cid
|
|---|
| | | page._init_ = true
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | /**
|
|---|
| | | * 添加监听器
|
|---|
| | | */
|
|---|
| | | addListener() {
|
|---|
| | | window.addEventListener('page:close', this.closePageListener)
|
|---|
| | | },
|
|---|
| | | /**
|
|---|
| | | * 移出监听器
|
|---|
| | | */
|
|---|
| | | removeListener() {
|
|---|
| | | window.removeEventListener('page:close', this.closePageListener)
|
|---|
| | | },
|
|---|
| | | closePageListener(event) {
|
|---|
| | | const {
|
|---|
| | | closeRoute,
|
|---|
| | | nextRoute
|
|---|
| | | } = event.detail
|
|---|
| | | const closePath = typeof closeRoute === 'string' ? closeRoute : closeRoute.path
|
|---|
| | | const path = closePath && closePath.split('?')[0]
|
|---|
| | | this.remove(path, nextRoute)
|
|---|
| | | },
|
|---|
| | | }
|
|---|
| | | };
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <style lang="less" scoped>
|
|---|
| | | #components-layout-demo-custom-trigger .trigger {
|
|---|
| | | font-size: 18px;
|
|---|
| | | line-height: 64px;
|
|---|
| | | padding: 0 24px;
|
|---|
| | | cursor: pointer;
|
|---|
| | | transition: color 0.3s;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #components-layout-demo-custom-trigger .trigger:hover {
|
|---|
| | | color: #1890ff;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .logo {
|
|---|
| | | height: 36px;
|
|---|
| | | background: rgba(255, 255, 255, 0.2);
|
|---|
| | | margin: 16px;
|
|---|
| | | color: #faad14;
|
|---|
| | | text-align: center;
|
|---|
| | | line-height: 36px;
|
|---|
| | | font-size: 22px;
|
|---|
| | | text-shadow: 0 0 1px #000,
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .ant-dropdown-link {
|
|---|
| | | float: right;
|
|---|
| | | margin-right: 25px;
|
|---|
| | | }
|
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <div class='bd'> |
|---|
| | | <div class="hedaer"> |
|---|
| | | <h2>新疆维吾尔自治区自然灾害综合监测预警中心</h2> |
|---|
| | | <h1>自然灾害综合风险预警发布及响应联动系统</h1> |
|---|
| | | </div> |
|---|
| | | <div class="login"> |
|---|
| | | |
|---|
| | | <a-form |
|---|
| | | layout="horizontal" |
|---|
| | | :form="form" |
|---|
| | | @submit="handleSubmit" |
|---|
| | | class="login-form" |
|---|
| | | > |
|---|
| | | <a-tabs default-active-key="1" @change="callback"> |
|---|
| | | <a-tab-pane key="1" tab="用户名登录"> |
|---|
| | | <a-form-item> |
|---|
| | | <a-input |
|---|
| | | placeholder="请输入用户" |
|---|
| | | size="large" |
|---|
| | | > |
|---|
| | | <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" /> |
|---|
| | | </a-input> |
|---|
| | | </a-form-item> |
|---|
| | | <a-form-item> |
|---|
| | | <a-input-password |
|---|
| | | type="password" |
|---|
| | | placeholder="请输入密码" |
|---|
| | | size="large" |
|---|
| | | > |
|---|
| | | <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" /> |
|---|
| | | </a-input-password> |
|---|
| | | </a-form-item> |
|---|
| | | </a-tab-pane> |
|---|
| | | <a-tab-pane key="2" tab="验证码登录" force-render> |
|---|
| | | <a-form-item> |
|---|
| | | <a-input |
|---|
| | | placeholder="手机号" |
|---|
| | | size="large" |
|---|
| | | > |
|---|
| | | <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)" /> |
|---|
| | | </a-input> |
|---|
| | | </a-form-item> |
|---|
| | | <a-form-item> |
|---|
| | | <a-row :gutter="8"> |
|---|
| | | <a-col :span="17"> |
|---|
| | | <a-input placeholder="验证码"> |
|---|
| | | <a-icon slot="prefix" type="mobile" style="color:rgba(0,0,0,.25)" /> |
|---|
| | | </a-input> |
|---|
| | | </a-col> |
|---|
| | | <a-col :span="7"> |
|---|
| | | <a-button style="width: 100%">获取验证码</a-button> |
|---|
| | | </a-col> |
|---|
| | | </a-row> |
|---|
| | | </a-form-item> |
|---|
| | | </a-tab-pane> |
|---|
| | | </a-tabs> |
|---|
| | | <div style="margin-bottom: 20px"> |
|---|
| | | <a-checkbox :checked="true" style="color:#fff;">自动登录</a-checkbox> |
|---|
| | | <a style="float: right">忘记密码</a> |
|---|
| | | </div> |
|---|
| | | <a-form-item style="text-align: center"> |
|---|
| | | <a-button |
|---|
| | | type="primary" |
|---|
| | | html-type="submit" |
|---|
| | | style="width: 100%" |
|---|
| | | size="large" |
|---|
| | | > |
|---|
| | | 登录 |
|---|
| | | </a-button> |
|---|
| | | </a-form-item> |
|---|
| | | <center><p>技术支持：中国科学院</p></center> |
|---|
| | | </a-form> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | name: "login", |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | // hasErrors, |
|---|
| | | form: this.$form.createForm(this), |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.form.validateFields(); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | handleSubmit(e) { |
|---|
| | | e.preventDefault(); |
|---|
| | | this.form.validateFields((err, values) => { |
|---|
| | | if (!err) { |
|---|
| | | console.log("Received values of form: ", values); |
|---|
| | | this.$router.push({ name: "default" }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | callback(key) { |
|---|
| | | console.log(key); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="less" scoped> |
|---|
| | | p{ |
|---|
| | | color:#fff; |
|---|
| | | margin-top: 55px; |
|---|
| | | } |
|---|
| | | h2{ |
|---|
| | | font-size: 30px; |
|---|
| | | } |
|---|
| | | .bd { |
|---|
| | | width: 100%; |
|---|
| | | height: 100vh; |
|---|
| | | background: url('../assets/img/bg.jpeg') no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-attachment: fixed;/* 不设置的话页面滑动时，背景会不铺满*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | /deep/ .ant-tabs-bar { |
|---|
| | | border-bottom: 0px; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | .hedaer { |
|---|
| | | margin: 0px auto; |
|---|
| | | padding-top:100px; |
|---|
| | | width: 1000px; |
|---|
| | | text-align: center; |
|---|
| | | text-shadow:0 0 1px #000; |
|---|
| | | h2{font-size: 36px;color:#fff;} |
|---|
| | | h1{font-size: 48px;color:#fff;} |
|---|
| | | } |
|---|
| | | .login { |
|---|
| | | |
|---|
| | | .login-form { |
|---|
| | | width: 400px; |
|---|
| | | margin: 60px auto 0px; |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .ant-tabs{ |
|---|
| | | color:#fff; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| 对比新文件 |
| | |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | 平级单位接收人通讯录管理 |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | </style> |
|---|
