diff --git a/components.d.ts b/components.d.ts
index 4d8a23e..06def7a 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -29,6 +29,7 @@ declare module 'vue' {
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']
@@ -36,6 +37,7 @@ declare module 'vue' {
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']
diff --git a/src/http/api/screen/index.ts b/src/http/api/screen/index.ts
index a84e66e..975be9b 100644
--- a/src/http/api/screen/index.ts
+++ b/src/http/api/screen/index.ts
@@ -10,7 +10,7 @@ export const getLeaseCountByTypeNameApi = (data: any = {}) => {
}
// 装备租赁互联
export const getLeaseCouplesApi = (data: any = {}) => {
- return get('/material-mall/largeScreen/getLeaseCouples', data)
+ return get('/material-mall/largeScreen/getCompanyNum', data)
}
// 装备上架统计
diff --git a/src/views/big-screen/model-components/left-three-model.vue b/src/views/big-screen/model-components/left-three-model.vue
index 3cc01f6..9252d15 100644
--- a/src/views/big-screen/model-components/left-three-model.vue
+++ b/src/views/big-screen/model-components/left-three-model.vue
@@ -13,1146 +13,425 @@ import IconImg from '@/assets/img/screen/999.svg'
import * as echarts from 'echarts'
const echartsRef = ref(null)
const secondsTimer: any = ref(null)
+const oneArr: any = ref([
+ // {
+ // name: '亳州分公司',
+ // type: 0,
+ // symbol: 'image://' + IconImg,
+ // symbolSize: 45,
+ // },
+])
+const erArr: any = ref([
+ // {
+ // 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,
+ // },
+])
const getLeaseCouplesData = async () => {
- // const res = await getLeaseCouplesApi()
+ const res: any = await getLeaseCouplesApi()
// console.log(res, '装备租赁互联')
-}
-// getLeaseCouplesData()
-
-onMounted(() => {
- const myChart = echarts.init(echartsRef.value)
- // let points = [
- // {
- // name: '市城市管理局',
- // desc: {
- // type: 1,
- // },
- // },
- // {
- // name: '科大讯飞',
- // desc: {
- // type: 2,
- // },
- // },
- // {
- // name: '市水利局',
- // desc: {
- // type: 1,
- // },
- // },
- // {
- // name: '市政法委',
- // desc: {
- // type: 1,
- // },
- // },
- // {
- // name: '市自然资源和规划局',
- // desc: {
- // type: 1,
- // },
- // },
- // {
- // name: '市生态环境局',
- // desc: {
- // type: 1,
- // },
- // },
- // {
- // name: '市大数据局',
- // desc: {
- // type: 3,
- // },
- // },
- // ]
- // let color = ['#ffffff', '#36fff6', '#ffe93a', '#67f95f']
- // let oneArr = [
- // {
- // name: '中心点',
- // desc: {
- // type: 0,
- // },
- // symbol: 'none',
- // symbolSize: 233,
- // },
- // ]
- // let erArr = points
- // let allArr = [...oneArr, ...erArr],
- // dataArr = []
- // // 点
- // allArr.forEach((el, ind) => {
- // if (el.desc.type > 0) {
- // el.symbolSize = 50
- // el.symbol =
- // 'path://M544 552.325V800a32 32 0 0 1-32 32 31.375 31.375 0 0 1-32-32V552.325L256 423.037a32 32 0 0 1-11.525-43.512A31.363 31.363 0 0 1 288 368l224 128 222.075-128a31.363 31.363 0 0 1 43.525 11.525 31.988 31.988 0 0 1-11.525 43.513L544 551.038z m0 0,M64 256v512l448 256 448-256V256L512 0z m832 480L512 960 128 736V288L512 64l384 224z m0 0'
- // el.itemStyle = {
- // color: color[el.desc.type],
- // }
- // }
- // el.label = {
- // normal: {
- // show: true,
- // position: 'bottom',
- // distance: 10,
- // color: color[el.desc.type],
- // },
- // }
- // })
-
- // // 圆形分区
- // function CalutePointToSplitCircle(arr, option) {
- // const newArray = []
- // const { length: arLen } = arr
- // let single_angle = (360 / arLen).toFixed(2)
- // let UtilCalute = {
- // calute_x: (ang, radius) => {
- // return (Math.cos((ang * Math.PI) / 180).toFixed(2) * radius).toFixed(2)
- // },
- // calute_y: (ang, radius) => {
- // return (Math.sin((ang * Math.PI) / 180).toFixed(2) * radius).toFixed(2)
- // },
- // }
- // // 正东方向开始 逆时针方向
- // arr.forEach((e, index) => {
- // let itemDesc = e.desc
- // let ang =
- // option.stratAngle +
- // (itemDesc.angle && typeof itemDesc.angle === 'number'
- // ? itemDesc.angle
- // : single_angle * index)
- // // 各节点中心点
- // const x = UtilCalute.calute_x(ang, option.raduis)
- // const y = UtilCalute.calute_y(ang, option.raduis)
- // // 各节点连接到中心的线段的起点 减去节点的半径
- // const x1 = UtilCalute.calute_x(ang, option.raduis - option.nodeRadius)
- // const y1 = UtilCalute.calute_y(ang, option.raduis - option.nodeRadius)
- // // 各节点连接到中心的线段的终点
- // const x0 = UtilCalute.calute_x(ang, option.emptyCenterRadius)
- // const y0 = UtilCalute.calute_y(ang, option.emptyCenterRadius)
-
- // e.value = [x, y] // 节点中心点
- // e.lineData = [
- // [x1, y1],
- // [x0, y0],
- // ]
- // newArray.push(e)
- // })
- // return newArray
- // }
-
- // // 线配置
- // function linesConfig(arr) {
- // let dataArr = []
-
- // function getFormatItem(item, start, end) {
- // return [
- // { coord: item.lineData[start] }, // 起点
- // {
- // coord: item.lineData[end],
- // lineStyle: {
- // color: '#0BC6FE',
- // curveness: item.desc.type === 3 ? 0.1 : 0,
- // },
- // effect: {
- // color: color[item.desc.type],
- // },
- // }, // 终点
- // ]
- // }
-
- // arr.forEach((el) => {
- // switch (el.desc.type) {
- // case 0:
- // break
- // case 1:
- // // 外到内
- // dataArr.push(getFormatItem(el, 0, 1))
- // break
- // case 2:
- // // 内到外
- // dataArr.push(getFormatItem(el, 1, 0))
- // break
- // case 3:
- // // 双向
- // dataArr.push(getFormatItem(el, 0, 1))
- // dataArr.push(getFormatItem(el, 1, 0))
- // break
- // }
- // })
- // return dataArr
- // }
-
- // // 点分布
- // oneArr = CalutePointToSplitCircle(oneArr, {
- // stratAngle: 0,
- // raduis: 0,
- // nodeRadius: 0,
- // emptyCenterRadius: 0,
- // })
- // erArr = CalutePointToSplitCircle(erArr, {
- // stratAngle: 0,
- // raduis: 40,
- // nodeRadius: 5,
- // emptyCenterRadius: 10,
- // })
-
- // allArr = [...oneArr, ...erArr]
- // // 线坐标和配置
- // dataArr = linesConfig(allArr)
- // // 生成虚线 饼图数据
- // function generateData(totalNum, bigvalue, smallvalue, color) {
- // 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: 0,
- // },
- // },
- // })
- // } else {
- // dataArr.push({
- // name: (i + 1).toString(),
- // value: smallvalue,
- // itemStyle: {
- // normal: {
- // color: 'rgba(0,0,0,0)',
- // borderWidth: 0,
- // },
- // },
- // })
- // }
- // }
- // return dataArr
- // }
-
- // let dolitData = generateData(100, 25, 20, 'rgb(126,190,255)')
- // let threeData = generateData(6, 40, 10, '#2dc0c9')
-
- // function getOption(startAngle, radius) {
- // let option = {
- // backgroundColor: '#081c47',
- // // title: {
- // // text: '自定义方向的数据流向动画',
- // // left: 'center',
- // // textStyle: {
- // // color: '#fff',
- // // },
- // // },
- // 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,
- // },
- // graphic: {
- // elements: [
- // {
- // type: 'text',
- // z: 7,
- // style: {
- // text: '地理信息中台',
- // textAlign: 'center',
- // fill: '#fff',
- // font: '14px "Microsoft YaHei"',
- // },
- // left: 'center',
- // top: 'center',
- // },
- // {
- // type: 'image',
- // z: 4,
- // style: {
- // image: './asset/get/s/data-1641374427371-xPKsRNQ2l.png',
- // width: 170,
- // height: 170,
- // },
- // left: 'center',
- // top: 'center',
- // },
- // ],
- // },
- // series: [
- // {
- // name: '节点',
- // type: 'graph',
- // silent: false,
- // hoverAnimation: false, // 鼠标悬浮高亮
- // cursor: 'default',
- // coordinateSystem: 'cartesian2d',
- // z: 3,
- // lineStyle: {
- // width: 2,
- // color: 'source',
- // type: 'dashed',
- // },
- // 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,
- // },
- // {
- // name: '不动外圆',
- // type: 'pie',
- // zlevel: 4,
- // silent: true,
- // radius: ['60%', '59%'],
- // label: {
- // normal: {
- // show: false,
- // },
- // },
- // labelLine: {
- // normal: {
- // show: false,
- // },
- // },
- // data: dolitData,
- // },
- // {
- // type: 'pie',
- // name: '旋转圆',
- // zlevel: 20,
- // silent: true,
- // radius: ['50%', '49%'],
- // hoverAnimation: false,
- // startAngle: startAngle,
- // data: threeData,
- // label: {
- // normal: {
- // show: false,
- // },
- // },
- // labelLine: {
- // normal: {
- // show: false,
- // },
- // },
- // },
- // {
- // name: '缩放圆',
- // type: 'pie',
- // zlevel: 4,
- // silent: true,
- // radius: [radius + 1 + '%', radius + '%'],
- // label: {
- // normal: {
- // show: false,
- // },
- // },
- // labelLine: {
- // normal: {
- // show: false,
- // },
- // },
- // data: dolitData,
- // },
- // ],
- // }
- // return option
- // }
-
- // let startAngle = 50 // 初始旋转角度
- // let [minradius, radius, maxradius] = [22, 22, 24] // 最小、初始、最大 缩放尺寸
- // let isBig = true // 缩放动画 标识
-
- // function draw() {
- // startAngle = startAngle - 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)
- // myChart.setOption(option, true)
- // }
-
- // timer = setInterval(draw, 200)
-
- // var uploadedDataURL = '/asset/get/s/data-1641348469450-lnHzw8_eG.png'
-
- // var uploadedDataURL1 = '/asset/get/s/data-1641347891384-dznNRXRza.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 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: '亳州分公司',
- 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) => {
- if (el.type > 0) {
- el.symbolSize = 45
- el.symbol = 'image://' + uploadImg2
- el.itemStyle = {
- color: color[el.type],
- }
+ const arr = res.data.map((item: any, index: any) => {
+ if ((index = 0)) {
+ item.type = 0
}
- el.label = {
- 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,
- },
- },
+ item.type = 1
+ item.symbol = 'image://' + IconImg
+ item.symbolSize = 45
+ item.name = item.companyName
+ return {
+ type: item.type,
+ symbol: 'image://' + IconImg,
+ name: item.companyName,
+ orderNum: item.orderNum,
}
})
+ // console.log('🚀 ~ getLeaseCouplesData ~ arr:', arr)
+ oneArr.value = [arr[0]]
+ // oneArr.value[0].type = 0
+ // console.log('🚀 ~ getLeaseCouplesData ~ oneArr.value:', oneArr.value)
+ erArr.value = arr.slice(1)
+ // console.log('🚀 ~ getLeaseCouplesData ~ erArr.value:', erArr.value)
+}
+getLeaseCouplesData()
- // 圆形分区
- function group(arr, r) {
- const newArray = []
- const arLen = arr.length
- 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)
+onMounted(() => {
+ setTimeout(() => {
+ const myChart = echarts.init(echartsRef.value)
+ // 添加点击事件监听器
+ myChart.on('click', function (params) {
+ if (params.componentType === 'series' && params.seriesType === 'graph') {
+ // console.log('点击了项:', params, allArr)
+ allArr.forEach((item: any) => {
+ // console.log('🚀 ~ allArr.forEach ~ item:', item)
+ item.type = 1
+ if (item.name == params.name) {
+ if (item.type == 0) {
+ item.type = 1
+ } else {
+ item.type = 0
+ }
+ }
+ })
+ // 获取 type 为 0 的数据
+ let oneArr = allArr.filter((item: any) => {
+ return item.type == 0
+ })
+ // console.log('🚀 ~ oneArr ~ oneArr:', oneArr)
+ // 获取 type 为 1 的数据
+ let erArr = allArr.filter((item: any) => {
+ return item.type == 1
+ })
+ // console.log('🚀 ~ erArr ~ erArr:', erArr)
+ oneArr = group(oneArr, 0)
+ erArr = group(erArr, 40)
+ allArr = [...oneArr, ...erArr]
+ // console.log('🚀 ~ allArr:', allArr)
+
+ // 更新数据
+ myChart.setOption({
+ tooltip: {
+ trigger: 'item', // 触发类型为数据项
+ formatter: function (params: any) {
+ // 显示完整的公司名称和订单数
+ return `公司名称: ${params.name}
订单数: ${params.data.orderNum}`
+ },
+ },
+ }) // true 表示合并更新
+ }
})
- return newArray
- }
- // 线配置
- function linesConfig(arr) {
- const [dataArr, targetCoord] = [[], [0, 0]]
- arr.forEach((el) => {
- function getFormatItem(start, end) {
- let item = [
- { coord: el.twoPoint[start] }, // 起点
+ 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 allArr = [...oneArr.value, ...erArr.value],
+ dataArr: any = []
+ // 点
+ allArr.forEach((el, ind) => {
+ if (el.type > 0) {
+ el.symbolSize = 45
+ el.symbol = 'image://' + uploadImg2
+ el.itemStyle = {
+ color: color[el.type],
+ }
+ }
+ el.label = {
+ show: true,
+ position: 'bottom',
+ distance: -30,
+ color: color[el.type],
+ formatter: function (params: any) {
+ // console.log('🚀 ~ allArr.forEach ~ params:', params)
+ const maxLength = 6 // 设置最大显示长度
+ const name =
+ params.data.name.length > maxLength
+ ? params.data.name.substring(0, maxLength) + '...'
+ : params.data.name
+
+ // 如果是 '亳州分公司'，显示名称并加上租赁数
+ return [
+ `{c|订单数：${params.data.orderNum}}`,
+ `{b|${name}}`, // 显示名称
+ ].join('\n') // 换行显示
+ },
+ rich: {
+ b: {
+ fontSize: 12,
+ },
+ c: {
+ fontSize: 12,
+ },
+ },
+ }
+ })
+
+ // 圆形分区
+ function group(arr: any, r: any) {
+ const newArray: any = []
+ const arLen = arr.length
+ arr.forEach((e: any, ind: any) => {
+ // 按角度均匀分布
+ 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: any) {
+ const [dataArr, targetCoord] = [[], [0, 0]]
+ arr.forEach((el: any) => {
+ function getFormatItem(start: any, end: any) {
+ 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],
+ },
+ }, // 终点
+ ]
+ 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.value = group(oneArr.value, 0)
+ erArr.value = group(erArr.value, 40)
+ // twoArr = group(twoArr, -50);
+
+ allArr = [...oneArr.value, ...erArr.value]
+ // 线坐标和配置
+ dataArr = linesConfig(allArr)
+
+ function generateData(totalNum: any, bigvalue: any, smallvalue: any, color: any) {
+ let dataArr = []
+ for (var i = 0; i < totalNum; i++) {
+ if (i % 2 === 0) {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: bigvalue,
+ itemStyle: {
+ color: color,
+ borderWidth: 0,
+ },
+ })
+ } else {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: smallvalue,
+ itemStyle: {
+ color: 'rgba(0,0,0,0)',
+ borderWidth: 0,
+ },
+ })
+ }
+ }
+ return dataArr
+ }
+
+ let dolitData = generateData(100, 25, 20, 'rgb(126,190,255)')
+ let threeData = generateData(6, 40, 10, '#2dc0c9')
+
+ function getOption(startAngle: any, radius: any) {
+ let option = {
+ tooltip: {
+ trigger: 'item', // 触发类型为数据项
+ formatter: function (params: any) {
+ // 显示完整的公司名称和订单数
+ return `公司名称: ${params.name}
订单数: ${params.data.orderNum}`
+ },
+ },
+ backgroundColor: '#081c47',
+ 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: [
{
- coord: el.twoPoint[end],
+ name: '节点',
+ type: 'graph',
+ silent: false,
+ hoverAnimation: false, // 鼠标悬浮高亮
+ cursor: 'default',
+ coordinateSystem: 'cartesian2d',
+ z: 3,
+ itemStyle: {
+ shadowColor: 'none',
+ },
+ emphasis: {
+ scale: false,
+ },
+ data: allArr,
+ },
+ {
+ name: '线图',
+ type: 'lines',
+ hoverAnimation: false,
+ silent: false,
+ cursor: 'default',
+ coordinateSystem: 'cartesian2d',
+ polyline: false, // 多线段
+ z: 1,
lineStyle: {
- color: color[el.type],
- curveness: el.type === 3 ? 0.1 : 0,
+ width: 1,
+ type: 'dashed',
+ curveness: 0,
},
effect: {
- color: color[el.type],
+ // show: true,
+ // period: 4, //箭头指向速度，值越小速度越快
+ // trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
+ // symbol: 'arrow', //箭头图标
+ // symbolSize: 6,
},
- }, // 终点
- ]
- 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)
- // twoArr = group(twoArr, -50);
-
- allArr = [...oneArr, ...erArr]
- // 线坐标和配置
- dataArr = linesConfig(allArr)
-
- function generateData(totalNum, bigvalue, smallvalue, color) {
- let dataArr = []
- for (var i = 0; i < totalNum; i++) {
- if (i % 2 === 0) {
- dataArr.push({
- name: (i + 1).toString(),
- value: bigvalue,
- itemStyle: {
- color: color,
- borderWidth: 0,
+ emphasis: {
+ lineStyle: {
+ type: 'dashed',
+ },
+ },
+ data: dataArr,
},
- })
+ {
+ 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: ['40%', '39%'], //圆的大小
+ hoverAnimation: false,
+ startAngle: startAngle,
+ data: threeData,
+ label: {
+ normal: {
+ show: false,
+ },
+ },
+ labelLine: {
+ normal: {
+ show: false,
+ },
+ },
+ },
+ {
+ name: '缩放圆',
+ type: 'pie',
+ zlevel: 4,
+ silent: true,
+ radius: [radius + 1 + '%', radius + '%'],
+ label: {
+ normal: {
+ show: false,
+ },
+ },
+ labelLine: {
+ normal: {
+ show: false,
+ },
+ },
+ data: dolitData,
+ },
+ ],
+ }
+ // console.log(option)
+ return option
+ }
+
+ let startAngle = 50 // 初始旋转角度
+ let [minradius, radius, maxradius] = [24, 24, 28] // 初始缩放尺寸
+ let isBig = true // 缩放动画 标识
+ function drawNew() {
+ startAngle = startAngle - 5
+ if (isBig) {
+ radius = radius + 0.5
+ if (radius > maxradius) {
+ isBig = false
+ }
} else {
- dataArr.push({
- name: (i + 1).toString(),
- value: smallvalue,
- itemStyle: {
- color: 'rgba(0,0,0,0)',
- borderWidth: 0,
- },
- })
+ radius = radius - 0.5
+ if (radius < minradius) {
+ isBig = true
+ }
}
+ const option = getOption(startAngle, radius)
+ myChart.setOption(option, true)
}
- return dataArr
- }
- let dolitData = generateData(100, 25, 20, 'rgb(126,190,255)')
- let threeData = generateData(6, 40, 10, '#2dc0c9')
+ drawNew()
- function getOption(startAngle, radius) {
- let option = {
- backgroundColor: '#081c47',
- 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: {
- shadowColor: 'none',
- },
- emphasis: {
- scale: false,
- },
- data: allArr,
- },
- {
- name: '线图',
- type: 'lines',
- hoverAnimation: false,
- silent: false,
- cursor: 'default',
- coordinateSystem: 'cartesian2d',
- polyline: false, // 多线段
- z: 1,
- lineStyle: {
- width: 1,
- type: 'dashed',
- curveness: 0,
- },
- effect: {
- // show: true,
- // period: 4, //箭头指向速度，值越小速度越快
- // trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
- // symbol: 'arrow', //箭头图标
- // symbolSize: 6,
- },
- emphasis: {
- lineStyle: {
- type: 'dashed',
- },
- },
- data: dataArr,
- },
- {
- 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: ['40%', '39%'], //圆的大小
- hoverAnimation: false,
- startAngle: startAngle,
- data: threeData,
- label: {
- normal: {
- show: false,
- },
- },
- labelLine: {
- normal: {
- show: false,
- },
- },
- },
- {
- name: '缩放圆',
- type: 'pie',
- zlevel: 4,
- silent: true,
- radius: [radius + 1 + '%', radius + '%'],
- label: {
- normal: {
- show: false,
- },
- },
- labelLine: {
- normal: {
- show: false,
- },
- },
- data: dolitData,
- },
- ],
- }
- // console.log(option)
- return option
- }
-
- let startAngle = 50 // 初始旋转角度
- let [minradius, radius, maxradius] = [24, 24, 28] // 初始缩放尺寸
- let isBig = true // 缩放动画 标识
- function drawNew() {
- startAngle = startAngle - 5
- if (isBig) {
- radius = radius + 0.5
- if (radius > maxradius) {
- isBig = false
- }
- } else {
- radius = radius - 0.5
- if (radius < minradius) {
- isBig = true
- }
- }
- const option = getOption(startAngle, radius)
- myChart.setOption(option, true)
- }
-
- drawNew()
-
- // draw();
- secondsTimer.value = setInterval(drawNew, 200)
+ // draw();
+ secondsTimer.value = setInterval(drawNew, 1000)
+ }, 500)
})
// 销毁定时器
onUnmounted(() => {