Skip to content

W
whp-xl
Commit f3d5a835 authored by yaqizhang's avatar yaqizhang
Browse files
Options

汇集统计，列表图表换位置

parent effe6231
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 464 additions and 325 deletions
dcit-hcsystem-hcsystem-master/src/views/Enterprises/demo.vue
View file @ f3d5a835
......@@ -187,7 +187,7 @@ export default {
.pie #pie2{
/* border:1px #000000 solid; */
margin-left: 20px;
margin-top: 20px;
margin-top: 50px;
}
.el-main .el-tabs .el-tabs__content{
background-image: url(bg.png);
......@@ -196,13 +196,4 @@ export default {
/* height: 100%; */
padding: 0px !important;
}
/* .el-tabs__content .el-tab-pane .EnseList{
height: 100%;
} */
/* .pie #pie1 #main1{
width:100%;height:500px;
}
.pie #pie2 #main2{
width:100%;height:500px;
} */
</style>
\ No newline at end of file
dcit-hcsystem-hcsystem-master/src/views/Enterprises/tongji.vue
View file @ f3d5a835
<template>
<el-tabs v-model="activeName" type="border-card" >
<el-tab-pane label="列表" name="first">
<el-tab-pane label="图表" name="first">
<div style="width: 100%;height: 10em;">
<div class="el-tab-pane-div second-div" style="">
<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
<img src="../../assets/logo2.png" width="25%" style="margin-top: 2rem;">
<p>危险源数量</p>
</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{tjNumberObj.dangerNum}}</div>
</div>
<div class="el-tab-pane-div second-div" style="">
<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
<img src="../../assets/z-zhuce.png" width="25%" style="margin-top: 2rem;">
<p>注册企业数量</p>
</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{tjNumberObj.enterpriseRegNum}}</div>
</div>
<div class="el-tab-pane-div second-div" style="">
<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
<img src="../../assets/z-shenhe.png" width="25%" style="margin-top: 2rem;">
<p>待审批数量</p>
</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{tjNumberObj.enterpriseCheckIngNum}}</div>
</div>
</div>
<Demo></Demo>
</el-tab-pane>
<el-tab-pane label="列表" name="second">
<div class="EnseList" style="background-color: #fff;padding: 20px;">
<el-row class="topBar">
<el-col>
......@@ -77,32 +102,7 @@
</div>
</el-tab-pane>
<el-tab-pane label="图表" name="second">
<div style="width: 100%;height: 10em;">
<div class="el-tab-pane-div second-div" style="">
<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
<img src="../../assets/logo2.png" width="25%" style="margin-top: 2rem;">
<p>危险源数量</p>
</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{tjNumberObj.dangerNum}}</div>
</div>
<div class="el-tab-pane-div second-div" style="">
<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
<img src="../../assets/logo2.png" width="25%" style="margin-top: 2rem;">
<p>注册企业数量</p>
</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{tjNumberObj.enterpriseRegNum}}</div>
</div>
<div class="el-tab-pane-div second-div" style="">
<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
<img src="../../assets/logo2.png" width="25%" style="margin-top: 2rem;">
<p>待审批数量</p>
</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{tjNumberObj.enterpriseCheckIngNum}}</div>
</div>
</div>
<Demo></Demo>
</el-tab-pane>
</el-tabs>
</template>
......
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue
View file @ f3d5a835
......@@ -5,9 +5,9 @@
<!-- <DrawTool :MAP="MAP" v-if="mapLoadDone"></DrawTool> -->
<!-- <div style="width:200px;height:250px;" class="show-box" > -->
<div style="position:absolute;left:500px;top:10px">
<button @click="Mutil.tianSlA()" class="map-botton">切换1</button>
<button @click="Mutil.tianSlB()" class="map-botton">切换2</button>
<button @click="Mutil.tianSlC()" class="map-botton">切换3</button>
<button @click="Mutil.tianSlA()" class="map-botton">卫星地图</button>
<button @click="Mutil.tianSlB()" class="map-botton">全景地图</button>
<!-- <button @click="Mutil.tianSlC()" class="map-botton">切换3</button> -->
</div>
......@@ -30,7 +30,7 @@
<div style="">
<div style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.7);position: absolute;top: 0;left: 10px;float: left;">
<QyMaptwo></QyMaptwo>
<QyMapone></QyMapone>
<!-- <div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;">
</div>
......@@ -40,8 +40,8 @@
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> -->
<!-- <div id="pieReport" style="width: 400px;height: 300px;background-color: rgba(2, 20, 44, 0.4)"></div> -->
</div>
<div style="width: 500px;height: 100%;z-index: 12;background-color: rgba(2, 40, 90, 0.3);position: absolute;top: 0;right: 10px;float: right">
<!-- <dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" >
<!-- <div style="width: 500px;height: 100%;z-index: 12;background-color: rgba(2, 40, 90, 0.7);position: absolute;top: 0;right: 10px;float: right"> -->
<dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" >
<div class="markBox">
<ul>
<div class="ul-div"><li><img width="15px" src="@/assets/mark/markqy.png" /> 注册企业 <span>{{tjNumberObj.enterpriseRegNum}}</span></li></div>
......@@ -59,11 +59,12 @@
<div class="ul-div"><li><img width="20px" src="@/assets/mark/yinhuan.png" /> 隐患<span>0</span></li></div>
</ul>
</div>
</dv-border-box-10></div> -->
<div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
</dv-border-box-10></div>
<!-- <div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
</div>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> -->
<!-- <QyMaptwo></QyMaptwo> -->
<!-- </div> -->
</div>
</div>
</template>
......@@ -90,11 +91,13 @@ import Mutil from "@/utils/mapUtil.js";
// require('echarts/lib/component/title')
import METHOD from "@/utils/methods";
import QyMaptwo from './qyMaptwo.vue';
import QyMapone from './qyMapone.vue';
import Demo from '@/views/Enterprises/demo.vue';
@Component({
components: {
DrawTool,
Search,
QyMapone,
QyMaptwo,
Demo
},
......@@ -427,9 +430,9 @@ export default class GIS extends Vue {
.show-box {
position: absolute !important;
z-index: 9;
// background: rgba(204, 204, 204, 0.7);
/* background: rgba(204, 204, 204, 0.7); */
top: 4px;
right: 2px;
right: 10px;
}
.search-box {
position: absolute !important;
......
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMapone.vue 0 → 100644
View file @ f3d5a835
<template style="">
<div class="pie" style="width:480px;margin-left: 10px;margin-top: 20px;">
<dv-border-box-1>
<div class="pie-div">
<div style="width:480px;height: 40px;text-align: center;">
<span style="font-size: 20px; font-weight: 900; color: #fff;">企业注册</span>
</div>
<div style="width: 180px;float: left;margin-left: 50px;">
<vue-ellipse-progress
:progress="50"
:angle="-90"
color="blue"
emptyColor="#8ec5fc"
:size="150"
:thickness="10"
emptyThickness="5%"
lineMode="in 10"
:legend="true"
:legendValue="10"
legendClass="legend-custom-style"
dash="60 0.9"
animation="reverse 700 400"
:noData="false"
:loading="false"
fontColor="white"
:half="false"
:gap="10"
dot="10 blue"
fontSize="2rem">
<span slot="legend-value" style="font-size: 1.5rem;">/20</span>
<p slot="legend-caption" style="color: #fff;font-weight: 500;font-size: 18px;">注册总数</p>
</vue-ellipse-progress>
</div>
<div style="width: 180px;float: right;margin-right: -30px;">
<vue-ellipse-progress
:progress="50"
:angle="-90"
color="blue"
emptyColor="#8ec5fc"
:size="150"
:thickness="10"
emptyThickness="5%"
lineMode="in 10"
:legend="true"
:legendValue="10"
legendClass="legend-custom-style"
dash="60 0.9"
animation="reverse 700 400"
:noData="false"
:loading="false"
fontColor="white"
:half="false"
:gap="10"
dot="10 blue"
fontSize="2rem">
<span slot="legend-value" style="font-size: 1.5rem;">/20</span>
<p slot="legend-caption" style="color: #fff;font-weight: 500;font-size: 18px;">审核中</p>
</vue-ellipse-progress>
</div>
</div>
</dv-border-box-1>
<div id="pie2" style="width:450px;height: 350px;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main2" style="width:450px;height:320px;"></div>
</div>
<div class="div-table" style="width:480px;height: 380px;margin-top: 20px;">
<div style="width: 99%;height: 40px;background-color:#0b356d;text-align: center;font-size: 18px;border: 2px solid #8ec5fc;border-bottom: 0px solid; line-height: 40px;color: #fff;font-weight: 900;">预警信息</div>
<el-table
:data="tableData"
height="220"
border
:header-cell-style="{background:'#02285a',color:'#fff',}">
<el-table-column
prop="date"
label="企业名称"
width="120">
</el-table-column>
<el-table-column
prop="name"
label="预警信息"
width="120">
</el-table-column>
<el-table-column
prop="province"
label="设备名称">
</el-table-column>
<el-table-column
prop="city"
label="预警时间">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>// 引入基本模板
import { Component, Vue, Provide } from "vue-property-decorator";
import * as echarts from 'echarts/core';
import {BarChart, PieChart} from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
DatasetComponent
} from 'echarts/components';
import {
CanvasRenderer
} from 'echarts/renderers';
import dataV from '@jiaminghi/data-view';
Vue.use(dataV);
echarts.use(
[
TitleComponent,
TooltipComponent,
GridComponent,
BarChart,
PieChart,
LegendComponent,
DatasetComponent,
CanvasRenderer
]
);
// let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
// require('echarts/lib/chart/pie')
// 引入提示框和title组件
// require('echarts/lib/component/legend')
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
import METHOD from "@/utils/methods";
import VueEllipseProgress from 'vue-ellipse-progress';
// Vue.prototype.$echarts = echarts;
Vue.use(VueEllipseProgress);
export default {
data() {
return {
tableData: [{
date: '测试瓷砖厂',
name: '压力过大',
province: '传感器001',
city: '2020-07-23 10:20:37'
}, {
date: '赞皇测试有限公司',
name: '压力过大',
province: '传感器001',
city: '2020-07-23 10:20:37'
}, {
date: '奔腾大河有限公司',
name: '压力过大',
province: '传感器001',
city: '2020-07-23 10:20:37'
}, {
date: '泽宏科技股份有限公司',
name: '压力过大',
province: '传感器001',
city: '2020-07-23 10:20:37'
}, {
date: '测试瓷砖厂',
name: '压力过大',
province: '传感器001',
city: '2020-07-23 10:20:37'
}, {
date: '测试瓷砖厂',
name: '压力过大',
province: '传感器001',
city: '2020-07-23 10:20:37'
}]
}
},
created(){
},
mounted(){
this.drawPieChart();
},
methods:{
deleteRow(index, rows) {
rows.splice(index, 1);
},
//初始化数据
drawPieChart(){
// 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main2'));
let that=this;
var getData1 = [];
var getData2 = [];
METHOD.axiosGet(
this,
`/enterpriseGoods/getNumberByEnterprise`,
function(res) {
if (res.code === 0) {
//先进行赋值
for(let i=0; i<res.data.result.length; i++) {
var obj = new Object();
var arr = new Object();
// obj = res.data.result[i].number;
// arr = res.data.result[i].type;
obj = res.data.result[i].number;
arr = res.data.result[i].name;
getData1[i] = obj;
getData2[i] = arr;
}
myChart2.setOption({
xAxis: {
data: getData2,
},
series:[{
data: getData1,
}]
})
}
});
// 绘制图表
myChart2.setOption({
title: {
text: '企业危险源数量统计',//主标题
color: '#fff',
// subtext: '柱状图',
textStyle: {
color: "#fff",
}
},
tooltip: {},
legend: {
data:['危险源'],
textStyle: { //图例文字的样式
color: '#fff',
}
},
xAxis: {
axisLabel: {
interval:0,
rotate:40
} ,
data: [],
},
yAxis: {},
series: [{
name: '危险源',
type: 'bar',
// data: [5, 20, 36, 10, 10, 20],
data: [],
}],
textStyle: {
color: "#fff",
fontSize: 18
},
});
}
}
}
</script>
<style>
.el-main .el-tabs .el-tabs__content{
/* height: 100%; */
padding: 0px !important;
}
.pie-div{
width: 425px;
height: 210px;
/* border-style: solid; */
/* border-width: 5px 27px 27px;
border-image: url(chart-wrapper.png) 5 27 27 fill / 1 / 0 repeat; */
}
.div-table .el-table tr >td {
background-color: #0b356d;
color: #fff;
border: 1px solid #8ec5fc;
height: 50px;
padding: 4px 0 !important;
}
.div-table .el-table tr >th {
border: 1px solid #8ec5fc;
}
.div-table .el-table tr:hover >td {
background-color: #2c5794 !important;
/* color: #fff; */
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment