123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240 |
- <template>
- <div class="menu-content">
- <div class="container">
- <div class="gradient-text title">两客一危一重货</div>
- <div class="box-left">
- <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @input="initData">
- <template #prefix>
- <el-icon class="el-input__icon"><search /></el-icon>
- </template>
- </el-input>
- <div class="btn" @click="handleCancel">取消</div>
- </div>
- </div>
- <div class="custom-table">
- <div class="th">
- <div class="td">车牌号</div>
- <div class="td">报警标识</div>
- <div class="td">车辆类型</div>
- <div class="td">GPS定位时间</div>
- <div class="td" style="width: 330px; flex: unset">操作</div>
- </div>
- <div class="table-content">
- <div v-for="(item, index) in dataList" :key="item.id" class="tr">
- <div class="td">{{ item.vehicle_no }}</div>
- <div class="td">
- <dict-tag :options="alarm_identification" :value="item.alarm_flag" />
- </div>
- <div class="td">
- <dict-tag :options="car_type" :value="item.vehicle_type" />
- </div>
- <div class="td">{{ parseTime(item.gpsDate) }}</div>
- <div class="td" style="width: 330px; flex: unset">
- <div class="text" @click="handleConnect(index, item)">连线</div>
- <div class="text" @click="handleCollaborate(index, item)">协同</div>
- <div class="text" @click="handleTrack(item)">轨迹</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import { Search } from '@element-plus/icons-vue';
- import { getVehicleList, getVehicleTrajectory } from '@/api/globalMap/KeyVehicles';
- import { onMounted, reactive, inject } from 'vue';
- import { parseTime } from '@/utils/ruoyi';
- const AMapType = ['vectorgraph', 'satellite'];
- const initDataToPlay = inject('initDataToPlay');
- const { proxy } = getCurrentInstance() as ComponentInternalInstance;
- const { car_type, alarm_identification } = toRefs<any>(proxy?.useDict('car_type', 'alarm_identification'));
- const props = defineProps({
- activeMap: String
- });
- // 数据列表,直接定义为数组
- const dataList = reactive([]);
- //入参
- const queryParams = reactive({
- keywords: ''
- });
- const vehicleTypeMap = {
- 0: '空车',
- 1: '重车',
- 2: '过境车'
- };
- //调接口
- const initData = () => {
- getVehicleList({
- query: {
- keywords: queryParams.keywords
- }
- }).then((res) => {
- if (res.code === 0 && Array.isArray(res.rows)) {
- dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容,保持响应性
- } else {
- console.error('Invalid response from server:', res);
- // 可以选择清空数据列表或显示错误消息
- dataList.splice(0, dataList.length); // 清空数据列表
- }
- });
- };
- // 取消按钮的逻辑,搜索框清空并重新加载数据
- const handleCancel = () => {
- queryParams.keywords = '';
- initData();
- };
- const handleConnect = () => {};
- const handleCollaborate = () => {};
- // const showDetail = inject('showDetail');
- // const handleShowDialog = (item) => {
- // location.value = [item.lng, item.lat];
- // showDetail(item, 30);
- // };
- // 轨迹
- const handleTrack = (item) => {
- getVehicleTrajectory(item.vehicle_no).then((res) => {
- const trajectory = [];
- res.data.list.forEach((item) => {
- trajectory.push({
- time: !!item.gpsDate ? parseTime(item.gpsDate, '{h}:{i}') : '',
- lnglat: [item.lng, item.lat]
- });
- });
- initDataToPlay({ type: 'track', data: trajectory });
- });
- };
- //调用函数
- onMounted(() => {
- initData();
- });
- </script>
- <style lang="scss" scoped>
- .menu-content {
- width: 1579px;
- height: 1394px;
- background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
- padding: 130px 20px 20px 20px;
- font-size: 36px;
- position: relative;
- color: #ffffff;
- }
- .title {
- font-size: 60px;
- position: absolute;
- top: 30px;
- left: 160px;
- }
- .box-left {
- display: flex;
- margin-top: 30px;
- margin-bottom: 20px;
- .btn {
- width: 140px;
- min-width: 140px;
- height: 60px;
- background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- margin-left: 20px;
- color: #ffffff;
- font-size: 32px;
- }
- }
- .custom-input {
- height: 60px;
- line-height: 40px;
- }
- .custom-table {
- width: 100%;
- height: 1030px;
- overflow-y: auto;
- overflow-x: hidden;
- .table-content {
- height: 880px;
- overflow-y: auto;
- overflow-x: hidden;
- }
- .th {
- width: 100%;
- height: 151px;
- background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
- background-size: 100% 100%;
- display: flex;
- }
- .tr {
- width: 100%;
- height: 139px;
- background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
- background-size: 100% 100%;
- display: flex;
- padding-right: 20px;
- &:hover {
- background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- .td {
- flex: 1;
- color: #edfaff;
- font-size: 38px;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- }
- .td-text {
- /* 设置字体透明 */
- color: transparent;
- /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
- -webkit-background-clip: text;
- /* 非Webkit内核浏览器需要使用标准前缀 */
- background-clip: text;
- font-family: 'YouSheBiaoTiHei';
- /* 设置线性渐变,从红色渐变到蓝色 */
- background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
- font-size: 48px;
- }
- .text-green {
- background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
- }
- .text-danger {
- background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
- }
- }
- .text {
- font-size: 38px;
- color: #00e8ff;
- margin-right: 20px;
- &:last-child {
- margin-right: 0;
- }
- }
- .flex-container {
- display: flex;
- justify-content: space-between; /* 左右两端对齐 */
- align-items: center; /* 垂直居中对齐 */
- }
- .text-item {
- font-size: 32px; /* 根据需要设置字体大小 */
- line-height: 1; /* 确保行高一致 */
- }
- .button-item {
- font-size: 32px; /* 根据需要设置字体大小 */
- line-height: 1; /* 确保行高一致 */
- }
- </style>
|