| 1 |
- {"remainingRequest":"D:\\test\\ssi-satoken\\ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\test\\ssi-satoken\\ui\\src\\views\\largeScreen\\components\\realIncome.vue?vue&type=style&index=0&id=4d30fb64&scoped=true&lang=css&","dependencies":[{"path":"D:\\test\\ssi-satoken\\ui\\src\\views\\largeScreen\\components\\realIncome.vue","mtime":1697164257251},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\css-loader\\dist\\cjs.js","mtime":1669864554855},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1697679531049},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\postcss-loader\\src\\index.js","mtime":1669864555556},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1669864538178},{"path":"D:\\test\\ssi-satoken\\ui\\node_modules\\vue-loader\\lib\\index.js","mtime":1697679531049}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoucmVhbEluY29tZURpdnsKICBtYXJnaW4tdG9wOiAxJTsKfQojcmVhbEluY29tZUNoYXJ0ewogIHdpZHRoOiAxMDAlOwogIGhlaWdodDogY2FsYygyNXZoKTsKfQo="},{"version":3,"sources":["realIncome.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0TA;AACA;AACA;AACA;AACA;AACA;AACA","file":"realIncome.vue","sourceRoot":"src/views/largeScreen/components","sourcesContent":["<template>\n <div class=\"realIncomeDiv\">\n <div id=\"realIncomeChart\"/>\n </div>\n</template>\n\n<script>\nimport * as echarts from 'echarts';\nexport default {\n name: \"realIncome\",\n data(){\n return{\n realIncomeChart: null,\n chartsData: [{\n \"longTerm\": 60000.00,\n \"realtime\": 15817.88,\n \"areaCode\": \"2023-01-01\",\n \"dayAhead\": -2046.05\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": -3003.84,\n \"areaCode\": \"2023-01-02\",\n \"dayAhead\": -1040.6\n }, {\n \"longTerm\": 85000.00,\n \"realtime\": 24063.9,\n \"areaCode\": \"2023-01-03\",\n \"dayAhead\": -2157.33\n }, {\n \"longTerm\": 85000.00,\n \"realtime\": -1884.01,\n \"areaCode\": \"2023-01-04\",\n \"dayAhead\": -4076.09\n }, {\n \"longTerm\": 85000.00,\n \"realtime\": 12160.95,\n \"areaCode\": \"2023-01-05\",\n \"dayAhead\": -243.73\n }, {\n \"longTerm\": 85000.00,\n \"realtime\": 35670.6,\n \"areaCode\": \"2023-01-06\",\n \"dayAhead\": 25228.42\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": 73451.11,\n \"areaCode\": \"2023-01-07\",\n \"dayAhead\": -2015.61\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": 5663.11,\n \"areaCode\": \"2023-01-08\",\n \"dayAhead\": -1584.1\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": -650.08,\n \"areaCode\": \"2023-01-09\",\n \"dayAhead\": 38308.28\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": -190.64,\n \"areaCode\": \"2023-01-10\",\n \"dayAhead\": 55635.18\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": 59934.79,\n \"areaCode\": \"2023-01-11\",\n \"dayAhead\": 36909.07\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": 14270.39,\n \"areaCode\": \"2023-01-12\",\n \"dayAhead\": 8002.58\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": 28782.39,\n \"areaCode\": \"2023-01-13\",\n \"dayAhead\": 46143.18\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": -615.92,\n \"areaCode\": \"2023-01-14\",\n \"dayAhead\": 91492.18\n }, {\n \"longTerm\": 35000.00,\n \"realtime\": -3803.02,\n \"areaCode\": \"2023-01-15\",\n \"dayAhead\": 102733.9\n }, {\n \"longTerm\": 35000.00,\n \"realtime\": -1010.63,\n \"areaCode\": \"2023-01-16\",\n \"dayAhead\": 88342.79\n }, {\n \"longTerm\": 35000.00,\n \"realtime\": -5593.51,\n \"areaCode\": \"2023-01-17\",\n \"dayAhead\": 129679.17\n }, {\n \"longTerm\": 35000.00,\n \"realtime\": -4581.2,\n \"areaCode\": \"2023-01-18\",\n \"dayAhead\": 122571.72\n }, {\n \"longTerm\": 35000.00,\n \"realtime\": -1116.21,\n \"areaCode\": \"2023-01-19\",\n \"dayAhead\": 93421.37\n }, {\n \"longTerm\": 35000.00,\n \"realtime\": -4481.71,\n \"areaCode\": \"2023-01-20\",\n \"dayAhead\": 128988.11\n }, {\n \"longTerm\": 35000.00,\n \"realtime\": -168.33,\n \"areaCode\": \"2023-01-21\",\n \"dayAhead\": 38294.66\n }, {\n \"longTerm\": 35000.00,\n \"realtime\": 8030.32,\n \"areaCode\": \"2023-01-22\",\n \"dayAhead\": 28668.99\n }, {\n \"longTerm\": 35000.00,\n \"realtime\": -1562.91,\n \"areaCode\": \"2023-01-23\",\n \"dayAhead\": 88025.48\n }, {\n \"longTerm\": 35000.00,\n \"realtime\": -4477.06,\n \"areaCode\": \"2023-01-24\",\n \"dayAhead\": 44932.76\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": -6344.32,\n \"areaCode\": \"2023-01-25\",\n \"dayAhead\": 86480.9\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": -6560.66,\n \"areaCode\": \"2023-01-26\",\n \"dayAhead\": 89925.16\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": -1003.19,\n \"areaCode\": \"2023-01-27\",\n \"dayAhead\": 78484.89\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": -600.03,\n \"areaCode\": \"2023-01-28\",\n \"dayAhead\": 71353.94\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": -443.65,\n \"areaCode\": \"2023-01-29\",\n \"dayAhead\": 56079.58\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": 6084.05,\n \"areaCode\": \"2023-01-30\",\n \"dayAhead\": -2007.98\n }, {\n \"longTerm\": 60000.00,\n \"realtime\": -163.88,\n \"areaCode\": \"2023-01-31\",\n \"dayAhead\": 24752.55\n }]\n }\n },\n destroyed() {\n this.realIncomeChart = null\n },\n mounted() {\n this.initChart()\n },\n methods:{\n initChart(){\n if (this.realIncomeChart === null) {\n this.realIncomeChart = echarts.init(document.getElementById('realIncomeChart'));\n }\n const option = {\n color: ['#FF0087', '#18d0f0', '#FAFE7C', '#37ff57'],\n grid: {\n left: 10,\n right: 10,\n bottom: 20,\n top: 30,\n containLabel: true\n },\n tooltip: {\n trigger: 'axis', // x轴触发\n formatter: function (params) {\n let list = []\n let listItem\n params.forEach((item) => {\n let unitValue = item.value + '元'\n list.push(item.marker + '' + item.seriesName + ': ' + unitValue)\n })\n listItem = list.join('<br/>')\n return '<div>' + listItem + '</div>'\n }\n },\n // legend: {\n // orient: 'horizontal', // 水平排列\n // x: 'center', //可设定图例在左、右、居中\n // y: 'top', //可设定图例在上、下、居中\n // padding: 6, //位置也可为数组 [距上方距离，距右方距离，距下方距离，距左方距离]\n // },\n xAxis: {\n type: 'category',\n data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10',\n '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',\n '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],\n nameTextStyle: {\n color: '#fff'\n },\n axisLine: {\n lineStyle: {\n color: '#fff'\n }\n }\n },\n yAxis: {\n type: 'value',\n name: '单位：元',\n nameTextStyle:{\n color:'#fff'\n },\n axisLine:{\n show:true,\n lineStyle:{\n color: '#fff'\n }\n }\n },\n series: [\n {\n name: '中长期',\n type: 'line',\n lineStyle: {\n // color: '#FF0087',\n width: 3\n },\n symbol: 'circle',\n symbolSize: 5,\n showSymbol: false,\n data: this.chartsData.map(d => {\n return d.longTerm\n })\n },\n {\n name: '日前',\n type: 'line',\n lineStyle: {\n // color: '#18d0f0',\n width: 3\n },\n symbol: 'circle',\n symbolSize: 5,\n showSymbol: false,\n data: this.chartsData.map(d => {\n return d.dayAhead\n })\n },\n {\n name: '实时',\n type: 'line',\n lineStyle: {\n // color: '#FAFE7C',\n width: 3\n },\n symbol: 'circle',\n symbolSize: 5,\n showSymbol: false,\n data: this.chartsData.map(d => {\n return d.realtime\n })\n },\n {\n name: \"总收入\",\n data: this.chartsData.map(d => {\n return (d.longTerm + d.dayAhead + d.realtime).toFixed(2)\n }),\n type: 'bar',\n showBackground: true,\n // itemStyle: {\n // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n // { offset: 0, color: '#f4eb8f' },\n // { offset: 0.4, color: '#aaff5c' },\n // { offset: 0.8, color: '#01f934' },\n // { offset: 1, color: '#18f096' }\n // ])\n // },\n // itemStyle: {\n // color: '#37ff57'\n // }\n }\n ]\n };\n\n option && this.realIncomeChart.setOption(option);\n window.addEventListener('resize', () => {\n if (this.dayIncomeChart) {\n this.dayIncomeChart.resize()\n }\n })\n }\n }\n}\n</script>\n\n<style scoped>\n.realIncomeDiv{\n margin-top: 1%;\n}\n#realIncomeChart{\n width: 100%;\n height: calc(25vh);\n}\n</style>\n"]}]}
|
