Merge remote-tracking branch 'origin/master'
| | |
| | | method: 'get', |
| | | }); |
| | | }; |
| | | |
| | | // 历史巡检任务列表 |
| | | export const getBeforeJob = (data) => { |
| | | return request({ |
| | | url: 'drone-device-core/wayline/waylineJobInfo/beforeJob', |
| | | method: 'post', |
| | | data |
| | | }); |
| | | }; |
| | | // 当前巡检任务列表 |
| | | export const getTodayJob = (data) => { |
| | | return request({ |
| | | url: 'drone-device-core/wayline/waylineJobInfo/todayJob', |
| | | method: 'post', |
| | | data |
| | | }); |
| | | }; |
| | | |
| | | // 巡检任务详情 柱状图 |
| | | export const jobNumBar = (data) => { |
| | | return request({ |
| | | url: 'drone-device-core/wayline/waylineJobInfo/jobNumBar', |
| | | method: 'post', |
| | | data |
| | | }); |
| | | }; |
| | | // 巡检任务详情 饼图 |
| | | export const industryJobNumPieChart = (data) => { |
| | | return request({ |
| | | url: '/drone-device-core/wayline/waylineJobInfo/industryJobNumPieChart', |
| | | method: 'post', |
| | | data |
| | | }); |
| | | }; |
| | | |
| | |
| | | params, |
| | | }); |
| | | }; |
| | | // 机巢数据 |
| | | export const getFlightStatistics = (dockSn) => { |
| | | return request({ |
| | | url: `drone-device-core/manage/api/v1/devices/getFlightStatistics?dockSn=${dockSn}`, |
| | | method: 'get', |
| | | params: {}, |
| | | }); |
| | | }; |
| | |
| | | <template> |
| | | <div class="login-index" @keyup.enter="handleLogin"> |
| | | <div class="login-container" @keyup.enter="handleLogin"> |
| | | <div class="login-header"> |
| | | <div class="title">中图智飞低空智能感知网平台</div> |
| | | </div> |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .login-index { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: url('@/assets/images/login/bg.png') no-repeat center / 100% 100%; |
| | | .login-header { |
| | | background: url('@/assets/images/login/big-title.png') no-repeat center / 100% 100%; |
| | | width: 100%; |
| | | height: 102px; |
| | | position: relative; |
| | | .title { |
| | | position: absolute; |
| | | left: 637px; |
| | | top: 22px; |
| | | width: 646px; |
| | | height: 58px; |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | font-weight: 400; |
| | | font-size: 54px; |
| | | line-height: 58px; |
| | | // text-shadow: 0px 2px 6px #0C3D79; |
| | | text-align: center; |
| | | font-style: normal; |
| | | text-transform: none; |
| | | color: #fff; |
| | | // background: linear-gradient(90deg, #FFFFFF 0%, #B2D5FF 100%); |
| | | } |
| | | } |
| | | .login-left-title { |
| | | position: absolute; |
| | | left: 147px; |
| | | top: 263px; |
| | | width: 926px; |
| | | height: 42px; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: bold; |
| | | font-size: 28px; |
| | | line-height: 33px; |
| | | letter-spacing: 30px; |
| | | // text-shadow: 0px 4px 6px rgba(0,0,0,0.72); |
| | | color: #fff; |
| | | text-align: center; |
| | | font-style: normal; |
| | | text-transform: none; |
| | | // background: linear-gradient(90.00000000000004deg, #FFFFFF 0%, #E3FEFF 63%, #88BAFF 100%); |
| | | } |
| | | .login-left { |
| | | position: absolute; |
| | | top: 334px; |
| | | left: 147px; |
| | | width: 858px; |
| | | height: 540px; |
| | | background: url('@/assets/images/login/left-logo.png') no-repeat center / 100% 100%; |
| | | } |
| | | // .login-index { |
| | | // position: relative; |
| | | // width: 100%; |
| | | // height: 100%; |
| | | // background: url('@/assets/images/login/bg.png') no-repeat center / 100% 100%; |
| | | // .login-header { |
| | | // background: url('@/assets/images/login/big-title.png') no-repeat center / 100% 100%; |
| | | // width: 100%; |
| | | // height: 102px; |
| | | // position: relative; |
| | | // .title { |
| | | // position: absolute; |
| | | // left: 637px; |
| | | // top: 22px; |
| | | // width: 646px; |
| | | // height: 58px; |
| | | // font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | // font-weight: 400; |
| | | // font-size: 54px; |
| | | // line-height: 58px; |
| | | // // text-shadow: 0px 2px 6px #0C3D79; |
| | | // text-align: center; |
| | | // font-style: normal; |
| | | // text-transform: none; |
| | | // color: #fff; |
| | | // // background: linear-gradient(90deg, #FFFFFF 0%, #B2D5FF 100%); |
| | | // } |
| | | // } |
| | | // .login-left-title { |
| | | // position: absolute; |
| | | // left: 147px; |
| | | // top: 263px; |
| | | // width: 926px; |
| | | // height: 42px; |
| | | // font-family: Source Han Sans CN, Source Han Sans CN; |
| | | // font-weight: bold; |
| | | // font-size: 28px; |
| | | // line-height: 33px; |
| | | // letter-spacing: 30px; |
| | | // // text-shadow: 0px 4px 6px rgba(0,0,0,0.72); |
| | | // color: #fff; |
| | | // text-align: center; |
| | | // font-style: normal; |
| | | // text-transform: none; |
| | | // // background: linear-gradient(90.00000000000004deg, #FFFFFF 0%, #E3FEFF 63%, #88BAFF 100%); |
| | | // } |
| | | // .login-left { |
| | | // position: absolute; |
| | | // top: 334px; |
| | | // left: 147px; |
| | | // width: 858px; |
| | | // height: 540px; |
| | | // background: url('@/assets/images/login/left-logo.png') no-repeat center / 100% 100%; |
| | | // } |
| | | |
| | | .login-right { |
| | | position: absolute; |
| | | top: 305px; |
| | | right: 291px; |
| | | width: 488px; |
| | | height: 508px; |
| | | background: url('@/assets/images/login/right-login-info.png') no-repeat center / 100% 100%; |
| | | .user-login { |
| | | position: absolute; |
| | | top: 72px; |
| | | left: 180px; |
| | | width: 118px; |
| | | height: 26px; |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | font-weight: 400; |
| | | font-size: 32px; |
| | | // color: #D1E0F9; |
| | | color: #fff; |
| | | line-height: 26px; |
| | | text-align: center; |
| | | } |
| | | .username { |
| | | position: absolute; |
| | | top: 127px; |
| | | left: 46px; |
| | | width: 394px; |
| | | height: 72px; |
| | | background: url('../assets/images/login/username.png') no-repeat center / 100% 100%; |
| | | // :deep(.el-form-item) { |
| | | // width: 120px; |
| | | // } |
| | | } |
| | | .password { |
| | | position: absolute; |
| | | top: 208px; |
| | | left: 46px; |
| | | width: 394px; |
| | | height: 72px; |
| | | background: url('../assets/images/login/password.png') no-repeat center / 100% 100%; |
| | | } |
| | | .forgot-password { |
| | | position: absolute; |
| | | width: 64px; |
| | | height: 24px; |
| | | top: 289px; |
| | | right: 58px; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 500; |
| | | font-size: 16px; |
| | | color: #D1E0F9; |
| | | line-height: 19px; |
| | | } |
| | | .login-click { |
| | | position: absolute; |
| | | bottom: 106px; |
| | | left: 44px; |
| | | width: 391px; |
| | | height: 61px; |
| | | background: url('../assets/images/login/login-btn.png') no-repeat center / 100% 100%; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 500; |
| | | font-size: 24px; |
| | | line-height: 50px; |
| | | text-align: center; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | // .login-right { |
| | | // position: absolute; |
| | | // top: 305px; |
| | | // right: 291px; |
| | | // width: 488px; |
| | | // height: 508px; |
| | | // background: url('@/assets/images/login/right-login-info.png') no-repeat center / 100% 100%; |
| | | // .user-login { |
| | | // position: absolute; |
| | | // top: 72px; |
| | | // left: 180px; |
| | | // width: 118px; |
| | | // height: 26px; |
| | | // font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | // font-weight: 400; |
| | | // font-size: 32px; |
| | | // // color: #D1E0F9; |
| | | // color: #fff; |
| | | // line-height: 26px; |
| | | // text-align: center; |
| | | // } |
| | | // .username { |
| | | // position: absolute; |
| | | // top: 127px; |
| | | // left: 46px; |
| | | // width: 394px; |
| | | // height: 72px; |
| | | // background: url('../assets/images/login/username.png') no-repeat center / 100% 100%; |
| | | // // :deep(.el-form-item) { |
| | | // // width: 120px; |
| | | // // } |
| | | // } |
| | | // .password { |
| | | // position: absolute; |
| | | // top: 208px; |
| | | // left: 46px; |
| | | // width: 394px; |
| | | // height: 72px; |
| | | // background: url('../assets/images/login/password.png') no-repeat center / 100% 100%; |
| | | // } |
| | | // .forgot-password { |
| | | // position: absolute; |
| | | // width: 64px; |
| | | // height: 24px; |
| | | // top: 289px; |
| | | // right: 58px; |
| | | // font-family: Source Han Sans CN, Source Han Sans CN; |
| | | // font-weight: 500; |
| | | // font-size: 16px; |
| | | // color: #D1E0F9; |
| | | // line-height: 19px; |
| | | // } |
| | | // .login-click { |
| | | // position: absolute; |
| | | // bottom: 106px; |
| | | // left: 44px; |
| | | // width: 391px; |
| | | // height: 61px; |
| | | // background: url('../assets/images/login/login-btn.png') no-repeat center / 100% 100%; |
| | | // font-family: Source Han Sans CN, Source Han Sans CN; |
| | | // font-weight: 500; |
| | | // font-size: 24px; |
| | | // line-height: 50px; |
| | | // text-align: center; |
| | | // color: #fff; |
| | | // } |
| | | // } |
| | | // } |
| | | </style> |
| | |
| | | top: 334px; |
| | | border: 1px solid red; |
| | | left: 147px; |
| | | // img { |
| | | // width: 858px; |
| | | // height: 540px; |
| | | // border: 1px solid yellow; |
| | | // } |
| | | // width: 858px; |
| | | // background: url('../assets/images/login/left-logo.png') no-repeat center / 100% 100%; |
| | | } |
| | | |
| | | .login-right-new { |
| | |
| | | let total = ref(0); |
| | | // 机巢统计 |
| | | let listNum = ref([ |
| | | { name: '执行中', value: 89, color: '#FFA768' }, |
| | | { name: '在线', value: 100, color: '#8EFFAC' }, |
| | | { name: '离线', value: 66, color: '#FFFFFF' }, |
| | | { name: '空闲中', value: 89, color: '#FFA768' }, |
| | | { name: '作业中', value: 100, color: '#8EFFAC' }, |
| | | { name: '离线中', value: 66, color: '#FFFFFF' }, |
| | | // { name: '异常', value: 10, color: '#FF8E8E' }, |
| | | ]); |
| | | // 获取机巢列表 |
| | |
| | | import { pxToRem } from '@/utils/rem'; |
| | | import CommonTitle from '@/components/CommonTitle.vue'; |
| | | import CommonDateTime from '@/components/CommonDateTime.vue'; |
| | | import { jobNumBar, industryJobNumPieChart } from '@/api/home/index.js' |
| | | |
| | | const chartRef = ref(null); |
| | | const pieRef = ref(null); |
| | |
| | | pieChart.resize(); |
| | | }); |
| | | }); |
| | | |
| | | onMounted(() => { |
| | | getMachineData(); |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { getFlightStatistics } from '@/api/home/machineNest.js' |
| | | import { pxToRem } from '@/utils/rem'; |
| | | import CommonTitle from '@/components/CommonTitle.vue'; |
| | | import rwcs from '@/assets/images/signMachineNest/machineLeft/rwcs.png'; |
| | |
| | | { imgurl: sjs, num: 1314, text: '事件数(件)' }, |
| | | { imgurl: jscb, num: 1314, text: '节省成本(万元)' }, |
| | | { imgurl: rwcg, num: 1314, text: '任务成果(个)' }, |
| | | { imgurl: fxlc, num: 1314, text: '飞行里程' }, |
| | | { imgurl: fxlc, num: 1314, text: '飞行里程(公里)' }, |
| | | { imgurl: fxsc, num: 1314, text: '飞行时长' }, |
| | | ]); |
| | | |
| | | // 获取机巢统计数据 |
| | | const getMachineData = () => { |
| | | let dockSn = ref('4TADKCM0010016'); |
| | | getFlightStatistics(dockSn.value).then(res => { |
| | | if (res.data.code !== 0) return; |
| | | const result = res.data.data; |
| | | statisticsList.value[0].num = result.fly_count || 0; |
| | | statisticsList.value[1].num = result.event_count || 0; |
| | | statisticsList.value[2].num = result.min_count || 0; |
| | | statisticsList.value[3].num = result.achievement_count || 0; |
| | | statisticsList.value[4].num = result.flight_mileage || 0; |
| | | statisticsList.value[5].num = result.hour_count || 0; |
| | | }) |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getMachineData(); |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | } |
| | | .num-text { |
| | | .num { |
| | | width: 72px; |
| | | width: 120px; |
| | | height: 24px; |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | font-weight: 400; |
| | |
| | | <div class="search-box"> |
| | | <el-input v-model="searchText" placeholder="请输入搜索内容" class="input-with-select"> |
| | | <template #append> |
| | | <el-button :icon="Search" /> |
| | | <el-button :icon="Search" @click="searchNickName"/> |
| | | </template> |
| | | </el-input> |
| | | </div> |
| | | </div> |
| | | <div class="table-list"> |
| | | <div class="table-list" v-if="tableList.length > 0" |
| | | infinite-scroll-distance="6" |
| | | v-infinite-scroll="loadMore" |
| | | :infinite-scroll-disabled="busy" |
| | | infinite-scroll-immediate="true">> |
| | | <div class="item" v-for="(item,index) in tableList"> |
| | | <div class="left"> |
| | | <div class="left-t"> |
| | | <span>{{ index+1 }}.</span>{{ item.title }} |
| | | <span class="status" :class="item.status==='执行中'?'active':''">{{ item.status }}</span> |
| | | <span>{{ index+1 }}.</span>{{ item.name }} |
| | | <span class="status" :class="item.status===2?'active':''"> |
| | | {{ getStatusText(item.status) }} |
| | | </span> |
| | | </div> |
| | | <div class="left-b"> |
| | | <img src="@/assets/images/signMachineNest/machineRight/date.png" alt="" />{{ item.time }} |
| | | <img src="@/assets/images/signMachineNest/machineRight/name.png" alt="" />{{ item.name }} |
| | | <img src="@/assets/images/signMachineNest/machineRight/date.png" alt="" />{{ item.begin_time }} |
| | | <img src="@/assets/images/signMachineNest/machineRight/name.png" alt="" />{{ item.creator_name || '' }} |
| | | </div> |
| | | </div> |
| | | <div class="right"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-empty class="custom-empty" v-else> |
| | | <template #description> |
| | | <span class="custom-text">暂无数据</span> |
| | | </template> |
| | | </el-empty> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | <script setup> |
| | | import { Search } from '@element-plus/icons-vue'; |
| | | import CommonTitle from '@/components/CommonTitle.vue'; |
| | | import { getBeforeJob, getTodayJob } from '@/api/home/index.js' |
| | | |
| | | const isMore = ref(true); |
| | | // 控制加载状态 |
| | | const busy = ref(false); |
| | | |
| | | let searchText = ref('') |
| | | const tableList = ref([ |
| | | { |
| | | title: '园区巡查-20250313001', |
| | | status: '待执行', |
| | | time: '2025.3.13 19:56', |
| | | name: '陈瑶', |
| | | }, |
| | | { |
| | | title: '园区巡查-20250313002', |
| | | status: '执行中', |
| | | time: '2025.3.13 19:56', |
| | | name: '陈瑶', |
| | | }, |
| | | { |
| | | title: '园区巡查-20250313003', |
| | | status: '已完成', |
| | | time: '2025.3.13 19:56', |
| | | name: '陈瑶', |
| | | }, |
| | | ]); |
| | | const tableList = ref([]); |
| | | |
| | | // 分页 |
| | | const pageParams = ref({ |
| | | current: 1, |
| | | size: 5, |
| | | total: 0 |
| | | }); |
| | | |
| | | // 当前任务和历史任务切换 |
| | | let tabIndex = ref(1); |
| | | const tabClick = (value) => { |
| | | tabIndex.value = value; |
| | | clearData(); |
| | | }; |
| | | |
| | | // 状态文字判断 |
| | | const getStatusText = (status) => { |
| | | switch (status) { |
| | | case 1: |
| | | return '待执行'; |
| | | case 2: |
| | | return '执行中'; |
| | | case 3: |
| | | return '完成'; |
| | | case 4: |
| | | return '取消'; |
| | | case 5: |
| | | return '失败'; |
| | | default: |
| | | return '未知'; |
| | | } |
| | | }; |
| | | |
| | | // 获取历史巡检任务列表 |
| | | const getJobList = async () => { |
| | | const params = { |
| | | area_code: '', |
| | | device_sn: '', |
| | | job_name: searchText.value, |
| | | current: pageParams.value.current, |
| | | size: pageParams.value.size, |
| | | } |
| | | let result = null; |
| | | if (tabIndex.value === 1) { |
| | | result = await getTodayJob(params) |
| | | } else { |
| | | result = await getBeforeJob(params) |
| | | } |
| | | if (result.data.code !== 0) return; |
| | | if (result.data.data.records.length === 0) return (isMore.value = false); |
| | | pageParams.value.current += 1; |
| | | tableList.value = [...tableList.value, ...result.data.data.records]; |
| | | busy.value = false; |
| | | } |
| | | |
| | | // 清除数据 |
| | | const clearData = () => { |
| | | tableList.value = []; |
| | | pageParams.value.current = 1; |
| | | isMore.value = true; |
| | | getJobList(); |
| | | }; |
| | | |
| | | // 加载更多数据 |
| | | const loadMore = async () => { |
| | | busy.value = true; |
| | | if (!isMore.value) return; |
| | | getJobList(); |
| | | }; |
| | | |
| | | // 搜索数据 |
| | | const searchNickName = () => { |
| | | clearData(); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getJobList(); |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | .table-list { |
| | | width: 358px; |
| | | height: 202px; |
| | | overflow: auto; |
| | | &::-webkit-scrollbar { |
| | | width: 0; |
| | | display: none; |
| | | } |
| | | -ms-overflow-style: none; /* IE and Edge */ |
| | | scrollbar-width: none; /* Firefox */ |
| | | .item { |
| | | width: 100%; |
| | | height: 72px; |
| | |
| | | border-radius: 4px 4px 4px 4px; |
| | | border: 1px solid #4CA6FF; |
| | | color: #4CA6FF; |
| | | margin-left: 10px; |
| | | } |
| | | .active { |
| | | border: 1px solid #04F0D1; |
| | |
| | | } |
| | | } |
| | | } |
| | | .custom-empty { |
| | | color: #fff; |
| | | margin: 16px 0; |
| | | padding: 0; |
| | | :deep(.el-empty__image) { |
| | | width: 100px; |
| | | height: 100px; |
| | | } |
| | | } |
| | | } |
| | | </style> |