App.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. <template>
  2. <div id="app">
  3. <Header v-if="headersShow"></Header>
  4. <div class="scrollbar_style" :class="{'padding':headersShow}">
  5. <router-view></router-view>
  6. </div>
  7. </div>
  8. </template>
  9. <script>
  10. Date.prototype.format = function(fmt) {
  11. let ret;
  12. const opt = {
  13. "Y+": this.getFullYear().toString(), // 年
  14. "m+": (this.getMonth() + 1).toString(), // 月
  15. "d+": this.getDate().toString(), // 日
  16. "H+": this.getHours().toString(), // 时
  17. "M+": this.getMinutes().toString(), // 分
  18. "S+": this.getSeconds().toString() // 秒
  19. // 有其他格式化字符需求可以继续添加,必须转化成字符串
  20. };
  21. for (let k in opt) {
  22. ret = new RegExp("(" + k + ")").exec(fmt);
  23. if (ret) {
  24. fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
  25. }
  26. }
  27. return fmt;
  28. }
  29. Number.prototype.formatNumberRgx = function() {
  30. var parts = this.toString().split(".");
  31. parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  32. return parts.join(".");
  33. };
  34. import Header from './components/header.vue'
  35. import { mapGetters } from 'vuex'
  36. import allUel from './api/allUel.js'
  37. import base from './api/base.js'
  38. import jqueryK from './api/jqueryK.js'
  39. export default {
  40. name: 'App',
  41. data(){
  42. return{
  43. headersShow:false,
  44. password:'654321'
  45. }
  46. },
  47. computed:{
  48. ...mapGetters({
  49. token:'token',
  50. client_key:'client_key',
  51. username:'username',
  52. version:'version',
  53. routerStr:'routerStr',
  54. avatar:'avatar',
  55. }),
  56. },
  57. components: {
  58. Header
  59. },
  60. created(){
  61. let data = {};
  62. var storage = window.localStorage;
  63. var street = window.location.href.split("/")[2];
  64. let protocolStr = document.location.protocol;
  65. let subStrW = protocolStr=='https:'?'wss:':'ws:';
  66. let subStrT = new RegExp('https:');//创建正则表达式对象
  67. if(street == 'localhost:8080' || street == '127.0.0.1:8080'){
  68. street = '120.77.179.55'
  69. protocolStr = 'http:';
  70. data = {
  71. avatar: "http://120.77.179.55/upload/image/73e766a761584c547ce785af826a4e6d.jpg",
  72. client_key: "23be0e4c9a2e91b330bfeb7d20229e71",
  73. id: "1",
  74. name: "admin",
  75. privilege: "",
  76. role: 1,
  77. token: "27cc9eaa89c63c65df47901692a70bc7",
  78. username: "admin",
  79. version: "0",
  80. }
  81. // data = {
  82. // token:"41b3914983146b748c636d0f46cd1103",
  83. // username:"plmpo",
  84. // id:"92",
  85. // role:4,
  86. // name:"123",
  87. // privilege:"2,3,4,5,6,7,9,10,12,13,14,15,16,17,34,51,53,55,60,19,20,21,22,23,24,25,26,27,28,29,31,52,54,56,63,33,35,36,37,40,41,42,43,62",
  88. // avatar:"",
  89. // client_key:"23be0e4c9a2e91b330bfeb7d20229e71",
  90. // version:"0"
  91. // }
  92. storage.setItem('userData',JSON.stringify(data))
  93. }
  94. for(let i in allUel){
  95. for(let key in allUel[i]){
  96. if(i == 'websocket'){
  97. allUel[i][key]=allUel[i][key].replace(new RegExp('ws:'),subStrW);
  98. }else{
  99. allUel[i][key]=allUel[i][key].replace(subStrT,protocolStr);
  100. }
  101. }
  102. }
  103. let subStr=new RegExp('120.77.179.55');//创建正则表达式对象
  104. for(let i in allUel){
  105. for(let key in allUel[i]){
  106. allUel[i][key]=allUel[i][key].replace(subStr,street);
  107. }
  108. }
  109. let linkTypeArr = window.location.href.split("/");
  110. let linkType = linkTypeArr[linkTypeArr.length-1].split("?")[0];
  111. if(storage.getItem('userData')){
  112. data = JSON.parse(storage.getItem('userData'))
  113. this.$store.commit('USERDATAFUN',{
  114. username:data.username,
  115. id:data.id,
  116. role:data.role,
  117. lastLoginTime:data.lastLoginTime,
  118. client_key:data.client_key,
  119. privilege:data.privilege,
  120. token:data.token,
  121. number:data.number,
  122. avatar:data.avatar,
  123. version:data.version,
  124. })
  125. if(linkType == '' || linkType == 'login'){
  126. linkType = 'dashboard'
  127. this.$router.push({path:'/dashboard'})
  128. document.title = 'IDCOL-dashboard'
  129. }
  130. this.$store.commit('ROUTERSTRFUN',{
  131. routerStr:'/'+linkType
  132. })
  133. document.title = 'IDCOL-'+linkType
  134. if(linkType == 'login'||linkType == 'retrievePassword'){
  135. this.headersShow = false
  136. }else{
  137. this.headersShow = true
  138. }
  139. }else{
  140. if(linkType != 'retrievePassword'){
  141. storage.setItem('userData','')
  142. this.$store.commit('ROUTERSTRFUN',{
  143. routerStr:'/login',
  144. })
  145. this.$router.push({path:'/login'});
  146. }
  147. }
  148. this.$router.beforeEach((to, from, next) => {
  149. console.log(to.path,'--------')
  150. if(to.path == '/login'||to.path == '/retrievePassword'){
  151. this.headersShow = false
  152. }else{
  153. this.headersShow = true
  154. }
  155. this.$store.commit('ROUTERSTRFUN',{
  156. routerStr:to.path
  157. })
  158. next();
  159. })
  160. },
  161. mounted(){
  162. let this_ = this;
  163. let width = document.body.offsetWidth;
  164. if(width >= 1920){
  165. $('html').css({'font-size':'95.01%'})
  166. this.$store.commit('REMRATIOFUN',{
  167. remRatio:0.9501*16,
  168. })
  169. }else{
  170. $('html').css({'font-size':width*62.5/1200+'%'})
  171. this.$store.commit('REMRATIOFUN',{
  172. remRatio:width*62.5/1200/100*16,
  173. })
  174. }
  175. window.onresize = function(){
  176. width = document.body.offsetWidth;
  177. // console.log(width)
  178. if(width >= 1920){
  179. $('html').css({'font-size':'95.01%'})
  180. this_.$store.commit('REMRATIOFUN',{
  181. remRatio:0.9501*16,
  182. })
  183. }else{
  184. $('html').css({'font-size':width*62.5/1200+'%'})
  185. this_.$store.commit('REMRATIOFUN',{
  186. remRatio:width*62.5/1200/100*16,
  187. })
  188. }
  189. this_.$store.commit('UPDATEREMRATIOFUN',{
  190. updateRemRatio:this_.updateRemRatio+1,
  191. })
  192. }
  193. },
  194. methods:{
  195. login(){
  196. var storage = window.localStorage;
  197. let client_key = jqueryK.md5(navigator.userAgent);
  198. base.ajax_post(
  199. allUel.common.login,
  200. {
  201. // username:this.username,
  202. // password:this.password,
  203. username:'admin',
  204. password:'654321',
  205. client_key:client_key,
  206. },
  207. {},
  208. data => {
  209. // this.$message({
  210. // showClose: true,
  211. // message: 'Login successfully',
  212. // type: 'success'
  213. // });
  214. console.log(data)
  215. data.data.client_key = client_key;
  216. data.data.version = this.version;
  217. this.$store.commit('USERDATAFUN',{
  218. username:data.data.username,
  219. id:data.data.id,
  220. role:data.data.role,
  221. lastLoginTime:data.data.lastLoginTime,
  222. client_key:data.data.client_key,
  223. privilege:data.data.privilege,
  224. token:data.data.token,
  225. number:data.data.number,
  226. avatar:data.data.avatar,
  227. version:data.data.version,
  228. })
  229. // this.$router.push({path:'/dashboard'})
  230. // this.$store.commit('ROUTERSTRFUN',{
  231. // routerStr:'/dashboard',
  232. // })
  233. storage.setItem('userData',JSON.stringify(data.data))
  234. if(this.checkboxRememberPassword){
  235. storage.setItem('rememberPassword','true');
  236. storage.setItem('udfn',this.username);
  237. storage.setItem('udfp',jqueryK.base64Encode(this.password));
  238. }
  239. this.$store.commit('HEADERIDFUN',{
  240. headerUpdate: this.headerUpdate+1,
  241. })
  242. },
  243. this
  244. )
  245. },
  246. }
  247. }
  248. </script>
  249. <style type="text/css" lang="less">
  250. @font-face {
  251. font-family: 'PingFang-SC-Heavy';
  252. src: url('./style/font-pf/PingFangHeavy.eot');
  253. src:
  254. url('./style/font-pf/PingFangHeavy.eot?#font-spider') format('embedded-opentype'),
  255. url('./style/font-pf/PingFangHeavy.woff') format('woff'),
  256. url('./style/font-pf/PingFangHeavy.ttf') format('truetype'),
  257. url('./style/font-pf/PingFangHeavy.svg') format('svg');
  258. font-weight: normal;
  259. font-style: normal;
  260. }
  261. @font-face {
  262. font-family: 'PingFangSC-Medium';
  263. src: url('./style/font-pf/PingFangMedium.ttf');
  264. font-weight: normal;
  265. font-style: normal;
  266. }
  267. @font-face {
  268. font-family: 'AlibabaPuHuiTiR';
  269. src: url('./style/font-al/Alibaba-PuHuiTi-Regular.eot');
  270. src:
  271. url('./style/font-al/Alibaba-PuHuiTi-Regular.eot?#font-spider') format('embedded-opentype'),
  272. url('./style/font-al/Alibaba-PuHuiTi-Regular.woff') format('woff'),
  273. url('./style/font-al/Alibaba-PuHuiTi-Regular.ttf') format('truetype'),
  274. url('./style/font-al/Alibaba-PuHuiTi-Regular.svg') format('svg');
  275. font-weight: normal;
  276. font-style: normal;
  277. }
  278. @font-face {
  279. font-family: 'AlibabaPuHuiTiH';
  280. src: url('./style/font-al/Alibaba-PuHuiTi-Heavy.ttf');
  281. src:
  282. url('./style/font-al/Alibaba-PuHuiTi-Heavy.eot?#font-spider') format('embedded-opentype'),
  283. url('./style/font-al/Alibaba-PuHuiTi-Heavy.woff') format('woff'),
  284. url('./style/font-al/Alibaba-PuHuiTi-Heavy.ttf') format('truetype'),
  285. url('./style/font-al/Alibaba-PuHuiTi-Heavy.svg') format('svg');
  286. font-weight: normal;
  287. font-style: normal;
  288. }
  289. @font-face {
  290. font-family: 'AlibabaPuHuiTiB';
  291. src: url('./style/font-al/Alibaba-PuHuiTi-Bold.ttf');
  292. src:
  293. url('./style/font-al/Alibaba-PuHuiTi-Bold.eot?#font-spider') format('embedded-opentype'),
  294. url('./style/font-al/Alibaba-PuHuiTi-Bold.woff') format('woff'),
  295. url('./style/font-al/Alibaba-PuHuiTi-Bold.ttf') format('truetype'),
  296. url('./style/font-al/Alibaba-PuHuiTi-Bold.svg') format('svg');
  297. font-weight: normal;
  298. font-style: normal;
  299. }
  300. @font-face {
  301. font-family: 'AlibabaPuHuiTiL';
  302. src: url('./style/font-al/Alibaba-PuHuiTi-Light.ttf');
  303. src:
  304. url('./style/font-al/Alibaba-PuHuiTi-Light.eot?#font-spider') format('embedded-opentype'),
  305. url('./style/font-al/Alibaba-PuHuiTi-Light.woff') format('woff'),
  306. url('./style/font-al/Alibaba-PuHuiTi-Light.ttf') format('truetype'),
  307. url('./style/font-al/Alibaba-PuHuiTi-Light.svg') format('svg');
  308. font-weight: normal;
  309. font-style: normal;
  310. }
  311. @font-face {
  312. font-family: 'AlibabaPuHuiTiM';
  313. src: url('./style/font-al/Alibaba-PuHuiTi-Medium.ttf');
  314. src:
  315. url('./style/font-al/Alibaba-PuHuiTi-Medium.eot?#font-spider') format('embedded-opentype'),
  316. url('./style/font-al/Alibaba-PuHuiTi-Medium.woff') format('woff'),
  317. url('./style/font-al/Alibaba-PuHuiTi-Medium.ttf') format('truetype'),
  318. url('./style/font-al/Alibaba-PuHuiTi-Medium.svg') format('svg');
  319. font-weight: normal;
  320. font-style: normal;
  321. }
  322. // @font-face {
  323. // font-family: 'bodoni-MT';
  324. // src: url('./style/bodoniMT/bodoniMT.ttf');
  325. // }
  326. html,body,p,h1,h2,h3,h4,h5,ul,li{
  327. margin: 0px;
  328. padding: 0px;
  329. }
  330. html,body,#app{
  331. height: 100%;
  332. width:100%;
  333. }
  334. li{
  335. list-style:none;/*li去点*/
  336. box-sizing: border-box;
  337. }
  338. a{
  339. text-decoration: none;
  340. box-sizing: border-box;
  341. }
  342. i{
  343. font-style: inherit;
  344. }
  345. input{
  346. padding:0;
  347. outline-style: none;
  348. box-sizing: border-box;
  349. }
  350. div{
  351. box-sizing: border-box; //border、padding并入宽度。
  352. }
  353. /*滚动条样式*/
  354. .el-table__body-wrapper::-webkit-scrollbar {/*滚动条整体样式*/
  355. width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
  356. height: 5px;
  357. }
  358. .el-table__body-wrapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  359. border-radius: 3px;
  360. background: #DAE6E0;
  361. }
  362. .el-table__body-wrapper::-webkit-scrollbar-track {/*滚动条里面轨道*/
  363. background: #F6F8F7;
  364. }
  365. .el-table{
  366. th>.cell,td>.cell{
  367. padding: 0;
  368. }
  369. .el-table__body-wrapper{
  370. width: calc(100% - 8px);
  371. margin-right: 8px;
  372. }
  373. }
  374. .scrollbar_style{
  375. // margin-right: 8px;
  376. overflow: auto;
  377. }
  378. /*.scrollbar_style::-webkit-scrollbar-button{
  379. width: 10px;
  380. height: 10px;
  381. }*/
  382. .scrollbar_style::-webkit-scrollbar {/*滚动条整体样式*/
  383. width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
  384. height: 5px;
  385. }
  386. .scrollbar_style::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  387. border-radius: 3px;
  388. background: #DAE6E0;
  389. }
  390. .scrollbar_style::-webkit-scrollbar-track {/*滚动条里面轨道*/
  391. background: #F6F8F7;
  392. }
  393. /*弹框样式*/
  394. .el-dialog__header{
  395. border-bottom: 1px solid #E8E8E8;
  396. span{
  397. color: #444444;
  398. }
  399. }
  400. .el-dialog__headerbtn {
  401. top: 13px;
  402. font-size: 30px;
  403. }
  404. .el-dialog__body{
  405. .dialog_foot{
  406. text-align:center;padding: 60px 0 20px 0;
  407. .el-button{
  408. width:320px;
  409. height:60px;
  410. border-radius: 6px;
  411. font-size:16px;
  412. }
  413. }
  414. }
  415. #app{
  416. >.scrollbar_style{
  417. // width: calc(100% - 8px);
  418. width: calc(100%);
  419. height: calc(100%);
  420. &.padding{
  421. height: calc(100% - 4.1rem);
  422. }
  423. }
  424. }
  425. .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
  426. color: initial;
  427. background-color: #f5f7fa;
  428. }
  429. .el-dropdown-menu{
  430. max-height: 360px;
  431. .el-dropdown-menu__item{
  432. &.select{
  433. color: #409eff;
  434. font-weight: 700;
  435. }
  436. }
  437. }
  438. /*弹框样式*/
  439. .solar_dialig{
  440. .el-dialog__header{
  441. border-bottom: 1px solid #E8E8E8;
  442. span{
  443. color: #444444;
  444. }
  445. }
  446. .el-dialog__headerbtn {
  447. top: 13px;
  448. font-size: 30px;
  449. }
  450. .el-dialog__body{
  451. .dialog_foot{
  452. text-align:center;padding: 60px 0 20px 0;
  453. .el-button{
  454. width:320px;
  455. height:60px;
  456. border-radius: 6px;
  457. font-size:16px;
  458. }
  459. }
  460. }
  461. }
  462. </style>