Commit 32038f3c authored by yaqizhang's avatar yaqizhang

统计图

parent 43201b6c
......@@ -4977,6 +4977,22 @@
"safer-buffer": "^2.1.0"
}
},
"echarts": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.1.1.tgz",
"integrity": "sha512-b3nP8M9XwZM2jISuA+fP0EuJv8lcfgWrinel185Npy8bE/UhXTDIPJcqgQOCWdvk0c5CeT6Dsm1xBjmJXAGlxQ==",
"requires": {
"tslib": "2.0.3",
"zrender": "5.1.0"
},
"dependencies": {
"tslib": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
}
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
......@@ -10238,6 +10254,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resize-detector": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
"integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
......@@ -12183,6 +12204,20 @@
"resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.3.tgz",
"integrity": "sha512-oEqYpXKaFN+TaXU+mRLEx8dX0ah85aAJEe61mpdoUrq0Bhe/6sWhyZX1JjMQLhVsHAkncyhedhmCdDVSasUtDw=="
},
"vue-demi": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.7.5.tgz",
"integrity": "sha512-eFSQSvbQdY7C9ujOzvM6tn7XxwLjn0VQDXQsiYBLBwf28Na+2nTQR4BBBcomhmdP6mmHlBKAwarq6a0BPG87hQ=="
},
"vue-echarts": {
"version": "6.0.0-rc.5",
"resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.0.0-rc.5.tgz",
"integrity": "sha512-qG7jM4tz2Ipygn5r88s2nHFftakQyWpoM2IXwpzWrQwl/UZIQ1bbqyyLHqMLtgzEU/QhD/maFG9tnMkjVR75sg==",
"requires": {
"resize-detector": "^0.3.0",
"vue-demi": "^0.7.4"
}
},
"vue-hot-reload-api": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
......@@ -13222,6 +13257,21 @@
"dev": true
}
}
},
"zrender": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.1.0.tgz",
"integrity": "sha512-c+8VRx52ycbmqwHeHLlo/BAfIHBl/JZNLM6cfDQFgzIH05yb+f5J9F/fbRsP+zGc8dW9XHuhdt8/iqukgMZSeg==",
"requires": {
"tslib": "2.0.3"
},
"dependencies": {
"tslib": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
}
}
}
}
}
......@@ -11,11 +11,13 @@
"@types/axios": "^0.14.0",
"axios": "^0.19.2",
"core-js": "^3.6.4",
"echarts": "^5.1.1",
"element-ui": "^2.13.0",
"ol": "^6.4.3",
"vue": "^2.6.11",
"vue-amap": "^0.5.10",
"vue-class-component": "^7.2.2",
"vue-echarts": "^6.0.0-rc.5",
"vue-property-decorator": "^8.3.0",
"vue-router": "^3.1.5",
"vuex": "^3.1.2",
......
......@@ -216,6 +216,15 @@ export const defalutRouterMap = [
},
component: () => import('@/views/Enterprises/EnterprisesCheck.vue')
},
{
path: '/tongji',
name: 'qytj',
meta: {
title: '企业统计',
icon: '',
},
component: () => import('@/views/Enterprises/tongji.vue')
},
]
},
{
......
......@@ -9,6 +9,7 @@ export default {
EnterprisesMg:'Enterprises',
EnterprisesCheck:'Enterprises',
GIS:'GIS',
tongji:'Enterprises',
HazardsListMg:'Hazards',
PlansMg:'Plans',
qyMap:'qyMap',
......
<template style="">
<div class="pie" style="width:100%;height: 700px;">
<div id="pie1" style="float:left;width:40%;height: 500px;">
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main1" style="width:100%;height:500px;"></div>
</div>
<div id="pie2" style="float:right;width:50%;height: 500px;">
<div id="main2" style="width:100%;height:500px;"></div>
</div>
</div>
</template>
<script>// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import METHOD from "@/utils/methods";
export default {
created(){
},
mounted(){
this.initData();
this.drawPieChart();
},
methods:{
//初始化数据
initData() {
// 基于准备好的dom,初始化echarts实例
var myChart1 = echarts.init(document.getElementById('main1'));
let that=this;
var getData1 = [];
var getData2 = [];
METHOD.axiosGet(
this,
`/enterpriseInfo/getNumberByRegulation`,
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.name = res.data.result[i].type;
obj.value = res.data.result[i].number;
arr = res.data.result[i].type;
getData1[i] = obj;
getData2[i] = arr;
}
myChart1.setOption({
legend: {
data: getData2,
},
series:[{
data: getData1,
}]
})
}
});
// 绘制图表
myChart1.setOption({
title : {
text: '泽宏云',//主标题
subtext: '饼状图',//副标题
x:'center',//x轴方向对齐方式
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
right: 'right',
// data: ['探测器','二氧化碳报警器','水压探测器','有毒气体报警器','搜索引擎']
data: [],
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
},
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].name;
getData1[i] = obj;
getData2[i] = arr;
}
myChart2.setOption({
xAxis: {
data: getData2,
},
series:[{
data: getData1,
}]
})
}
});
// 绘制图表
myChart2.setOption({
// color:['rgb(8,252,7)','rgb(255,168,0)','rgb(0,121,254)','rgb(0,255,251)','rgb(3,120,251)','rgb(0,200,251)'],
title: {
text: '泽宏云',//主标题
subtext: '柱状图',
},
tooltip: {},
legend: {
data:['危险源']
},
xAxis: {
axisLabel: {
interval:0,
rotate:40
} ,
// data: ["报警器","二氧化碳报警器","摄像头","水压探测器","摄像头","有毒气体探测器"],
data: [],
},
yAxis: {},
series: [{
name: '危险源',
type: 'bar',
// data: [5, 20, 36, 10, 10, 20],
data: [],
}],
});
}
}
}
</script>
<style>
.pie #pie1{
/* border:1px #000000 solid; */
padding: 30px;
}
.pie #pie2{
/* border:1px #000000 solid; */
padding: 30px;
}
.el-main .el-tabs{
background-color: #f9f9f9;
}
/* .pie #pie1 #main1{
width:100%;height:500px;
}
.pie #pie2 #main2{
width:100%;height:500px;
} */
</style>
\ No newline at end of file
<template>
<el-tabs v-model="activeName" type="border-card" >
<el-tab-pane label="列表" name="first">
<div class="EnseList">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
<el-form-item>
<el-input v-model="searchData.unitName" placeholder="请输入企业名称查询"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="searchData.userName" placeholder="请输入用户名查询"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="searchData.orgCode" placeholder="请输入组织机构代码查询"></el-input>
</el-form-item>
<el-form-item>
<City @changeFun="changeFun" :valueqv="cityval"></City>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索
</el-button>
<el-button type="primary" @click="resetFun()">
<i class="el-icon-refresh"></i> 重置
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table :data="tableData.pageData" stripe border style="width:100%;" :loading="loading">
<el-table-column width="50" type="index" label="序号"></el-table-column>
<el-table-column prop="unitName" label="企业名称"></el-table-column>
<el-table-column prop="legalPerson" label="企业法人"></el-table-column>
<el-table-column prop="orgCode" label="组织机构代码"></el-table-column>
<el-table-column prop="legalPersonEmail" label="法人邮箱"></el-table-column>
<el-table-column prop="userName" label="管理员名称"></el-table-column>
<el-table-column prop="account" label="管理员账号"></el-table-column>
<el-table-column prop="status" label="账号状态">
<template slot-scope="scope">
<font v-if="scope.row.accountStatus === '0'" class="colorM">
<i class="iconfont iconzhengchang"></i> 正常
</font>
<font v-else-if="scope.row.accountStatus == 2" class="colorP">
<i class="iconfont iconsuoding"></i> 已锁定
</font>
<font v-else-if="scope.row.accountStatus == 1" class="colorR">
<i class="iconfont iconicon_huabanfuben"></i> 已删除
</font>
<font v-else-if="scope.row.accountStatus == 3" class="colorP">
<i class="iconfont iconshenhe"></i> 审核中
</font>
<font v-else-if="scope.row.accountStatus == 4" class="colorR">
<i class="iconfont iconweitongguo"></i> 审核未通过
</font>
</template>
</el-table-column>
<el-table-column label="操作" width="170">
<template slot-scope="scope">
<el-button type="success" size="small" @click="checkDetal(scope.row)">
<i class="el-icon-view"></i>查看详细
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="total,sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="PAGE.page"
:page-size="PAGE.size"
></el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="图表" name="second">
<Demo></Demo>
</el-tab-pane>
</el-tabs>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import EnterprisesMgEdit from "./EnterprisesMgEdit.vue";
import City from "@/components/city.vue";
import METHOD from "@/utils/methods";
import Demo from './demo.vue'
// import ECharts from 'echarts'
// Vue.prototype.$echarts = echarts
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
//引入基本模板
let echart = require('echarts/lib/echarts')
//引入柱状图组件
require('echarts/lib/chart/bar')
//引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import axios from 'axios'
@Component({
components: { EnterprisesMgEdit, City, Demo}
})
export default class EnterprisesMg extends Vue {
data() {
return {
activeName: 'first',
};
}
@Provide() tableData: Object = { pageData: [], total: 0 };
@Provide() PAGE: any = { page: 1, size: 10 };
@Provide() searchData: any = {};
@Provide() loading: Boolean = false;
@Provide() cityval: any = [];
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() formData: any = { dataType: "", enterpriseId: "" };
@Provide() zjKey: any = 0;
getTableData() {
let that = this,
param = Object.assign({accountStatus:'0'}, that.PAGE, that.searchData);
that.loading = true;
METHOD.axiosPost(
that,
`/enterpriseInfo/queryEnterpriseInfo`,
param,
function(res: any) {
that.loading = false;
if (res.code == 0) {
that.tableData = res.data;
}
}
);
}
searchFun() {
this.PAGE = { page: 1, size: 10 };
this.getTableData();
}
resetFun() {
this.PAGE = { page: 1, size: 10 };
this.searchData = { unitName: "" };
this.getTableData();
this.cityval = [];
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
//关闭窗口
this.dialogVisible = false;
this.formData = {};
}
selectChange(val: any) {
this.searchData.dataType = val;
this.getTableData();
}
checkDetal(row: any) {
this.$router.push({path: '/EnDetail', query:{enterpriseId: row.enterpriseId} })
}
/*选择城市*/
changeFun(v: any) {
this.searchData.provinceId = v[0];
this.searchData.cityId = v[1];
this.searchData.countyId = v[2];
}
created() {
this.getTableData();
}
}
</script>
<style lang="scss" scoped>
@import "@/utils/public.scss";
</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