| 1 |
- {"remainingRequest":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/src/views/sum/index.vue?vue&type=style&index=0&id=56e32f38&lang=scss&scoped=true","dependencies":[{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/src/views/sum/index.vue","mtime":1708395041889},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/css-loader/dist/cjs.js","mtime":1708395146948},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1708395147772},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/postcss-loader/src/index.js","mtime":1708395147225},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/sass-loader/dist/cjs.js","mtime":1708395146389},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/cache-loader/dist/cjs.js","mtime":1708395146433},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/index.js","mtime":1708395147382}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCg0KLmRhc2hib2FyZCB7DQogICYtY29udGFpbmVyIHsNCiAgICBtYXJnaW46IDMwcHg7DQogIH0NCg0KICAmLXRleHQgew0KICAgIGZvbnQtc2l6ZTogMzBweDsNCiAgICBsaW5lLWhlaWdodDogNDZweDsNCiAgfQ0KfQ0KDQouZGFzaGJvYXJkLWNvbnRhaW5lciB7DQogIC5iYXNpY0RhdGEgew0KICAgIGJhY2tncm91bmQtY29sb3I6ICNGNUY1RjU7DQoNCiAgICAuZ3JpZC1jb250ZW50IHsNCiAgICAgIGhlaWdodDogMTE2cHg7DQogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOw0KDQogICAgICAuc3VtTmFtZSB7DQogICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgICAgICAgdG9wOiAxNnB4Ow0KICAgICAgICBsZWZ0OiAyMXB4Ow0KICAgICAgICBjb2xvcjogIzI3MjcyNzsNCiAgICAgICAgZm9udC1zaXplOiAxNnB4Ow0KICAgICAgfQ0KDQogICAgICAuc3VuTnVtIHsNCiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgICAgICB0b3A6IDI3cHg7DQogICAgICAgIGxlZnQ6IDIxcHg7DQogICAgICAgIGZvbnQtc2l6ZTogMjRweDsNCiAgICAgICAgZm9udC1mYW1pbHk6IFBpbmdGYW5nU0MtU2VtaWJvbGQsIFBpbmdGYW5nIFNDOw0KICAgICAgICBmb250LXdlaWdodDogNjAwOw0KICAgICAgfQ0KDQogICAgICBpbWcgew0KICAgICAgICBkaXNwbGF5OiBibG9jazsNCiAgICAgICAgZmxvYXQ6IHJpZ2h0Ow0KICAgICAgICBtYXJnaW4tcmlnaHQ6IDIwcHg7DQogICAgICAgIG1hcmdpbi10b3A6IC0yMHB4Ow0KICAgICAgfQ0KICAgIH0NCiAgfQ0KDQogIC5jaGFydC1jb250ZW50IHsNCiAgICBwYWRkaW5nOiAwIDE1cHggMjhweDsNCiAgICBtYXJnaW4tdG9wOiAxMHB4Ow0KICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmY7DQogICAgd2lkdGg6IDEwMCU7DQoNCiAgICAuc2VhcmNoYy1vbnRlbnQgew0KICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsNCiAgICAgIGhlaWdodDogNzZweDsNCiAgICAgIHdpZHRoOiAxMDAlOw0KICAgICAgLy8gbWFyZ2luLWxlZnQ6IDEwcHg7DQogICAgICBkaXNwbGF5OiBmbGV4Ow0KICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCg0KICAgICAgLmVsLWlucHV0IHsNCiAgICAgICAgbWFyZ2luLXJpZ2h0OiAyMHB4Ow0KICAgICAgfQ0KDQogICAgICAuZWwtc2VsZWN0IHsNCiAgICAgICAgbWFyZ2luLXJpZ2h0OiAyMHB4Ow0KICAgICAgfQ0KDQogICAgICAuc2VhcmNoLWJ0biB7DQogICAgICAgIGRpc3BsYXk6IGZsZXg7DQogICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogICAgICAgIGhlaWdodDogMTAwJTsNCiAgICAgICAgLy8gbWFyZ2luLWxlZnQ6IDEwcHg7DQoNCiAgICAgICAgZGl2IHsNCiAgICAgICAgICAvLyBtYXJnaW46IDAgNnB4Ow0KICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jazsNCiAgICAgICAgICB3aWR0aDogODBweDsNCiAgICAgICAgICBoZWlnaHQ6IDQwcHg7DQogICAgICAgICAgYm9yZGVyLXJhZGl1czogMnB4Ow0KICAgICAgICAgIGZvbnQtc2l6ZTogMTRweDsNCiAgICAgICAgICBsaW5lLWhlaWdodDogNDBweDsNCiAgICAgICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogICAgICAgIH0NCg0KICAgICAgICBkaXY6aG92ZXIgew0KICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjsNCiAgICAgICAgfQ0KDQogICAgICAgIC5zZWFyY2ggew0KICAgICAgICAgIC8vIG1hcmdpbjogMCAxMHB4Ow0KICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMyNzY2REQ7DQogICAgICAgICAgY29sb3I6ICNGN0Y4RkI7DQogICAgICAgIH0NCg0KICAgICAgICAuc2VhcmNoOmhvdmVyIHsNCiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjNEQ4NUY0Ow0KICAgICAgICB9DQoNCiAgICAgICAgLnJlc2V0IHsNCiAgICAgICAgICBjb2xvcjogIzMzMzMzNDsNCiAgICAgICAgICBtYXJnaW4tbGVmdDogMTBweDsNCiAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjRDdEN0Q3Ow0KICAgICAgICB9DQoNCiAgICAgICAgLnJlc2V0OmhvdmVyIHsNCiAgICAgICAgICBjb2xvcjogIzFGOUZGRjsNCiAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjMUY5RkZGOw0KICAgICAgICB9DQogICAgICB9DQogICAgfQ0KDQogICAgLmRpc2Vhc2VBbmREaXNhc3RlciB7DQogICAgICB3aWR0aDogMTAwJTsNCiAgICAgIGhlaWdodDogNDg0cHg7DQoNCiAgICAgIC5zMSB7DQogICAgICAgIGhlaWdodDogNDg0cHg7DQogICAgICAgIHdpZHRoOiA0OS41JTsNCiAgICAgICAgZmxvYXQ6IGxlZnQ7DQogICAgICAgIGJveC1zaGFkb3c6IDAgMTJweCA0OHB4IDE2cHggcmdiYSgwLCAwLCAwLCAwLjAzKTsNCg0KICAgICAgICAudG9wVGl0bGUgew0KICAgICAgICAgIHdpZHRoOiAxMDAlOw0KICAgICAgICAgIGhlaWdodDogNTRweDsNCiAgICAgICAgICBwYWRkaW5nOiAyM3B4IDAgMCAxMHB4Ow0KICAgICAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCByZ2JhKDIyOCwgMjI4LCAyMjgsIDEpOw0KICAgICAgICB9DQogICAgICB9DQoNCiAgICAgIC5zMiB7DQogICAgICAgIGhlaWdodDogNDg0cHg7DQogICAgICAgIHdpZHRoOiAxJTsNCiAgICAgICAgZmxvYXQ6IGxlZnQ7DQogICAgICB9DQoNCiAgICAgIC5zMyB7DQogICAgICAgIGhlaWdodDogNDg0cHg7DQogICAgICAgIHdpZHRoOiA0OS41JTsNCiAgICAgICAgZmxvYXQ6IGxlZnQ7DQogICAgICAgIGJveC1zaGFkb3c6IDAgMTJweCA0OHB4IDE2cHggcmdiYSgwLCAwLCAwLCAwLjAzKTsNCiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlOw0KDQogICAgICAgIC50b3BUaXRsZSB7DQogICAgICAgICAgd2lkdGg6IDEwMCU7DQogICAgICAgICAgaGVpZ2h0OiA1NHB4Ow0KICAgICAgICAgIHBhZGRpbmc6IDIzcHggMCAwIDEwcHg7DQogICAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMjI4LCAyMjgsIDIyOCwgMSk7DQoNCiAgICAgICAgICAuZXhwb3J0RGF0YSB7DQogICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7DQogICAgICAgICAgICB0b3A6IC0xM3B4Ow0KICAgICAgICAgICAgbWFyZ2luLXJpZ2h0OiAyMHB4Ow0KICAgICAgICAgICAgd2lkdGg6IDk4cHg7DQogICAgICAgICAgICBoZWlnaHQ6IDM0cHg7DQogICAgICAgICAgICBjb2xvcjogI2ZmZjsNCiAgICAgICAgICAgIGZvbnQtc2l6ZTogMTRweDsNCiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMyNzY2REQ7DQogICAgICAgICAgICBib3JkZXItcmFkaXVzOiAycHg7DQogICAgICAgICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogICAgICAgICAgICBsaW5lLWhlaWdodDogMzRweDsNCiAgICAgICAgICAgIGZsb2F0OiByaWdodDsNCiAgICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjsNCiAgICAgICAgICB9DQoNCiAgICAgICAgICAuZXhwb3J0RGF0YTpob3ZlciB7DQogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjNEQ4NUY0Ow0KICAgICAgICAgIH0NCiAgICAgICAgfQ0KDQogICAgICAgIC5yYW5raW5nIHsNCiAgICAgICAgICB3aWR0aDogODAlOw0KICAgICAgICAgIGhlaWdodDogNTVweDsNCiAgICAgICAgICBsaW5lLWhlaWdodDogMzVweDsNCiAgICAgICAgICBtYXJnaW46IDAgYXV0bzsNCiAgICAgICAgICBmb250LXNpemU6IDE0cHg7DQoNCiAgICAgICAgICAuaW5kZXggew0KICAgICAgICAgICAgbWFyZ2luLXJpZ2h0OiAzNnB4Ow0KICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrOw0KICAgICAgICAgICAgd2lkdGg6IDI4cHg7DQogICAgICAgICAgICBoZWlnaHQ6IDE2cHg7DQogICAgICAgICAgICBsaW5lLWhlaWdodDogMTZweDsNCiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDhweDsNCiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMyMjNFODc7DQogICAgICAgICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogICAgICAgICAgICBjb2xvcjogI2ZmZjsNCiAgICAgICAgICB9DQoNCiAgICAgICAgICAuaW5kZXgxIHsNCiAgICAgICAgICAgIG1hcmdpbi1yaWdodDogMzZweDsNCiAgICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jazsNCiAgICAgICAgICAgIHdpZHRoOiAyOHB4Ow0KICAgICAgICAgICAgaGVpZ2h0OiAxNnB4Ow0KICAgICAgICAgICAgbGluZS1oZWlnaHQ6IDE2cHg7DQogICAgICAgICAgICBib3JkZXItcmFkaXVzOiA4cHg7DQogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjRERFN0ZGOw0KICAgICAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyOw0KICAgICAgICAgICAgY29sb3I6ICM2OTY5Njk7DQogICAgICAgICAgfQ0KDQogICAgICAgICAgLy8gLm1vcmVTdHlsZXsNCiAgICAgICAgICAvLyAgIGZvbnQtc2l6ZTogMTJweDsNCiAgICAgICAgICAvLyAgIGNvbG9yOiAjMjc2NkREOw0KICAgICAgICAgIC8vICAgY3Vyc29yOiBwb2ludGVyOw0KICAgICAgICAgIC8vIH0NCiAgICAgICAgfQ0KICAgICAgfQ0KICAgIH0NCg0KICAgIC5hbGFybVN0YXRpc3RpY3Mgew0KICAgICAgd2lkdGg6IDEwMCU7DQogICAgICBoZWlnaHQ6IDQ4NHB4Ow0KICAgICAgbWFyZ2luLXRvcDogMTVweDsNCiAgICAgIGJveC1zaGFkb3c6IDAgMTJweCA0OHB4IDE2cHggcmdiYSgwLCAwLCAwLCAwLjAzKTsNCg0KICAgICAgLnRvcFRpdGxlIHsNCiAgICAgICAgd2lkdGg6IDEwMCU7DQogICAgICAgIGhlaWdodDogNTRweDsNCiAgICAgICAgcGFkZGluZzogMjNweCAwIDAgMTBweDsNCiAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMjI4LCAyMjgsIDIyOCwgMSk7DQoNCiAgICAgICAgLmV4cG9ydERhdGEgew0KICAgICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgICAgICAgICB0b3A6IC0xM3B4Ow0KICAgICAgICAgIG1hcmdpbi1yaWdodDogMjBweDsNCiAgICAgICAgICB3aWR0aDogOThweDsNCiAgICAgICAgICBoZWlnaHQ6IDM0cHg7DQogICAgICAgICAgY29sb3I6ICNmZmY7DQogICAgICAgICAgZm9udC1zaXplOiAxNHB4Ow0KICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMyNzY2REQ7DQogICAgICAgICAgYm9yZGVyLXJhZGl1czogMnB4Ow0KICAgICAgICAgIHRleHQtYWxpZ246IGNlbnRlcjsNCiAgICAgICAgICBsaW5lLWhlaWdodDogMzRweDsNCiAgICAgICAgICBmbG9hdDogcmlnaHQ7DQogICAgICAgICAgY3Vyc29yOiBwb2ludGVyOw0KICAgICAgICB9DQoNCiAgICAgICAgLmV4cG9ydERhdGE6aG92ZXIgew0KICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICM0RDg1RjQ7DQogICAgICAgIH0NCiAgICAgIH0NCiAgICB9DQoNCiAgfQ0KfQ0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyjBA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA","file":"index.vue","sourceRoot":"src/views/sum","sourcesContent":["<template>\r\n <div class=\"dashboard-container\">\r\n <div class=\"basicData\">\r\n <el-row :gutter=\"15\">\r\n <el-col :span=\"6\">\r\n <div class=\"grid-content\">\r\n <div class=\"sumName\">已加装机车（辆）</div>\r\n <div class=\"sunNum\" style=\"color: #2250C8;\">{{ this.basicData.vehicleNum }}</div>\r\n <img src=\"@/assets/编组 19.png\" width=\"66px\">\r\n </div>\r\n </el-col>\r\n <el-col :span=\"6\">\r\n <div class=\"grid-content\">\r\n <div class=\"sumName\">车载终端（台）</div>\r\n <div class=\"sunNum\" style=\"color: #FAD44A;\">{{ this.basicData.terminalNum }}</div>\r\n <img src=\"@/assets/编组 20.png\" width=\"66px\">\r\n </div>\r\n </el-col>\r\n <el-col :span=\"6\">\r\n <div class=\"grid-content\">\r\n <div class=\"sumName\">接入报警（条）</div>\r\n <div class=\"sunNum\" style=\"color: #F04762;\">{{ this.basicData.alarmNum }}</div>\r\n <img src=\"@/assets/编组 21.png\" width=\"66px\">\r\n </div>\r\n </el-col>\r\n <el-col :span=\"6\">\r\n <div class=\"grid-content\">\r\n <div class=\"sumName\">接入摄像机（台）</div>\r\n <div class=\"sunNum\" style=\"color: #04E14C;\">{{ this.basicData.cameraNum }}</div>\r\n <img src=\"@/assets/编组 22.png\" width=\"66px\">\r\n </div>\r\n </el-col>\r\n </el-row>\r\n </div>\r\n <div class=\"chart-content\">\r\n <div class=\"searchc-ontent\">\r\n <el-select v-model=\"params.railwayCode\" placeholder=\"请选择线路\" style=\"width: 272px;\" clearable>\r\n <el-option v-for=\"item in lineWayData\" :key=\"item.railwayCode\" :label=\"item.railwayName\"\r\n :value=\"item.railwayCode\" />\r\n </el-select>\r\n <el-date-picker value-format=\"yyyy\" v-model=\"params.currentYear\" style=\"width: 272px;\" type=\"year\"\r\n placeholder=\"请选择年份\">\r\n </el-date-picker>\r\n <el-select style=\"width: 272px;\" v-model=\"params.currentMonth\" placeholder=\"请选择月份\" clearable>\r\n <el-option v-for=\"item in startMont\" :key=\"item.value\" :label=\"item.label\" :value=\"item.value\" />\r\n </el-select>\r\n <div class=\"search-btn\">\r\n <div class=\"search\" @click=\"searchData\">查询</div>\r\n <div class=\"reset\" @click=\"reset\">重置</div>\r\n </div>\r\n </div>\r\n <div class=\"diseaseAndDisaster\">\r\n <div class=\"s1\">\r\n <div class=\"topTitle\">\r\n <div style=\"width: 3px;height: 13px;background-color: #2250C8;display: inline-block;margin-right: 4px;\"></div>\r\n <span style=\"color: #1C1C1C;font-size: 16px;font-weight: 500;\">报警类型占比</span>\r\n </div>\r\n <div id=\"alarmTypeStatistic\" :style=\"{ width: '100%', height: '100%' }\"></div>\r\n </div>\r\n <div class=\"s2\"></div>\r\n <div class=\"s3\">\r\n <div class=\"topTitle\">\r\n <div style=\"width: 3px;height: 13px;background-color: #2250C8;display: inline-block;margin-right: 4px;\"></div>\r\n <span style=\"color: #1C1C1C;font-size: 16px;font-weight: 500;\">报警频发地点</span>\r\n <div class=\"exportData\" @click=\"alarmTypeAreaCountExport()\">导出数据</div>\r\n </div>\r\n <div style=\"width: 100%;height: 66px;\"></div>\r\n \r\n \r\n <div v-if=\"homeDisasterLocationData.length != 0\" v-for=\"(item, index) in homeDisasterLocationData\" class=\"ranking\">\r\n <div class=\"index\" v-if=\"index == 0 || index == 1 || index == 2\">\r\n {{ index + 1 }}\r\n </div>\r\n <div class=\"index1\" v-if=\"index == 3 || index == 4\">\r\n {{ index + 1 }}\r\n </div>\r\n <span>{{ item.railwayName }}</span> \r\n <span>{{ item.alarmMiles }}</span>\r\n <el-progress style=\"width: 55%;position: relative;left: 180px;top: -23px;\" :color=\"customColor\"\r\n :show-text=\"false\" :stroke-width=\"10\" :percentage=\"percentage(item.frequency)\"></el-progress>\r\n <span style=\"display: inline-block;float: right;position: relative;top: -45px;\">{{\r\n item.frequency + '次' }}</span>\r\n </div>\r\n <div @click=\"more\" class=\"moreStyle\" style=\"font-size: 12px;\r\n color: red;\r\n height: 20px;\r\n line-height: 20px;\r\n display: inline-block;\r\n position: absolute;\r\n right: 44px;\r\n bottom: 37px;\r\n cursor: pointer;\">\r\n 更多>\r\n </div>\r\n <div v-if=\"homeDisasterLocationData.length == 0\" style=\"text-align: center;\">\r\n <img src=\"@/assets/暂无数据.png\" style=\"text-align: center;\"/>\r\n </div>\r\n <rankingDialog v-if=\"rankingData.dialogVisible\" :rankingData=\"rankingData\" :nedData=\"params\"></rankingDialog>\r\n </div>\r\n </div>\r\n <div class=\"alarmStatistics\">\r\n <div class=\"topTitle\">\r\n <div style=\"width: 3px;height: 13px;background-color: #2250C8;display: inline-block;margin-right: 4px;\"></div>\r\n <span style=\"color: #1C1C1C;font-size: 16px;font-weight: 500;\">报警趋势分析</span>\r\n <div class=\"exportData\" @click=\"exportDataStatisticMonth()\">导出数据</div>\r\n </div>\r\n <div id=\"echartAnalyData\" style=\"width: 100%; height: 90%\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport * as echarts from \"echarts\";\r\nimport { mapGetters } from \"vuex\";\r\n\r\nimport {\r\n getBasicdata,\r\n alarmTypeStatistic,\r\n alarmMonthStatistic,\r\n exportDataStatisticMonth,\r\n alarmTypeAreaCount,\r\n alarmTypeAreaCountExport\r\n} from \"@/api/sum\";\r\nimport { getLineWayList } from '@/api/account/camera'\r\nimport rankingDialog from \"./components/rankingDialog.vue\";\r\nexport default {\r\n name: \"home\",\r\n computed: {\r\n ...mapGetters([\"name\"]),\r\n },\r\n components: {\r\n rankingDialog\r\n },\r\n data() {\r\n return {\r\n params: {\r\n railwayCode: '',\r\n currentYear: '',\r\n currentMonth: ''\r\n },\r\n time: '',\r\n basicData: {\r\n vehicleNum: null,\r\n terminalNum: null,\r\n alarmNum: null,\r\n cameraNum: null\r\n },\r\n disasterProportionData: [],\r\n diseaseNum:0,\r\n monthData: [],\r\n numData: [],\r\n getAlarmMonData: [],\r\n startMont: [\r\n {\r\n value: '1',\r\n label: '1月'\r\n },\r\n {\r\n value: '2',\r\n label: '2月'\r\n },\r\n {\r\n value: '3',\r\n label: '3月'\r\n },\r\n {\r\n value: '4',\r\n label: '4月'\r\n },\r\n {\r\n value: '5',\r\n label: '5月'\r\n },\r\n {\r\n value: '6',\r\n label: '6月'\r\n },\r\n {\r\n value: '7',\r\n label: '7月'\r\n },\r\n {\r\n value: '8',\r\n label: '8月'\r\n },\r\n {\r\n value: '9',\r\n label: '9月'\r\n },\r\n {\r\n value: '10',\r\n label: '10月'\r\n },\r\n {\r\n value: '11',\r\n label: '11月'\r\n },\r\n {\r\n value: '12',\r\n label: '12月'\r\n }\r\n ],\r\n lineWayData: [],\r\n customColor: '#6791FF',\r\n homeDisasterLocationData: [],\r\n rankingData: {\r\n dialogVisible: false,\r\n }\r\n }\r\n },\r\n mounted() {\r\n this.initDisasterProportion()\r\n this.getAlarmMonthDataList()\r\n this.alarmTypeAreaCount()\r\n this.getLineWayList()\r\n },\r\n created() {\r\n getBasicdata().then(res => {\r\n if (res.code == 200) {\r\n this.basicData.vehicleNum = res.data.vehicleNum\r\n this.basicData.terminalNum = res.data.terminalNum\r\n this.basicData.alarmNum = res.data.alarmNum\r\n this.basicData.cameraNum = res.data.cameraNum\r\n }\r\n })\r\n },\r\n methods: {\r\n exportDataStatisticMonth() {\r\n\r\n exportDataStatisticMonth('/service/dataStatistic/exportDataStatisticMonth', this.params).then(res => {\r\n // const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });\r\n // const url = window.URL.createObjectURL(blob);\r\n // const a = document.createElement('a');\r\n // a.href = url;\r\n // a.download = '报警趋势分析.xlsx';\r\n // a.click();\r\n // window.URL.revokeObjectURL(url);\r\n\r\n if (res.type == \"application/json\") {\r\n const reader = new FileReader(); \r\n reader.readAsText(res, 'utf-8'); \r\n reader.onload = function () {\r\n const msg = JSON.parse(reader.result);\r\n if(msg.code == 200){\r\n const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });\r\n const url = window.URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = '报警趋势分析.xlsx';\r\n a.click();\r\n window.URL.revokeObjectURL(url);\r\n } else{\r\n Message({\r\n type: 'error',\r\n message: msg.msg\r\n });\r\n } \r\n }\r\n }else{\r\n const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });\r\n const url = window.URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = '报警趋势分析.xlsx';\r\n a.click();\r\n window.URL.revokeObjectURL(url);\r\n }\r\n\r\n\r\n })\r\n\r\n },\r\n alarmTypeAreaCountExport() {\r\n\r\n\r\n alarmTypeAreaCountExport('/service/dataStatistic/alarmTypeAreaCountExport', this.params).then(res => {\r\n\r\n // const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });\r\n // const url = window.URL.createObjectURL(blob);\r\n // const a = document.createElement('a');\r\n // a.href = url;\r\n // a.download = '报警频发地点排名.xlsx';\r\n // a.click();\r\n // window.URL.revokeObjectURL(url);\r\n\r\n if (res.type == \"application/json\") {\r\n const reader = new FileReader(); \r\n reader.readAsText(res, 'utf-8'); \r\n reader.onload = function () {\r\n const msg = JSON.parse(reader.result);\r\n if(msg.code == 200){\r\n const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });\r\n const url = window.URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = '报警频发地点排名.xlsx';\r\n a.click();\r\n window.URL.revokeObjectURL(url);\r\n } else{\r\n Message({\r\n type: 'error',\r\n message: msg.msg\r\n });\r\n } \r\n }\r\n }else{\r\n const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });\r\n const url = window.URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = '报警频发地点排名.xlsx';\r\n a.click();\r\n window.URL.revokeObjectURL(url);\r\n }\r\n\r\n })\r\n\r\n\r\n },\r\n initDisasterProportion() {\r\n this.disasterProportionData = []\r\n this.diseaseNum = 0\r\n alarmTypeStatistic(this.params).then(res => { \r\n if (res.data) {\r\n res.data.forEach(item => {\r\n this.diseaseNum += item.frequency\r\n this.disasterProportionData.push({\r\n value: parseInt(item.percent.slice(0, -1)),\r\n name: item.alarmTypeValue,\r\n frequency: item.frequency\r\n })\r\n })\r\n } else {\r\n this.disasterProportionData = []\r\n this.diseaseNum = 0\r\n }\r\n let ecPie = echarts.init(document.getElementById('alarmTypeStatistic'));\r\n let pieOption = {\r\n tooltip: {\r\n show: true,\r\n trigger: 'item' ,\r\n formatter:(item) => { \r\n return item.data.name + '\\r' + item.data.value + '%' + '\\r' + item.data.frequency + '次'\r\n }\r\n },\r\n legend: {\r\n orient: 'vertical',\r\n top: '65%',\r\n right: '40', \r\n },\r\n series: [\r\n {\r\n name: '灾害占比',\r\n type: 'pie',\r\n radius: ['55%', '70%'],\r\n center: [\"35%\", \"45%\"],\r\n avoidLabelOverlap: false, \r\n label: {\r\n position: 'center',\r\n show: true,\r\n formatter: () => {\r\n let str = '报警总数' + '\\n' + `${this.diseaseNum}`\r\n return str\r\n },\r\n color: '#1C1C1C',\r\n lineHeight: 25,\r\n fontSize: 16,\r\n },\r\n // emphasis: {\r\n // label: {\r\n // show: true,\r\n // fontSize: 40,\r\n // fontWeight: 'bold'\r\n // }\r\n // },\r\n labelLine: {\r\n show: false\r\n },\r\n data: this.disasterProportionData\r\n }\r\n ]\r\n }\r\n ecPie.setOption(pieOption);\r\n })\r\n\r\n },\r\n getAlarmMonthDataList() {\r\n this.monthData = []\r\n this.numData = []\r\n alarmMonthStatistic(this.params).then(res => {\r\n this.getAlarmMonData = res.data\r\n this.getAlarmMonData.forEach((item) => {\r\n if (item) {\r\n if (this.params.currentMonth) {\r\n this.monthData.push(item.monthsta + '日')\r\n this.numData.push(item.frequency)\r\n } else {\r\n this.monthData.push(item.monthsta + '月')\r\n this.numData.push(item.frequency)\r\n }\r\n }\r\n })\r\n var myChart = echarts.init(document.getElementById('echartAnalyData'))\r\n // 指定图表的配置项和数据\r\n const option = {\r\n title: [\r\n {\r\n subtext: '报警数（次）',\r\n left: 25, // 距离左边位置\r\n top: 20, // 距离上面位置\r\n subtextStyle: {\r\n // 设置二级标题的样式\r\n color: '#000'\r\n }\r\n }\r\n ],\r\n tooltip: {\r\n trigger: 'axis'\r\n },\r\n legend: {\r\n // data: [\"计划数量\"],\r\n right: '60',\r\n textStyle: {\r\n fontSize: 10, // 字体大小\r\n color: '#000' // 字体颜色\r\n }\r\n },\r\n xAxis: {\r\n data: this.monthData,\r\n axisLine: {\r\n // x轴线的颜色以及宽度\r\n show: true,\r\n lineStyle: {\r\n color: '#000',\r\n width: 0,\r\n type: 'dashed'\r\n }\r\n },\r\n axisLabel: {\r\n interval: 0\r\n // rotate: 35\r\n }\r\n },\r\n animation: true,\r\n animationDuration: 5000,\r\n yAxis: [\r\n {\r\n name: '报警数（次）',\r\n min: 0,\r\n max: null,\r\n splitLine: {\r\n // 分割线配置\r\n show: true,\r\n lineStyle: {\r\n type: 'line',\r\n color: '#EBEEF5'\r\n }\r\n },\r\n axisLabel: {\r\n // y轴文字的配置\r\n textStyle: {\r\n color: '#000' // Y轴内容文字颜色\r\n }\r\n }\r\n },\r\n {\r\n min: 40,\r\n splitLine: {\r\n // 分割线配置\r\n show: true,\r\n lineStyle: {\r\n type: 'dashed',\r\n color: 'rgba(255,255,255,0.8)'\r\n }\r\n },\r\n axisLabel: {\r\n // y轴文字的配置\r\n textStyle: {\r\n color: '#000' // Y轴内容文字颜色\r\n }\r\n }\r\n }\r\n ],\r\n title: [\r\n {\r\n // title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置\r\n subtext: '单位（万件）',\r\n left: -5, // 距离左边位置\r\n top: 20, // 距离上面位置\r\n subtextStyle: {\r\n // 设置二级标题的样式\r\n color: 'rgba(255,255,255,0.7)'\r\n }\r\n },\r\n {\r\n // title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置\r\n subtext: '单位（万件）',\r\n right: -5, // 距离左边位置\r\n top: 20, // 距离上面位置\r\n subtextStyle: {\r\n // 设置二级标题的样式\r\n color: 'rgba(255,255,255,0.7)'\r\n }\r\n }\r\n ],\r\n series: [\r\n {\r\n type: 'bar', // 形状为柱状图\r\n // name: '计划数量',\r\n // yAxisIndex:1,\r\n data: this.numData,\r\n barWidth: 20,\r\n itemStyle: {\r\n //\r\n normal: {\r\n color: '#2866DD'\r\n }\r\n }\r\n }\r\n ]\r\n }\r\n // 使用刚指定的配置项和数据显示图表。\r\n myChart.setOption(option)\r\n })\r\n },\r\n getLineWayList() {\r\n getLineWayList({}).then((res) => {\r\n this.lineWayData = res.data\r\n })\r\n },\r\n searchData() {\r\n this.initDisasterProportion()\r\n this.getAlarmMonthDataList()\r\n this.alarmTypeAreaCount()\r\n },\r\n reset() {\r\n this.params = {\r\n railwayCode: '',\r\n currentYear: '',\r\n currentMonth: ''\r\n }\r\n this.initDisasterProportion()\r\n this.getAlarmMonthDataList()\r\n this.alarmTypeAreaCount()\r\n },\r\n alarmTypeAreaCount() {\r\n this.homeDisasterLocationData = []\r\n alarmTypeAreaCount({\r\n pageNum: 1,\r\n pageSize: 5,\r\n railwayCode: this.params.railwayCode,\r\n currentYear: this.params.currentYear,\r\n currentMonth: this.params.currentMonth\r\n }).then(res => {\r\n this.homeDisasterLocationData = res.data.records\r\n })\r\n },\r\n percentage(val) {\r\n return val / (val + 5) * 100\r\n },\r\n more() {\r\n this.rankingData.dialogVisible = true\r\n }\r\n }\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.dashboard {\r\n &-container {\r\n margin: 30px;\r\n }\r\n\r\n &-text {\r\n font-size: 30px;\r\n line-height: 46px;\r\n }\r\n}\r\n\r\n.dashboard-container {\r\n .basicData {\r\n background-color: #F5F5F5;\r\n\r\n .grid-content {\r\n height: 116px;\r\n background-color: #fff;\r\n\r\n .sumName {\r\n position: relative;\r\n top: 16px;\r\n left: 21px;\r\n color: #272727;\r\n font-size: 16px;\r\n }\r\n\r\n .sunNum {\r\n position: relative;\r\n top: 27px;\r\n left: 21px;\r\n font-size: 24px;\r\n font-family: PingFangSC-Semibold, PingFang SC;\r\n font-weight: 600;\r\n }\r\n\r\n img {\r\n display: block;\r\n float: right;\r\n margin-right: 20px;\r\n margin-top: -20px;\r\n }\r\n }\r\n }\r\n\r\n .chart-content {\r\n padding: 0 15px 28px;\r\n margin-top: 10px;\r\n background-color: #fff;\r\n width: 100%;\r\n\r\n .searchc-ontent {\r\n background-color: #fff;\r\n height: 76px;\r\n width: 100%;\r\n // margin-left: 10px;\r\n display: flex;\r\n align-items: center;\r\n\r\n .el-input {\r\n margin-right: 20px;\r\n }\r\n\r\n .el-select {\r\n margin-right: 20px;\r\n }\r\n\r\n .search-btn {\r\n display: flex;\r\n align-items: center;\r\n height: 100%;\r\n // margin-left: 10px;\r\n\r\n div {\r\n // margin: 0 6px;\r\n display: inline-block;\r\n width: 80px;\r\n height: 40px;\r\n border-radius: 2px;\r\n font-size: 14px;\r\n line-height: 40px;\r\n text-align: center;\r\n }\r\n\r\n div:hover {\r\n cursor: pointer;\r\n }\r\n\r\n .search {\r\n // margin: 0 10px;\r\n background-color: #2766DD;\r\n color: #F7F8FB;\r\n }\r\n\r\n .search:hover {\r\n background-color: #4D85F4;\r\n }\r\n\r\n .reset {\r\n color: #333334;\r\n margin-left: 10px;\r\n border: 1px solid #D7D7D7;\r\n }\r\n\r\n .reset:hover {\r\n color: #1F9FFF;\r\n border: 1px solid #1F9FFF;\r\n }\r\n }\r\n }\r\n\r\n .diseaseAndDisaster {\r\n width: 100%;\r\n height: 484px;\r\n\r\n .s1 {\r\n height: 484px;\r\n width: 49.5%;\r\n float: left;\r\n box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03);\r\n\r\n .topTitle {\r\n width: 100%;\r\n height: 54px;\r\n padding: 23px 0 0 10px;\r\n border-bottom: 1px solid rgba(228, 228, 228, 1);\r\n }\r\n }\r\n\r\n .s2 {\r\n height: 484px;\r\n width: 1%;\r\n float: left;\r\n }\r\n\r\n .s3 {\r\n height: 484px;\r\n width: 49.5%;\r\n float: left;\r\n box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03);\r\n position: relative;\r\n\r\n .topTitle {\r\n width: 100%;\r\n height: 54px;\r\n padding: 23px 0 0 10px;\r\n border-bottom: 1px solid rgba(228, 228, 228, 1);\r\n\r\n .exportData {\r\n position: relative;\r\n top: -13px;\r\n margin-right: 20px;\r\n width: 98px;\r\n height: 34px;\r\n color: #fff;\r\n font-size: 14px;\r\n background-color: #2766DD;\r\n border-radius: 2px;\r\n text-align: center;\r\n line-height: 34px;\r\n float: right;\r\n cursor: pointer;\r\n }\r\n\r\n .exportData:hover {\r\n background-color: #4D85F4;\r\n }\r\n }\r\n\r\n .ranking {\r\n width: 80%;\r\n height: 55px;\r\n line-height: 35px;\r\n margin: 0 auto;\r\n font-size: 14px;\r\n\r\n .index {\r\n margin-right: 36px;\r\n display: inline-block;\r\n width: 28px;\r\n height: 16px;\r\n line-height: 16px;\r\n border-radius: 8px;\r\n background-color: #223E87;\r\n text-align: center;\r\n color: #fff;\r\n }\r\n\r\n .index1 {\r\n margin-right: 36px;\r\n display: inline-block;\r\n width: 28px;\r\n height: 16px;\r\n line-height: 16px;\r\n border-radius: 8px;\r\n background-color: #DDE7FF;\r\n text-align: center;\r\n color: #696969;\r\n }\r\n\r\n // .moreStyle{\r\n // font-size: 12px;\r\n // color: #2766DD;\r\n // cursor: pointer;\r\n // }\r\n }\r\n }\r\n }\r\n\r\n .alarmStatistics {\r\n width: 100%;\r\n height: 484px;\r\n margin-top: 15px;\r\n box-shadow: 0 12px 48px 16px rgba(0, 0, 0, 0.03);\r\n\r\n .topTitle {\r\n width: 100%;\r\n height: 54px;\r\n padding: 23px 0 0 10px;\r\n border-bottom: 1px solid rgba(228, 228, 228, 1);\r\n\r\n .exportData {\r\n position: relative;\r\n top: -13px;\r\n margin-right: 20px;\r\n width: 98px;\r\n height: 34px;\r\n color: #fff;\r\n font-size: 14px;\r\n background-color: #2766DD;\r\n border-radius: 2px;\r\n text-align: center;\r\n line-height: 34px;\r\n float: right;\r\n cursor: pointer;\r\n }\r\n\r\n .exportData:hover {\r\n background-color: #4D85F4;\r\n }\r\n }\r\n }\r\n\r\n }\r\n}\r\n</style>\r\n"]}]}
|
