大屏完善
This commit is contained in:
BianLzhaoMin
parent
61d046257a
commit
5f3b7da5b4
|
|
@ -9,28 +9,45 @@ declare module 'vue' {
|
|||
export interface GlobalComponents {
|
||||
Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
|
||||
EditorModel: typeof import('./src/components/EditorModel/index.vue')['default']
|
||||
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
||||
ElBadge: typeof import('element-plus/es')['ElBadge']
|
||||
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
|
||||
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||
ElCascader: typeof import('element-plus/es')['ElCascader']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElCollapse: typeof import('element-plus/es')['ElCollapse']
|
||||
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElCountdown: typeof import('element-plus/es')['ElCountdown']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElEmpty: typeof import('element-plus/es')['ElEmpty']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElHeader: typeof import('element-plus/es')['ElHeader']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElStep: typeof import('element-plus/es')['ElStep']
|
||||
ElSteps: typeof import('element-plus/es')['ElSteps']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1736243959128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5301" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#1296DB" p-id="5302"></path><path d="M422.4 422.4m-313.6 0a313.6 313.6 0 1 0 627.2 0 313.6 313.6 0 1 0-627.2 0Z" fill="#38AFEE" p-id="5303"></path><path d="M355.2 310.4m-156.8 0a156.8 156.8 0 1 0 313.6 0 156.8 156.8 0 1 0-313.6 0Z" fill="#6CC7F7" p-id="5304"></path><path d="M422.4 870.4a448 448 0 0 0 358.4-716.8 448 448 0 1 1-627.2 627.2 446.016 446.016 0 0 0 268.8 89.6z" fill="#108BCB" p-id="5305"></path></svg>
|
||||
|
After Width: | Height: | Size: 812 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1736243729390" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5151" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M507.3408 502.2208m-435.5584 0a435.5584 435.5584 0 1 0 871.1168 0 435.5584 435.5584 0 1 0-871.1168 0Z" fill="#4BCEF9" p-id="5152"></path><path d="M933.2736 592.896c-8.3456 40.6528-36.096 147.8656-132.2496 235.1616-146.9952 133.376-334.2848 108.032-367.4112 102.8608-68.4544-10.5984-115.8144-35.0208-132.2496-44.0832-21.76-11.9296-186.4192-102.4-168.704-218.0096 12.4416-81.3056 107.008-122.0608 114.6368-125.2352 70.7072-29.3376 137.984-7.3216 177.8688 5.7344 51.9168 16.9984 70.3488 36.6592 109.0048 57.3952 49.664 26.624 128.8704 52.8384 252.4672 40.192 30.8224-4.352 69.4272-13.6704 110.2848-33.5872 13.312-6.5024 25.4464-13.4144 36.352-20.4288z" fill="#FFFFFF" opacity=".35" p-id="5153"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -29,5 +29,13 @@ export const getDemandCountApi = (data: any = {}) => {
|
|||
export const getDeviceShareRankingApi = (data: any = {}) => {
|
||||
return get('/material-mall/largeScreen/getDeviceShareRanking', data)
|
||||
}
|
||||
// 租赁跟踪
|
||||
export const getOrderTrackingApi = (data: any = {}) => {
|
||||
return get('/material-mall/largeScreen/getOrderTracking', data)
|
||||
}
|
||||
// 租赁需求分析
|
||||
export const getLeaseCountByPublishCompanyApi = (data: any = {}) => {
|
||||
return get('/material-mall/largeScreen/getLeaseCountByPublishCompany', data)
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -51,17 +51,17 @@
|
|||
<div class="info-box info-box_2" style="transform: translateY(-30px)">
|
||||
<div>
|
||||
<span class="xxxx">
|
||||
{{ devNum }}
|
||||
{{ maTypeLeasingNum }}
|
||||
</span>
|
||||
<span class="zzzz"> 台 </span>
|
||||
</div>
|
||||
<div>租赁订单数</div>
|
||||
<div>在租赁种类</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="info-box info-box_2">
|
||||
<div>
|
||||
<span class="xxxx">
|
||||
{{ devNum }}
|
||||
{{ devLeasingNum }}
|
||||
</span>
|
||||
<span class="zzzz"> 台 </span>
|
||||
</div>
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
<div class="info-box info-box_2">
|
||||
<div>
|
||||
<span class="xxxx">
|
||||
{{ devNum }}
|
||||
{{ devRepairingNum }}
|
||||
</span>
|
||||
<span class="zzzz"> 台 </span>
|
||||
</div>
|
||||
|
|
@ -80,10 +80,8 @@
|
|||
</div>
|
||||
<div class="info-box info-box_2" style="transform: translateY(-30px)">
|
||||
<div>
|
||||
<span class="xxxx">
|
||||
{{ devNum }}
|
||||
</span>
|
||||
<span class="zzzz"> 台 </span>
|
||||
<span class="xxxx"> {{ devUsageRatio }}% </span>
|
||||
<!-- <span class="zzzz"> 台 </span> -->
|
||||
</div>
|
||||
<div>装备利用率</div>
|
||||
<div></div>
|
||||
|
|
@ -135,6 +133,10 @@ const devQcWaningNum = ref<any>(0)
|
|||
const leaseNum = ref<any>(0)
|
||||
const leaseOrderRatio = ref<any>(0)
|
||||
const topPopularTypeName = ref<any>('')
|
||||
const maTypeLeasingNum = ref<any>(0)
|
||||
const devLeasingNum = ref<any>(0)
|
||||
const devRepairingNum = ref<any>(0)
|
||||
const devUsageRatio = ref<any>(0)
|
||||
const getDevCountData = async () => {
|
||||
const res: any = await getDevCountApi()
|
||||
devNum.value = res.data.devNum
|
||||
|
|
@ -146,10 +148,13 @@ const getDevCountData = async () => {
|
|||
leaseNum.value = result1.data.leaseNum
|
||||
leaseOrderRatio.value = result1.data.leaseOrderRatio
|
||||
topPopularTypeName.value = result1.data.topPopularTypeName
|
||||
// const result = await getDevLeaseCountApi()
|
||||
const { data: result }: any = await getDevLeaseCountApi()
|
||||
|
||||
// console.log(result)
|
||||
console.log(result1)
|
||||
maTypeLeasingNum.value = result.maTypeLeasingNum
|
||||
devLeasingNum.value = result.devLeasingNum
|
||||
devRepairingNum.value = result.devRepairingNum
|
||||
devUsageRatio.value = result.devUsageRatio
|
||||
console.log(result, '装备租赁')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<script lang="ts" setup>
|
||||
import ScreenTitle from 'components/ScreenTitle/index.vue'
|
||||
import { getLeaseCouplesApi } from 'http/api/screen/index'
|
||||
import IconImg from '@/assets/img/screen/999.svg'
|
||||
import * as echarts from 'echarts'
|
||||
const echartsRef = ref(null)
|
||||
const getLeaseCouplesData = async () => {
|
||||
|
|
@ -414,118 +415,487 @@ onMounted(() => {
|
|||
|
||||
// timer = setInterval(draw, 200)
|
||||
|
||||
var uploadedDataURL = '/asset/get/s/data-1641348469450-lnHzw8_eG.png'
|
||||
// var uploadedDataURL = '/asset/get/s/data-1641348469450-lnHzw8_eG.png'
|
||||
|
||||
var uploadedDataURL1 = '/asset/get/s/data-1641347891384-dznNRXRza.png'
|
||||
// var uploadedDataURL1 = '/asset/get/s/data-1641347891384-dznNRXRza.png'
|
||||
|
||||
var uploadedDataURL2 = '/asset/get/s/data-1641347883453-EYUAHtC5O.png'
|
||||
// var uploadedDataURL2 = '/asset/get/s/data-1641347883453-EYUAHtC5O.png'
|
||||
|
||||
let erArr = [
|
||||
{
|
||||
name: '安徽送变电公司1',
|
||||
times: 2,
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电公司2',
|
||||
times: 2,
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电公司3',
|
||||
times: 2,
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电公司4',
|
||||
times: 2,
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电公司5',
|
||||
times: 2,
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电公司6',
|
||||
times: 2,
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电公司7',
|
||||
times: 2,
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电公司8',
|
||||
times: 2,
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电公司9',
|
||||
times: 2,
|
||||
type: 2,
|
||||
},
|
||||
]
|
||||
let sumTimes = 0
|
||||
sumTimes = erArr.reduce(function (prev, next) {
|
||||
return prev + next.times
|
||||
}, 0)
|
||||
let color = ['#ffffff', '#36fff6', 'rgba(91, 84, 255, 1)', '#67f95f']
|
||||
// let erArr = [
|
||||
// {
|
||||
// name: '安徽送变电公司1',
|
||||
// times: 2,
|
||||
// type: 2,
|
||||
// },
|
||||
// {
|
||||
// name: '安徽送变电公司2',
|
||||
// times: 2,
|
||||
// type: 2,
|
||||
// },
|
||||
// {
|
||||
// name: '安徽送变电公司3',
|
||||
// times: 2,
|
||||
// type: 2,
|
||||
// },
|
||||
// {
|
||||
// name: '安徽送变电公司4',
|
||||
// times: 2,
|
||||
// type: 2,
|
||||
// },
|
||||
// {
|
||||
// name: '安徽送变电公司5',
|
||||
// times: 2,
|
||||
// type: 2,
|
||||
// },
|
||||
// {
|
||||
// name: '安徽送变电公司6',
|
||||
// times: 2,
|
||||
// type: 2,
|
||||
// },
|
||||
// {
|
||||
// name: '安徽送变电公司7',
|
||||
// times: 2,
|
||||
// type: 2,
|
||||
// },
|
||||
// {
|
||||
// name: '安徽送变电公司8',
|
||||
// times: 2,
|
||||
// type: 2,
|
||||
// },
|
||||
// {
|
||||
// name: '安徽送变电公司9',
|
||||
// times: 2,
|
||||
// type: 2,
|
||||
// },
|
||||
// ]
|
||||
// let sumTimes = 0
|
||||
// sumTimes = erArr.reduce(function (prev, next) {
|
||||
// return prev + next.times
|
||||
// }, 0)
|
||||
// let color = ['#ffffff', '#36fff6', 'rgba(91, 84, 255, 1)', '#67f95f']
|
||||
// let oneArr = [
|
||||
// {
|
||||
// name: '数据中心',
|
||||
// times: sumTimes,
|
||||
// symbol: 'image://' + uploadedDataURL2,
|
||||
// symbolSize: 198,
|
||||
// color: '#ffffff',
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// type: 'linear',
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 0,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: '#ffe93a', // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: '#36fff6', // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// global: false, // 缺省为 false
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// ]
|
||||
|
||||
// let allArr = [...oneArr, ...erArr],
|
||||
// dataArr = []
|
||||
// // 点
|
||||
// allArr.forEach((el, ind) => {
|
||||
// var imgUrl = 'image://' + uploadedDataURL1
|
||||
// var size = 122
|
||||
// var show = true
|
||||
// if (el.symbol) {
|
||||
// imgUrl = el.symbol
|
||||
// size = el.symbolSize
|
||||
// show = false
|
||||
// }
|
||||
// el.symbolSize = size
|
||||
// el.symbol = imgUrl
|
||||
// el.itemStyle = {}
|
||||
// el.label = {
|
||||
// normal: {
|
||||
// show: show,
|
||||
// /* position: "center",*/
|
||||
// textStyle: {
|
||||
// fontSize: 13,
|
||||
// fontFamily: 'FZLanTingHei-B-GBK',
|
||||
// fontWeight: 400,
|
||||
// color: '#FFFFFF',
|
||||
// },
|
||||
// },
|
||||
// }
|
||||
// })
|
||||
|
||||
// // 圆形分区
|
||||
// function group(arr, r) {
|
||||
// const newArray = []
|
||||
// const { length: arLen } = arr
|
||||
// arr.forEach((e, ind) => {
|
||||
// // 按角度均匀分布
|
||||
// const ang = 90 - (360 / arLen).toFixed(2) * (ind + 1)
|
||||
// const x = Math.cos((ang * Math.PI) / 180).toFixed(2) * r
|
||||
// const y = Math.sin((ang * Math.PI) / 180).toFixed(2) * r
|
||||
// const x1 = Math.cos((ang * Math.PI) / 180).toFixed(2) * (r - 5)
|
||||
// const y1 = Math.sin((ang * Math.PI) / 180).toFixed(2) * (r - 5)
|
||||
// const x0 = Math.cos((ang * Math.PI) / 180).toFixed(2) * (r - 30)
|
||||
// const y0 = Math.sin((ang * Math.PI) / 180).toFixed(2) * (r - 30)
|
||||
// e.value = [x.toFixed(2), y.toFixed(2)]
|
||||
// e.twoPoint = [
|
||||
// [x1.toFixed(2), y1.toFixed(2)],
|
||||
// [x0.toFixed(2), y0.toFixed(2)],
|
||||
// ]
|
||||
// newArray.push(e)
|
||||
// })
|
||||
// return newArray
|
||||
// }
|
||||
|
||||
// // 线配置
|
||||
// function linesConfig(arr) {
|
||||
// const [dataArr, targetCoord] = [[], [0, 0]]
|
||||
// arr.forEach((el) => {
|
||||
// function getFormatItem(start, end) {
|
||||
// let item = [
|
||||
// { coord: el.twoPoint[start] }, // 起点
|
||||
// {
|
||||
// coord: el.twoPoint[end],
|
||||
// lineStyle: {
|
||||
// color: color[el.type],
|
||||
// curveness: el.type === 3 ? 0.1 : 0,
|
||||
// },
|
||||
// effect: {
|
||||
// color: color[el.type],
|
||||
// symbol: 'image://' + uploadedDataURL,
|
||||
// symbolSize: [18 * 0.7, 34 * 0.7],
|
||||
// },
|
||||
// }, // 终点
|
||||
// ]
|
||||
// return item
|
||||
// }
|
||||
// switch (el.type) {
|
||||
// case 0:
|
||||
// break
|
||||
// case 1:
|
||||
// dataArr.push(getFormatItem(0, 1))
|
||||
// break
|
||||
// case 2:
|
||||
// dataArr.push(getFormatItem(1, 0))
|
||||
// break
|
||||
// case 3:
|
||||
// dataArr.push(getFormatItem(0, 1))
|
||||
// dataArr.push(getFormatItem(1, 0))
|
||||
// break
|
||||
// }
|
||||
// })
|
||||
// return dataArr
|
||||
// }
|
||||
|
||||
// // 点分布
|
||||
// oneArr = group(oneArr, 0)
|
||||
// erArr = group(erArr, 40)
|
||||
|
||||
// allArr = [...oneArr, ...erArr]
|
||||
// // 线坐标和配置
|
||||
// dataArr = linesConfig(allArr)
|
||||
|
||||
// function generateData(totalNum, bigvalue, smallvalue, color, width) {
|
||||
// let dataArr = []
|
||||
// for (var i = 0; i < totalNum; i++) {
|
||||
// if (i % 2 === 0) {
|
||||
// dataArr.push({
|
||||
// name: (i + 1).toString(),
|
||||
// value: bigvalue,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: color,
|
||||
// borderWidth: width,
|
||||
// borderRadius: 20,
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
// } else {
|
||||
// dataArr.push({
|
||||
// name: (i + 1).toString(),
|
||||
// value: smallvalue,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: 'rgba(0,0,0,0)',
|
||||
// borderWidth: 0,
|
||||
// borderRadius: 20,
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// return dataArr
|
||||
// }
|
||||
|
||||
// let dolitData = generateData(100, 25, 20, 'rgb(126,190,255)', 5)
|
||||
// let threeData = generateData(6, 30, 10, 'rgba(28, 211, 230, 1)', 5)
|
||||
// let fourData = generateData(12, 80, 10, 'rgba(91, 84, 255, 1)', 1)
|
||||
// let radius1 = ['41%', '38%']
|
||||
// let radius2 = ['40%', '39%']
|
||||
// let height = document.body.clientHeight
|
||||
// if (height < 1000) {
|
||||
// radius1 = ['43%', '40%']
|
||||
// radius2 = ['42%', '41%']
|
||||
// }
|
||||
// function getOption(startAngle, radius, startAngle2) {
|
||||
// let option = {
|
||||
// // backgroundColor: 'rgba(0,0,0,1)',
|
||||
// tooltip: {
|
||||
// formatter: function (param) {
|
||||
// var str = param.name + ' : ' + param.data.times + '次'
|
||||
// return str
|
||||
// },
|
||||
|
||||
// textStyle: {
|
||||
// fontSize: 14,
|
||||
// },
|
||||
// // backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
// textStyle: {
|
||||
// color: '#ffffff',
|
||||
// },
|
||||
// borderWidth: 0,
|
||||
// },
|
||||
// title: {
|
||||
// text: '亳州公司',
|
||||
// left: 'center',
|
||||
// top: 'center',
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// },
|
||||
// xAxis: {
|
||||
// show: false,
|
||||
// type: 'value',
|
||||
// max: 50,
|
||||
// min: -51,
|
||||
// },
|
||||
// grid: {
|
||||
// top: 10,
|
||||
// bottom: 10,
|
||||
// left: 10,
|
||||
// right: 10,
|
||||
// },
|
||||
// yAxis: {
|
||||
// show: false,
|
||||
// type: 'value',
|
||||
// max: 50,
|
||||
// min: -50,
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: '节点',
|
||||
// type: 'graph',
|
||||
// silent: false,
|
||||
// hoverAnimation: false, // 鼠标悬浮高亮
|
||||
// cursor: 'default',
|
||||
// coordinateSystem: 'cartesian2d',
|
||||
// z: 3,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// shadowColor: 'none',
|
||||
// },
|
||||
// },
|
||||
// emphasis: {
|
||||
// scale: false,
|
||||
// },
|
||||
// data: allArr,
|
||||
// },
|
||||
// {
|
||||
// name: '线图',
|
||||
// type: 'lines',
|
||||
// hoverAnimation: false,
|
||||
// silent: false,
|
||||
// cursor: 'default',
|
||||
// coordinateSystem: 'cartesian2d',
|
||||
// polyline: false, // 多线段
|
||||
// z: 1,
|
||||
// lineStyle: {
|
||||
// width: 2,
|
||||
// type: 'dashed',
|
||||
// curveness: 0,
|
||||
// },
|
||||
// effect: {
|
||||
// show: true,
|
||||
// period: 8, //箭头指向速度，值越小速度越快
|
||||
// trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
// symbol: 'arrow', //箭头图标
|
||||
// symbolSize: 6,
|
||||
// },
|
||||
// emphasis: {
|
||||
// lineStyle: {
|
||||
// type: 'dashed',
|
||||
// },
|
||||
// },
|
||||
// data: dataArr,
|
||||
// tooltip: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// type: 'pie',
|
||||
// name: '旋转圆',
|
||||
// zlevel: 20,
|
||||
// silent: true,
|
||||
// radius: radius1,
|
||||
// hoverAnimation: false,
|
||||
// startAngle: startAngle,
|
||||
// data: threeData,
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// labelLine: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// type: 'pie',
|
||||
// name: '旋转圆',
|
||||
// zlevel: 19,
|
||||
// silent: true,
|
||||
// radius: radius2,
|
||||
// hoverAnimation: false,
|
||||
// startAngle: startAngle2,
|
||||
// data: fourData,
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// labelLine: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// }
|
||||
|
||||
// return option
|
||||
// }
|
||||
|
||||
// getOption()
|
||||
|
||||
// let startAngle = 50 // 初始旋转角度
|
||||
// let startAngle2 = 50 // 初始旋转角度
|
||||
// let [minradius, radius, maxradius] = [24, 24, 28] // 初始缩放尺寸
|
||||
// let isBig = true // 缩放动画 标识
|
||||
|
||||
// function draw() {
|
||||
// startAngle = startAngle - 5
|
||||
// startAngle2 = startAngle2 + 5
|
||||
// if (isBig) {
|
||||
// radius = radius + 0.5
|
||||
// if (radius > maxradius) {
|
||||
// isBig = false
|
||||
// }
|
||||
// } else {
|
||||
// radius = radius - 0.5
|
||||
// if (radius < minradius) {
|
||||
// isBig = true
|
||||
// }
|
||||
// }
|
||||
// let option = getOption(startAngle, radius, startAngle2)
|
||||
// myChart.setOption(option, true)
|
||||
// }
|
||||
|
||||
// draw()
|
||||
|
||||
// timer = setInterval(draw, 200)
|
||||
|
||||
const uploadImg1 =
|
||||
'https://img.isqqw.com/profile/upload/2023/07/24/373e5229-abcf-4a55-bca8-5051f95c84f4.png'
|
||||
const uploadImg2 = IconImg
|
||||
let color = ['#ffffff', '#fff', '#ffe93a', '#67f95f']
|
||||
let oneArr = [
|
||||
{
|
||||
name: '数据中心',
|
||||
times: sumTimes,
|
||||
symbol: 'image://' + uploadedDataURL2,
|
||||
symbolSize: 198,
|
||||
color: '#ffffff',
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#ffe93a', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#36fff6', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
name: '亳州分公司',
|
||||
type: 0,
|
||||
symbol: 'image://' + uploadImg2,
|
||||
symbolSize: 45,
|
||||
},
|
||||
]
|
||||
let erArr = [
|
||||
{
|
||||
name: '安徽送变电1',
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电2',
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电3',
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电4',
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电5',
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电6',
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电7',
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
name: '安徽送变电8',
|
||||
type: 1,
|
||||
},
|
||||
]
|
||||
|
||||
let allArr = [...oneArr, ...erArr],
|
||||
dataArr = []
|
||||
// 点
|
||||
allArr.forEach((el, ind) => {
|
||||
var imgUrl = 'image://' + uploadedDataURL1
|
||||
var size = 122
|
||||
var show = true
|
||||
if (el.symbol) {
|
||||
imgUrl = el.symbol
|
||||
size = el.symbolSize
|
||||
show = false
|
||||
if (el.type > 0) {
|
||||
el.symbolSize = 45
|
||||
el.symbol = 'image://' + uploadImg2
|
||||
el.itemStyle = {
|
||||
color: color[el.type],
|
||||
}
|
||||
}
|
||||
el.symbolSize = size
|
||||
el.symbol = imgUrl
|
||||
el.itemStyle = {}
|
||||
el.label = {
|
||||
normal: {
|
||||
show: show,
|
||||
/* position: "center",*/
|
||||
textStyle: {
|
||||
fontSize: 13,
|
||||
fontFamily: 'FZLanTingHei-B-GBK',
|
||||
fontWeight: 400,
|
||||
color: '#FFFFFF',
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
distance: -30,
|
||||
color: color[el.type],
|
||||
formatter: function (params) {
|
||||
// 如果是 '亳州分公司'，显示名称并加上租赁数
|
||||
return [
|
||||
`{c|租赁数：${20}}`,
|
||||
`{b|${params.name}}`, // 显示名称
|
||||
].join('\n') // 换行显示
|
||||
},
|
||||
rich: {
|
||||
b: {
|
||||
fontSize: 12,
|
||||
},
|
||||
c: {
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -534,7 +904,7 @@ onMounted(() => {
|
|||
// 圆形分区
|
||||
function group(arr, r) {
|
||||
const newArray = []
|
||||
const { length: arLen } = arr
|
||||
const arLen = arr.length
|
||||
arr.forEach((e, ind) => {
|
||||
// 按角度均匀分布
|
||||
const ang = 90 - (360 / arLen).toFixed(2) * (ind + 1)
|
||||
|
|
@ -569,8 +939,6 @@ onMounted(() => {
|
|||
},
|
||||
effect: {
|
||||
color: color[el.type],
|
||||
symbol: 'image://' + uploadedDataURL,
|
||||
symbolSize: [18 * 0.7, 34 * 0.7],
|
||||
},
|
||||
}, // 终点
|
||||
]
|
||||
|
|
@ -597,12 +965,13 @@ onMounted(() => {
|
|||
// 点分布
|
||||
oneArr = group(oneArr, 0)
|
||||
erArr = group(erArr, 40)
|
||||
// twoArr = group(twoArr, -50);
|
||||
|
||||
allArr = [...oneArr, ...erArr]
|
||||
// 线坐标和配置
|
||||
dataArr = linesConfig(allArr)
|
||||
|
||||
function generateData(totalNum, bigvalue, smallvalue, color, width) {
|
||||
function generateData(totalNum, bigvalue, smallvalue, color) {
|
||||
let dataArr = []
|
||||
for (var i = 0; i < totalNum; i++) {
|
||||
if (i % 2 === 0) {
|
||||
|
|
@ -610,11 +979,8 @@ onMounted(() => {
|
|||
name: (i + 1).toString(),
|
||||
value: bigvalue,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color,
|
||||
borderWidth: width,
|
||||
borderRadius: 20,
|
||||
},
|
||||
color: color,
|
||||
borderWidth: 0,
|
||||
},
|
||||
})
|
||||
} else {
|
||||
|
|
@ -622,11 +988,8 @@ onMounted(() => {
|
|||
name: (i + 1).toString(),
|
||||
value: smallvalue,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,0,0,0)',
|
||||
borderWidth: 0,
|
||||
borderRadius: 20,
|
||||
},
|
||||
color: 'rgba(0,0,0,0)',
|
||||
borderWidth: 0,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -634,43 +997,12 @@ onMounted(() => {
|
|||
return dataArr
|
||||
}
|
||||
|
||||
let dolitData = generateData(100, 25, 20, 'rgb(126,190,255)', 5)
|
||||
let threeData = generateData(6, 30, 10, 'rgba(28, 211, 230, 1)', 5)
|
||||
let fourData = generateData(12, 80, 10, 'rgba(91, 84, 255, 1)', 1)
|
||||
let radius1 = ['41%', '38%']
|
||||
let radius2 = ['40%', '39%']
|
||||
let height = document.body.clientHeight
|
||||
if (height < 1000) {
|
||||
radius1 = ['43%', '40%']
|
||||
radius2 = ['42%', '41%']
|
||||
}
|
||||
function getOption(startAngle, radius, startAngle2) {
|
||||
let option = {
|
||||
// backgroundColor: 'rgba(0,0,0,1)',
|
||||
tooltip: {
|
||||
formatter: function (param) {
|
||||
var str = param.name + ' : ' + param.data.times + '次'
|
||||
return str
|
||||
},
|
||||
let dolitData = generateData(100, 25, 20, 'rgb(126,190,255)')
|
||||
let threeData = generateData(6, 40, 10, '#2dc0c9')
|
||||
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
// backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
borderWidth: 0,
|
||||
},
|
||||
title: {
|
||||
text: '亳州公司',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
function getOption(startAngle, radius) {
|
||||
let option = {
|
||||
backgroundColor: '#081c47',
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: 'value',
|
||||
|
|
@ -699,9 +1031,7 @@ onMounted(() => {
|
|||
coordinateSystem: 'cartesian2d',
|
||||
z: 3,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowColor: 'none',
|
||||
},
|
||||
shadowColor: 'none',
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
|
|
@ -718,16 +1048,16 @@ onMounted(() => {
|
|||
polyline: false, // 多线段
|
||||
z: 1,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
width: 1,
|
||||
type: 'dashed',
|
||||
curveness: 0,
|
||||
},
|
||||
effect: {
|
||||
show: true,
|
||||
period: 8, //箭头指向速度，值越小速度越快
|
||||
trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
symbol: 'arrow', //箭头图标
|
||||
symbolSize: 6,
|
||||
// show: true,
|
||||
// period: 4, //箭头指向速度，值越小速度越快
|
||||
// trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
// symbol: 'arrow', //箭头图标
|
||||
// symbolSize: 6,
|
||||
},
|
||||
emphasis: {
|
||||
lineStyle: {
|
||||
|
|
@ -735,16 +1065,31 @@ onMounted(() => {
|
|||
},
|
||||
},
|
||||
data: dataArr,
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
name: '不动外圆',
|
||||
type: 'pie',
|
||||
zlevel: 4,
|
||||
silent: true,
|
||||
radius: ['50%', '49%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: dolitData,
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
name: '旋转圆',
|
||||
zlevel: 20,
|
||||
silent: true,
|
||||
radius: radius1,
|
||||
radius: ['40%', '39%'], //圆的大小
|
||||
hoverAnimation: false,
|
||||
startAngle: startAngle,
|
||||
data: threeData,
|
||||
|
|
@ -758,19 +1103,13 @@ onMounted(() => {
|
|||
show: false,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '缩放圆',
|
||||
type: 'pie',
|
||||
name: '旋转圆',
|
||||
zlevel: 19,
|
||||
zlevel: 4,
|
||||
silent: true,
|
||||
radius: radius2,
|
||||
hoverAnimation: false,
|
||||
startAngle: startAngle2,
|
||||
data: fourData,
|
||||
radius: [radius + 1 + '%', radius + '%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
|
|
@ -781,26 +1120,19 @@ onMounted(() => {
|
|||
show: false,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
data: dolitData,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
console.log(option)
|
||||
return option
|
||||
}
|
||||
|
||||
getOption()
|
||||
|
||||
let startAngle = 50 // 初始旋转角度
|
||||
let startAngle2 = 50 // 初始旋转角度
|
||||
let [minradius, radius, maxradius] = [24, 24, 28] // 初始缩放尺寸
|
||||
let isBig = true // 缩放动画 标识
|
||||
|
||||
function draw() {
|
||||
function drawNew() {
|
||||
startAngle = startAngle - 5
|
||||
startAngle2 = startAngle2 + 5
|
||||
if (isBig) {
|
||||
radius = radius + 0.5
|
||||
if (radius > maxradius) {
|
||||
|
|
@ -812,13 +1144,14 @@ onMounted(() => {
|
|||
isBig = true
|
||||
}
|
||||
}
|
||||
let option = getOption(startAngle, radius, startAngle2)
|
||||
const option = getOption(startAngle, radius)
|
||||
myChart.setOption(option, true)
|
||||
}
|
||||
|
||||
draw()
|
||||
drawNew()
|
||||
|
||||
// timer = setInterval(draw, 200)
|
||||
// draw();
|
||||
setInterval(drawNew, 200)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,35 +9,26 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import ScreenTitle from 'components/ScreenTitle/index.vue'
|
||||
import { getLeaseCountByPublishCompanyApi } from 'http/api/screen/index'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const echartsRef = ref(null)
|
||||
onMounted(() => {
|
||||
const pieData = ref([])
|
||||
const getLeaseCountByPublishCompanyData = async () => {
|
||||
const { data: res }: any = await getLeaseCountByPublishCompanyApi()
|
||||
pieData.value = res.map((e: any) => {
|
||||
return {
|
||||
value: e.leaseCount,
|
||||
name:
|
||||
e.publishCompany.length > 6
|
||||
? e.publishCompany.slice(0, 6) + '..'
|
||||
: e.publishCompany,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const initCharts = () => {
|
||||
const myChart = echarts.init(echartsRef.value)
|
||||
const datas = [
|
||||
{
|
||||
value: 30,
|
||||
name: '安徽送变电',
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: '贵州送变电',
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: '广州送变电',
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: '合肥送变电',
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: '云南送变电',
|
||||
},
|
||||
]
|
||||
const option = {
|
||||
// backgroundColor: '#142468',
|
||||
title: {
|
||||
//text: '实时旋转饼图'
|
||||
},
|
||||
|
|
@ -63,49 +54,22 @@ onMounted(() => {
|
|||
rate: { width: 6, align: 'right', fontSize: 13 },
|
||||
},
|
||||
},
|
||||
data: datas,
|
||||
formatter: (name) => {
|
||||
if (datas.length) {
|
||||
const item = datas.filter((item) => item.name === name)[0]
|
||||
return `{name|${name}}{value| ${item.value}} {rate| 台}`
|
||||
data: pieData.value,
|
||||
formatter: (name: any) => {
|
||||
if (pieData.value.length) {
|
||||
const item: any = pieData.value.filter((item: any) => item.name === name)[0]
|
||||
return `{name|${name}}{value| ${item.value}} {rate| 台}`
|
||||
}
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
// trigger: 'item',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// type: 'pie',
|
||||
// zlevel: 1,
|
||||
// silent: true,
|
||||
// /*
|
||||
// radius
|
||||
// 饼图的半径。可以为如下类型：
|
||||
// number：直接指定外半径值。
|
||||
// string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
|
||||
// Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。
|
||||
// */
|
||||
// radius: ['98%', '97%'],
|
||||
// center: ['30%', '50%'],
|
||||
// hoverAnimation: false,
|
||||
// color: 'rgba(88,142,197,0.5)',
|
||||
// // animation:false, //charts3 no
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// labelLine: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// data: [1],
|
||||
// 刻度
|
||||
name: '',
|
||||
type: 'gauge',
|
||||
splitNumber: 80, //刻度数量
|
||||
splitNumber: 70, //刻度数量
|
||||
radius: '98%', //图表尺寸
|
||||
center: ['30%', '50%'],
|
||||
startAngle: 90,
|
||||
|
|
@ -167,184 +131,6 @@ onMounted(() => {
|
|||
data: _pie2(),
|
||||
},
|
||||
|
||||
// {
|
||||
// type: 'pie',
|
||||
// zlevel: 3,
|
||||
// silent: true,
|
||||
// radius: ['88%', '87%'],
|
||||
// center: ['30%', '50%'],
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// labelLine: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// data: _pie2(),
|
||||
// },
|
||||
// {
|
||||
// type: 'pie',
|
||||
// zlevel: 4,
|
||||
// silent: true,
|
||||
// radius: ['84%', '83%'],
|
||||
// center: ['30%', '50%'],
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// labelLine: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// data: _pie3(),
|
||||
// },
|
||||
// {
|
||||
// type: 'pie',
|
||||
// zlevel: 5,
|
||||
// silent: true,
|
||||
// radius: ['80%', '78%'],
|
||||
// center: ['30%', '50%'],
|
||||
// color: ['#fc8d89', '#46d3f3', 'rgba(203,203,203,.2)'],
|
||||
// startAngle: 50,
|
||||
// hoverAnimation: false,
|
||||
// // animation:false, //charts3 no
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// data: [50, 20, 40],
|
||||
// },
|
||||
// {
|
||||
// name: '',
|
||||
// type: 'gauge',
|
||||
|
||||
// splitNumber: 30, //刻度数量
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
// radius: '47%', //图表尺寸
|
||||
// center: ['30%', '50%'],
|
||||
// startAngle: 90,
|
||||
// endAngle: -269.9999,
|
||||
// axisLine: {
|
||||
// show: false,
|
||||
// lineStyle: {
|
||||
// width: 0,
|
||||
// shadowBlur: 0,
|
||||
// color: [[1, '#0dc2fe']],
|
||||
// },
|
||||
// },
|
||||
// axisTick: {
|
||||
// show: false,
|
||||
// lineStyle: {
|
||||
// color: 'auto',
|
||||
// width: 2,
|
||||
// },
|
||||
// length: 20,
|
||||
// splitNumber: 5,
|
||||
// },
|
||||
// splitLine: {
|
||||
// show: true,
|
||||
// length: 32,
|
||||
// lineStyle: {
|
||||
// color: 'auto',
|
||||
// },
|
||||
// },
|
||||
// axisLabel: {
|
||||
// show: false,
|
||||
// },
|
||||
// pointer: {
|
||||
// //仪表盘指针
|
||||
// show: 0,
|
||||
// },
|
||||
// detail: {
|
||||
// show: 0,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: '统计',
|
||||
// type: 'gauge',
|
||||
// splitNumber: 30, //刻度数量
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
// radius: '68%', //图表尺寸
|
||||
// center: ['30%', '50%'],
|
||||
// startAngle: 90,
|
||||
// endAngle: -269.9999,
|
||||
// axisLine: {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// width: 0,
|
||||
// shadowBlur: 0,
|
||||
// color: [
|
||||
// [0, '#0dc2fe'],
|
||||
// [1, '#0dc2fe'],
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// axisTick: {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// color: '#0dc2fe',
|
||||
// width: 2,
|
||||
// },
|
||||
// length: 20,
|
||||
// splitNumber: 5,
|
||||
// },
|
||||
// splitLine: {
|
||||
// show: true,
|
||||
// length: 20,
|
||||
// lineStyle: {
|
||||
// color: '#0dc2fe',
|
||||
// },
|
||||
// },
|
||||
// axisLabel: {
|
||||
// show: false,
|
||||
// },
|
||||
// pointer: {
|
||||
// //仪表盘指针
|
||||
// show: 0,
|
||||
// },
|
||||
// detail: {
|
||||
// borderColor: '#fff',
|
||||
// shadowColor: '#fff', //默认透明
|
||||
// shadowBlur: 2,
|
||||
// offsetCenter: [0, '0%'], // x, y，单位px
|
||||
// textStyle: {
|
||||
// // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||||
// // color: '#fff',
|
||||
// // fontSize: 50,
|
||||
// },
|
||||
// formatter: '{value}',
|
||||
// },
|
||||
// // data: [
|
||||
// // {
|
||||
// // name: '',
|
||||
// // value: 2020,
|
||||
// // },
|
||||
// // ],
|
||||
// },
|
||||
// {
|
||||
// type: 'pie',
|
||||
// zlevel: 20,
|
||||
// silent: true,
|
||||
// radius: ['60%', '59%'],
|
||||
// center: ['30%', '50%'],
|
||||
// hoverAnimation: false,
|
||||
// color: '#2dc0c9',
|
||||
// // animation:false,
|
||||
// data: [1],
|
||||
// labelLine: {
|
||||
// normal: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
|
|
@ -377,7 +163,7 @@ onMounted(() => {
|
|||
show: false,
|
||||
},
|
||||
},
|
||||
data: datas,
|
||||
data: pieData.value,
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -416,24 +202,6 @@ onMounted(() => {
|
|||
],
|
||||
}
|
||||
|
||||
function _pie1() {
|
||||
let dataArr = []
|
||||
for (var i = 0; i < 8; i++) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(88,142,197,0.4)',
|
||||
borderWidth: 0,
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
return dataArr
|
||||
}
|
||||
|
||||
function _pie2() {
|
||||
let dataArr = []
|
||||
for (var i = 0; i < 8; i++) {
|
||||
|
|
@ -466,115 +234,13 @@ onMounted(() => {
|
|||
return dataArr
|
||||
}
|
||||
|
||||
function _pie3() {
|
||||
let dataArr = []
|
||||
for (var i = 0; i < 100; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 25,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(126,190,255)',
|
||||
borderWidth: 0,
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
},
|
||||
})
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,0,0,0)',
|
||||
borderWidth: 0,
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
return dataArr
|
||||
}
|
||||
|
||||
function _pieData(data) {
|
||||
let _data = data
|
||||
let dataArr = []
|
||||
for (var i = 0; i < 5; i++) {
|
||||
if (i === 2) {
|
||||
let dt = data[0].unit ? 25 : Number(data[0].value)
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: dt,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(147,187,216)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#588ec5',
|
||||
},
|
||||
]),
|
||||
borderWidth: 0,
|
||||
borderColor: 'rgba(0,0,0,0.4)',
|
||||
},
|
||||
},
|
||||
})
|
||||
} else {
|
||||
let dta = data[0].unit ? 25 : (1 - Number(data[0].value)) / 4
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: dta,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,0,0,0)',
|
||||
borderWidth: 0,
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
//console.log(dataArr)
|
||||
return dataArr
|
||||
}
|
||||
|
||||
//鼠标事件：'click'，'dblclick'，'mousedown'，'mouseup'，'mouseover'，'mouseout'，'globalout'。
|
||||
|
||||
myChart.on('mouseover', function (params) {
|
||||
stopTimer()
|
||||
})
|
||||
|
||||
myChart.on('mouseout', function (params) {
|
||||
startTimer()
|
||||
})
|
||||
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
// var timer
|
||||
|
||||
// function doing() {
|
||||
// // let option = myChart.getOption()
|
||||
// // option.series[3].startAngle = option.series[3].startAngle - 1
|
||||
// // option.series[6].data[0].value = option.series[6].data[0].value + 1
|
||||
// myChart.setOption(option)
|
||||
// }
|
||||
|
||||
// function startTimer() {
|
||||
// timer = setInterval(doing, 100)
|
||||
// }
|
||||
|
||||
// function stopTimer() {
|
||||
// clearInterval(timer)
|
||||
|
||||
// xzTimer = null
|
||||
// }
|
||||
|
||||
// setTimeout(startTimer, 500)
|
||||
onMounted(() => {
|
||||
Promise.all([getLeaseCountByPublishCompanyData()]).then(() => {
|
||||
initCharts()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -599,7 +265,7 @@ onMounted(() => {
|
|||
left: 20%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
z-index: 999999999;
|
||||
// z-index: 10;
|
||||
background: url('@/assets/img/screen/right_3.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,28 +6,28 @@
|
|||
<div class="track">租赁跟踪</div>
|
||||
<div class="item1">
|
||||
<div>
|
||||
<span class="pppp">139</span>
|
||||
<span class="pppp">{{ orderNumNew }}</span>
|
||||
<span class="cccc">单</span>
|
||||
</div>
|
||||
<div>订单数量</div>
|
||||
</div>
|
||||
<div class="item2">
|
||||
<div>
|
||||
<span class="pppp">139</span>
|
||||
<span class="pppp">{{ orderNum2 }}</span>
|
||||
<span class="cccc">单</span>
|
||||
</div>
|
||||
<div>已完成出租订单</div>
|
||||
</div>
|
||||
<div class="item3">
|
||||
<div>
|
||||
<span class="pppp">139</span>
|
||||
<span class="pppp">{{ orderNum3 }}</span>
|
||||
<span class="cccc">单</span>
|
||||
</div>
|
||||
<div>待接收装备</div>
|
||||
<div>待出库订单</div>
|
||||
</div>
|
||||
<div class="item4">
|
||||
<div>
|
||||
<span class="pppp">139</span>
|
||||
<span class="pppp">{{ orderNum4 }}</span>
|
||||
<span class="cccc">单</span>
|
||||
</div>
|
||||
<div>正出租订单</div>
|
||||
|
|
@ -38,6 +38,33 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import ScreenTitle from 'components/ScreenTitle/index.vue'
|
||||
import { getOrderTrackingApi } from 'http/api/screen/index'
|
||||
const orderNumNew = ref<any>(0)
|
||||
const orderNum2 = ref(0)
|
||||
const orderNum3 = ref(0)
|
||||
const orderNum4 = ref(0)
|
||||
const getOrderTrackingData = async () => {
|
||||
const { data: res }: any = await getOrderTrackingApi()
|
||||
|
||||
console.log(res, '996')
|
||||
|
||||
res.forEach((e: any) => {
|
||||
if (e.orderStatus == 20) {
|
||||
orderNum2.value = e.orderCount
|
||||
}
|
||||
if (e.orderStatus == 2) {
|
||||
orderNum3.value = e.orderCount
|
||||
}
|
||||
if (e.orderStatus == 4) {
|
||||
orderNum4.value = e.orderCount
|
||||
}
|
||||
|
||||
orderNumNew.value = orderNumNew.value + e.orderCount
|
||||
})
|
||||
|
||||
// orderNum1.value = res.reduce((total: any, item: any) => total + item.orderCount, 0)
|
||||
}
|
||||
getOrderTrackingData()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -85,7 +112,7 @@ import ScreenTitle from 'components/ScreenTitle/index.vue'
|
|||
left: 2%;
|
||||
|
||||
& div:first-child {
|
||||
font-size: 18px;
|
||||
font-size: 20;
|
||||
color: #e5cb03;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
|
@ -94,7 +121,7 @@ import ScreenTitle from 'components/ScreenTitle/index.vue'
|
|||
top: 26%;
|
||||
right: 8%;
|
||||
& div:first-child {
|
||||
font-size: 18px;
|
||||
font-size: 20;
|
||||
color: #2793ff;
|
||||
}
|
||||
}
|
||||
|
|
@ -102,7 +129,7 @@ import ScreenTitle from 'components/ScreenTitle/index.vue'
|
|||
bottom: 6%;
|
||||
left: 2%;
|
||||
& div:first-child {
|
||||
font-size: 18px;
|
||||
font-size: 20;
|
||||
color: #0de3ff;
|
||||
}
|
||||
}
|
||||
|
|
@ -110,7 +137,7 @@ import ScreenTitle from 'components/ScreenTitle/index.vue'
|
|||
bottom: 6%;
|
||||
right: 12%;
|
||||
& div:first-child {
|
||||
font-size: 18px;
|
||||
font-size: 20;
|
||||
color: #21d652;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue