{"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>&nbsp;\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"]}]}