3 files modified
1 files added
| New file |
| | |
| | | import request from '@/axios'; |
| | | |
| | | // 巡检总任务数量 |
| | | export const getTotalJobNum = () => { |
| | | return request({ |
| | | url: '/drone-device-core/wayline/waylineJobInfo/totalJobNum', |
| | | method: 'get', |
| | | }); |
| | | }; |
| | | |
| | | // 巡检任务item数量 |
| | | export const getJobStatistics = () => { |
| | | return request({ |
| | | url: '/drone-device-core/wayline/waylineJobInfo/jobStatistics', |
| | | method: 'post', |
| | | }); |
| | | }; |
| | |
| | | if (!isURL(config.url) && !config.url.startsWith(baseUrl)) { |
| | | config.url = baseUrl + config.url; |
| | | } |
| | | config.headers['areaCode'] = store.state.user.selectedAreaCode; |
| | | //安全请求header |
| | | config.headers['Blade-Requested-With'] = 'BladeHttpRequest'; |
| | | //headers判断是否需要 |
| | |
| | | import { encrypt } from '@/utils/sm2'; |
| | | import md5 from 'js-md5'; |
| | | |
| | | const userInfoData = getStore({ name: 'userInfo' }) || {} |
| | | const user = { |
| | | state: { |
| | | // 当前选中的请求头 |
| | | selectedAreaCode: userInfoData?.detail?.areaCode || '', |
| | | tenantId: getStore({ name: 'tenantId' }) || '', |
| | | userInfo: getStore({ name: 'userInfo' }) || [], |
| | | userInfo: userInfoData, |
| | | permission: getStore({ name: 'permission' }) || {}, |
| | | roles: [], |
| | | menuId: {}, |
| | |
| | | if (!validatenull(userInfo.oauth_id)) { |
| | | userInfo.oauthId = userInfo.oauth_id; |
| | | } |
| | | userInfo.selectedAreaCode = userInfo?.detail?.areaCode || ''; |
| | | state.userInfo = userInfo; |
| | | } |
| | | setStore({ name: 'userInfo', content: state.userInfo }); |
| | |
| | | <div class="inspection-rask-details"> |
| | | <div class="inspection-num"> |
| | | <div class="total"> |
| | | <div class="value">88</div> |
| | | <div class="value">{{total}}</div> |
| | | <div class="name">总任务数</div> |
| | | </div> |
| | | <div class="status"> |
| | |
| | | import { pxToRem } from '@/utils/rem'; |
| | | import CommonTitle from '@/components/CommonTitle.vue'; |
| | | import CommonDateTime from '@/components/CommonDateTime.vue'; |
| | | import { getJobStatistics, getTotalJobNum } from '@/api/home'; |
| | | |
| | | const list = ref([ |
| | | { name: '计划执行', value: 89, color: '#FFFFFF' }, |
| | |
| | | { name: '已执行', value: 10, color: '#8EFFAC' }, |
| | | { name: '执行失败', value: 10, color: '#FF8E8E' }, |
| | | ]); |
| | | const option = { |
| | | grid: { |
| | | top: '15%', |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | containLabel: true, |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | backgroundColor: 'rgba(0,0,0,0.7)', |
| | | borderColor: '#0070FF', |
| | | borderWidth: 1, |
| | | textStyle: { |
| | | color: '#fff', |
| | | }, |
| | | formatter: '{b}日: {c}次', |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: [ |
| | | '1', |
| | | '2', |
| | | '3', |
| | | '4', |
| | | '5', |
| | | '6', |
| | | '7', |
| | | '8', |
| | | '9', |
| | | '10', |
| | | '11', |
| | | '12', |
| | | '13', |
| | | '14', |
| | | '15', |
| | | '16', |
| | | '17', |
| | | '18', |
| | | '19', |
| | | '20', |
| | | '21', |
| | | '22', |
| | | '23', |
| | | '24', |
| | | '25', |
| | | '26', |
| | | '27', |
| | | '28', |
| | | '29', |
| | | '30', |
| | | ], |
| | | axisLine: { |
| | | show: false, // 隐藏轴线 |
| | | }, |
| | | axisTick: { |
| | | show: true, |
| | | length: 2, |
| | | lineStyle: { |
| | | color: '#ffffff', |
| | | }, |
| | | }, |
| | | axisLabel: { |
| | | color: '#ffffff', |
| | | margin: 8, |
| | | }, |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#ffffff', |
| | | }, |
| | | }, |
| | | axisLabel: { |
| | | color: '#ffffff', |
| | | }, |
| | | splitLine: { |
| | | lineStyle: { |
| | | color: 'rgba(255, 255, 255, 0.1)', |
| | | }, |
| | | }, |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [ |
| | | 10, 15, 8, 20, 12, 18, 15, 22, 16, 19, 14, 17, 21, 13, 16, 18, 15, 20, 17, 22, 19, 16, 14, |
| | | 18, 21, 15, 17, 20, 16, 18, |
| | | ], |
| | | type: 'bar', |
| | | barWidth: '60%', |
| | | itemStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { offset: 0, color: '#1EE7E7' }, |
| | | { offset: 1, color: 'rgba(0, 112, 255, 0.1)' }, |
| | | ]), |
| | | }, |
| | | }, |
| | | ], |
| | | }; |
| | | |
| | | const detailsFun = () => { |
| | | console.log('details'); |
| | | }; |
| | | |
| | | const chartRef = ref(null); |
| | | |
| | | const total = ref(0); |
| | | onMounted(() => { |
| | | getTotalJobNum().then(res => { |
| | | total.value = res.data?.data || 0 |
| | | }) |
| | | getJobStatistics().then(res => { |
| | | |
| | | }) |
| | | const chart = echarts.init(chartRef.value); |
| | | const option = { |
| | | grid: { |
| | | top: '15%', |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | containLabel: true, |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | backgroundColor: 'rgba(0,0,0,0.7)', |
| | | borderColor: '#0070FF', |
| | | borderWidth: 1, |
| | | textStyle: { |
| | | color: '#fff', |
| | | }, |
| | | formatter: '{b}日: {c}次', |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: [ |
| | | '1', |
| | | '2', |
| | | '3', |
| | | '4', |
| | | '5', |
| | | '6', |
| | | '7', |
| | | '8', |
| | | '9', |
| | | '10', |
| | | '11', |
| | | '12', |
| | | '13', |
| | | '14', |
| | | '15', |
| | | '16', |
| | | '17', |
| | | '18', |
| | | '19', |
| | | '20', |
| | | '21', |
| | | '22', |
| | | '23', |
| | | '24', |
| | | '25', |
| | | '26', |
| | | '27', |
| | | '28', |
| | | '29', |
| | | '30', |
| | | ], |
| | | axisLine: { |
| | | show: false, // 隐藏轴线 |
| | | }, |
| | | axisTick: { |
| | | show: true, |
| | | length: 2, |
| | | lineStyle: { |
| | | color: '#ffffff', |
| | | }, |
| | | }, |
| | | axisLabel: { |
| | | color: '#ffffff', |
| | | margin: 8, |
| | | }, |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#ffffff', |
| | | }, |
| | | }, |
| | | axisLabel: { |
| | | color: '#ffffff', |
| | | }, |
| | | splitLine: { |
| | | lineStyle: { |
| | | color: 'rgba(255, 255, 255, 0.1)', |
| | | }, |
| | | }, |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [ |
| | | 10, 15, 8, 20, 12, 18, 15, 22, 16, 19, 14, 17, 21, 13, 16, 18, 15, 20, 17, 22, 19, 16, 14, |
| | | 18, 21, 15, 17, 20, 16, 18, |
| | | ], |
| | | type: 'bar', |
| | | barWidth: '60%', |
| | | itemStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { offset: 0, color: '#1EE7E7' }, |
| | | { offset: 1, color: 'rgba(0, 112, 255, 0.1)' }, |
| | | ]), |
| | | }, |
| | | }, |
| | | ], |
| | | }; |
| | | |
| | | chart.setOption(option); |
| | | |
| | | // 监听窗口大小变化 |
| | | window.addEventListener('resize', () => { |
| | | chart.resize(); |
| | |
| | | font-weight: 500; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | text-align: center; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | line-height: 19px; |
| | | .value { |