Merge branch 'shenzhen-dev' of http://10.0.0.60/dhp/zhgdyun into shenzhen-dev
This commit is contained in:
yjl
commit
3b7688f4df
2238
package-lock.json
generated
2238
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -11,6 +11,7 @@
|
||||
"axios": "^0.19.2",
|
||||
"better-scroll": "^2.4.1",
|
||||
"core-js": "^3.6.5",
|
||||
"css-declaration-sorter": "^6.3.1",
|
||||
"dhtmlx-gantt": "^7.1.12",
|
||||
"dom-to-image": "^2.6.0",
|
||||
"echarts": "^5.1.0",
|
||||
|
||||
@ -18,7 +18,7 @@ var PROJECT = {
|
||||
}
|
||||
|
||||
|
||||
var PROJECT_TYPE = PROJECT.local_test
|
||||
var PROJECT_TYPE = PROJECT.online_zjsj
|
||||
|
||||
var headerShow = true; // 是否显示头部
|
||||
var tabsShow = true; // 是否显示tabs
|
||||
|
||||
@ -68,10 +68,20 @@ export const getQualityAcceptanceApi = data => get('/xmgl/qualityInspectionRecor
|
||||
|
||||
|
||||
/* --------------双碳管理------------ */
|
||||
//获取本月、累计发电量以及节能减排量
|
||||
//光伏发电--获取本月、累计发电量以及节能减排量
|
||||
export const getPowerCurrentDataApi = data => get('xmgl/photovoltaicPowerCurrentData/thisMonthAndTotalData',data)
|
||||
|
||||
//通过项目sn获取设备碳排放
|
||||
//设备碳排放排名TOP10--通过项目sn获取设备碳排放
|
||||
export const getPdoubleCarbonDevApi = data => get('xmgl/doubleCarbonDev/getDevCarbonEmission',data)
|
||||
|
||||
//总碳排放分析--通过项目sn和类型获取碳排放分析数据
|
||||
export const getdoubleCarbonApi = data => get('xmgl/doubleCarbon/ceAnalysis',data)
|
||||
|
||||
//用水用电碳排放情况统计--通过项目sn获取水电碳排放情况
|
||||
export const getweCarbonEmissionsApi = data => get('/xmgl/doubleCarbon/weCarbonEmissions',data)
|
||||
|
||||
//主要碳排放占比统计--通过项目sn获取水电碳排放情况
|
||||
|
||||
export const getgetCo2RatioApi = data => get('/xmgl/doubleCarbon/getCo2Ratio',data)
|
||||
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ if (process.env.NODE_ENV == 'development') {
|
||||
// axios.defaults.baseURL = 'http://124.71.178.44:100/' // 河南
|
||||
// tag: 本地
|
||||
// axios.defaults.baseURL = 'http://192.168.34.174:6023/' // 老大本地
|
||||
//axios.defaults.baseURL = 'http://192.168.34.116:6023/' // 邱平毅本地
|
||||
// axios.defaults.baseURL = 'http://192.168.34.116:6023/' // 邱平毅本地
|
||||
// axios.defaults.baseURL = 'http://192.168.34.117:6023/' // 杨杰本地
|
||||
// axios.defaults.baseURL = 'http://ue6a4s.natappfree.cc' // 邱平毅vpn本地
|
||||
// axios.defaults.baseURL = 'http://139.9.66.234:6324/' // 河南春笋
|
||||
|
||||
@ -45,9 +45,9 @@ export default new Vuex.Store({
|
||||
PAGESIZRS: [10, 20, 30, 50],
|
||||
// UPLOADURL:'http://10.0.1.43:6023/upload/image',//测试
|
||||
// FILEURL:'http://10.0.1.43:6023/image/',//测试
|
||||
// BASEURL: baseUrl ? baseUrl : window.location.protocol + '//' + window.location.host + '/', //
|
||||
// UPLOADURL: window.location.protocol + '//' + window.location.host + '/upload/image', //
|
||||
// FILEURL: window.location.protocol + '//' + window.location.host + '/image/', //测试 // tag: 本地测试接口
|
||||
BASEURL: baseUrl ? baseUrl : window.location.protocol + '//' + window.location.host + '/', //
|
||||
UPLOADURL: window.location.protocol + '//' + window.location.host + '/upload/image', //
|
||||
FILEURL: window.location.protocol + '//' + window.location.host + '/image/', //测试 // tag: 本地测试接口
|
||||
/* 2022-05-16 */
|
||||
// tag: 部署河南项目时，需要打开这两行代码
|
||||
// UPLOADURL: 'http://139.9.66.234:6324/upload/image',
|
||||
@ -57,9 +57,9 @@ export default new Vuex.Store({
|
||||
// UPLOADURL: 'http://182.90.224.237:7000/upload/image',
|
||||
// FILEURL: 'http://182.90.224.237:7000/image/',
|
||||
// 邱平毅的
|
||||
BASEURL:'http://192.168.34.116:6023/',
|
||||
UPLOADURL: 'http://192.168.34.116:6023/upload/image',
|
||||
FILEURL: 'http://192.168.34.116:6023/image/',
|
||||
// BASEURL:'http://192.168.34.116:6023/',
|
||||
// UPLOADURL: 'http://192.168.34.116:6023/upload/image',
|
||||
// FILEURL: 'http://192.168.34.116:6023/image/',
|
||||
// UPLOADURL: 'http://124.71.67.160:8088/upload/image',
|
||||
// FILEURL: 'http://124.71.67.160:8088/image/',
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Card title="总碳排放分析">
|
||||
<div class="carbonEmission">
|
||||
<el-date-picker
|
||||
<!-- <el-date-picker
|
||||
v-model="time1"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
@ -9,13 +9,28 @@
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
size="mini"
|
||||
></el-date-picker>
|
||||
></el-date-picker> -->
|
||||
<el-select
|
||||
style="margin-top: 20px"
|
||||
v-model="date"
|
||||
placeholder="请选择日期"
|
||||
@change="credad"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in yearsList"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="chart" ref="carbonChart"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getdoubleCarbonApi } from "@/assets/js/api/zhongjianFourth";
|
||||
import echarts from "echarts4";
|
||||
import Card from "../components/Card.vue";
|
||||
|
||||
@ -25,13 +40,58 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time1:'',
|
||||
}
|
||||
yearsList: [
|
||||
{
|
||||
value: "1",
|
||||
label: "最近1年",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "最近14天",
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
label: "最近7天",
|
||||
},
|
||||
],
|
||||
date: "", //日期
|
||||
projectSn: this.$store.state.projectSn, //项目sn
|
||||
typeId: "", //日期类型
|
||||
carbonListNum: [], //总数据
|
||||
carbonList1: [], //碳排放
|
||||
carbonList2: [], //减少碳排放
|
||||
carbonList3: [], //净碳排放
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.credad();
|
||||
},
|
||||
mounted() {
|
||||
this.createCarbonChart();
|
||||
},
|
||||
methods: {
|
||||
credad(val) {
|
||||
this.carbonList1 = []
|
||||
this.carbonList2 = []
|
||||
this.carbonList3 = []
|
||||
|
||||
//获取总碳排放分析数据
|
||||
getdoubleCarbonApi({
|
||||
projectSn: this.projectSn,
|
||||
typeId: val == null? 3 : val,
|
||||
}).then((res) => {
|
||||
console.log('res',res);
|
||||
if (res.code == 200) {
|
||||
this.carbonListNum = res.result;
|
||||
this.carbonListNum.forEach((item) => {
|
||||
this.carbonList1.push(item.carbonValue);
|
||||
this.carbonList2.push(item.reduceValue);
|
||||
this.carbonList3.push(item.cleanValue);
|
||||
});
|
||||
this.createCarbonChart();
|
||||
}
|
||||
});
|
||||
},
|
||||
createCarbonChart() {
|
||||
let monitor = echarts.init(this.$refs.carbonChart);
|
||||
var colors = ["#3A85D3", "#5AD8A6", "#008000", "#5470c6", "#61a0a8"];
|
||||
@ -53,21 +113,16 @@ export default {
|
||||
|
||||
formatter: function (params) {
|
||||
//params[0].marker,marker参数为提示语前面的小圆点
|
||||
return (
|
||||
params[0].name +
|
||||
"<br>" +
|
||||
// params[0].marker +
|
||||
"碳排放：" +
|
||||
params[0].value +
|
||||
"<br>" +
|
||||
// params[1].marker +
|
||||
"减少碳排放：" +
|
||||
-params[1].value +
|
||||
"<br>" +
|
||||
// params[1].marker +
|
||||
"净碳排放：" +
|
||||
params[2].value
|
||||
);
|
||||
let data = "";
|
||||
if(params.length >= 1) {
|
||||
data = params[0].name + "<br>"
|
||||
}
|
||||
params.forEach(res =>{
|
||||
data = data + res.seriesName +":"+
|
||||
res.value +
|
||||
"<br>" ;
|
||||
})
|
||||
return ( data );
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
@ -106,7 +161,7 @@ export default {
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff", //坐标值得具体的颜色
|
||||
fontSize: 16
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
@ -139,13 +194,12 @@ export default {
|
||||
//这是y轴文字颜色
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff", //坐标值得具体的颜色
|
||||
fontSize: 16
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -187,7 +241,7 @@ export default {
|
||||
color: "#fff",
|
||||
},
|
||||
|
||||
data: [320, 302, 341, 374, 390, 450, 420, 200, 220, 322, 245, 215],
|
||||
data: this.carbonList1,
|
||||
},
|
||||
|
||||
{
|
||||
@ -227,10 +281,7 @@ export default {
|
||||
// return -params.value;
|
||||
// },
|
||||
},
|
||||
data: [
|
||||
-120, -132, -101, -134, -190, -230, -210, -210, -210, -210, -210,
|
||||
-210,
|
||||
],
|
||||
data: this.carbonList2,
|
||||
},
|
||||
{
|
||||
name: "净碳排放",
|
||||
@ -267,7 +318,7 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [220, 202, 241, 274, 190, 150, 120, 200, 220, 222, 145, 215],
|
||||
data: this.carbonList3,
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -281,40 +332,12 @@ export default {
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: calc(100% - 37px);
|
||||
margin-top: 23px
|
||||
margin-top: 23px;
|
||||
}
|
||||
.carbonEmission {
|
||||
cursor:pointer;
|
||||
margin-left: 79%;
|
||||
width: 210;
|
||||
height: 17px;
|
||||
}
|
||||
::v-deep .el-date-editor--daterange.el-input__inner {
|
||||
cursor:pointer;
|
||||
width: 235px;
|
||||
height: 30px;
|
||||
background-color: #182337;
|
||||
border: 1px solid #264b5e;
|
||||
margin-top: 20px
|
||||
}
|
||||
::v-deep .el-range-input {
|
||||
cursor:pointer;
|
||||
background-color: #182337;
|
||||
color: #6ee4f0;
|
||||
}
|
||||
::v-deep .el-date-editor {
|
||||
cursor:pointer;
|
||||
.el-range__icon {
|
||||
line-height: 23px;
|
||||
color: #6ee4f0;
|
||||
}
|
||||
.el-range-separator {
|
||||
line-height: 23px;
|
||||
color: #757d88;
|
||||
}
|
||||
.el-range__close-icon {
|
||||
color: #757d88;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
cursor: pointer;
|
||||
margin-left: 81%;
|
||||
width: 210;
|
||||
height: 17px;
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,8 @@
|
||||
<Card title="主要碳排放占比统计">
|
||||
<div class="chart">
|
||||
<JNestedRingChart
|
||||
:title="{ text: '99.99kg', subTitle: '二氧化碳总排放量' }"
|
||||
v-if="isShow"
|
||||
:title="{ text: totalNum, subTitle: '二氧化碳总排放量' }"
|
||||
:series="series"
|
||||
:legend="{ show: false }"
|
||||
/>
|
||||
@ -16,6 +17,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getgetCo2RatioApi } from "@/assets/js/api/zhongjianFourth";
|
||||
import JNestedRingChart from "../../common/jChart/pie/JNestedRingChart.vue";
|
||||
import Card from "../components/Card.vue";
|
||||
export default {
|
||||
@ -30,19 +32,19 @@ export default {
|
||||
roseType: "area",
|
||||
radius: ["58%", "52%"],
|
||||
color: ["#182337", "#4A8C9C"],
|
||||
data: [50, 40, 30, 40],
|
||||
data: [0, 0, 0, 0],
|
||||
startAngle: 90,
|
||||
},
|
||||
{
|
||||
radius: ["65%", "82%"],
|
||||
startAngle: 90,
|
||||
color: ["#E86129", "#FFC303", "#6EE4F0"],
|
||||
color: [ "#6EE4F0", "#E86129","#FFC303",],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
//饼图图形上的文本标签
|
||||
show: true,
|
||||
formatter: " {d}% \n {b} "
|
||||
formatter: " {d}% \n {b} ",
|
||||
},
|
||||
|
||||
labelLine: {
|
||||
@ -51,14 +53,35 @@ export default {
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ value: 20, name: "用水" },
|
||||
{ value: 11, name: "用电" },
|
||||
{ value: 11, name: "设备" },
|
||||
// { value: 20, name: "用水" },
|
||||
// { value: 11, name: "用电" },
|
||||
// { value: 11, name: "设备" },
|
||||
],
|
||||
},
|
||||
],
|
||||
totalNum:0,
|
||||
isShow:false
|
||||
};
|
||||
},
|
||||
created(){
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
getgetCo2RatioApi({ projectSn: this.$store.state.projectSn }).then(res => {
|
||||
let totals = res.result
|
||||
console.log('总量',totals );
|
||||
|
||||
this.series[1].data = [
|
||||
{ value: totals.waterCo2, name: '用水' },
|
||||
{ value: totals.ammeterCo2, name: '用电' },
|
||||
{ value: totals.devCo2, name: '设备' }
|
||||
]
|
||||
this.totalNum = totals.sumCo2
|
||||
this.isShow=true
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -83,13 +106,13 @@ export default {
|
||||
height: 10px;
|
||||
// border-radius: 50%;
|
||||
}
|
||||
&:nth-child(1)::before {
|
||||
&:nth-child(2)::before {
|
||||
background-color: #e86129;
|
||||
}
|
||||
&:nth-child(2)::before {
|
||||
&:nth-child(3)::before {
|
||||
background-color: #ffc303;
|
||||
}
|
||||
&:nth-child(3)::before {
|
||||
&:nth-child(1)::before {
|
||||
background-color: #6ee4f0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,63 +1,108 @@
|
||||
<template>
|
||||
<Card title="用水用电碳排放情况统计">
|
||||
<div class="topTitle">
|
||||
<div class="waterCumulative">
|
||||
<div><img src="../assets/images/carbon/hydropower.png" alt=""></div>
|
||||
<div class="textBox">
|
||||
<p style="font-size:20px;color:#5CE2F6 ">5551kg</p>
|
||||
<p style="font-size:16px">用水用电累计碳排放</p>
|
||||
<div class="waterCumulative">
|
||||
<div><img src="../assets/images/carbon/hydropower.png" alt="" /></div>
|
||||
<div class="textBox">
|
||||
<p style="font-size: 20px; color: #5ce2f6">
|
||||
{{ statisticsCount.totalWaterAndElectricCarbonEmissions }}kg
|
||||
</p>
|
||||
<p style="font-size: 16px">用水用电累计碳排放</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="waterCumulative" style="margin-left:60px">
|
||||
<div><img src="../assets/images/carbon/carbonEm.png" alt=""></div>
|
||||
<div class="textBox">
|
||||
<p style="font-size:20px;color:#5CE2F6 ">255kg</p>
|
||||
<p style="font-size:16px">累计减少碳排放</p>
|
||||
<div class="waterCumulative" style="margin-left: 60px">
|
||||
<div><img src="../assets/images/carbon/carbonEm.png" alt="" /></div>
|
||||
<div class="textBox">
|
||||
<p style="font-size: 20px; color: #5ce2f6">
|
||||
{{ statisticsCount.totalReduceCarbonEmissions }}kg
|
||||
</p>
|
||||
<p style="font-size: 16px">累计减少碳排放</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="cOCumulative">累计减少碳排放</div> -->
|
||||
<!-- <div class="cOCumulative">累计减少碳排放</div> -->
|
||||
</div>
|
||||
<div class="mychart">
|
||||
<JBarChart :xData="xData" :series="series" :color="color" :grid="grid" />
|
||||
<JBarChart
|
||||
v-if="isShow"
|
||||
:xData="xData"
|
||||
:series="series"
|
||||
:color="color"
|
||||
:grid="grid"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
import Card from "../components/Card.vue";
|
||||
// import JBarChart from "../jChart/bar/JBarChart.vue";
|
||||
import JBarChart from "@/views/projectAdmin/jlw/jChart/bar/JBarChart.vue";
|
||||
import { getweCarbonEmissionsApi } from "@/assets/js/api/zhongjianFourth";
|
||||
import JBarChart from "../../jlw/jChart/bar/JBarChart.vue";
|
||||
export default {
|
||||
components: {Card,JBarChart,},
|
||||
data(){
|
||||
return{
|
||||
xData: ["办公区", "生活区", "施工现场", "大门口",'其他'],
|
||||
series: [{ data: [22, 43, 32, 33,52] }, { data: [32, 22, 32, 15,11]},
|
||||
],
|
||||
color: ["#E7622A ", "#6EE4F0 "],
|
||||
grid: ["15%", "0%", "30%", "0%"],
|
||||
}
|
||||
components: { Card, JBarChart },
|
||||
|
||||
data() {
|
||||
return {
|
||||
xData: ["办公区", "生活区", "施工现场", "大门口", "其他"],
|
||||
series: [{ data: [] }, { data: [] }],
|
||||
color: ["#E7622A", "#6EE4F0"],
|
||||
grid: ["15%", "0%", "30%", "0%"],
|
||||
statisticsCount: {
|
||||
totalReduceCarbonEmissions: 0, //累计减少碳排放量
|
||||
totalWaterAndElectricCarbonEmissions: 0, //水电累计碳排放量
|
||||
},
|
||||
// iShow:false,
|
||||
electricArry: [], //电碳排放
|
||||
location: 0, //位置
|
||||
waterArry: [], //水碳排放
|
||||
workercount: [],
|
||||
isShow: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
getweCarbonEmissionsApi({
|
||||
projectSn: this.$store.state.projectSn,
|
||||
}).then((res) => {
|
||||
console.log("看数据0", res);
|
||||
this.statisticsCount = res.result;
|
||||
this.workercount = res.result.locationDataList;
|
||||
console.log("看数据1", this.workercount);
|
||||
this.workercount.forEach((item) => {
|
||||
this.series[0].data.push(item.electric);
|
||||
|
||||
this.series[1].data.push(item.water);
|
||||
});
|
||||
|
||||
this.isShow = true;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.topTitle{
|
||||
display: flex;
|
||||
margin-left: 50px;
|
||||
.waterCumulative{
|
||||
<style lang="less" scoped>
|
||||
.topTitle {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
.textBox{
|
||||
margin-top: 30px;
|
||||
}
|
||||
img{
|
||||
margin-left: 50px;
|
||||
|
||||
.waterCumulative {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
margin-right: 15px;
|
||||
|
||||
.textBox {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 20px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mychart {
|
||||
|
||||
.mychart {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
@ -1,56 +1,81 @@
|
||||
<template>
|
||||
<Card title="设备碳排放排名TOP10">
|
||||
<div class="car-countBox">
|
||||
<div class="car-count">设备累计碳排放<span>{{list.total}}</span>千克</div>
|
||||
<div class="car-count">累计减少碳排放<span>{{list.reduce}}</span>千克</div>
|
||||
<div class="car-count">
|
||||
设备累计碳排放<span>{{ list.total }}</span
|
||||
>千克
|
||||
</div>
|
||||
<div class="car-count">
|
||||
累计减少碳排放<span>{{ list.reduce }}</span
|
||||
>千克
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart" ref="carbonChart"></div>
|
||||
<vue-scroll>
|
||||
<div class="chart" ref="carbonChart"></div>
|
||||
</vue-scroll>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getPdoubleCarbonDevApi} from '@/assets/js/api/zhongjianFourth'
|
||||
import echarts from 'echarts4';
|
||||
import { getPdoubleCarbonDevApi } from "@/assets/js/api/zhongjianFourth";
|
||||
import echarts from "echarts4";
|
||||
import Card from "../components/Card.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Card,
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
list:{
|
||||
reduce:0,//累计减少碳排放/kg
|
||||
total:0,//设备累计碳排放/kg
|
||||
}
|
||||
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
list: {
|
||||
reduce: 0, //累计减少碳排放/kg
|
||||
total: 0, //设备累计碳排放/kg
|
||||
},
|
||||
rankingList: [], //碳排放排名
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.createCarbonChart()
|
||||
mounted() {
|
||||
// this.createCarbonChart();
|
||||
},
|
||||
created(){
|
||||
this.getPdoubleCarbonDevData()
|
||||
created() {
|
||||
this.getPdoubleCarbonDevData();
|
||||
},
|
||||
methods: {
|
||||
//echarts图形
|
||||
createCarbonChart() {
|
||||
//获取累计发电量及碳排量
|
||||
getPdoubleCarbonDevData() {
|
||||
getPdoubleCarbonDevApi({ projectSn: this.$store.state.projectSn }).then(
|
||||
(res) => {
|
||||
this.list = res.result;
|
||||
this.rankingList = res.result.devList;
|
||||
console.log("碳排放统计数据-----2222", this.list);
|
||||
let dataName = [];
|
||||
let dataCo2Value = [];
|
||||
this.rankingList.forEach((res) => {
|
||||
dataName.push(res.name);
|
||||
dataCo2Value.push(res.co2Value);
|
||||
});
|
||||
|
||||
this.createCarbonChart(dataName, dataCo2Value);
|
||||
}
|
||||
);
|
||||
},
|
||||
//设备碳排放排名图表
|
||||
createCarbonChart(dataName, dataCo2Value) {
|
||||
// console.log("测试-----555", dataName);
|
||||
let monitor = echarts.init(this.$refs.carbonChart);
|
||||
var charts = {
|
||||
// 按顺序排列从大到小
|
||||
cityList: ["塔吊1号", "塔吊2号", "塔吊3号", "塔吊4号", "塔吊5号"],
|
||||
cityData: [1500, 1200, 800, 700, 600],
|
||||
|
||||
cityList: dataName,
|
||||
cityData: dataCo2Value,
|
||||
};
|
||||
|
||||
var top10CityList = charts.cityList;
|
||||
var top10CityData = charts.cityData;
|
||||
var color = ["#F56C35", "#02d8f9", "#FFC303", "#F5F5F5,", "#fff"];
|
||||
var color1 = ["#F56C35", "#02d8f9", "#FFC303", "#F5F5F5", "#fff"];
|
||||
|
||||
let lineY = [];
|
||||
let lineT = [];
|
||||
for (var i = 0; i < charts.cityList.length; i++) {
|
||||
for (var i = 0; i < top10CityList.length; i++) {
|
||||
var x = i;
|
||||
if (x > 1) {
|
||||
x = 2;
|
||||
@ -89,7 +114,6 @@ export default {
|
||||
},
|
||||
};
|
||||
var data1 = {
|
||||
|
||||
value: top10CityData[0],
|
||||
itemStyle: {
|
||||
color: "#001235",
|
||||
@ -140,6 +164,7 @@ export default {
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
@ -231,17 +256,17 @@ export default {
|
||||
rich: {
|
||||
color1: {
|
||||
color: "#ff9500",
|
||||
fontSize:16,
|
||||
fontSize: 16,
|
||||
fontWeight: 700,
|
||||
},
|
||||
color2: {
|
||||
color: "#02d8f9",
|
||||
fontSize:16,
|
||||
fontSize: 16,
|
||||
fontWeight: 700,
|
||||
},
|
||||
color3: {
|
||||
color: "#027fff",
|
||||
fontSize:16,
|
||||
fontSize: 16,
|
||||
fontWeight: 700,
|
||||
},
|
||||
color4: {
|
||||
@ -252,17 +277,41 @@ export default {
|
||||
},
|
||||
},
|
||||
],
|
||||
// dataZoom: [
|
||||
// {
|
||||
// start:0,//默认为0
|
||||
// end: 100,//默认为100
|
||||
// type: 'slider',
|
||||
// maxValueSpan:9,//显示数据的条数(默认显示10个)
|
||||
// show: true,
|
||||
// yAxisIndex: [0],
|
||||
// handleSize: 0,//滑动条的 左右2个滑动条的大小
|
||||
// height: '80%',//组件高度
|
||||
// // left: 600, //左边的距离
|
||||
// // right: 8,//右边的距离
|
||||
// // top: 50,//上边边的距离
|
||||
// borderColor: "rgba(43,48,67,0.8)",
|
||||
// fillerColor: '#33384b',//滑动块的颜色
|
||||
// backgroundColor: 'rgba(13,33,117,0.5)',//两边未选中的滑动条区域的颜色
|
||||
// showDataShadow: false,//是否显示数据阴影 默认auto
|
||||
// showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
|
||||
// realtime:true, //是否实时更新
|
||||
// filterMode: 'filter',
|
||||
// yAxisIndex: [0,1],//控制的y轴
|
||||
// },
|
||||
// //滑块的属性
|
||||
// {
|
||||
// type: 'inside',
|
||||
// show: true,
|
||||
// yAxisIndex: [0,1],
|
||||
// start: 1,//默认为1
|
||||
// end: 9,//默认为100
|
||||
// },
|
||||
// ],
|
||||
};
|
||||
monitor.setOption(charts);
|
||||
},
|
||||
//获取累计发电量及碳排量
|
||||
getPdoubleCarbonDevData(){
|
||||
getPdoubleCarbonDevApi({projectSn: this.$store.state.projectSn}).then(res=>{
|
||||
this.list=res.result
|
||||
console.log('碳排放统计数据-----', this.list)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -291,9 +340,8 @@ export default {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.chart{
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: calc(100% - 37px);
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -108,10 +108,7 @@ export default {
|
||||
|
||||
// console.log("点击的", val);
|
||||
this.currentIndex = val;
|
||||
// if(val==2) {
|
||||
// window.location.href =
|
||||
// "https://fjvsaps.jqmkj.com:20020/api/main/index?ak=ZJ4J0001&ts=1670286176897&token=%2BpldKJhzmMj5GUhAwJqEpYTsrQ4%3D&proId=2201-440106-04-01-829828-2001&proIdtoken=202212060821";
|
||||
// }
|
||||
|
||||
},
|
||||
getDataDateils() {
|
||||
let data = { projectSn: this.$store.state.projectSn };
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<vue-scroll>
|
||||
<div class="row" v-for="(item, index) in aiList" :key="index">
|
||||
<div>
|
||||
<img :src="item.imageUrl" />
|
||||
<img :src="$store.state.FILEURL + item.imageUrl" />
|
||||
</div>
|
||||
<div class="carNum">{{ alarmTypeList[item.alarmType] }}</div>
|
||||
<div class="datetime">{{ item.createTime }}</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="device" v-for="i in list" :key="i">
|
||||
<div class="device-name">{{ i.videoName }}</div>
|
||||
<div class="info">
|
||||
<img class="image" :src="i.coverUrl" />
|
||||
<img class="image" :src="$store.state.FILEURL +i.coverUrl" />
|
||||
<div class="detail">
|
||||
|
||||
<div class="detail-item green">状态：{{ i.deviceState == 1 ? '在线' : '离线' }}</div>
|
||||
|
||||
@ -5,6 +5,9 @@
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
data() {
|
||||
return { jBarChart: null }
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: Object,
|
||||
@ -39,13 +42,22 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.jBarChart = echarts.init(this.$refs.jBarChart)
|
||||
this.jBarChart = echarts.init(this.$refs.jBarChart);
|
||||
console.log(this.jBarChart)
|
||||
this.$nextTick(()=>{
|
||||
this.createChart()
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return { jBarChart: null }
|
||||
},
|
||||
|
||||
watch:{
|
||||
series:{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal != oldVal){
|
||||
this.createChart();
|
||||
}
|
||||
},
|
||||
deep:true,
|
||||
},
|
||||
xData:{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal != oldVal){
|
||||
@ -65,8 +77,10 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
createChart() {
|
||||
|
||||
const { title, tooltip, grid, color, xData, yData, series } = this
|
||||
const configSeries = (series => {
|
||||
|
||||
if (series.length) {
|
||||
return series.map(item => ({ data: item.data, type: 'bar', barWidth: 15 }))
|
||||
} else {
|
||||
@ -138,9 +152,12 @@ export default {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: configSeries
|
||||
series:configSeries
|
||||
}
|
||||
|
||||
console.log('series',option);
|
||||
this.jBarChart.setOption(option)
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
86
yarn.lock
86
yarn.lock
@ -3623,6 +3623,11 @@
|
||||
"postcss" "^7.0.1"
|
||||
"timsort" "^0.3.0"
|
||||
|
||||
"css-declaration-sorter@^6.3.1":
|
||||
"integrity" "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w=="
|
||||
"resolved" "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz"
|
||||
"version" "6.3.1"
|
||||
|
||||
"css-line-break@1.1.1":
|
||||
"integrity" "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA=="
|
||||
"version" "1.1.1"
|
||||
@ -7301,6 +7306,11 @@
|
||||
"resolved" "https://registry.npmmirror.com/nan/-/nan-2.17.0.tgz"
|
||||
"version" "2.17.0"
|
||||
|
||||
"nanoid@^3.3.4":
|
||||
"integrity" "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
|
||||
"resolved" "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz"
|
||||
"version" "3.3.4"
|
||||
|
||||
"nanomatch@^1.2.9":
|
||||
"integrity" "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA=="
|
||||
"resolved" "https://registry.npmmirror.com/nanomatch/-/nanomatch-1.2.13.tgz"
|
||||
@ -8020,6 +8030,16 @@
|
||||
"resolved" "https://registry.npmmirror.com/photoswipe/-/photoswipe-4.1.3.tgz"
|
||||
"version" "4.1.3"
|
||||
|
||||
"picocolors@^0.2.1":
|
||||
"integrity" "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
|
||||
"resolved" "https://registry.npmmirror.com/picocolors/-/picocolors-0.2.1.tgz"
|
||||
"version" "0.2.1"
|
||||
|
||||
"picocolors@^1.0.0":
|
||||
"integrity" "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
|
||||
"resolved" "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz"
|
||||
"version" "1.0.0"
|
||||
|
||||
"picomatch@^2.0.4", "picomatch@^2.2.1":
|
||||
"integrity" "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg=="
|
||||
"version" "2.2.2"
|
||||
@ -8759,13 +8779,62 @@
|
||||
"source-map" "^0.6.1"
|
||||
"supports-color" "^5.4.0"
|
||||
|
||||
"postcss@^7.0.0", "postcss@^7.0.1", "postcss@^7.0.14", "postcss@^7.0.27", "postcss@^7.0.32", "postcss@^7.0.5", "postcss@^7.0.6":
|
||||
"integrity" "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw=="
|
||||
"version" "7.0.32"
|
||||
"postcss@^7.0.0", "postcss@^7.0.1":
|
||||
"integrity" "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA=="
|
||||
"resolved" "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz"
|
||||
"version" "7.0.39"
|
||||
dependencies:
|
||||
"chalk" "^2.4.2"
|
||||
"picocolors" "^0.2.1"
|
||||
"source-map" "^0.6.1"
|
||||
"supports-color" "^6.1.0"
|
||||
|
||||
"postcss@^7.0.14":
|
||||
"integrity" "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA=="
|
||||
"resolved" "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz"
|
||||
"version" "7.0.39"
|
||||
dependencies:
|
||||
"picocolors" "^0.2.1"
|
||||
"source-map" "^0.6.1"
|
||||
|
||||
"postcss@^7.0.27":
|
||||
"integrity" "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA=="
|
||||
"resolved" "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz"
|
||||
"version" "7.0.39"
|
||||
dependencies:
|
||||
"picocolors" "^0.2.1"
|
||||
"source-map" "^0.6.1"
|
||||
|
||||
"postcss@^7.0.32":
|
||||
"integrity" "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA=="
|
||||
"resolved" "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz"
|
||||
"version" "7.0.39"
|
||||
dependencies:
|
||||
"picocolors" "^0.2.1"
|
||||
"source-map" "^0.6.1"
|
||||
|
||||
"postcss@^7.0.5":
|
||||
"integrity" "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA=="
|
||||
"resolved" "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz"
|
||||
"version" "7.0.39"
|
||||
dependencies:
|
||||
"picocolors" "^0.2.1"
|
||||
"source-map" "^0.6.1"
|
||||
|
||||
"postcss@^7.0.6":
|
||||
"integrity" "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA=="
|
||||
"resolved" "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz"
|
||||
"version" "7.0.39"
|
||||
dependencies:
|
||||
"picocolors" "^0.2.1"
|
||||
"source-map" "^0.6.1"
|
||||
|
||||
"postcss@^8.0.9":
|
||||
"integrity" "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g=="
|
||||
"resolved" "https://registry.npmmirror.com/postcss/-/postcss-8.4.20.tgz"
|
||||
"version" "8.4.20"
|
||||
dependencies:
|
||||
"nanoid" "^3.3.4"
|
||||
"picocolors" "^1.0.0"
|
||||
"source-map-js" "^1.0.2"
|
||||
|
||||
"prepend-http@^1.0.0":
|
||||
"integrity" "sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg=="
|
||||
@ -9871,6 +9940,11 @@
|
||||
"resolved" "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz"
|
||||
"version" "2.0.1"
|
||||
|
||||
"source-map-js@^1.0.2":
|
||||
"integrity" "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
|
||||
"resolved" "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz"
|
||||
"version" "1.0.2"
|
||||
|
||||
"source-map-resolve@^0.5.0", "source-map-resolve@^0.5.2":
|
||||
"integrity" "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw=="
|
||||
"resolved" "https://registry.npmmirror.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz"
|
||||
@ -9910,7 +9984,7 @@
|
||||
"resolved" "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz"
|
||||
"version" "0.6.1"
|
||||
|
||||
"source-map@^0.6.1":
|
||||
"source-map@^0.6.1", "source-map@~0.6.1":
|
||||
"integrity" "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
|
||||
"resolved" "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz"
|
||||
"version" "0.6.1"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user