| | |
| | | <template> |
| | | <CommonTitle title="事件概况" @Details="details"/> |
| | | <div :style="{ marginLeft: pxToRem(14) }"> |
| | | <div class="eventOverview"> |
| | | <div class="overviewData"> |
| | | <div class="totalBox"> |
| | | <div class="totalNumber">{{ eventTotal }}</div> |
| | | <div class="totalLabel">总事件数</div> |
| | | </div> |
| | | <div class="contentBox"> |
| | | <div class="overviewItem" v-for="item in eventTypeList" :key="item.name"> |
| | | <div class="itemName"><img :src="item.img" alt="" />{{ item.name }}</div> |
| | | <div class="itemValue" :style="{ color: item.color }">{{ item.value }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <CommonDateTime class="dateTime" v-model="timeArr" @change="timeChange" /> |
| | | <CommonTitle title="事件概况" @Details="details" /> |
| | | <div :style="{ marginLeft: pxToRem(14) }"> |
| | | <div class="eventOverview"> |
| | | <div class="overviewData"> |
| | | <div class="totalBox"> |
| | | <div class="totalNumber">{{ eventTotal }}</div> |
| | | <div class="totalLabel">总事件数</div> |
| | | </div> |
| | | <div class="contentBox"> |
| | | <div class="overviewItem" v-for="item in eventTypeList" :key="item.name"> |
| | | <div class="itemName"> |
| | | <img :src="item.img" alt="" /> |
| | | {{ item.name }} |
| | | </div> |
| | | <div class="itemValue" :style="{ color: item.color }">{{ item.value }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <CommonDateTime class="dateTime" v-model="timeArr" @change="timeChange" /> |
| | | |
| | | <el-select |
| | | class="homeRightSelect" |
| | | v-model="params.device_sn" |
| | | placeholder="请选择" |
| | | size="large" |
| | | filterable |
| | | :remote-method="remoteMethod" |
| | | remote-show-suffix |
| | | remote |
| | | clearable |
| | | popper-class="uavHomePopper" |
| | | v-select-load:uavHomePopper="scrollEvent" |
| | | @change="selectChange" |
| | | > |
| | | <el-option |
| | | v-for="item in deviceList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | <div class="completion"> |
| | | <img class="completion-left-img" :src="completionLeft" alt="" /> |
| | | <div class="completion-text">事件类型完成率情况</div> |
| | | <div class="completion-separator"></div> |
| | | <img class="completion-left-img" :src="completionLeft" alt="" /> |
| | | </div> |
| | | <el-select |
| | | :teleported="false" |
| | | class="homeRightSelect ztzf-select" |
| | | v-model="params.device_sn" |
| | | placeholder="请选择" |
| | | size="large" |
| | | filterable |
| | | :remote-method="remoteMethod" |
| | | remote-show-suffix |
| | | remote |
| | | clearable |
| | | popper-class="uavHomePopper" |
| | | v-select-load:uavHomePopper="scrollEvent" |
| | | @change="selectChange" |
| | | > |
| | | <el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | <div class="completion"> |
| | | <img class="completion-left-img" :src="completionLeft" alt="" /> |
| | | <div class="completion-text">事件类型完成率情况</div> |
| | | <div class="completion-separator"></div> |
| | | <img class="completion-left-img" :src="completionLeft" alt="" /> |
| | | </div> |
| | | |
| | | <div class="chart" ref="echartsRef"></div> |
| | | </div> |
| | | </div> |
| | | <div class="chart" ref="echartsRef"></div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script setup> |
| | | import CommonTitle from '@/components/CommonTitle.vue'; |
| | | import overviewImg1 from '@/assets/images/home/homeRight/overview1.png'; |
| | | import overviewImg2 from '@/assets/images/home/homeRight/overview2.png'; |
| | | import overviewImg3 from '@/assets/images/home/homeRight/overview3.png'; |
| | | import overviewImg4 from '@/assets/images/home/homeRight/overview4.png'; |
| | | import overviewImg5 from '@/assets/images/home/homeRight/overview5.png'; |
| | | import overviewImg6 from '@/assets/images/home/homeRight/overview6.png'; |
| | | import completionLeft from '@/assets/images/home/homeRight/completionLeft.png'; |
| | | import * as echarts from 'echarts'; |
| | | import CommonDateTime from '@/components/CommonDateTime.vue'; |
| | | import VSelectLoad from '@/directive/selectLoad'; |
| | | import { getJobEventBrokerLine, getJobEventByStatus, getJobEventTotal } from '@/api/home'; |
| | | import dayjs from 'dayjs'; |
| | | import { selectDevicePage } from '@/api/home/machineNest'; |
| | | import CommonTitle from '@/components/CommonTitle.vue' |
| | | import overviewImg1 from '@/assets/images/home/homeRight/overview1.png' |
| | | import overviewImg2 from '@/assets/images/home/homeRight/overview2.png' |
| | | import overviewImg3 from '@/assets/images/home/homeRight/overview3.png' |
| | | import overviewImg4 from '@/assets/images/home/homeRight/overview4.png' |
| | | import overviewImg5 from '@/assets/images/home/homeRight/overview5.png' |
| | | import overviewImg6 from '@/assets/images/home/homeRight/overview6.png' |
| | | import completionLeft from '@/assets/images/home/homeRight/completionLeft.png' |
| | | import * as echarts from 'echarts' |
| | | import CommonDateTime from '@/components/CommonDateTime.vue' |
| | | import VSelectLoad from '@/directive/selectLoad' |
| | | import { getJobEventBrokerLine, getJobEventByStatus, getJobEventTotal } from '@/api/home' |
| | | import dayjs from 'dayjs' |
| | | import { selectDevicePage } from '@/api/home/machineNest' |
| | | import { useStore } from 'vuex' |
| | | import useEchartsResize from '@/hooks/useEchartsResize' |
| | | |
| | | const echartsOption = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow', |
| | | }, |
| | | }, |
| | | grid: { |
| | | top: '5%', |
| | | left: 0, |
| | | right: 0, |
| | | bottom: 0, |
| | | containLabel: true, |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | axisLabel: { |
| | | rotate: -45, // 旋转角度 |
| | | interval: 0, // 显示所有标签 |
| | | color: '#FFFFFF', |
| | | fontFamily: 'Source Han Sans CN, Source Han Sans CN', |
| | | fontWeight: 400, |
| | | fontSize: 10, |
| | | }, |
| | | data: [], |
| | | }, |
| | | yAxis: [ |
| | | { |
| | | type: 'value', |
| | | axisLabel: { |
| | | interval: 0, // 显示所有标签 |
| | | color: '#FFFFFF', |
| | | fontFamily: 'Source Han Sans CN, Source Han Sans CN', |
| | | fontWeight: 400, |
| | | fontSize: 10, |
| | | }, |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#ffffff', |
| | | }, |
| | | }, |
| | | splitLine: { |
| | | lineStyle: { |
| | | color: 'rgba(255, 255, 255, 0.1)', |
| | | type: 'dashed', // 设置为虚线 |
| | | }, |
| | | }, |
| | | }, |
| | | ], |
| | | series: [], |
| | | }; |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow', |
| | | }, |
| | | }, |
| | | grid: { |
| | | top: '5%', |
| | | left: 0, |
| | | right: 0, |
| | | bottom: 0, |
| | | containLabel: true, |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | axisLabel: { |
| | | rotate: -45, // 旋转角度 |
| | | interval: 0, // 显示所有标签 |
| | | color: '#FFFFFF', |
| | | fontFamily: 'Source Han Sans CN, Source Han Sans CN', |
| | | fontWeight: 400, |
| | | fontSize: 10, |
| | | }, |
| | | data: [], |
| | | }, |
| | | yAxis: [ |
| | | { |
| | | type: 'value', |
| | | axisLabel: { |
| | | interval: 0, // 显示所有标签 |
| | | color: '#FFFFFF', |
| | | fontFamily: 'Source Han Sans CN, Source Han Sans CN', |
| | | fontWeight: 400, |
| | | fontSize: 10, |
| | | }, |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#ffffff', |
| | | }, |
| | | }, |
| | | splitLine: { |
| | | lineStyle: { |
| | | color: 'rgba(255, 255, 255, 0.1)', |
| | | type: 'dashed', // 设置为虚线 |
| | | }, |
| | | }, |
| | | }, |
| | | ], |
| | | series: [], |
| | | } |
| | | |
| | | const eventTypeList = ref([ |
| | | { name: '待审核', value: 0, img: overviewImg1, color: '#8CFEA7', status: '2' }, |
| | | // { name: '待分拨', value: 0, img: overviewImg2, color: '#6FCAFF', status: '1' }, |
| | | { name: '待处理', value: 0, img: overviewImg3, color: '#E36913', status: '0' }, |
| | | { name: '处理中', value: 0, img: overviewImg4, color: '#FFC398', status: '3' }, |
| | | { name: '已完成', value: 0, img: overviewImg5, color: '#AFD9FB', status: '4' }, |
| | | { name: '已完结', value: 0, img: overviewImg6, color: '#11C4FF', status: '5' }, |
| | | ]); |
| | | const seriesObj = {}; |
| | | { name: '待审核', value: 0, img: overviewImg1, color: '#8CFEA7', status: '2' }, |
| | | // { name: '待分拨', value: 0, img: overviewImg2, color: '#6FCAFF', status: '1' }, |
| | | { name: '待处理', value: 0, img: overviewImg3, color: '#E36913', status: '0' }, |
| | | { name: '处理中', value: 0, img: overviewImg4, color: '#FFC398', status: '3' }, |
| | | { name: '已完成', value: 0, img: overviewImg5, color: '#AFD9FB', status: '4' }, |
| | | { name: '已完结', value: 0, img: overviewImg6, color: '#11C4FF', status: '5' }, |
| | | ]) |
| | | const seriesObj = {} |
| | | eventTypeList.value.forEach(item => { |
| | | seriesObj[item.status] = { |
| | | type: 'bar', |
| | | stack: 'Ad', |
| | | emphasis: { |
| | | focus: 'series', |
| | | }, |
| | | name: item.name, |
| | | itemStyle: { color: item.color }, |
| | | data: [], |
| | | }; |
| | | }); |
| | | const echartsRef = ref(null); |
| | | seriesObj[item.status] = { |
| | | type: 'bar', |
| | | stack: 'Ad', |
| | | emphasis: { |
| | | focus: 'series', |
| | | }, |
| | | name: item.name, |
| | | itemStyle: { color: item.color }, |
| | | data: [], |
| | | } |
| | | }) |
| | | const echartsRef = ref(null) |
| | | let { chart } = useEchartsResize(echartsRef) |
| | | const deviceList = ref([]); |
| | | const today = dayjs().format('YYYY-MM-DD'); |
| | | const timeArr = ref([today, today]); |
| | | const deviceList = ref([]) |
| | | const today = dayjs().format('YYYY-MM-DD') |
| | | const timeArr = ref([today, today]) |
| | | const completionRateSeries = { |
| | | name: '完成率', |
| | | type: 'line', |
| | | itemStyle: { |
| | | color: '#0CEBF7', // 设置颜色 |
| | | }, |
| | | lineStyle: { |
| | | width: 2, // 线条宽度 |
| | | type: 'solid', // 线条类型 |
| | | }, |
| | | symbol: 'circle', // 数据点符号 |
| | | symbolSize: 6, // 数据点符号大小 |
| | | emphasis: { |
| | | focus: 'series', |
| | | }, |
| | | data: [], // 示例数据,根据实际完成率计算 |
| | | }; |
| | | name: '完成率', |
| | | type: 'line', |
| | | itemStyle: { |
| | | color: '#0CEBF7', // 设置颜色 |
| | | }, |
| | | lineStyle: { |
| | | width: 2, // 线条宽度 |
| | | type: 'solid', // 线条类型 |
| | | }, |
| | | symbol: 'circle', // 数据点符号 |
| | | symbolSize: 6, // 数据点符号大小 |
| | | emphasis: { |
| | | focus: 'series', |
| | | }, |
| | | data: [], // 示例数据,根据实际完成率计算 |
| | | } |
| | | |
| | | const eventTotal = ref(0); |
| | | let deviceTotal = 0; |
| | | const eventTotal = ref(0) |
| | | let deviceTotal = 0 |
| | | const devicePageParams = ref({ |
| | | current: 1, |
| | | size: 10, |
| | | total: 0, |
| | | nickname: '', |
| | | }); |
| | | current: 1, |
| | | size: 10, |
| | | total: 0, |
| | | nickname: '', |
| | | }) |
| | | const params = ref({ |
| | | date_enum: 'TODAY', |
| | | device_sn: '', |
| | | end_date: undefined, |
| | | start_date: undefined, |
| | | }); |
| | | date_enum: 'TODAY', |
| | | device_sn: '', |
| | | end_date: undefined, |
| | | start_date: undefined, |
| | | }) |
| | | |
| | | const store = useStore() |
| | | const details = () =>{ |
| | | store.commit('setFootActiveIndex',1) |
| | | store.commit('setIsEventOverviewDetail',true) |
| | | const details = () => { |
| | | store.commit('setFootActiveIndex', 1) |
| | | store.commit('setIsEventOverviewDetail', true) |
| | | } |
| | | |
| | | // 远程查询 |
| | | const remoteMethod = nickname => { |
| | | devicePageParams.value.nickname = nickname; |
| | | devicePageParams.value.current = 1; |
| | | devicePageParams.value.size = 10; |
| | | deviceList.value = []; |
| | | getTableList(); |
| | | }; |
| | | devicePageParams.value.nickname = nickname |
| | | devicePageParams.value.current = 1 |
| | | devicePageParams.value.size = 10 |
| | | deviceList.value = [] |
| | | getTableList() |
| | | } |
| | | // 滚动查询 |
| | | const scrollEvent = () => { |
| | | const { current, size } = devicePageParams.value; |
| | | if (current * size < deviceTotal) { |
| | | devicePageParams.value.current = current + 1; |
| | | getTableList(); |
| | | } |
| | | }; |
| | | const { current, size } = devicePageParams.value |
| | | if (current * size < deviceTotal) { |
| | | devicePageParams.value.current = current + 1 |
| | | getTableList() |
| | | } |
| | | } |
| | | // 机巢列表数据 |
| | | const getTableList = async () => { |
| | | const res = await selectDevicePage({ ...devicePageParams.value, type: 1 }); |
| | | const arr = res?.data?.data?.records || []; |
| | | deviceList.value = deviceList.value.concat( |
| | | arr.map(item => ({ |
| | | value: item.device_sn, |
| | | label: item.nickname, |
| | | })) |
| | | ); |
| | | deviceTotal = res?.data?.data?.total || 0; |
| | | }; |
| | | const res = await selectDevicePage({ ...devicePageParams.value, type: 1 }) |
| | | const arr = res?.data?.data?.records || [] |
| | | deviceList.value = deviceList.value.concat( |
| | | arr.map(item => ({ |
| | | value: item.device_sn, |
| | | label: item.nickname, |
| | | })) |
| | | ) |
| | | deviceTotal = res?.data?.data?.total || 0 |
| | | } |
| | | // 下拉变化 |
| | | const selectChange = val => { |
| | | getData(); |
| | | }; |
| | | getData() |
| | | } |
| | | |
| | | // 时间变化 |
| | | const timeChange = (value, date_enum) => { |
| | | params.value = { |
| | | ...params.value, |
| | | date_enum, |
| | | }; |
| | | getData(); |
| | | }; |
| | | params.value = { |
| | | ...params.value, |
| | | date_enum, |
| | | } |
| | | getData() |
| | | } |
| | | |
| | | // 获取柱状图数据 |
| | | const getBarChartData = () => { |
| | | getJobEventBrokerLine(params.value).then(res => { |
| | | const list = res?.data?.data || []; |
| | | echartsOption.xAxis.data = list.map(item => item.name); |
| | | getJobEventBrokerLine(params.value).then(res => { |
| | | const list = res?.data?.data || [] |
| | | echartsOption.xAxis.data = list.map(item => item.name) |
| | | // 赋值前清空数据 |
| | | Object.keys(seriesObj).forEach(key => {seriesObj[key].data = []}) |
| | | list.forEach(item => { |
| | | item.data.forEach((item1, index) => { |
| | | Object.keys(seriesObj).forEach(key => { |
| | | seriesObj[key].data = [] |
| | | }) |
| | | list.forEach(item => { |
| | | item.data.forEach((item1, index) => { |
| | | if (!seriesObj?.[item1.status]) return |
| | | seriesObj[item1.status].data.push(item1.value); |
| | | }); |
| | | }); |
| | | completionRateSeries.data = list.map(item => item.rate); |
| | | echartsOption.series = Object.values(seriesObj); |
| | | echartsOption.series.push(completionRateSeries); |
| | | chart.value.setOption(echartsOption); |
| | | }); |
| | | }; |
| | | seriesObj[item1.status].data.push(item1.value) |
| | | }) |
| | | }) |
| | | completionRateSeries.data = list.map(item => item.rate) |
| | | echartsOption.series = Object.values(seriesObj) |
| | | echartsOption.series.push(completionRateSeries) |
| | | chart.value.setOption(echartsOption) |
| | | }) |
| | | } |
| | | |
| | | // 事件类型数据 |
| | | const getTypeData = () => { |
| | | getJobEventByStatus(params.value).then(res => { |
| | | const resList = res?.data?.data || []; |
| | | resList.forEach(item => { |
| | | eventTypeList.value.forEach(item1 => { |
| | | if (item1.name === item.name) { |
| | | item1.value = item.num; |
| | | } |
| | | }); |
| | | }); |
| | | }); |
| | | }; |
| | | getJobEventByStatus(params.value).then(res => { |
| | | const resList = res?.data?.data || [] |
| | | resList.forEach(item => { |
| | | eventTypeList.value.forEach(item1 => { |
| | | if (item1.name === item.name) { |
| | | item1.value = item.num |
| | | } |
| | | }) |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | // 获取事件概括数据 |
| | | const getData = () => { |
| | | getTypeData(); |
| | | getBarChartData(); |
| | | }; |
| | | getTypeData() |
| | | getBarChartData() |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getJobEventTotal().then(res => { |
| | | eventTotal.value = res?.data?.data || 0; |
| | | }); |
| | | getData(); |
| | | getTableList(); |
| | | }); |
| | | getJobEventTotal().then(res => { |
| | | eventTotal.value = res?.data?.data || 0 |
| | | }) |
| | | getData() |
| | | getTableList() |
| | | }) |
| | | </script> |
| | | <style lang="scss"> |
| | | |
| | | </style> |
| | | <style scoped lang="scss"> |
| | | .homeRightSelect { |
| | | width: 356px; |
| | | width: 356px; |
| | | |
| | | :deep() { |
| | | .el-select__wrapper { |
| | | background: linear-gradient(90deg, #195bad 0%, rgba(25, 91, 173, 0) 100%); |
| | | min-height: 28px; |
| | | height: 28px; |
| | | box-shadow: none; |
| | | border: 1px solid #306fca; |
| | | } |
| | | :deep() { |
| | | .el-select__wrapper { |
| | | background: linear-gradient(90deg, #195bad 0%, rgba(25, 91, 173, 0) 100%); |
| | | min-height: 28px; |
| | | height: 28px; |
| | | box-shadow: none; |
| | | border: 1px solid #306fca; |
| | | } |
| | | |
| | | .el-select__placeholder { |
| | | font-family: Microsoft YaHei, Microsoft YaHei, serif; |
| | | color: #ffffff; |
| | | font-size: 14px; |
| | | } |
| | | } |
| | | .el-select__placeholder { |
| | | font-family: Microsoft YaHei, Microsoft YaHei, serif; |
| | | color: #ffffff; |
| | | font-size: 14px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .eventOverview { |
| | | width: 390px; |
| | | height: 445px; |
| | | background: linear-gradient( |
| | | 270deg, |
| | | #1f3e7a 0%, |
| | | rgba(31, 62, 122, 0.35) 79%, |
| | | rgba(31, 62, 122, 0) 100% |
| | | ); |
| | | border-radius: 0px 0px 0px 0px; |
| | | opacity: 0.85; |
| | | margin: 3px 0 0 0; |
| | | padding-top: 15px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | width: 390px; |
| | | height: 445px; |
| | | background: linear-gradient(270deg, #1f3e7a 0%, rgba(31, 62, 122, 0.35) 79%, rgba(31, 62, 122, 0) 100%); |
| | | border-radius: 0px 0px 0px 0px; |
| | | opacity: 0.85; |
| | | margin: 3px 0 0 0; |
| | | padding-top: 15px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | |
| | | .dateTime { |
| | | width: 356px; |
| | | margin: 15px 0 8px 0; |
| | | } |
| | | .dateTime { |
| | | width: 356px; |
| | | margin: 15px 0 8px 0; |
| | | } |
| | | |
| | | .overviewData { |
| | | width: 360px; |
| | | height: 122px; |
| | | background: url('@/assets/images/home/homeRight/overviewBg.png') no-repeat center / 100% 100%; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding-left: 11px; |
| | | .overviewData { |
| | | width: 360px; |
| | | height: 122px; |
| | | background: url('@/assets/images/home/homeRight/overviewBg.png') no-repeat center / 100% 100%; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding-left: 11px; |
| | | |
| | | .totalBox { |
| | | width: 77px; |
| | | .totalBox { |
| | | width: 77px; |
| | | |
| | | .totalNumber { |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | font-weight: 400; |
| | | font-size: 26px; |
| | | color: #ffffff; |
| | | line-height: 30px; |
| | | text-align: center; |
| | | } |
| | | .totalNumber { |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | font-weight: 400; |
| | | font-size: 26px; |
| | | color: #ffffff; |
| | | line-height: 30px; |
| | | text-align: center; |
| | | } |
| | | |
| | | .totalLabel { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | line-height: 20px; |
| | | text-align: center; |
| | | } |
| | | } |
| | | .totalLabel { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | line-height: 20px; |
| | | text-align: center; |
| | | } |
| | | } |
| | | |
| | | .contentBox { |
| | | width: 246px; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 13px 0; |
| | | font-family: Source Han Sans CN, Source Han Sans CN, serif; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | line-height: 14px; |
| | | .contentBox { |
| | | width: 246px; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 13px 0; |
| | | font-family: Source Han Sans CN, Source Han Sans CN, serif; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | line-height: 14px; |
| | | |
| | | .overviewItem { |
| | | width: calc(100% / 3); |
| | | .overviewItem { |
| | | width: calc(100% / 3); |
| | | |
| | | .itemName { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 6px; |
| | | .itemName { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 6px; |
| | | |
| | | img { |
| | | width: 16px; |
| | | height: 16px; |
| | | } |
| | | } |
| | | img { |
| | | width: 16px; |
| | | height: 16px; |
| | | } |
| | | } |
| | | |
| | | .itemValue { |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif; |
| | | font-weight: 400; |
| | | font-size: 24px; |
| | | line-height: 18px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .itemValue { |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif; |
| | | font-weight: 400; |
| | | font-size: 24px; |
| | | line-height: 18px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .completion { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | width: 356px; |
| | | height: 23px; |
| | | margin-top: 16px; |
| | | .completion { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | width: 356px; |
| | | height: 23px; |
| | | margin-top: 16px; |
| | | |
| | | &--left-img { |
| | | width: 16px; |
| | | height: 16px; |
| | | } |
| | | &--left-img { |
| | | width: 16px; |
| | | height: 16px; |
| | | } |
| | | |
| | | &-text { |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif; |
| | | font-weight: 400; |
| | | font-size: 18px; |
| | | color: #ffffff; |
| | | line-height: 21px; |
| | | } |
| | | &-text { |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif; |
| | | font-weight: 400; |
| | | font-size: 18px; |
| | | color: #ffffff; |
| | | line-height: 21px; |
| | | } |
| | | |
| | | &-separator { |
| | | width: 149px; |
| | | height: 0px; |
| | | border: 1px solid #4ca6ff; |
| | | opacity: 0.2; |
| | | } |
| | | } |
| | | &-separator { |
| | | width: 149px; |
| | | height: 0px; |
| | | border: 1px solid #4ca6ff; |
| | | opacity: 0.2; |
| | | } |
| | | } |
| | | |
| | | .chart { |
| | | width: 356px; |
| | | height: 190px; |
| | | } |
| | | .chart { |
| | | width: 356px; |
| | | height: 190px; |
| | | } |
| | | } |
| | | </style> |