| 1 |
- {"remainingRequest":"G:\\workSpace\\car-record\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!G:\\workSpace\\car-record\\src\\components\\CarRecord.vue?vue&type=style&index=0&id=28a51276&lang=scss&scoped=true&","dependencies":[{"path":"G:\\workSpace\\car-record\\src\\components\\CarRecord.vue","mtime":1640854035856},{"path":"G:\\workSpace\\car-record\\node_modules\\css-loader\\dist\\cjs.js","mtime":1653883359791},{"path":"G:\\workSpace\\car-record\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1653883367038},{"path":"G:\\workSpace\\car-record\\node_modules\\postcss-loader\\src\\index.js","mtime":1653883362374},{"path":"G:\\workSpace\\car-record\\node_modules\\sass-loader\\lib\\loader.js","mtime":1653883365298},{"path":"G:\\workSpace\\car-record\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1653883357648},{"path":"G:\\workSpace\\car-record\\node_modules\\vue-loader\\lib\\index.js","mtime":1653883364231}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCi5jYXIgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7CiAgbWFyZ2luOiBhdXRvOwogIHdpZHRoOiAxMTMzcHg7CiAgaGVpZ2h0OiA2NDJweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjQ1NzhjOwogIC5oZWFkIHsKICAgIGRpc3BsYXk6IGZsZXg7CiAgICB3aWR0aDogMTEzM3B4OwogICAgaGVpZ2h0OiA1NXB4OwogICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICM1OGJlZmY7CiAgICAuaGVhZC1tc2cgewogICAgICBkaXNwbGF5OiBmbGV4OwogICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICAgICAgd2lkdGg6IDU4cHg7CiAgICAgIGhlaWdodDogNTVweDsKICAgICAgaW1nIHsKICAgICAgICB3aWR0aDogMzVweDsKICAgICAgfQogICAgfQogICAgLmhlYWQtaW5mbyB7CiAgICAgIGxpbmUtaGVpZ2h0OiA1NXB4OwogICAgICBmb250LXNpemU6IDI1cHg7CiAgICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgICBjb2xvcjogI2ZmZjsKICAgIH0KICB9CiAgLmxlZnQgewogICAgZGlzcGxheTogZmxleDsKICAgIGZsZXgtd3JhcDogd3JhcDsKICAgIGZsb2F0OiBsZWZ0OwogICAgd2lkdGg6IDc4M3B4OwogICAgaGVpZ2h0OiA1ODZweDsKICAgIC5sZWZ0LXBhc3MgewogICAgICB3aWR0aDogNzgzcHg7CiAgICAgIGhlaWdodDogMjkycHg7CiAgICAgIC5wYXNzIHsKICAgICAgICBtYXJnaW4tbGVmdDogMjdweDsKICAgICAgICB3aWR0aDogNzU4cHg7CiAgICAgICAgaGVpZ2h0OiAyOTRweDsKICAgICAgICAucGFzcy10aXRsZSB7CiAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgICAgIHdpZHRoOiA3NTNweDsKICAgICAgICAgIGhlaWdodDogNTRweDsKICAgICAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjNThiZWZmOwogICAgICAgICAgLnBhc3MtaW1nIHsKICAgICAgICAgICAgd2lkdGg6IDI2cHg7CiAgICAgICAgICAgIGhlaWdodDogMTZweDsKICAgICAgICAgICAgaW1nIHsKICAgICAgICAgICAgICB3aWR0aDogMTAwJTsKICAgICAgICAgICAgfQogICAgICAgICAgfQogICAgICAgICAgLnBhc3MtaW5mbyB7CiAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiAxMHB4OwogICAgICAgICAgICB3aWR0aDogNzlweDsKICAgICAgICAgICAgaGVpZ2h0OiAyNXB4OwogICAgICAgICAgICBmb250LXNpemU6IDE5cHg7CiAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgICAgICAgICBjb2xvcjogIzBmZWJmZjsKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgLnBhc3MtcmN0IHsKICAgICAgICAgIGZsb2F0OiBsZWZ0OwogICAgICAgICAgd2lkdGg6IDUwMHB4OwogICAgICAgICAgaGVpZ2h0OiAyMzZweDsKICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDRweDsKICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICMwZmViZmY7CiAgICAgICAgICAucGFzcy1yY3QtbGlzdCB7CiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7CiAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgLnBhc3MtcmVjb3JkIHsKICAgICAgICAgIGZsb2F0OiBsZWZ0OwogICAgICAgICAgd2lkdGg6IDI1NHB4OwogICAgICAgICAgaGVpZ2h0OiAyMzZweDsKICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDRweDsKICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICMwZmViZmY7CiAgICAgICAgICAucGFzcy1yZWNvcmQtdGl0bGUgewogICAgICAgICAgICB3aWR0aDogMjU0cHg7CiAgICAgICAgICAgIGhlaWdodDogNDhweDsKICAgICAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICMwZmViZmY7CiAgICAgICAgICAgIC5pbmZvIHsKICAgICAgICAgICAgICBwYWRkaW5nLWxlZnQ6IDc2cHg7CiAgICAgICAgICAgICAgcGFkZGluZy10b3A6IDEycHg7CiAgICAgICAgICAgICAgd2lkdGg6IDc3cHg7CiAgICAgICAgICAgICAgaGVpZ2h0OiAxOXB4OwogICAgICAgICAgICAgIGZvbnQtc2l6ZTogMTlweDsKICAgICAgICAgICAgICBmb250LXdlaWdodDogNDAwOwogICAgICAgICAgICAgIGNvbG9yOiAjZmZmZmZmOwogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgICAucGFzcy1yZWNvcmQtdGltZSB7CiAgICAgICAgICAgIHdpZHRoOiAyNTRweDsKICAgICAgICAgICAgaGVpZ2h0OiA0MHB4OwogICAgICAgICAgICAudGltZSB7CiAgICAgICAgICAgICAgbWFyZ2luOiBhdXRvOwogICAgICAgICAgICAgIHdpZHRoOiAxNjBweDsKICAgICAgICAgICAgICBsaW5lLWhlaWdodDogNDBweDsKICAgICAgICAgICAgICAuZWwtZGF0ZS1lZGl0b3IuZWwtaW5wdXQgewogICAgICAgICAgICAgICAgd2lkdGg6IDEwMCU7CiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgICAucGFzcy1yZWNvcmQtZm9ybSB7CiAgICAgICAgICAgIHdpZHRoOiAyNTRweDsKICAgICAgICAgICAgaGVpZ2h0OiAxNDZweDsKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIH0KICAgIH0KICAgIC5sZWZ0LW91dCB7CiAgICAgIHdpZHRoOiA3ODNweDsKICAgICAgaGVpZ2h0OiAyOTJweDsKICAgICAgLm91dCB7CiAgICAgICAgbWFyZ2luLWxlZnQ6IDI3cHg7CiAgICAgICAgd2lkdGg6IDc1OHB4OwogICAgICAgIGhlaWdodDogMjk0cHg7CiAgICAgICAgLm91dC10aXRsZSB7CiAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgICAgIHdpZHRoOiA3NTNweDsKICAgICAgICAgIGhlaWdodDogNTRweDsKICAgICAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjNThiZWZmOwogICAgICAgICAgLm91dC1pbWcgewogICAgICAgICAgICB3aWR0aDogMjZweDsKICAgICAgICAgICAgaGVpZ2h0OiAxNnB4OwogICAgICAgICAgICBpbWcgewogICAgICAgICAgICAgIHdpZHRoOiAxMDAlOwogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgICAub3V0LWluZm8gewogICAgICAgICAgICBtYXJnaW4tbGVmdDogMTBweDsKICAgICAgICAgICAgd2lkdGg6IDc5cHg7CiAgICAgICAgICAgIGhlaWdodDogMjVweDsKICAgICAgICAgICAgZm9udC1zaXplOiAxOXB4OwogICAgICAgICAgICBmb250LXdlaWdodDogYm9sZDsKICAgICAgICAgICAgY29sb3I6ICMwZmViZmY7CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICAgIC5vdXQtcmN0IHsKICAgICAgICAgIGZsb2F0OiBsZWZ0OwogICAgICAgICAgd2lkdGg6IDUwMHB4OwogICAgICAgICAgaGVpZ2h0OiAyMzZweDsKICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDRweDsKICAgICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICMwZmViZmY7CiAgICAgICAgICAub3V0LXJjdC1saXN0IHsKICAgICAgICAgICAgZGlzcGxheTogZmxleDsKICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgICAub3V0LXJlY29yZCB7CiAgICAgICAgICBmbG9hdDogbGVmdDsKICAgICAgICAgIHdpZHRoOiAyNTRweDsKICAgICAgICAgIGhlaWdodDogMjM2cHg7CiAgICAgICAgICBib3JkZXItcmFkaXVzOiA0cHg7CiAgICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjMGZlYmZmOwogICAgICAgICAgLm91dC1yZWNvcmQtdGl0bGUgewogICAgICAgICAgICB3aWR0aDogMjU0cHg7CiAgICAgICAgICAgIGhlaWdodDogNDhweDsKICAgICAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICMwZmViZmY7CiAgICAgICAgICAgIC5pbmZvIHsKICAgICAgICAgICAgICBwYWRkaW5nLWxlZnQ6IDc2cHg7CiAgICAgICAgICAgICAgcGFkZGluZy10b3A6IDEycHg7CiAgICAgICAgICAgICAgd2lkdGg6IDc3cHg7CiAgICAgICAgICAgICAgaGVpZ2h0OiAxOXB4OwogICAgICAgICAgICAgIGZvbnQtc2l6ZTogMTlweDsKICAgICAgICAgICAgICBmb250LXdlaWdodDogNDAwOwogICAgICAgICAgICAgIGNvbG9yOiAjZmZmZmZmOwogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgICAub3V0LXJlY29yZC10aW1lIHsKICAgICAgICAgICAgd2lkdGg6IDI1NHB4OwogICAgICAgICAgICBoZWlnaHQ6IDQwcHg7CiAgICAgICAgICAgIC50aW1lIHsKICAgICAgICAgICAgICBtYXJnaW46IGF1dG87CiAgICAgICAgICAgICAgd2lkdGg6IDE2MHB4OwogICAgICAgICAgICAgIGxpbmUtaGVpZ2h0OiA0MHB4OwogICAgICAgICAgICAgIC5lbC1kYXRlLWVkaXRvci5lbC1pbnB1dCB7CiAgICAgICAgICAgICAgICB3aWR0aDogMTAwJTsKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICAgIC5vdXQtcmVjb3JkLWZvcm0gewogICAgICAgICAgICB3aWR0aDogMjU0cHg7CiAgICAgICAgICAgIGhlaWdodDogMTQ2cHg7CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgfQogIC5yaWdodCB7CiAgICBmbG9hdDogbGVmdDsKICAgIHdpZHRoOiAzNTBweDsKICAgIGhlaWdodDogNTg2cHg7CiAgICAucmlnaHQtbGluZSB7CiAgICAgIHdpZHRoOiAzNTBweDsKICAgICAgaGVpZ2h0OiA1MCU7CiAgICAgIC5yaWdodC1saW5lLXRpdGxlIHsKICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgIG1hcmdpbi1sZWZ0OiAxNnB4OwogICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICAgICAgd2lkdGg6IDMzNHB4OwogICAgICAgIGhlaWdodDogNTZweDsKICAgICAgICAubGluZS1pbWcgewogICAgICAgICAgd2lkdGg6IDI2cHg7CiAgICAgICAgICBoZWlnaHQ6IDE2cHg7CiAgICAgICAgICBpbWcgewogICAgICAgICAgICB3aWR0aDogMTAwJTsKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgLmxpbmUtaW5mbyB7CiAgICAgICAgICBtYXJnaW4tbGVmdDogMTBweDsKICAgICAgICAgIHdpZHRoOiAxMjZweDsKICAgICAgICAgIGhlaWdodDogMjVweDsKICAgICAgICAgIGZvbnQtc2l6ZTogMTlweDsKICAgICAgICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgICAgICAgY29sb3I6ICMwZmViZmY7CiAgICAgICAgfQogICAgICB9CiAgICAgIC5yaWdodC1saW5lLWJvZHkgewogICAgICAgIG1hcmdpbi1sZWZ0OiAxNnB4OwogICAgICAgIHdpZHRoOiAzMzRweDsKICAgICAgICBoZWlnaHQ6IDIzN3B4OwogICAgICB9CiAgICB9CiAgICAucmlnaHQtY291bW4gewogICAgICB3aWR0aDogMzUwcHg7CiAgICAgIGhlaWdodDogNTAlOwogICAgICAucmlnaHQtY291bW4tdGl0bGUgewogICAgICAgIGRpc3BsYXk6IGZsZXg7CiAgICAgICAgbWFyZ2luLWxlZnQ6IDE2cHg7CiAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgICB3aWR0aDogMzM0cHg7CiAgICAgICAgaGVpZ2h0OiA1NnB4OwogICAgICAgIC5jb3Vtbi1pbWcgewogICAgICAgICAgd2lkdGg6IDI2cHg7CiAgICAgICAgICBoZWlnaHQ6IDE2cHg7CiAgICAgICAgICBpbWcgewogICAgICAgICAgICB3aWR0aDogMTAwJTsKICAgICAgICAgIH0KICAgICAgICB9CiAgICAgICAgLmNvdW1uLWluZm8gewogICAgICAgICAgbWFyZ2luLWxlZnQ6IDEwcHg7CiAgICAgICAgICB3aWR0aDogMTI2cHg7CiAgICAgICAgICBoZWlnaHQ6IDI1cHg7CiAgICAgICAgICBmb250LXNpemU6IDE5cHg7CiAgICAgICAgICBmb250LXdlaWdodDogYm9sZDsKICAgICAgICAgIGNvbG9yOiAjMGZlYmZmOwogICAgICAgIH0KICAgICAgfQogICAgICAucmlnaHQtY291bW4tYm9keSB7CiAgICAgICAgbWFyZ2luLWxlZnQ6IDE2cHg7CiAgICAgICAgd2lkdGg6IDMzNHB4OwogICAgICAgIGhlaWdodDogMjM3cHg7CiAgICAgIH0KICAgIH0KICB9CiAgOjp2LWRlZXAgLmVsLXRhYmxlLAogIDo6di1kZWVwIC5lbC10YWJsZV9fZXhwYW5kZWQtY2VsbCB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsKICAgIGJhY2tncm91bmQtY29sb3I6ICMyNDU3OGM7CiAgfQoKICA6OnYtZGVlcCAuZWwtdGFibGUgdGgsCiAgOjp2LWRlZXAgLmVsLXRhYmxlIHRyLAogIDo6di1kZWVwIC5lbC10YWJsZSB0ZCB7CiAgICBjb2xvcjogI2ZmZjsKICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50OwogIH0KCiAgOjp2LWRlZXAgLmVsLXRhYmxlIHRib2R5IHRyOmhvdmVyID4gdGQgewogICAgYmFja2dyb3VuZC1jb2xvcjogc2t5Ymx1ZTsKICB9Cn0K"},{"version":3,"sources":["CarRecord.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuhBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"CarRecord.vue","sourceRoot":"src/components","sourcesContent":["<template>\n <div class=\"car\">\n <!-- 头部区域 -->\n <div class=\"head\">\n <div class=\"head-msg\">\n <img src=\"@/assets/car.svg\" />\n </div>\n <div class=\"head-info\">车辆记录</div>\n </div>\n <!-- 左侧区域 -->\n <div class=\"left\">\n <!-- 驶入方向 -->\n <div class=\"left-pass\">\n <div class=\"pass\">\n <div class=\"pass-title\">\n <div class=\"pass-img\">\n <img src=\"@/assets/jiantou.png\" />\n </div>\n <div class=\"pass-info\">驶入方向</div>\n </div>\n <!-- 识别区域 -->\n <div class=\"pass-rct\">\n <el-table\n :data=\"tableData1.slice(0, 2)\"\n border\n style=\"width: 100%\"\n height=\"238\"\n >\n <el-table-column label=\"捕获\" header-align=\"center\" width=\"98\">\n <template slot-scope=\"{ row }\">\n <img :src=\"row.url\" style=\"width: 82px; height: 60px\" />\n </template>\n </el-table-column>\n\n <el-table-column label=\"识别\" header-align=\"center\">\n <template slot-scope=\"{ row }\">\n <div class=\"pass-rct-list\">\n <div>\n <img\n :src=\"row.msg.url\"\n style=\"width: 82px; height: 60px\"\n />\n </div>\n <div>\n <div>姓名:{{ row.msg.name }}</div>\n <div>识别ID:{{ row.msg.id }}</div>\n <div>车牌:{{ row.msg.number }}</div>\n </div>\n <div>\n <div>位置:{{ row.msg.place }}</div>\n <div>时间:{{ row.msg.time }}</div>\n </div>\n </div>\n </template>\n </el-table-column>\n </el-table>\n </div>\n <!-- 历史记录区域 -->\n <div class=\"pass-record\">\n <!-- 标题 -->\n <div class=\"pass-record-title\">\n <div class=\"info\">历史记录</div>\n </div>\n <!-- 时间选择器 -->\n <div class=\"pass-record-time\">\n <div class=\"time\">\n <el-date-picker\n v-model=\"value\"\n type=\"date\"\n size=\"mini\"\n :editable=\"false\"\n placeholder=\"选择日期\"\n >\n </el-date-picker>\n </div>\n </div>\n <!-- 表格数据 -->\n <div class=\"pass-record-form\">\n <el-table :data=\"tableData1\" style=\"width: 100%\" height=\"148\">\n <el-table-column\n prop=\"msg.name\"\n label=\"姓名\"\n align=\"center\"\n width=\"76\"\n >\n </el-table-column>\n <el-table-column\n prop=\"msg.number\"\n label=\"车牌号\"\n align=\"center\"\n width=\"90\"\n >\n </el-table-column>\n <el-table-column label=\"时间\" align=\"center\" width=\"76\">\n <template slot-scope=\"{ row }\">\n {{ row.msg.time.split(\" \")[1] }}\n </template>\n </el-table-column>\n </el-table>\n </div>\n </div>\n </div>\n </div>\n <!-- 驶出方向 -->\n <div class=\"left-out\">\n <div class=\"out\">\n <div class=\"out-title\">\n <div class=\"out-img\">\n <img src=\"@/assets/jiantou.png\" />\n </div>\n <div class=\"out-info\">驶出方向</div>\n </div>\n <!-- 识别区域 -->\n <div class=\"out-rct\">\n <el-table\n :data=\"tableData2.slice(0, 2)\"\n border\n style=\"width: 100%\"\n height=\"238\"\n >\n <el-table-column label=\"捕获\" width=\"98\" header-align=\"center\">\n <template slot-scope=\"{ row }\">\n <img :src=\"row.url\" style=\"width: 82px; height: 60px\" />\n </template>\n </el-table-column>\n\n <el-table-column label=\"识别\" header-align=\"center\">\n <template slot-scope=\"{ row }\">\n <div class=\"out-rct-list\">\n <div>\n <img\n :src=\"row.msg.url\"\n style=\"width: 82px; height: 60px\"\n />\n </div>\n <div>\n <div>姓名:{{ row.msg.name }}</div>\n <div>识别ID:{{ row.msg.id }}</div>\n\n <div>车牌:{{ row.msg.number }}</div>\n </div>\n <div>\n <div>位置:{{ row.msg.place }}</div>\n <div>时间:{{ row.msg.time }}</div>\n </div>\n </div>\n </template>\n </el-table-column>\n </el-table>\n </div>\n <!-- 历史记录区域 -->\n <div class=\"out-record\">\n <!-- 标题 -->\n <div class=\"out-record-title\">\n <div class=\"info\">历史记录</div>\n </div>\n <!-- 时间选择器 -->\n <div class=\"out-record-time\">\n <div class=\"time\">\n <el-date-picker\n v-model=\"value\"\n type=\"date\"\n size=\"mini\"\n :editable=\"false\"\n placeholder=\"选择日期\"\n >\n </el-date-picker>\n </div>\n </div>\n <!-- 表格数据 -->\n <div class=\"out-record-form\">\n <el-table :data=\"tableData2\" style=\"width: 100%\" height=\"146\">\n <el-table-column\n prop=\"msg.name\"\n label=\"姓名\"\n align=\"center\"\n width=\"76\"\n >\n </el-table-column>\n <el-table-column\n prop=\"msg.number\"\n label=\"车牌号\"\n align=\"center\"\n width=\"90\"\n >\n </el-table-column>\n <el-table-column label=\"时间\" align=\"center\" width=\"76\">\n <template slot-scope=\"{ row }\">\n {{ row.msg.time.split(\" \")[1] }}\n </template>\n </el-table-column>\n </el-table>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!-- 右侧区域 -->\n <div class=\"right\">\n <!-- 折线图区域 -->\n <div class=\"right-line\">\n <!-- 折线图标题 -->\n <div class=\"right-line-title\">\n <div class=\"line-img\">\n <img src=\"@/assets/jiantou.png\" />\n </div>\n <div class=\"line-info\">24小时车流量</div>\n </div>\n <!-- 折线图 -->\n <div class=\"right-line-body\" id=\"line\"></div>\n </div>\n <!-- 柱状图区域 -->\n <div class=\"right-coumn\">\n <!-- 柱状图标题 -->\n <div class=\"right-coumn-title\">\n <div class=\"coumn-img\">\n <img src=\"@/assets/jiantou.png\" />\n </div>\n <div class=\"coumn-info\">车牌来源地</div>\n </div>\n <!-- 柱状图 -->\n <div class=\"right-coumn-body\" id=\"coumn\"></div>\n </div>\n </div>\n </div>\n</template>\n\n<script>\n// 引入echarts\nimport * as echarts from \"echarts\";\n\nexport default {\n name: \"HelloWorld\",\n data() {\n return {\n // 时间选择器绑定的值\n value: \"\",\n // 驶入方向的车辆数据\n tableData1: [\n {\n url: \"https://img1.baidu.com/it/u=402105144,1124774539&fm=26&fmt=auto\",\n msg: {\n url: \"https://img0.baidu.com/it/u=3538708005,999399332&fm=26&fmt=auto\",\n id: \"42938\",\n time: \"2018-12-23 14:32:26\",\n name: \"王力宏啊\",\n place: \"1号机动车出口\",\n number: \"赣BU2569\",\n },\n },\n {\n url: \"https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto\",\n msg: {\n url: \"https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto\",\n id: \"42938\",\n time: \"2018-12-23 14:32:26\",\n name: \"吴亦凡\",\n place: \"1号机动车出口\",\n number: \"赣BU2569\",\n },\n },\n {\n url: \"https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto\",\n msg: {\n url: \"https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto\",\n id: \"42938\",\n time: \"2018-12-23 14:32:26\",\n name: \"吴亦凡\",\n place: \"1号机动车出口\",\n number: \"赣BU2569\",\n },\n },\n {\n url: \"https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto\",\n msg: {\n url: \"https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto\",\n id: \"42938\",\n time: \"2018-12-23 14:32:26\",\n name: \"吴亦凡\",\n place: \"1号机动车出口\",\n number: \"赣BU2569\",\n },\n },\n ],\n // 驶出方向的车辆数据\n tableData2: [\n {\n url: \"https://img0.baidu.com/it/u=3742738195,2894035218&fm=26&fmt=auto\",\n msg: {\n url: \"https://img1.baidu.com/it/u=2105880329,624276725&fm=26&fmt=auto\",\n id: \"42938\",\n time: \"2018-12-23 14:32:26\",\n name: \"王力宏\",\n place: \"1号机动车出口\",\n number: \"赣AU2569\",\n },\n },\n {\n url: \"https://img1.baidu.com/it/u=3720004635,3309907980&fm=26&fmt=auto\",\n msg: {\n url: \"https://img0.baidu.com/it/u=1445205160,2910306440&fm=26&fmt=auto\",\n id: \"42938\",\n time: \"2018-12-23 14:32:26\",\n name: \"吴亦凡\",\n place: \"1号机动车出口\",\n number: \"赣BU2589\",\n },\n },\n {\n url: \"https://img1.baidu.com/it/u=3720004635,3309907980&fm=26&fmt=auto\",\n msg: {\n url: \"https://img0.baidu.com/it/u=1445205160,2910306440&fm=26&fmt=auto\",\n id: \"42938\",\n time: \"2018-12-23 14:32:26\",\n name: \"吴亦凡\",\n place: \"1号机动车出口\",\n number: \"赣BU2589\",\n },\n },\n {\n url: \"https://img1.baidu.com/it/u=3720004635,3309907980&fm=26&fmt=auto\",\n msg: {\n url: \"https://img0.baidu.com/it/u=1445205160,2910306440&fm=26&fmt=auto\",\n id: \"42938\",\n time: \"2018-12-23 14:32:26\",\n name: \"吴亦凡\",\n place: \"1号机动车出口\",\n number: \"赣BU2589\",\n },\n },\n ],\n // 折线图表配置\n lineOption: {\n tooltip: {\n trigger: \"axis\",\n },\n legend: {\n data: [\"教师\", \"物业\", \"其他\"],\n textStyle: {\n color: \"#fff\",\n },\n },\n grid: {\n left: \"3%\",\n right: \"4%\",\n bottom: \"3%\",\n containLabel: true,\n },\n xAxis: {\n type: \"category\",\n boundaryGap: false,\n data: [0, 4, 8, 12, 16, 20, 24],\n axisLine: {\n lineStyle: {\n color: \"#0febff\",\n },\n },\n axisLabel: {\n color: \"#fff\",\n },\n splitLine: {\n show: true,\n lineStyle: {\n width: 1,\n color: \"#0febff\",\n },\n },\n },\n yAxis: {\n type: \"value\",\n axisLabel: {\n formatter: \"{value}\",\n\n color: \"#fff\",\n },\n splitLine: {\n show: true,\n lineStyle: {\n width: 1,\n color: \"#0febff\",\n },\n },\n },\n series: [\n {\n name: \"教师\",\n type: \"line\",\n data: [120, 132, 101, 134, 90, 230, 210],\n //设定为实心点\n symbol: \"circle\",\n //设定实心点的大小\n symbolSize: 10,\n //是否显示数值\n // label: { show: true },\n },\n {\n name: \"物业\",\n type: \"line\",\n data: [220, 182, 191, 234, 290, 330, 310],\n symbol: \"circle\",\n symbolSize: 10,\n // label: { show: true },\n },\n {\n name: \"其他\",\n type: \"line\",\n data: [150, 232, 201, 154, 190, 330, 410],\n symbol: \"circle\",\n symbolSize: 10,\n // label: { show: true },\n },\n ],\n },\n // 柱状图表配置\n coumnOption: {\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"shadow\",\n },\n },\n grid: {\n left: \"3%\",\n right: \"4%\",\n bottom: \"3%\",\n top: \"3%\",\n containLabel: true,\n },\n xAxis: [\n {\n type: \"category\",\n data: [\"南昌\", \"赣州\", \"宜春\", \"上饶\", \"九江\"],\n axisTick: {\n alignWithLabel: true,\n },\n axisLine: {\n lineStyle: {\n color: \"#0febff\",\n },\n },\n axisLabel: {\n color: \"#fff\",\n },\n splitLine: {\n show: true,\n lineStyle: {\n width: 1,\n color: \"#0febff\",\n },\n },\n },\n ],\n yAxis: {\n type: \"value\",\n axisLabel: {\n formatter: \"{value}\",\n\n color: \"#fff\",\n },\n splitLine: {\n show: true,\n lineStyle: {\n width: 1,\n color: \"#0febff\",\n },\n },\n },\n\n series: [\n {\n name: \"数量\",\n type: \"bar\",\n barWidth: \"60%\",\n data: [101, 52, 35, 44, 50],\n itemStyle: {\n label: {\n show: true, //开启显示\n position: \"top\", //在上方显示\n textStyle: {\n //数值样式\n color: \"#fff\",\n },\n },\n },\n },\n ],\n },\n };\n },\n mounted() {\n // 初始化图表\n this.getEchartLine();\n this.getEchartCoumn();\n this.getTableData1();\n // this.getTableData2();\n },\n methods: {\n // 创建折线图表\n getEchartLine() {\n var chartLineDom = document.getElementById(\"line\");\n var myLineChart = echarts.init(chartLineDom);\n myLineChart.setOption(this.lineOption);\n },\n // 创建柱状图表\n getEchartCoumn() {\n var chartCoumnDom = document.getElementById(\"coumn\");\n var myCoumnChart = echarts.init(chartCoumnDom);\n myCoumnChart.setOption(this.coumnOption);\n },\n // 获取驶入方向的车辆数据\n getTableData1() {\n this.$axios({\n url: \"/car-record-api/ncjtEntranceGuard/getTrafficRecordViewPageList\",\n method: \"get\",\n data: {\n page: \"1\",\n limit: \"999\",\n },\n })\n .then((res) => {\n console.log(res);\n })\n .catch((error) => {\n console.log(error);\n });\n },\n // 获取驶出方向的车辆数据\n // getTableData2() {\n // console.log(2);\n // },\n },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.car {\n box-sizing: border-box;\n margin: auto;\n width: 1133px;\n height: 642px;\n background-color: #24578c;\n .head {\n display: flex;\n width: 1133px;\n height: 55px;\n border-bottom: 1px solid #58beff;\n .head-msg {\n display: flex;\n justify-content: center;\n width: 58px;\n height: 55px;\n img {\n width: 35px;\n }\n }\n .head-info {\n line-height: 55px;\n font-size: 25px;\n font-weight: bold;\n color: #fff;\n }\n }\n .left {\n display: flex;\n flex-wrap: wrap;\n float: left;\n width: 783px;\n height: 586px;\n .left-pass {\n width: 783px;\n height: 292px;\n .pass {\n margin-left: 27px;\n width: 758px;\n height: 294px;\n .pass-title {\n display: flex;\n align-items: center;\n width: 753px;\n height: 54px;\n border-bottom: 1px solid #58beff;\n .pass-img {\n width: 26px;\n height: 16px;\n img {\n width: 100%;\n }\n }\n .pass-info {\n margin-left: 10px;\n width: 79px;\n height: 25px;\n font-size: 19px;\n font-weight: bold;\n color: #0febff;\n }\n }\n .pass-rct {\n float: left;\n width: 500px;\n height: 236px;\n border-radius: 4px;\n border: 1px solid #0febff;\n .pass-rct-list {\n display: flex;\n justify-content: space-between;\n }\n }\n .pass-record {\n float: left;\n width: 254px;\n height: 236px;\n border-radius: 4px;\n border: 1px solid #0febff;\n .pass-record-title {\n width: 254px;\n height: 48px;\n border-bottom: 1px solid #0febff;\n .info {\n padding-left: 76px;\n padding-top: 12px;\n width: 77px;\n height: 19px;\n font-size: 19px;\n font-weight: 400;\n color: #ffffff;\n }\n }\n .pass-record-time {\n width: 254px;\n height: 40px;\n .time {\n margin: auto;\n width: 160px;\n line-height: 40px;\n .el-date-editor.el-input {\n width: 100%;\n }\n }\n }\n .pass-record-form {\n width: 254px;\n height: 146px;\n }\n }\n }\n }\n .left-out {\n width: 783px;\n height: 292px;\n .out {\n margin-left: 27px;\n width: 758px;\n height: 294px;\n .out-title {\n display: flex;\n align-items: center;\n width: 753px;\n height: 54px;\n border-bottom: 1px solid #58beff;\n .out-img {\n width: 26px;\n height: 16px;\n img {\n width: 100%;\n }\n }\n .out-info {\n margin-left: 10px;\n width: 79px;\n height: 25px;\n font-size: 19px;\n font-weight: bold;\n color: #0febff;\n }\n }\n .out-rct {\n float: left;\n width: 500px;\n height: 236px;\n border-radius: 4px;\n border: 1px solid #0febff;\n .out-rct-list {\n display: flex;\n justify-content: space-between;\n }\n }\n .out-record {\n float: left;\n width: 254px;\n height: 236px;\n border-radius: 4px;\n border: 1px solid #0febff;\n .out-record-title {\n width: 254px;\n height: 48px;\n border-bottom: 1px solid #0febff;\n .info {\n padding-left: 76px;\n padding-top: 12px;\n width: 77px;\n height: 19px;\n font-size: 19px;\n font-weight: 400;\n color: #ffffff;\n }\n }\n .out-record-time {\n width: 254px;\n height: 40px;\n .time {\n margin: auto;\n width: 160px;\n line-height: 40px;\n .el-date-editor.el-input {\n width: 100%;\n }\n }\n }\n .out-record-form {\n width: 254px;\n height: 146px;\n }\n }\n }\n }\n }\n .right {\n float: left;\n width: 350px;\n height: 586px;\n .right-line {\n width: 350px;\n height: 50%;\n .right-line-title {\n display: flex;\n margin-left: 16px;\n align-items: center;\n width: 334px;\n height: 56px;\n .line-img {\n width: 26px;\n height: 16px;\n img {\n width: 100%;\n }\n }\n .line-info {\n margin-left: 10px;\n width: 126px;\n height: 25px;\n font-size: 19px;\n font-weight: bold;\n color: #0febff;\n }\n }\n .right-line-body {\n margin-left: 16px;\n width: 334px;\n height: 237px;\n }\n }\n .right-coumn {\n width: 350px;\n height: 50%;\n .right-coumn-title {\n display: flex;\n margin-left: 16px;\n align-items: center;\n width: 334px;\n height: 56px;\n .coumn-img {\n width: 26px;\n height: 16px;\n img {\n width: 100%;\n }\n }\n .coumn-info {\n margin-left: 10px;\n width: 126px;\n height: 25px;\n font-size: 19px;\n font-weight: bold;\n color: #0febff;\n }\n }\n .right-coumn-body {\n margin-left: 16px;\n width: 334px;\n height: 237px;\n }\n }\n }\n ::v-deep .el-table,\n ::v-deep .el-table__expanded-cell {\n background-color: transparent;\n background-color: #24578c;\n }\n\n ::v-deep .el-table th,\n ::v-deep .el-table tr,\n ::v-deep .el-table td {\n color: #fff;\n background-color: transparent;\n }\n\n ::v-deep .el-table tbody tr:hover > td {\n background-color: skyblue;\n }\n}\n</style>\n"]}]}
|
