pcBar.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910
  1. <template>
  2. <div>
  3. <!-- 侧边栏 -->
  4. <b-list-group id="list" v-show="isShow">
  5. <!-- header -->
  6. <b-list-group-item id="header">
  7. <i class="fa fa-list" aria-hidden="true"></i>&nbsp; 列表
  8. <button type="button" class="close" aria-label="Close" @click="changeShow">
  9. <i class="fa fa-times" aria-hidden="true"></i>
  10. </button>
  11. </b-list-group-item>
  12. <!-- body -->
  13. <b-list-group-item id="body" style="overflow:auto">
  14. <b-tabs content-class="mt-3" v-model="tabIndex">
  15. <!-- 通知 -->
  16. <b-tab>
  17. <template v-slot:title>
  18. <i class="fa fa-mobile" aria-hidden="true"></i>
  19. 通知
  20. </template>
  21. <div>
  22. <b-list-group class="listGroup" v-for="(item,index) in data.notice" :key=index>
  23. <b-list-group-item href="#" @click.self="selectItem($event,index)">
  24. ● {{item.title|ellipsis}}
  25. <span class="float-right font-italic font-weight-light" style="font-size:12px">{{item.time}}</span>
  26. </b-list-group-item>
  27. </b-list-group>
  28. </div>
  29. </b-tab>
  30. <!-- 报道 -->
  31. <b-tab>
  32. <template v-slot:title>
  33. <i class="fa fa-commenting-o" aria-hidden="true"></i>
  34. 报道
  35. </template>
  36. <div>
  37. <b-list-group class="listGroup" v-for="(item,index) in data.report" :key=index>
  38. <b-list-group-item href="#"
  39. @click.self="selectItem($event,index)">
  40. ● {{item.title|ellipsis}}
  41. <span class="float-right font-italic font-weight-light" style="font-size:12px">{{item.time}}</span>
  42. </b-list-group-item>
  43. </b-list-group>
  44. </div>
  45. </b-tab>
  46. <!-- 文化 -->
  47. <b-tab>
  48. <template v-slot:title>
  49. <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
  50. 文化
  51. </template>
  52. <div>
  53. <b-list-group class="listGroup" v-for="(item,index) in data.culture" :key=index>
  54. <b-list-group-item href="#" @click.self="selectItem($event,index)">
  55. ● {{item.title|ellipsis}}
  56. </b-list-group-item>
  57. </b-list-group>
  58. </div>
  59. </b-tab>
  60. </b-tabs>
  61. </b-list-group-item>
  62. <!-- footer -->
  63. <b-list-group-item id="footer" align='center'>
  64. <b-button-group style="background:rgb(255,255,255)" v-show="tabIndex !== 2 && $store.state.isLogin === true" >
  65. <b-button variant="outline-dark" title="添加记录" @click="$bvModal.show('addModal')"><i class="fa fa-plus" aria-hidden="true" ></i></b-button>
  66. <b-button variant="outline-dark" title="删除记录" v-show="toolShow.delete" @click="deleteItem()"><i class="fa fa-minus" aria-hidden="true"></i></b-button>
  67. <b-button disabled title="删除记录" v-show="!toolShow.delete" ><i class="fa fa-minus" aria-hidden="true"></i></b-button>
  68. <b-button variant="outline-dark" title="刷新记录" @click="refresh"><i class="fa fa-refresh" aria-hidden="true" title='刷新'></i></b-button>
  69. <b-button variant="outline-success" v-show="toolShow.submit" title="应用更改" @click="submitChange"><i class="fa fa-check" aria-hidden="true"></i> </b-button>
  70. <b-button disabled title="应用更改" v-show="!toolShow.submit"><i class="fa fa-check" aria-hidden="true"></i> </b-button>
  71. <b-button variant="outline-warning" title="放弃更改" @click="giveupChange"><i class="fa fa-times" aria-hidden="true"></i></b-button>
  72. </b-button-group>
  73. <div class="font-italic pt-1" style="font-size:12px">@Powered by CDUT</div>
  74. </b-list-group-item>
  75. </b-list-group>
  76. <!-- 外部控制按钮 -->
  77. <div id="btn">
  78. <!-- 列表 按钮 -->
  79. <b-button @click="changeShow" class="mr-2" title="列表">
  80. <i class="fa fa-list" aria-hidden="true"></i>
  81. </b-button>
  82. <!-- 登陆 按钮 -->
  83. <b-button variant="primary" v-if="!$store.state.isLogin" @click="$bvModal.show('loginModal')">
  84. <i class="fa fa-id-card" aria-hidden="true"></i> 登陆
  85. </b-button>
  86. <!-- 登陆状态 按钮 -->
  87. <span v-else>
  88. <!-- 按钮 -->
  89. <b-button id="logout" variant="primary" class="m-2" >
  90. <i class="fa fa-user-circle-o fa-lg" varient='info' aria-hidden="true"></i>
  91. </b-button>
  92. <!-- popover -->
  93. <b-popover target="logout" triggers="hover" placement="bottomleft">
  94. <template v-slot:title>
  95. <em>Hello,</em><code> {{$store.state.user.name}} </code>!
  96. </template>
  97. <b-list-group flush>
  98. <b-list-group-item href="#" disabled>修改密码</b-list-group-item>
  99. <b-list-group-item href="#" @click="logout">退出登陆</b-list-group-item>
  100. </b-list-group>
  101. </b-popover>
  102. </span>
  103. </div>
  104. <!-- addModal -->
  105. <b-modal id="addModal" title="添加工具" scrollable>
  106. <template v-slot:modal-title>
  107. <i class="fa fa-plus" aria-hidden="true" ></i> Add Tool
  108. </template>
  109. <b-form @submit.prevent="submit_addModal">
  110. <label for="input-slogan">寄语:</label>
  111. <b-input-group class="mb-3" id="input-slogan">
  112. <b-form-input v-model="form.slogan"></b-form-input>
  113. <b-input-group-append>
  114. <b-button variant="info" @click="setSlogan">应用</b-button>
  115. </b-input-group-append>
  116. </b-input-group>
  117. <b-form-group
  118. id="input-group-1"
  119. label="* 标题:"
  120. label-for="input-1"
  121. description="注:输入的标题应小于六十字长度"
  122. >
  123. <b-form-input
  124. id="input-1"
  125. v-model="form.title"
  126. required
  127. ></b-form-input>
  128. </b-form-group>
  129. <b-form-group id="input-group-3" label="* 地点:" label-for="input-3">
  130. <b-form-select
  131. id="input-3"
  132. v-model="form.place"
  133. :options="places"
  134. >
  135. <template v-slot:first>
  136. <option :value="null">自定义</option>
  137. </template>
  138. </b-form-select>
  139. <b-link @click="drawGeometry">添加自定义地点</b-link>
  140. </b-form-group>
  141. <b-form-group id="input-group-5" label="* 类型:" label-for="input-5">
  142. <b-form-select
  143. id="input-5"
  144. v-model="form.type"
  145. :options="types"
  146. required
  147. ></b-form-select>
  148. </b-form-group>
  149. <b-form-group id="input-group-4" label="* 概要:" label-for="input-4">
  150. <b-form-textarea
  151. id="input-4"
  152. v-model="form.content"
  153. required
  154. ></b-form-textarea>
  155. </b-form-group>
  156. <b-form-group id="input-group-6" label="* 时间:" label-for="input-6">
  157. <b-form-input
  158. id="input-6"
  159. v-model="form.time"
  160. type = 'date'
  161. required
  162. ></b-form-input>
  163. </b-form-group>
  164. <b-form-group id="input-group-2" label="详情网址:" label-for="input-2">
  165. <b-form-input
  166. id="input-2"
  167. v-model="form.url"
  168. type="url"
  169. ></b-form-input>
  170. </b-form-group>
  171. <b-form-group id="input-group-7" label="图片链接:" label-for="input-7">
  172. <b-form-input
  173. id="input-7"
  174. v-model="form.img"
  175. type="url"
  176. ></b-form-input>
  177. </b-form-group>
  178. <b-form-group id="input-group-8" label="消息附属线:" label-for="input-8">
  179. <!-- <b-form-select
  180. id="input-8"
  181. v-model="form.related"
  182. :options="['111', '222']"
  183. >
  184. <template v-slot:first>
  185. <option :value="null">自定义</option>
  186. </template>
  187. </b-form-select> -->
  188. <b-link @click="drawRelate">添加消息附属线</b-link>
  189. </b-form-group>
  190. <!-- <b-form-group id="input-group-7" label="图片:" label-for="input-7">
  191. <b-form-file v-model="form.img" class="mt-3" plain multiple accept=".jpg, .png, .gif, .jpeg, .svg"></b-form-file>
  192. </b-form-group> -->
  193. <b-button type="reset" variant="danger">重置</b-button>
  194. <b-button type="submit" variant="primary">提交</b-button>
  195. </b-form>
  196. <template v-slot:modal-footer>
  197. <b-button type="reset" variant="secondary" @click="$bvModal.hide('addModal')">关闭</b-button>
  198. </template>
  199. </b-modal>
  200. <!-- loginModal -->
  201. <login-card />
  202. <!-- Alert -->
  203. <div id="alert"
  204. v-show="alert.dismissCountDown > 0"
  205. >
  206. <b-alert show variant="success" fade v-show="alert.type === 'success'" size='sm'>{{alert.message}}</b-alert>
  207. <b-alert show variant="danger" fade v-show="alert.type === 'danger'" size='sm'>{{alert.message}}</b-alert>
  208. </div>
  209. </div>
  210. </template>
  211. <script>
  212. // eventBus公共实例
  213. import bus from '../../static/js/eventBus'
  214. import cookie from '../../static/js/cookieJS'
  215. import LoginCard from '../layouts/widgets/LoginCard'
  216. export default {
  217. components: { LoginCard },
  218. name: 'PC',
  219. data () {
  220. return {
  221. file: null,
  222. // 侧边栏显示控制
  223. isShow: true,
  224. // tabs控制
  225. tabIndex: 0,
  226. // 登陆表单
  227. login: {
  228. account: '',
  229. password: '',
  230. isRight: true,
  231. errorMessage: '账号或密码输入错误'
  232. },
  233. // 列表数据
  234. data: {
  235. notice: [],
  236. report: [],
  237. culture: []
  238. },
  239. // 列表备份数据
  240. colonData: {
  241. notice: [],
  242. report: [],
  243. culture: []
  244. },
  245. // 工具栏可视控制
  246. toolShow: {
  247. delete: false,
  248. submit: false
  249. },
  250. // 已选择的DOM
  251. selected: null,
  252. // 操作目标的数据下标
  253. selectedIndex: null,
  254. // 地点选择输入
  255. places: [],
  256. // 类型选择输入
  257. types: ['报道', '通知'],
  258. // 预删除的消息id号
  259. deleteArr: [],
  260. // 消息发布的表单绑定数据
  261. form: {
  262. place: null
  263. },
  264. // 确定修改时消息删除的消息id汇总
  265. submitDeleteID: [],
  266. // Alert content
  267. alert: {
  268. message: '',
  269. type: 'success',
  270. // 显示的总计秒数
  271. dismissSecs: 3,
  272. // 读秒
  273. dismissCountDown: 0
  274. }
  275. }
  276. },
  277. methods: {
  278. /**
  279. * @description:计时显示alert窗口
  280. * @returns {void}
  281. */
  282. showAlert: function () {
  283. var that = this
  284. this.alert.dismissCountDown = this.alert.dismissSecs
  285. for (let i = 0; i < that.alert.dismissSecs; i++) {
  286. (function () {
  287. setTimeout(() => that.alert.dismissCountDown--, 1000 * i)
  288. })()
  289. }
  290. },
  291. /**
  292. * @description:改变当前显示状态
  293. * @returns {void}
  294. */
  295. changeShow: function () {
  296. this.isShow = !this.isShow
  297. },
  298. /**
  299. * @description:获取通知列表数据
  300. * @returns {void}
  301. */
  302. getNoticeList: function () {
  303. var that = this
  304. this.$axios
  305. .get('/notice/list')
  306. .then(function (response) {
  307. that.data.notice = response.data
  308. // items备份
  309. that.colonData.notice = JSON.parse(JSON.stringify(that.data.notice))
  310. // 重置控制目标
  311. // that.selectedID = null
  312. // that.selected = null
  313. })
  314. },
  315. /**
  316. * @description:获取报道列表数据
  317. * @return
  318. */
  319. getReportList: function () {
  320. var that = this
  321. this.$axios
  322. .get('/report/list')
  323. .then(function (response) {
  324. that.data.report = response.data
  325. // items备份
  326. that.colonData.report = JSON.parse(JSON.stringify(that.data.report))
  327. // 重置控制目标
  328. // that.selectedID = null
  329. // that.selected = null
  330. })
  331. },
  332. /**
  333. * @description:获取文化列表数据
  334. */
  335. getCultureList: function () {
  336. var that = this
  337. this.$axios
  338. .get('/culture/list')
  339. .then(function (response) {
  340. that.data.culture = response.data
  341. // items备份
  342. that.colonData.culture = JSON.parse(JSON.stringify(that.data.culture))
  343. // 重置控制目标
  344. // that.selectedID = null
  345. // that.selected = null
  346. })
  347. },
  348. /**
  349. * @description:获取关键地点
  350. * @returns {void}
  351. */
  352. getKeyPoint: function () {
  353. var that = this
  354. this.$axios
  355. .get('/admin/keypoint')
  356. .then(res => {
  357. res.data.forEach(item => {
  358. that.places.push(item.name)
  359. })
  360. })
  361. },
  362. /**
  363. * @description:获取寄语
  364. */
  365. getSlogan: function () {
  366. var that = this
  367. this.$axios
  368. .get('/admin/getSlogan')
  369. .then(res => {
  370. that.form.slogan = res.data
  371. })
  372. },
  373. /**
  374. * @description:设置寄语
  375. */
  376. setSlogan: function () {
  377. var that = this
  378. this.$axios
  379. .post('/admin/setSlogan', {
  380. slogan: that.form.slogan
  381. })
  382. .then(res => {
  383. if (res) {
  384. // alert 内容
  385. that.alert.message = '应用更改成功'
  386. that.alert.type = 'success'
  387. } else {
  388. // alert 内容
  389. that.alert.message = '应用更改失败'
  390. that.alert.type = 'danger'
  391. }
  392. window.setTimeout(function () {
  393. that.showAlert()
  394. }, 300)
  395. })
  396. },
  397. /**
  398. * @description:设置当前选择节点的状态,并地图响应
  399. * @param {event} e:事件
  400. * @param {number} index:所操作节点数据的下标
  401. */
  402. selectItem: function (e, index) {
  403. this.toolShow.delete = true
  404. let el = e.srcElement
  405. this.selected = el
  406. this.selectedIndex = index
  407. // 地图响应,绘制标识
  408. window.setTimeout(() => {
  409. this.printMapMarkByID()
  410. }, 500)
  411. },
  412. /**
  413. * @description:绘制起始位置
  414. */
  415. drawGeometry: function () {
  416. this.$bvModal.hide('addModal')
  417. bus.$emit('drawBegin', '点')
  418. var that = this
  419. bus.$on('drawGeometryEnd', data => {
  420. that.form.geometry = data
  421. that.form.place = null
  422. that.$bvModal.show('addModal')
  423. })
  424. },
  425. /**
  426. * @description:绘制消息附属线
  427. */
  428. drawRelate: function () {
  429. this.$bvModal.hide('addModal')
  430. bus.$emit('drawBegin', '线')
  431. var that = this
  432. bus.$on('drawRelateEnd', data => {
  433. that.form.relate = data
  434. // that.form.place = null
  435. that.$bvModal.show('addModal')
  436. })
  437. },
  438. /**
  439. * @description:应用更改 响应事件
  440. */
  441. submitChange: function () {
  442. var that = this
  443. // 向后端提交删除信息,并根据成功与否作出回应
  444. this.postDelete()
  445. .then(res => {
  446. if (res) {
  447. // 重新获取table数据
  448. that.getNoticeList()
  449. // 初始化预删除数据
  450. that.deleteArr = []
  451. // alert 内容
  452. that.alert.message = '应用更改成功'
  453. that.alert.type = 'success'
  454. that.refresh()
  455. } else {
  456. // alert 内容
  457. that.alert.message = '应用更改失败'
  458. that.alert.type = 'danger'
  459. }
  460. window.setTimeout(function () {
  461. that.showAlert()
  462. }, 300)
  463. })
  464. },
  465. /**
  466. * @description:将预删除数据提交给后端进行数据库操作
  467. * @returns {void}
  468. */
  469. postDelete: async function () {
  470. var that = this
  471. var isSuccess = false
  472. await this.$axios
  473. .post('/admin/delete', {
  474. array: that.deleteArr
  475. })
  476. .then(res => {
  477. isSuccess = res.data
  478. })
  479. return isSuccess
  480. },
  481. /**
  482. * @description:在table中删除消息,并提交到预删除数据中等待提交更改
  483. * @returns {void}
  484. */
  485. deleteItem: function () {
  486. var items = this.tabIndex === 0 ? this.data.notice : this.data.report
  487. var itemsType = this.getSelectedType()
  488. // var itemsType = this.tabIndex === 0 ? 'notice' : 'report'
  489. // 将元素信息提交到预删除数组中,等待提交更改
  490. this.deleteArr.push({type: itemsType, id: items[this.selectedIndex].id})
  491. // 按序号在table显示数据中删除该消息
  492. items.splice(this.selectedIndex, 1)
  493. // 更新下标
  494. // 1.删除末尾元素时,更新下标重新指向末尾
  495. // 2.删除非末尾元素时,下标不变
  496. this.selectedIndex = this.selectedIndex === items.length ? this.selectedIndex - 1 : this.selectedIndex
  497. },
  498. /**
  499. * @description:放弃更改响应事件:初始化预删除数据,恢复table显示数据
  500. * @returns {void}
  501. */
  502. giveupChange: function () {
  503. this.data = JSON.parse(JSON.stringify(this.colonData))
  504. this.deleteArr = []
  505. },
  506. /**
  507. * @description:将目前所选取事件的id值与type值传给map.vue进行标识绘制
  508. * @returns {void}
  509. */
  510. printMapMarkByID: function () {
  511. bus.$emit('printMapMark', {
  512. type: this.getSelectedType(),
  513. id: this.getSelectedItems()[this.selectedIndex].id
  514. })
  515. },
  516. /**
  517. * @description:根据tabIndex 获取当前操作的Data数据属性
  518. * @returns {object}
  519. */
  520. getSelectedItems: function () {
  521. var item
  522. var data = this.data
  523. switch (this.tabIndex) {
  524. case 0:
  525. item = data.notice
  526. break
  527. case 1:
  528. item = data.report
  529. break
  530. case 2:
  531. item = data.culture
  532. }
  533. return item
  534. },
  535. /**
  536. * @description:根据tabIndex值 获取目前操作的数据类型
  537. */
  538. getSelectedType: function () {
  539. var res
  540. switch (this.tabIndex) {
  541. case 0:
  542. res = 'notice'
  543. break
  544. case 1:
  545. res = 'report'
  546. break
  547. case 2:
  548. res = 'culture'
  549. break
  550. default:
  551. res = null
  552. }
  553. return res
  554. },
  555. /**
  556. * @description: addModel提交(submit)事件
  557. * @returns {void}
  558. */
  559. submit_addModal: async function () {
  560. var that = this
  561. // 向后端提交表单
  562. this.postAddForm()
  563. .then(res => {
  564. if (res) {
  565. // 提交成果
  566. that.alert.message = '消息发布成功'
  567. that.alert.type = 'success'
  568. that.$bvModal.hide('addModal')
  569. } else {
  570. that.alert.message = '消息发布失败'
  571. that.alert.type = 'danger'
  572. }
  573. window.setTimeout(function () {
  574. that.showAlert()
  575. }, 300)
  576. // 刷新
  577. that.refresh()
  578. })
  579. },
  580. /**
  581. * @description:向后端提交消息发布的表单
  582. * @returns {void}
  583. */
  584. postAddForm: async function () {
  585. var that = this
  586. var isSuccess = false
  587. await this.$axios
  588. .post('/admin/add', {
  589. form: that.form
  590. })
  591. .then(res => {
  592. isSuccess = res.data
  593. })
  594. return isSuccess
  595. },
  596. // /**
  597. // * @description: loginModel提交(submit)事件
  598. // * @returns {void}
  599. // */
  600. // submit_loginModal: function (e) {
  601. // var that = this
  602. // this.postLoginForm()
  603. // .then(res => {
  604. // if (res) {
  605. // // 登陆成功,设置登陆状态
  606. // that.$store.commit('userLogin', {
  607. // name: res.name,
  608. // uid: res.uid
  609. // })
  610. // // 设置token到cookie
  611. // cookie.setCookie(res.token, 0.5, 'token')
  612. // // 隐藏modal
  613. // that.$bvModal.hide('loginModal')
  614. // } else {
  615. // that.login.isRight = false
  616. // }
  617. // })
  618. // },
  619. // /**
  620. // * @description:向后端提交登陆表单
  621. // * @returns {void}
  622. // */
  623. // postLoginForm: async function () {
  624. // var response
  625. // await this.$axios
  626. // .post('admin/login', {
  627. // form: {
  628. // account: this.login.account,
  629. // password: this.login.password
  630. // }
  631. // })
  632. // .then(res => {
  633. // response = res.data
  634. // })
  635. // return response
  636. // },
  637. /**
  638. * @description:刷新列表,地图
  639. * @returns {void}
  640. */
  641. refresh: function () {
  642. this.getNoticeList()
  643. this.getReportList()
  644. bus.$emit('refreshMap')
  645. },
  646. /**
  647. * @description:自动登录:提取、验证token
  648. */
  649. autoLogin: function () {
  650. var that = this
  651. // 提取cookie
  652. var token = cookie.getCookie('token')
  653. if (token === null) {
  654. return false
  655. }
  656. // 验证token
  657. this.postToken(token)
  658. .then(res => {
  659. if (res) {
  660. // 登陆成功,设置登陆状态
  661. that.$store.commit('userLogin', {
  662. name: res.name,
  663. uid: res.uid
  664. })
  665. // 设置token到cookie
  666. cookie.setCookie(res.token, 0.5, 'token')
  667. }
  668. })
  669. },
  670. /**
  671. * @description:向后端提交token进行验证
  672. * @returns {boolean}
  673. */
  674. postToken: async function (token) {
  675. console.log(token)
  676. var response
  677. await this.$axios
  678. .post('/admin/autoLogin', {
  679. token: token
  680. })
  681. .then(res => {
  682. response = res.data
  683. })
  684. return response
  685. },
  686. /**
  687. * @description:登出操作
  688. */
  689. logout: function () {
  690. // 设置store登出状态
  691. this.$store.commit('userLogout')
  692. // 删除token在cookie的记录
  693. cookie.setCookie('', 0, 'token')
  694. }
  695. },
  696. mounted () {
  697. this.autoLogin()
  698. this.getNoticeList()
  699. this.getReportList()
  700. this.getCultureList()
  701. this.getKeyPoint()
  702. this.getSlogan()
  703. },
  704. watch: {
  705. /**
  706. * @description:每变换一次状态,更新一次地图尺寸
  707. * @param {DOM} newOne:新值
  708. * @param {DOM} oldOne:旧值
  709. */
  710. isShow (newVa, oldVa) {
  711. bus.$emit('updateMapSize')
  712. },
  713. /**
  714. * @description:每切换一次tab,重置选择状态
  715. * @param {DOM} newOne:新值
  716. * @param {DOM} oldOne:旧值
  717. */
  718. tabIndex (newVa, oldVa) {
  719. this.selectedIndex = -1
  720. this.selected = null
  721. },
  722. /**
  723. * @description:选择的节点发生改变时,颜色变化
  724. * @param {DOM} newOne:新值
  725. * @param {DOM} oldOne:旧值
  726. */
  727. selected (newOne, oldOne) {
  728. // 如果选择的<td>节点不变,不作更改
  729. // 否则 消除旧节点的颜色,修改新节点的颜色
  730. if (newOne === oldOne) {
  731. return 0
  732. } else {
  733. if (oldOne === null) {
  734. // 旧值为空
  735. newOne.style.background = '#b8daff'
  736. } else if (newOne === null) {
  737. // 新值为空
  738. oldOne.style.background = ''
  739. } else {
  740. // 都不为空
  741. oldOne.style.background = ''
  742. newOne.style.background = '#b8daff'
  743. }
  744. }
  745. },
  746. /**
  747. * @description:下标小于0时(空元素状态),禁止删除操作
  748. * @param {DOM} newOne:新值
  749. * @param {DOM} oldOne:旧值
  750. */
  751. selectedIndex (newOne, oldOne) {
  752. if (newOne < 0) {
  753. this.toolShow.delete = false
  754. } else {
  755. this.toolShow.delete = true
  756. switch (this.tabIndex) {
  757. case 0:
  758. bus.$emit('markerShow', {
  759. type: this.tabIndex,
  760. id: this.data[this.tabIndex]
  761. })
  762. }
  763. }
  764. },
  765. /**
  766. * @description:监听预删除数据,当其不为空时使得‘应用更改’按钮可用
  767. * @param {DOM} newOne:新值
  768. * @param {DOM} oldOne:旧值
  769. */
  770. deleteArr (newOne, oleOne) {
  771. if (newOne.length > 0) {
  772. this.toolShow.submit = true
  773. } else {
  774. this.toolShow.submit = false
  775. }
  776. },
  777. /**
  778. * @description:监听备份数据,发生改动意味着发生数据库操作,刷新地图数据
  779. * @param {DOM} newOne:新值
  780. * @param {DOM} oldOne:旧值
  781. */
  782. colonItems (newOne, oldOne) {
  783. bus.$emit('refreshMap')
  784. }
  785. },
  786. filters: {
  787. // 超过16位显示省略号
  788. ellipsis: function (value) {
  789. if (!value) return ''
  790. if (value.length > 10) {
  791. return value.slice(0, 9) + '...'
  792. }
  793. return value
  794. }
  795. }
  796. }
  797. </script>
  798. <style scoped>
  799. .close{
  800. float: right;
  801. }
  802. #list {
  803. width: 310px;
  804. height: 100%;
  805. display: flex;
  806. }
  807. .listGroup {
  808. font-size:14px
  809. }
  810. #header {
  811. background: rgba(222,226,230,0.5)
  812. }
  813. #body {
  814. flex:1
  815. }
  816. #footer{
  817. background: rgba(222,226,230,0.5);
  818. }
  819. .logo {
  820. width: 32px;
  821. height:32px
  822. }
  823. #btn{
  824. position:absolute;
  825. right:5px;
  826. bottom: 10px;
  827. z-index: 10;
  828. float:right;
  829. }
  830. #alert {
  831. position: absolute;
  832. top:0px;
  833. width:100%;
  834. z-index:10000
  835. }
  836. </style>