bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏完善

This commit is contained in:
BianLzhaoMin 2025-01-07 18:08:18 +08:00
parent 61d046257a
commit 5f3b7da5b4
8 changed files with 625 additions and 567 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components.d.ts vendored
View File

@ -9,28 +9,45 @@ declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default'] Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
EditorModel: typeof import('./src/components/EditorModel/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'] 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'] ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCarousel: typeof import('element-plus/es')['ElCarousel'] ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem'] ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCascader: typeof import('element-plus/es')['ElCascader'] ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol'] 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'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElCountdown: typeof import('element-plus/es')['ElCountdown']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog'] ElDialog: typeof import('element-plus/es')['ElDialog']
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElForm: typeof import('element-plus/es')['ElForm'] ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon'] ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage'] ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
ElPagination: typeof import('element-plus/es')['ElPagination'] ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElProgress: typeof import('element-plus/es')['ElProgress'] 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'] ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect'] 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'] ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTag: typeof import('element-plus/es')['ElTag'] ElTag: typeof import('element-plus/es')['ElTag']

1
src/assets/img/screen/999.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 812 B

1
src/assets/img/screen/right_3_1.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

8
src/http/api/screen/index.ts
View File

@ -29,5 +29,13 @@ export const getDemandCountApi = (data: any = {}) => {
export const getDeviceShareRankingApi = (data: any = {}) => { export const getDeviceShareRankingApi = (data: any = {}) => {
return get('/material-mall/largeScreen/getDeviceShareRanking', data) 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)
}

27
src/views/big-screen/model-components/center-model.vue
View File

@ -51,17 +51,17 @@
<div class="info-box info-box_2" style="transform: translateY(-30px)"> <div class="info-box info-box_2" style="transform: translateY(-30px)">
<div> <div>
<span class="xxxx"> <span class="xxxx">
{{ devNum }} {{ maTypeLeasingNum }}
</span> </span>
<span class="zzzz"> 台 </span> <span class="zzzz"> 台 </span>
</div> </div>
<div>租赁订单数</div> <div>在租赁种类</div>
<div></div> <div></div>
</div> </div>
<div class="info-box info-box_2"> <div class="info-box info-box_2">
<div> <div>
<span class="xxxx"> <span class="xxxx">
{{ devNum }} {{ devLeasingNum }}
</span> </span>
<span class="zzzz"> 台 </span> <span class="zzzz"> 台 </span>
</div> </div>
@ -71,7 +71,7 @@
<div class="info-box info-box_2"> <div class="info-box info-box_2">
<div> <div>
<span class="xxxx"> <span class="xxxx">
{{ devNum }} {{ devRepairingNum }}
</span> </span>
<span class="zzzz"> 台 </span> <span class="zzzz"> 台 </span>
</div> </div>
@ -80,10 +80,8 @@
</div> </div>
<div class="info-box info-box_2" style="transform: translateY(-30px)"> <div class="info-box info-box_2" style="transform: translateY(-30px)">
<div> <div>
<span class="xxxx"> <span class="xxxx"> {{ devUsageRatio }}% </span>
{{ devNum }} <!-- <span class="zzzz"> 台 </span> -->
</span>
<span class="zzzz"> 台 </span>
</div> </div>
<div>装备利用率</div> <div>装备利用率</div>
<div></div> <div></div>
@ -135,6 +133,10 @@ const devQcWaningNum = ref<any>(0)
const leaseNum = ref<any>(0) const leaseNum = ref<any>(0)
const leaseOrderRatio = ref<any>(0) const leaseOrderRatio = ref<any>(0)
const topPopularTypeName = ref<any>('') 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 getDevCountData = async () => {
const res: any = await getDevCountApi() const res: any = await getDevCountApi()
devNum.value = res.data.devNum devNum.value = res.data.devNum
@ -146,10 +148,13 @@ const getDevCountData = async () => {
leaseNum.value = result1.data.leaseNum leaseNum.value = result1.data.leaseNum
leaseOrderRatio.value = result1.data.leaseOrderRatio leaseOrderRatio.value = result1.data.leaseOrderRatio
topPopularTypeName.value = result1.data.topPopularTypeName topPopularTypeName.value = result1.data.topPopularTypeName
// const result = await getDevLeaseCountApi() const { data: result }: any = await getDevLeaseCountApi()
// console.log(result) maTypeLeasingNum.value = result.maTypeLeasingNum
console.log(result1) devLeasingNum.value = result.devLeasingNum
devRepairingNum.value = result.devRepairingNum
devUsageRatio.value = result.devUsageRatio
console.log(result, '装备租赁')
} }
onMounted(() => { onMounted(() => {

699
src/views/big-screen/model-components/left-three-model.vue
View File

@ -9,6 +9,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import ScreenTitle from 'components/ScreenTitle/index.vue' import ScreenTitle from 'components/ScreenTitle/index.vue'
import { getLeaseCouplesApi } from 'http/api/screen/index' import { getLeaseCouplesApi } from 'http/api/screen/index'
import IconImg from '@/assets/img/screen/999.svg'
import * as echarts from 'echarts' import * as echarts from 'echarts'
const echartsRef = ref(null) const echartsRef = ref(null)
const getLeaseCouplesData = async () => { const getLeaseCouplesData = async () => {
@ -414,118 +415,487 @@ onMounted(() => {
// timer = setInterval(draw, 200) // 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 = [ // let erArr = [
{ // {
name: '安徽送变电公司1', // name: '安徽送变电公司1',
times: 2, // times: 2,
type: 2, // type: 2,
}, // },
{ // {
name: '安徽送变电公司2', // name: '安徽送变电公司2',
times: 2, // times: 2,
type: 2, // type: 2,
}, // },
{ // {
name: '安徽送变电公司3', // name: '安徽送变电公司3',
times: 2, // times: 2,
type: 2, // type: 2,
}, // },
{ // {
name: '安徽送变电公司4', // name: '安徽送变电公司4',
times: 2, // times: 2,
type: 2, // type: 2,
}, // },
{ // {
name: '安徽送变电公司5', // name: '安徽送变电公司5',
times: 2, // times: 2,
type: 2, // type: 2,
}, // },
{ // {
name: '安徽送变电公司6', // name: '安徽送变电公司6',
times: 2, // times: 2,
type: 2, // type: 2,
}, // },
{ // {
name: '安徽送变电公司7', // name: '安徽送变电公司7',
times: 2, // times: 2,
type: 2, // type: 2,
}, // },
{ // {
name: '安徽送变电公司8', // name: '安徽送变电公司8',
times: 2, // times: 2,
type: 2, // type: 2,
}, // },
{ // {
name: '安徽送变电公司9', // name: '安徽送变电公司9',
times: 2, // times: 2,
type: 2, // type: 2,
}, // },
] // ]
let sumTimes = 0 // let sumTimes = 0
sumTimes = erArr.reduce(function (prev, next) { // sumTimes = erArr.reduce(function (prev, next) {
return prev + next.times // return prev + next.times
}, 0) // }, 0)
let color = ['#ffffff', '#36fff6', 'rgba(91, 84, 255, 1)', '#67f95f'] // 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 = [ let oneArr = [
{ {
name: '数据中心', name: '亳州分公司',
times: sumTimes, type: 0,
symbol: 'image://' + uploadedDataURL2, symbol: 'image://' + uploadImg2,
symbolSize: 198, symbolSize: 45,
color: '#ffffff', },
itemStyle: { ]
color: { let erArr = [
type: 'linear', {
x: 0, name: '安徽送变电1',
y: 0, type: 1,
x2: 0, },
y2: 0, {
colorStops: [ name: '安徽送变电2',
{ type: 1,
offset: 0, },
color: '#ffe93a', // 0% 处的颜色 {
}, name: '安徽送变电3',
{ type: 1,
offset: 1, },
color: '#36fff6', // 100% 处的颜色 {
}, name: '安徽送变电4',
], type: 1,
global: false, // 缺省为 false },
}, {
}, name: '安徽送变电5',
type: 1,
},
{
name: '安徽送变电6',
type: 1,
},
{
name: '安徽送变电7',
type: 1,
},
{
name: '安徽送变电8',
type: 1,
}, },
] ]
let allArr = [...oneArr, ...erArr], let allArr = [...oneArr, ...erArr],
dataArr = [] dataArr = []
// 点 // 点
allArr.forEach((el, ind) => { allArr.forEach((el, ind) => {
var imgUrl = 'image://' + uploadedDataURL1 if (el.type > 0) {
var size = 122 el.symbolSize = 45
var show = true el.symbol = 'image://' + uploadImg2
if (el.symbol) { el.itemStyle = {
imgUrl = el.symbol color: color[el.type],
size = el.symbolSize }
show = false
} }
el.symbolSize = size
el.symbol = imgUrl
el.itemStyle = {}
el.label = { el.label = {
normal: { show: true,
show: show, position: 'bottom',
/* position: "center",*/ distance: -30,
textStyle: { color: color[el.type],
fontSize: 13, formatter: function (params) {
fontFamily: 'FZLanTingHei-B-GBK', // 如果是 '亳州分公司'，显示名称并加上租赁数
fontWeight: 400, return [
color: '#FFFFFF', `{c|租赁数：${20}}`,
`{b|${params.name}}`, // 显示名称
].join('\n') // 换行显示
},
rich: {
b: {
fontSize: 12,
},
c: {
fontSize: 12,
}, },
}, },
} }
@ -534,7 +904,7 @@ onMounted(() => {
// 圆形分区 // 圆形分区
function group(arr, r) { function group(arr, r) {
const newArray = [] const newArray = []
const { length: arLen } = arr const arLen = arr.length
arr.forEach((e, ind) => { arr.forEach((e, ind) => {
// 按角度均匀分布 // 按角度均匀分布
const ang = 90 - (360 / arLen).toFixed(2) * (ind + 1) const ang = 90 - (360 / arLen).toFixed(2) * (ind + 1)
@ -569,8 +939,6 @@ onMounted(() => {
}, },
effect: { effect: {
color: color[el.type], color: color[el.type],
symbol: 'image://' + uploadedDataURL,
symbolSize: [18 * 0.7, 34 * 0.7],
}, },
}, // 终点 }, // 终点
] ]
@ -597,12 +965,13 @@ onMounted(() => {
// 点分布 // 点分布
oneArr = group(oneArr, 0) oneArr = group(oneArr, 0)
erArr = group(erArr, 40) erArr = group(erArr, 40)
// twoArr = group(twoArr, -50);
allArr = [...oneArr, ...erArr] allArr = [...oneArr, ...erArr]
// 线坐标和配置 // 线坐标和配置
dataArr = linesConfig(allArr) dataArr = linesConfig(allArr)
function generateData(totalNum, bigvalue, smallvalue, color, width) { function generateData(totalNum, bigvalue, smallvalue, color) {
let dataArr = [] let dataArr = []
for (var i = 0; i < totalNum; i++) { for (var i = 0; i < totalNum; i++) {
if (i % 2 === 0) { if (i % 2 === 0) {
@ -610,11 +979,8 @@ onMounted(() => {
name: (i + 1).toString(), name: (i + 1).toString(),
value: bigvalue, value: bigvalue,
itemStyle: { itemStyle: {
normal: { color: color,
color: color, borderWidth: 0,
borderWidth: width,
borderRadius: 20,
},
}, },
}) })
} else { } else {
@ -622,11 +988,8 @@ onMounted(() => {
name: (i + 1).toString(), name: (i + 1).toString(),
value: smallvalue, value: smallvalue,
itemStyle: { itemStyle: {
normal: { color: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)', borderWidth: 0,
borderWidth: 0,
borderRadius: 20,
},
}, },
}) })
} }
@ -634,43 +997,12 @@ onMounted(() => {
return dataArr return dataArr
} }
let dolitData = generateData(100, 25, 20, 'rgb(126,190,255)', 5) let dolitData = generateData(100, 25, 20, 'rgb(126,190,255)')
let threeData = generateData(6, 30, 10, 'rgba(28, 211, 230, 1)', 5) let threeData = generateData(6, 40, 10, '#2dc0c9')
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: { function getOption(startAngle, radius) {
fontSize: 14, let option = {
}, backgroundColor: '#081c47',
// backgroundColor: 'rgba(0,0,0,0.7)',
textStyle: {
color: '#ffffff',
},
borderWidth: 0,
},
title: {
text: '亳州公司',
left: 'center',
top: 'center',
textStyle: {
color: '#fff',
fontSize: 16,
},
},
xAxis: { xAxis: {
show: false, show: false,
type: 'value', type: 'value',
@ -699,9 +1031,7 @@ onMounted(() => {
coordinateSystem: 'cartesian2d', coordinateSystem: 'cartesian2d',
z: 3, z: 3,
itemStyle: { itemStyle: {
normal: { shadowColor: 'none',
shadowColor: 'none',
},
}, },
emphasis: { emphasis: {
scale: false, scale: false,
@ -718,16 +1048,16 @@ onMounted(() => {
polyline: false, // 多线段 polyline: false, // 多线段
z: 1, z: 1,
lineStyle: { lineStyle: {
width: 2, width: 1,
type: 'dashed', type: 'dashed',
curveness: 0, curveness: 0,
}, },
effect: { effect: {
show: true, // show: true,
period: 8, //箭头指向速度，值越小速度越快 // period: 4, //箭头指向速度，值越小速度越快
trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重 // trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标 // symbol: 'arrow', //箭头图标
symbolSize: 6, // symbolSize: 6,
}, },
emphasis: { emphasis: {
lineStyle: { lineStyle: {
@ -735,16 +1065,31 @@ onMounted(() => {
}, },
}, },
data: dataArr, 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', type: 'pie',
name: '旋转圆', name: '旋转圆',
zlevel: 20, zlevel: 20,
silent: true, silent: true,
radius: radius1, radius: ['40%', '39%'], //圆的大小
hoverAnimation: false, hoverAnimation: false,
startAngle: startAngle, startAngle: startAngle,
data: threeData, data: threeData,
@ -758,19 +1103,13 @@ onMounted(() => {
show: false, show: false,
}, },
}, },
tooltip: {
show: false,
},
}, },
{ {
name: '缩放圆',
type: 'pie', type: 'pie',
name: '旋转圆', zlevel: 4,
zlevel: 19,
silent: true, silent: true,
radius: radius2, radius: [radius + 1 + '%', radius + '%'],
hoverAnimation: false,
startAngle: startAngle2,
data: fourData,
label: { label: {
normal: { normal: {
show: false, show: false,
@ -781,26 +1120,19 @@ onMounted(() => {
show: false, show: false,
}, },
}, },
tooltip: { data: dolitData,
show: false,
},
}, },
], ],
} }
console.log(option)
return option return option
} }
getOption()
let startAngle = 50 // 初始旋转角度 let startAngle = 50 // 初始旋转角度
let startAngle2 = 50 // 初始旋转角度
let [minradius, radius, maxradius] = [24, 24, 28] // 初始缩放尺寸 let [minradius, radius, maxradius] = [24, 24, 28] // 初始缩放尺寸
let isBig = true // 缩放动画 标识 let isBig = true // 缩放动画 标识
function drawNew() {
function draw() {
startAngle = startAngle - 5 startAngle = startAngle - 5
startAngle2 = startAngle2 + 5
if (isBig) { if (isBig) {
radius = radius + 0.5 radius = radius + 0.5
if (radius > maxradius) { if (radius > maxradius) {
@ -812,13 +1144,14 @@ onMounted(() => {
isBig = true isBig = true
} }
} }
let option = getOption(startAngle, radius, startAngle2) const option = getOption(startAngle, radius)
myChart.setOption(option, true) myChart.setOption(option, true)
} }
draw() drawNew()
// timer = setInterval(draw, 200) // draw();
setInterval(drawNew, 200)
}) })
</script> </script>

394
src/views/big-screen/model-components/right-three-model.vue
View File

@ -9,35 +9,26 @@
<script lang="ts" setup> <script lang="ts" setup>
import ScreenTitle from 'components/ScreenTitle/index.vue' import ScreenTitle from 'components/ScreenTitle/index.vue'
import { getLeaseCountByPublishCompanyApi } from 'http/api/screen/index'
import * as echarts from 'echarts' import * as echarts from 'echarts'
const echartsRef = ref(null) 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 myChart = echarts.init(echartsRef.value)
const datas = [
{
value: 30,
name: '安徽送变电',
},
{
value: 30,
name: '贵州送变电',
},
{
value: 30,
name: '广州送变电',
},
{
value: 30,
name: '合肥送变电',
},
{
value: 30,
name: '云南送变电',
},
]
const option = { const option = {
// backgroundColor: '#142468',
title: { title: {
//text: '实时旋转饼图' //text: '实时旋转饼图'
}, },
@ -63,49 +54,22 @@ onMounted(() => {
rate: { width: 6, align: 'right', fontSize: 13 }, rate: { width: 6, align: 'right', fontSize: 13 },
}, },
}, },
data: datas, data: pieData.value,
formatter: (name) => { formatter: (name: any) => {
if (datas.length) { if (pieData.value.length) {
const item = datas.filter((item) => item.name === name)[0] const item: any = pieData.value.filter((item: any) => item.name === name)[0]
return `{name|${name}}{value| ${item.value}} {rate| 台}` return `{name|${name}}{value| ${item.value}} {rate| 台}`
} }
}, },
}, },
tooltip: { tooltip: {
trigger: 'item', // trigger: 'item',
}, },
series: [ 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: '', name: '',
type: 'gauge', type: 'gauge',
splitNumber: 80, //刻度数量 splitNumber: 70, //刻度数量
radius: '98%', //图表尺寸 radius: '98%', //图表尺寸
center: ['30%', '50%'], center: ['30%', '50%'],
startAngle: 90, startAngle: 90,
@ -167,184 +131,6 @@ onMounted(() => {
data: _pie2(), 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: '', name: '',
type: 'pie', type: 'pie',
@ -377,7 +163,7 @@ onMounted(() => {
show: false, 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() { function _pie2() {
let dataArr = [] let dataArr = []
for (var i = 0; i < 8; i++) { for (var i = 0; i < 8; i++) {
@ -466,115 +234,13 @@ onMounted(() => {
return dataArr 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) myChart.setOption(option)
}
// var timer onMounted(() => {
Promise.all([getLeaseCountByPublishCompanyData()]).then(() => {
// function doing() { initCharts()
// // 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)
}) })
</script> </script>
@ -599,7 +265,7 @@ onMounted(() => {
left: 20%; left: 20%;
width: 80px; width: 80px;
height: 80px; height: 80px;
z-index: 999999999; // z-index: 10;
background: url('@/assets/img/screen/right_3.png') no-repeat; background: url('@/assets/img/screen/right_3.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }

45
src/views/big-screen/model-components/right-two-model.vue
View File

@ -6,28 +6,28 @@
<div class="track">租赁跟踪</div> <div class="track">租赁跟踪</div>
<div class="item1"> <div class="item1">
<div> <div>
<span class="pppp">139</span> <span class="pppp">{{ orderNumNew }}</span>
<span class="cccc">单</span> <span class="cccc">单</span>
</div> </div>
<div>订单数量</div> <div>订单数量</div>
</div> </div>
<div class="item2"> <div class="item2">
<div> <div>
<span class="pppp">139</span> <span class="pppp">{{ orderNum2 }}</span>
<span class="cccc">单</span> <span class="cccc">单</span>
</div> </div>
<div>已完成出租订单</div> <div>已完成出租订单</div>
</div> </div>
<div class="item3"> <div class="item3">
<div> <div>
<span class="pppp">139</span> <span class="pppp">{{ orderNum3 }}</span>
<span class="cccc">单</span> <span class="cccc">单</span>
</div> </div>
<div>待接收装备</div> <div>待出库订单</div>
</div> </div>
<div class="item4"> <div class="item4">
<div> <div>
<span class="pppp">139</span> <span class="pppp">{{ orderNum4 }}</span>
<span class="cccc">单</span> <span class="cccc">单</span>
</div> </div>
<div>正出租订单</div> <div>正出租订单</div>
@ -38,6 +38,33 @@
<script lang="ts" setup> <script lang="ts" setup>
import ScreenTitle from 'components/ScreenTitle/index.vue' 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -85,7 +112,7 @@ import ScreenTitle from 'components/ScreenTitle/index.vue'
left: 2%; left: 2%;
& div:first-child { & div:first-child {
font-size: 18px; font-size: 20;
color: #e5cb03; color: #e5cb03;
transform: translateY(-5px); transform: translateY(-5px);
} }
@ -94,7 +121,7 @@ import ScreenTitle from 'components/ScreenTitle/index.vue'
top: 26%; top: 26%;
right: 8%; right: 8%;
& div:first-child { & div:first-child {
font-size: 18px; font-size: 20;
color: #2793ff; color: #2793ff;
} }
} }
@ -102,7 +129,7 @@ import ScreenTitle from 'components/ScreenTitle/index.vue'
bottom: 6%; bottom: 6%;
left: 2%; left: 2%;
& div:first-child { & div:first-child {
font-size: 18px; font-size: 20;
color: #0de3ff; color: #0de3ff;
} }
} }
@ -110,7 +137,7 @@ import ScreenTitle from 'components/ScreenTitle/index.vue'
bottom: 6%; bottom: 6%;
right: 12%; right: 12%;
& div:first-child { & div:first-child {
font-size: 18px; font-size: 20;
color: #21d652; color: #21d652;
} }
} }