vue3前端，自己画div，及一些组件传参，引用

qzz12345

于 2023-09-20 17:20:31 发布

阅读量159

点赞数

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/qzz12345/article/details/131972852

版权

----------------------------------------componets
-------------------------spotFeeEchartInts.vue

------------------------------------spotPieEchartInts.vue

-----------------------------drillDown
eachEquimentDown.vue

<a-modal :visible=“props.visible1” :width=“1200” title=“详情” @cancel=“closeModal” @ok=“closeModal”>

<a-table :columns="columns1" :data-source="tableData1"></a-table>

-----------------------headUserDown.vue

<a-modal :visible=“props.visible2” :width=“1200” title=“详情” @cancel=“closeModal” @ok=“closeModal”>

<a-table :columns="columns" :data-source="tableData"></a-table>

------------------------spotTotalDown.vue

<a-modal :visible=“props.visible” :width=“1200” title=“详情” @cancel=“closeModal” @ok=“closeModal”>

<a-table :columns="columns" :data-source="tableData"></a-table>

-------------------------------spotFeeBoard.vue

  <div style="width: 100%;height: 20px;"></div>
  <div style="width: 49%;height: 400px;">
    <div class="log-content" style="width: 100%;height: 400px;">
      <div class="content-item">

        <storage-fee-echart-init style="width: 100%; height: 100%" @chartClick="(params) => chartClick(params,'uPmoProjectRadFee')"></storage-fee-echart-init>
      </div>
    </div>
  </div>
  <div  style="width: 49%;height: 400px;">
    <div class="log-content" style="width: 100%;height: 400px;">
      <div class="content-item">
        <storage-fee-echart-init  style="width: 100%; height: 100%" @chartClick="(params) => chartClick(params,'uPmoProjectAddRadFee')"></storage-fee-echart-init>
      </div>
    </div>
  </div>

</div>
<remark :visible="visible" :remarkParams="remarkParams" @closeModal="visible = false" />

----------------------------storageFeeData.ts
import {EChartsOption} from ‘echarts’
import {reactive} from ‘vue’
import * as echarts from “echarts”;

