KeyVehicles.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <template>
  2. <div class="menu-content">
  3. <div class="container">
  4. <div class="gradient-text title">两客一危一重货</div>
  5. <div class="box-left">
  6. <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @input="initData">
  7. <template #prefix>
  8. <el-icon class="el-input__icon"><search /></el-icon>
  9. </template>
  10. </el-input>
  11. <div class="btn" @click="handleCancel">取消</div>
  12. </div>
  13. </div>
  14. <div class="custom-table">
  15. <div class="th">
  16. <div class="td">车牌号</div>
  17. <div class="td">报警标识</div>
  18. <div class="td">车辆类型</div>
  19. <div class="td">GPS定位时间</div>
  20. <div class="td" style="width: 330px; flex: unset">操作</div>
  21. </div>
  22. <div class="table-content">
  23. <div v-for="(item, index) in dataList" :key="item.id" class="tr">
  24. <div class="td">{{ item.vehicle_no }}</div>
  25. <div class="td">
  26. <dict-tag :options="alarm_identification" :value="item.alarm_flag" />
  27. </div>
  28. <div class="td">
  29. <dict-tag :options="car_type" :value="item.vehicle_type" />
  30. </div>
  31. <div class="td">{{ parseTime(item.gpsDate) }}</div>
  32. <div class="td" style="width: 330px; flex: unset">
  33. <div class="text" @click="handleConnect(index, item)">连线</div>
  34. <div class="text" @click="handleCollaborate(index, item)">协同</div>
  35. <div class="text" @click="handleTrack(item)">轨迹</div>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. </template>
  42. <script setup lang="ts">
  43. import { Search } from '@element-plus/icons-vue';
  44. import { getVehicleList, getVehicleTrajectory } from '@/api/globalMap/KeyVehicles';
  45. import { onMounted, reactive, inject } from 'vue';
  46. import { parseTime } from '@/utils/ruoyi';
  47. const AMapType = ['vectorgraph', 'satellite'];
  48. const initDataToPlay = inject('initDataToPlay');
  49. const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  50. const { car_type, alarm_identification } = toRefs<any>(proxy?.useDict('car_type', 'alarm_identification'));
  51. const props = defineProps({
  52. activeMap: String
  53. });
  54. // 数据列表,直接定义为数组
  55. const dataList = reactive([]);
  56. //入参
  57. const queryParams = reactive({
  58. keywords: ''
  59. });
  60. const vehicleTypeMap = {
  61. 0: '空车',
  62. 1: '重车',
  63. 2: '过境车'
  64. };
  65. //调接口
  66. const initData = () => {
  67. getVehicleList({
  68. query: {
  69. keywords: queryParams.keywords
  70. }
  71. }).then((res) => {
  72. if (res.code === 0 && Array.isArray(res.rows)) {
  73. dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容,保持响应性
  74. } else {
  75. console.error('Invalid response from server:', res);
  76. // 可以选择清空数据列表或显示错误消息
  77. dataList.splice(0, dataList.length); // 清空数据列表
  78. }
  79. });
  80. };
  81. // 取消按钮的逻辑,搜索框清空并重新加载数据
  82. const handleCancel = () => {
  83. queryParams.keywords = '';
  84. initData();
  85. };
  86. const handleConnect = () => {};
  87. const handleCollaborate = () => {};
  88. // const showDetail = inject('showDetail');
  89. // const handleShowDialog = (item) => {
  90. // location.value = [item.lng, item.lat];
  91. // showDetail(item, 30);
  92. // };
  93. // 轨迹
  94. const handleTrack = (item) => {
  95. getVehicleTrajectory(item.vehicle_no).then((res) => {
  96. const trajectory = [];
  97. res.data.list.forEach((item) => {
  98. trajectory.push({
  99. time: !!item.gpsDate ? parseTime(item.gpsDate, '{h}:{i}') : '',
  100. lnglat: [item.lng, item.lat]
  101. });
  102. });
  103. initDataToPlay({ type: 'track', data: trajectory });
  104. });
  105. };
  106. //调用函数
  107. onMounted(() => {
  108. initData();
  109. });
  110. </script>
  111. <style lang="scss" scoped>
  112. .menu-content {
  113. width: 1579px;
  114. height: 1394px;
  115. background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
  116. padding: 130px 20px 20px 20px;
  117. font-size: 36px;
  118. position: relative;
  119. color: #ffffff;
  120. }
  121. .title {
  122. font-size: 60px;
  123. position: absolute;
  124. top: 30px;
  125. left: 160px;
  126. }
  127. .box-left {
  128. display: flex;
  129. margin-top: 30px;
  130. margin-bottom: 20px;
  131. .btn {
  132. width: 140px;
  133. min-width: 140px;
  134. height: 60px;
  135. background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
  136. display: flex;
  137. justify-content: center;
  138. align-items: center;
  139. cursor: pointer;
  140. margin-left: 20px;
  141. color: #ffffff;
  142. font-size: 32px;
  143. }
  144. }
  145. .custom-input {
  146. height: 60px;
  147. line-height: 40px;
  148. }
  149. .custom-table {
  150. width: 100%;
  151. height: 1030px;
  152. overflow-y: auto;
  153. overflow-x: hidden;
  154. .table-content {
  155. height: 880px;
  156. overflow-y: auto;
  157. overflow-x: hidden;
  158. }
  159. .th {
  160. width: 100%;
  161. height: 151px;
  162. background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
  163. background-size: 100% 100%;
  164. display: flex;
  165. }
  166. .tr {
  167. width: 100%;
  168. height: 139px;
  169. background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
  170. background-size: 100% 100%;
  171. display: flex;
  172. padding-right: 20px;
  173. &:hover {
  174. background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
  175. background-size: 100% 100%;
  176. }
  177. }
  178. .td {
  179. flex: 1;
  180. color: #edfaff;
  181. font-size: 38px;
  182. display: flex;
  183. justify-content: center;
  184. align-items: center;
  185. cursor: pointer;
  186. }
  187. .td-text {
  188. /* 设置字体透明 */
  189. color: transparent;
  190. /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
  191. -webkit-background-clip: text;
  192. /* 非Webkit内核浏览器需要使用标准前缀 */
  193. background-clip: text;
  194. font-family: 'YouSheBiaoTiHei';
  195. /* 设置线性渐变,从红色渐变到蓝色 */
  196. background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
  197. font-size: 48px;
  198. }
  199. .text-green {
  200. background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
  201. }
  202. .text-danger {
  203. background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
  204. }
  205. }
  206. .text {
  207. font-size: 38px;
  208. color: #00e8ff;
  209. margin-right: 20px;
  210. &:last-child {
  211. margin-right: 0;
  212. }
  213. }
  214. .flex-container {
  215. display: flex;
  216. justify-content: space-between; /* 左右两端对齐 */
  217. align-items: center; /* 垂直居中对齐 */
  218. }
  219. .text-item {
  220. font-size: 32px; /* 根据需要设置字体大小 */
  221. line-height: 1; /* 确保行高一致 */
  222. }
  223. .button-item {
  224. font-size: 32px; /* 根据需要设置字体大小 */
  225. line-height: 1; /* 确保行高一致 */
  226. }
  227. </style>