export const energyUrl = {
aaa: ‘11111’
}
export const uPmoStorageMaterialsOption = reactive({
title: {
text: ‘BG物料库存’,
x: ‘left’,
top: ‘3%’,
textStyle: {
color: ‘#000000’,
// color: this.color,
fontSize: 16,
},
},
tooltip: {
trigger: ‘item’,
formatter: function (params) {
let result = ‘’
if (params.name != null && params.name != ‘’) {
result = params.name + ': ’ + Number(Number(params.value).toFixed(2)).toLocaleString() + ‘千元’
}
return result
}
},
series: [
{
name: ‘Access From’,
type: ‘pie’,
radius: [‘36%’, ‘56%’],
color: [“#5aaef4”, “#4051e7”],
avoidLabelOverlap: false,
label: {
normal: {
fontSize: 15,
formatter: params => {
// console.log(params)
return ${params.name}：${Number(Number(params.value).toFixed(2)).toLocaleString()} (千元) \n ${params.percent}%
},
},

  },
  labelLine: {
    lineStyle: {
      width: 1
    }
  },
  data: []
},
{
  name: '总库存',
  type: 'pie',
  radius: ['0%', '0%'],
  itemStyle: { // 防止鼠标悬浮到标签时出现放大的点
    color: 'transparent'
  },
  label: {
    normal: {
      color: '#666',
      position: 'inside',
      fontSize: 15,
      formatter: params => {
        //console.log("2323232323",params)
        return `${(params.seriesName)} \n ${Number(Number(params.value).toFixed(2)).toLocaleString()} (千元)`
      },
    },

    // formatter: `{data|{c}}\n{serie|{a}}`,
    // rich: {
    //   data: {
    //     fontWeight: 'bold',
    //     fontSize: 24,
    //     color: '#666',
    //     lineHeight: 68,
    //     textBorderColor: `transparent`,
    //     textBorderWidth: 0
    //   },
    //   serie: {
    //     fontSize: 15,
    //     color: `#acbac6`,
    //     lineHeight: 28,
    //     textBorderColor: `transparent`,
    //     textBorderWidth: 0,
    //   }
    // }
  },
  labelLine: {
    show: false
  },
  data: [ // 计算表格数据value总和
    1000
  ]
}

]
})
export const uPmoMaterialsScrapOption = reactive({
title: {
text: ‘年度材料报废概览’,
x: ‘left’,
top: ‘3%’,
textStyle: {
color: ‘#000000’,
// color: this.color,
fontSize: 16,
},
},
tooltip: {
trigger: ‘axis’,
formatter: function (params) {
var res = ‘’;
// console.log(params);
for (var i = 0, l = params.length; i < l; i++) {
if (params[i].value != null) {
res += params[i].seriesName + ’ : ’ + Number(params[i].value.toFixed(2)).toLocaleString() + ’ 千元’ + ‘
’
} else {
res += params[i].seriesName + ’ : ’ + ‘
’
}
}
return res = params[0].axisValue + ‘
’ + res;
}
},
calculable: true,
legend: {
data: [‘年度预算’, ‘实际报废’, ‘滚测预算’],
x: ‘center’,
y: ‘bottom’,
},
grid: {
// top: ‘15%’, //距上边距
// left:‘1%’,//距离左边距
// right: ‘5%’, //距离右边距
bottom: ‘18%’, //距离下边距
},
xAxis: [
{
type: ‘category’,
data: [],
axisLabel: {
interval: 0,
// rotate: 15, //角度顺时针计算的
textStyle: {
// color: “#FFF”,
fontSize: 12,
},
},
},
],
yAxis: [
{
type: ‘value’,
show: true,
axisLine: {
show: true,
lineStyle: {
color: ‘#999’,
},
},
axisTick: {show: false},
splitLine: {
show: false,
lineStyle: {
color: ‘#ccc’,
opacity: 0.6,
},
},
axisLabel: {
textStyle: {
color: ‘#333’,
fontSize: 12,
},
},
},
],
series: [
{
name: ‘年度预算’,
type: ‘bar’,
data: [],
itemStyle: {
normal: {
color: ‘#4051e7’,
label: {
show: false,
position: ‘top’,
formatter: function (params) {
return Number(params.value.toFixed(2)).toLocaleString()
}
},
},
},
},
{
name: ‘实际报废’,
type: ‘bar’,
data: [],
itemStyle: {
normal: {
color: ‘#5aaef4’,
},
},
},
{
name: ‘滚测预算’,
type: ‘bar’,
data: [],
itemStyle: {
normal: {
color:‘#ffc000’,
},
},
},
],
})
export const uPmoScrapMonthFeeOption = reactive({
title: {
text: ‘各项目报废金额’,
x: ‘left’,
top: ‘3%’,
textStyle: {
color: ‘#000000’,
// color: this.color,
fontSize: 16,
},
},
tooltip: {
trigger: ‘axis’,
formatter: function (params) {
var res = ‘’;
// console.log(params);
for (var i = 0, l = params.length; i < l; i++) {
if (params[i].value != null) {
res += params[i].seriesName + ’ : ’ + Number(params[i].value.toFixed(2)).toLocaleString() + ’ 千元’ + ‘
’
} else {
res += params[i].seriesName + ’ : ’ + ‘
’
}
}
return res = params[0].axisValue + ‘
’ + res;
}
},
calculable: true,
legend: {
data: [‘当月报废金额’, ‘下月预估报废金额’],
x: ‘center’,
y: ‘bottom’,
},
grid: {
// top: ‘15%’, //距上边距
left:‘15%’,//距离左边距
// right: ‘5%’, //距离右边距
bottom: ‘18%’, //距离下边距
},
xAxis: [
{
type: ‘category’,
data: [],
axisLabel: {
interval: 0,
// rotate: 15, //角度顺时针计算的
textStyle: {
// color: “#FFF”,
fontSize: 12,
},
},
},
],
yAxis: [
{
type: ‘value’,
show: true,
axisLine: {
show: true,
lineStyle: {
color: ‘#999’,
},
},
axisTick: {show: false},
splitLine: {
show: false,
lineStyle: {
color: ‘#ccc’,
opacity: 0.6,
},
},
axisLabel: {
textStyle: {
color: ‘#333’,
fontSize: 12,
},
},
},
],
dataZoom: [
{
xAxisIndex: [0],
type: ‘slider’,
height: 10,
start: 0,
end: 22,
handleIcon:
‘M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z’,
},
],
series: [
{
name: ‘当月报废金额’,
type: ‘bar’,
data: [],
itemStyle: {
normal: {
color: ‘#4051e7’,
label: {
show: false,
position: ‘top’,
formatter: function (params) {
return Number(params.value.toFixed(2)).toLocaleString()
}
},
},
},
},
{
name: ‘下月预估报废金额’,
type: ‘bar’,
data: [],
itemStyle: {
normal: {
color: ‘#5aaef4’,
},
},
},
],
})

------------------------------------------------------storageFeePage.aps.ts
import { defHttp } from ‘/@/utils/http/axios’

enum Api {
uPmoBuAndProject = ‘/intelligentoffice/pmoSelectList/getBuAndProjectListBySys’,
uPmoStateList = ‘/intelligentoffice/pmoSelectList/getStateList’,
//PMO仓储物料库存
uPmoStorageMaterials = ‘/intelligentoffice/uPmo/uPmoStorageFee/uPmoStorageMaterials’,
//PMO_年度材料报废概览
uPmoMaterialsScrap = ‘/intelligentoffice/uPmo/uPmoStorageFee/uPmoMaterialsScrap’,
//PMO月度报废金额
uPmoScrapMonthFee = ‘/intelligentoffice/uPmo/uPmoStorageFee/uPmoScrapMonthFee’,

}

export const uPmoBuAndProject = () => defHttp.get({ url: Api.uPmoBuAndProject },{isTransformResponse: false})
export const uPmoStateList = (params) => defHttp.get({ url: Api.uPmoStateList, params },{isTransformResponse: false})
export const uPmoStorageMaterials = (params) => defHttp.get({ url: Api.uPmoStorageMaterials, params },{isTransformResponse: false})
export const uPmoMaterialsScrap = (params) => defHttp.get({ url: Api.uPmoMaterialsScrap, params },{isTransformResponse: false})
export const uPmoScrapMonthFee = (params) => defHttp.get({ url: Api.uPmoScrapMonthFee, params },{isTransformResponse: false})

qzz12345

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3前端，自己画div，及一些组件传参，引用

res += params[i].seriesName + ’ : ’ + Number(params[i].value.toFixed(2)).toLocaleString() + ’ 千元’ + ‘res += params[i].seriesName + ’ : ’ + Number(params[i].value.toFixed(2)).toLocaleString() + ’ 千元’ + ‘// top: ‘15%’, //距上边距。// top: ‘15%’, //距上边距。
复制链接

扫一扫