Commit 83bdd23d authored by 耿迪迪's avatar 耿迪迪
parents 0da53ab9 1c0ee201
......@@ -12,6 +12,7 @@ export default {
tongji:'Enterprises',
HazardsListMg:'Hazards',
PlansMg:'Plans',
PlansMgGovernment:'Plans',
qyMap:'qyMap',
qystatistics:'qystatistics',
SafetyDeviceMg:'SafetyDevice',
......
......@@ -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
<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>
......
......@@ -50,14 +50,17 @@
</el-table-column>
<el-table-column prop="checkStatus" label="审核状态">
<template slot-scope="scope">
<font v-if="scope.row.checkStatus == 0" class="colorP">
审核中
<font v-if="scope.row.isReported != 0" >
--
</font>
<font v-else-if="scope.row.checkStatus == 1" class="colorM">
审核通过
<font v-else-if="scope.row.checkStatus == 0 && scope.row.isReported == 0" class="colorP">
<i class="iconfont iconshenhe"></i>待审核
</font>
<font v-else-if="scope.row.checkStatus == 2" class="colorR">
审核未通过
<font v-else-if="scope.row.checkStatus == 1 && scope.row.isReported == 0" class="colorM">
<i class="iconfont iconzhengchang"></i>审核通过
</font>
<font v-else-if="scope.row.checkStatus == 2 && scope.row.isReported == 0" class="colorR">
<i class="iconfont iconweitongguo"></i>审核未通过
</font>
</template>
</el-table-column>
......@@ -81,14 +84,11 @@
</template>
</el-table-column>
<!-- <el-table-column prop="createTime" label="创建时间"></el-table-column> -->
<el-table-column label="操作" width="300" align="center">
<el-table-column label="操作" width="220" align="center">
<template slot-scope="scope">
<el-button @click="editFun(scope.row)" size="small" v-if="qyvisble">
<el-button @click="editFun(scope.row)" size="small" v-if="scope.row.checkStatus != 1">
<i class="el-icon-edit-outline"></i> 编辑
</el-button>
<el-button type="success" @click="checkFun(scope.row)" size="small" v-if="qyvisble" :disabled="scope.row.checkStatus != 0?true:false">
<i class="el-icon-key"></i> 审核
</el-button>
<el-button type="primary" plain @click="editFun(scope.row)" size="small" v-if="!qyvisble">
查看详情
</el-button>
......@@ -116,15 +116,6 @@
@refreshTableData="getTableData"
:key="zjKey"
></PlansMgEdit>
<PlansMgCheck
v-if="dialogVisible2"
:dialogVisible="dialogVisible2"
:editForm="formData"
:title="dialogTit"
@dialogFun="closeDialog"
@refreshTableData="getTableData"
:key="chKey"
></PlansMgCheck>
</div>
</template>
<script lang="ts">
......@@ -133,7 +124,7 @@ import PlansMgEdit from "./PlansMgEdit.vue";
import PlansMgCheck from "./PlansMgCheck.vue";
import METHOD from "@/utils/methods";
@Component({
components: { PlansMgEdit, PlansMgCheck }
components: { PlansMgEdit}
})
export default class CamerasMg extends Vue {
@Provide() enterpriseId: String = "";
......@@ -144,15 +135,13 @@ export default class CamerasMg extends Vue {
@Provide() loading: Boolean = false;
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() dialogVisible2: Boolean = false;
@Provide() dialogTit: String = "新增预案";
@Provide() formData: Object = {};
@Provide() zjKey: any = 0;
@Provide() chKey: any = 0;
@Provide() qyvisble: boolean = true;//政府端隐藏项
getTableData() {
let that = this,
param = Object.assign({enterpriseId: that.enterpriseId, isReported: that.enterpriseId ? '' : 0 }, that.PAGE, that.searchData);
param = Object.assign({enterpriseId: that.enterpriseId}, that.PAGE, that.searchData);
that.loading = true;
METHOD.axiosPost(
that,
......@@ -185,12 +174,6 @@ export default class CamerasMg extends Vue {
this.zjKey++;
this.dialogVisible = true;
}
checkFun(row: any){
this.dialogTit = "预案审核";
this.formData = Object.assign({}, row);
this.chKey++;
this.dialogVisible2 = true;
}
delFun(row: any) {
let that = this as any;
METHOD.deleteFun(
......@@ -212,7 +195,6 @@ export default class CamerasMg extends Vue {
closeDialog() {
//关闭窗口
this.dialogVisible = false;
this.dialogVisible2 = false;
this.formData = {};
}
checkFile(url: any) {
......
......@@ -11,47 +11,37 @@
<div>
<div class="yatit">预案基本信息</div>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
<el-form-item label="预案标题" prop="planTitle">
<el-input v-model="editForm.planTitle"></el-input>
<el-form-item label="所属公司:">
<font>{{editForm.enterpriseName}}</font>
</el-form-item>
<el-form-item label="预案分类" prop="planType">
<el-input v-model="editForm.planType"></el-input>
<el-form-item label="预案标题:">
<font>{{editForm.planTitle}}</font>
</el-form-item>
<el-form-item label="预案等级" prop="planLevel">
<el-radio-group v-model="editForm.planLevel">
<el-radio label="Ⅰ">Ⅰ级</el-radio>
<el-radio label="Ⅱ">Ⅱ级</el-radio>
<el-radio label="Ⅲ">Ⅲ级</el-radio>
</el-radio-group>
<el-form-item label="预案分类:">
<font>{{editForm.planType}}</font>
</el-form-item>
<el-form-item label="预案等级:">
<font>{{editForm.planLevel + '级'}}</font>
</el-form-item>
<el-form-item label="预案源文件">
<span
class="dbtn sd qiCr"
@click="checkFile(editForm.sourceFile)"
v-if="editForm.sourceFile != ''"
>
<i class="el-icon el-icon-view"></i>
{{editForm.fileOriginalName}}
</span>
</el-form-item>
<el-form-item label="审核预案" prop="checkStatus">
<el-radio-group v-model="editForm.checkStatus">
<el-radio label="0">审核中</el-radio>
<el-radio label="0">待审核</el-radio>
<el-radio label="1">通过</el-radio>
<el-radio label="2">未通过</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="预案源文件">
<el-upload
ref="uploaderB"
class="uploader"
:limit="1"
:action="actionUrl"
:on-success="(a,b,c) => onSuccess(a,b,c,'sourceFile')"
:on-error="onError"
:on-remove="handleRemove"
:before-remove="(a,b,c) => beforeRemove(a,b,c,'sourceFile')"
:on-exceed="onExceed"
:multiple="false"
list-type="picture"
:file-list="fileList"
>
<i class="el-icon-plus"></i>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
</el-upload>
<!-- <div v-if="fileList.length > 0">
<a v-for="(i,ind) in fileList" :key="ind" :href="i.url" target="_blank">{{i.name}}</a>&nbsp;&nbsp;&nbsp;<i class="btn el-icon-delete" @click="deleteList"></i>
</div>-->
<el-form-item label="审核意见">
<el-input type="textarea" v-model="editForm.remarks"></el-input>
</el-form-item>
</el-form>
</div>
......@@ -59,7 +49,8 @@
<el-col :span="12" class="flcolum">
<div>
<div class="yatit">预案内容</div>
<textarea id="editorA" v-model="editForm.planContents" height="100%"></textarea>
<div v-html="editForm.planContents"></div>
<font v-if="editForm.planContents == ''">暂无内容~</font>
</div>
</el-col>
</el-row>
......@@ -75,7 +66,6 @@ import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import City from "@/components/city.vue";
import METHOD from "@/utils/methods";
import ice from "@/utils/iceEditor-min.js";
let uploadfile = require("@/assets/uploadfile.png");
@Component({
components: { City },
......@@ -99,14 +89,10 @@ export default class PlansMgEdit extends Vue {
fileOriginalName: String;
};
@Provide() enterpriseId: String = "";
@Provide() editorA: any;
@Provide() qyvisble: boolean = true;
@Provide() rules: any = {
planLevel: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
planTitle: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
planType: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
checkStatus: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
// checkStatus: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
};
@Watch("sourceFile") change(val: any) {
if (val.length > 0) {
......@@ -126,13 +112,8 @@ export default class PlansMgEdit extends Vue {
//取消事件要在父级取消是所以用到 $emit
confirmFun(formName: string) {
let that = this;
that.editForm.planContents = that.editorA.getHTML();
that.editForm.enterpriseId = that.enterpriseId;
(that as any).$refs[formName].validate((valid: boolean) => {
if (that.editorA.getText() == false && that.editForm.sourceFile == "") {
that.$message.error("没有预案内容!");
return;
}
if (valid) {
METHOD.axiosPost(
that,
......@@ -154,91 +135,14 @@ export default class PlansMgEdit extends Vue {
}
});
}
/*
上传
*/
onSuccess(res: any, file: any, fileList: any, key: string) {
this.$data[key] = fileList;
}
onError(err: any, file: any, fileList: any) {
this.$message.error("上传失败!");
}
handleRemove(file: any, fileList: any, key: string) {
this.$data[key] = fileList;
}
onExceed(file: any, fileList: any) {
this.$message.warning("只允许上传一个文件,如需更改请先删除!");
}
beforeRemove(file: any, fileList: any) {
let that = this,
param;
param = file.response
? file.response.data.savePath.replace(/\\/g, "%")
: file.url.replace(/\\/g, "%").slice(9);
METHOD.axiosGet(this, `/file/deleteFile?savePath=${param}`, function (
res: any
) {
if (res.code == 0) that.$message.success("删除成功");
else return false;
});
}
//创建编辑器
creatEditor() {
this.editorA = new ice.editor("editorA");
this.editorA.menu = [
"fontSize",
"foreColor",
"bold",
"italic",
"underline",
"strikeThrough",
"line",
"justifyLeft",
"justifyCenter",
"justifyRight",
"line",
"table",
"insertImage",
"insertOrderedList",
"insertUnorderedList",
"indent",
];
this.editorA.height = "413px";
this.editorA.create();
}
deleteList() {
this.fileList = [];
this.editForm.sourceFile = "";
}
checkFile(url: any) {
window.open(METHOD.URL + url, "_blank");
}
created() {
let that = this;
that.enterpriseId = METHOD.enterpriseId;
// if (that.enterpriseId) {
// that.qyvisble = true;
that.$nextTick(() => {
that.creatEditor();
})
// } else {
// that.qyvisble = false;
// }
// if (that.editForm.id && that.enterpriseId) {
that.$nextTick(() => {
//编辑
if (that.editForm.planContents) {
that.editorA.setValue(that.editForm.planContents);
}
if (that.editForm.fileOriginalName) {
that.fileList.push({
name: that.editForm.fileOriginalName,
url: uploadfile,
});
}
});
// }
that.actionUrl = METHOD.URL + "/file/uploadFile";
}
}
</script>
......
......@@ -53,6 +53,9 @@
<a v-for="(i,ind) in fileList" :key="ind" :href="i.url" target="_blank">{{i.name}}</a>&nbsp;&nbsp;&nbsp;<i class="btn el-icon-delete" @click="deleteList"></i>
</div>-->
</el-form-item>
<el-form-item label="审核意见">
<font>{{editForm.remarks}}</font>
</el-form-item>
</el-form>
</div>
</el-col>
......@@ -144,6 +147,8 @@ export default class PlansMgEdit extends Vue {
planLevel: String;
planTitle: String;
fileOriginalName: String;
checkStatus: String;
remarks: String;
};
@Provide() enterpriseId: String = "";
@Provide() editorA: any;
......@@ -174,8 +179,10 @@ export default class PlansMgEdit extends Vue {
let that = this;
that.editForm.planContents = that.editorA.getHTML();
that.editForm.enterpriseId = that.enterpriseId;
that.editForm.checkStatus = "";
that.editForm.remarks = "";
(that as any).$refs[formName].validate((valid: boolean) => {
if (that.editorA.getText() == false && that.editForm.sourceFile == "") {
if (that.editorA.getText() == false && (that.editForm.sourceFile == "" || that.editForm.sourceFile == undefined)) {
that.$message.error("没有预案内容!");
return;
}
......
<template>
<div class="camerasMg">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
<el-form-item label>
<el-input v-model="searchData.planTitle" placeholder="请输预案标题"></el-input>
</el-form-item>
<el-form-item label>
<el-select v-model="searchData.planLevel" placeholder="请输预案等级">
<el-option label="Ⅰ级" value="Ⅰ"></el-option>
<el-option label="Ⅱ级" value="Ⅱ"></el-option>
<el-option label="Ⅲ级" value="Ⅲ"></el-option>
</el-select>
</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="false">
<el-table-column width="50" type="index" label="序号"></el-table-column>
<el-table-column prop="planTitle" label="预案标题"></el-table-column>
<el-table-column prop="planLevel" label="预案等级">
<template slot-scope="scope">
<font>{{scope.row.planLevel + '级'}}</font>
</template>
</el-table-column>
<el-table-column prop="planType" label="预案分类"></el-table-column>
<el-table-column prop="isReported" label="是否上报" v-if="qyvisble">
<template slot-scope="scope">
<font v-if="scope.row.isReported == 0" class="colorM">
已上报
</font>
<font v-else-if="scope.row.isReported != 0" class="colorR">
未上报
</font>
</template>
</el-table-column>
<el-table-column prop="checkStatus" label="审核状态">
<template slot-scope="scope">
<font v-if="scope.row.checkStatus == 0" class="colorP">
<i class="iconfont iconshenhe"></i>待审核
</font>
<font v-else-if="scope.row.checkStatus == 1" class="colorM">
<i class="iconfont iconzhengchang"></i>审核通过
</font>
<font v-else-if="scope.row.checkStatus == 2" class="colorR">
<i class="iconfont iconweitongguo"></i>审核未通过
</font>
</template>
</el-table-column>
<el-table-column prop="sourceFile" label="预案文件">
<template slot-scope="scope">
<span
class="dbtn sd qiCr"
@click="checkFile(scope.row.sourceFile)"
v-if="scope.row.sourceFile != ''"
>
<i class="el-icon el-icon-view"></i>查看/下载
</span>
</template>
</el-table-column>
<el-table-column label="操作" width="220" align="center">
<template slot-scope="scope">
<el-button type="success" @click="checkFun(scope.row)" size="small" :disabled="scope.row.checkStatus != 0?true:false">
<i class="el-icon-key"></i> 审核
</el-button>
<el-button type="danger" @click="delFun(scope.row)" size="small">
<i class="el-icon-delete"></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>
<PlansMgCheck
:dialogVisible="dialogVisible"
:editForm="formData"
:title="dialogTit"
@dialogFun="closeDialog"
@refreshTableData="getTableData"
:key="zjKey"
></PlansMgCheck>
</div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import PlansMgEdit from "./PlansMgEdit.vue";
import PlansMgCheck from "./PlansMgCheck.vue";
import METHOD from "@/utils/methods";
@Component({
components: { PlansMgCheck }
})
export default class CamerasMg extends Vue {
@Provide() enterpriseId: String = "";
@Provide() signId: String = "";
@Provide() tableData: Object = { pageData: [], total: 0 };
@Provide() PAGE: any = { page: 1, size: 10 };
@Provide() searchData: any = {};
@Provide() loading: Boolean = false;
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() dialogTit: String = "新增预案";
@Provide() formData: Object = {};
@Provide() zjKey: any = 0;
getTableData() {
let that = this,
param = Object.assign({ isReported: 0 }, that.PAGE, that.searchData);
that.loading = true;
METHOD.axiosPost(
that,
`/planInfo/selectPlanInfoList`,
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 = {};
this.getTableData();
}
checkFun(row: any){
this.dialogTit = "预案审核";
this.formData = Object.assign({}, row);
this.zjKey++;
this.dialogVisible = true;
}
delFun(row: any) {
let that = this as any;
METHOD.deleteFun(
that,
`/planInfo/deletePlanInfoById/${row.id}`,
function() {
that.getTableData();
}
);
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
//关闭窗口
this.dialogVisible = false;
this.formData = {};
}
checkFile(url: any) {
window.open(METHOD.URL + url,'_blank')
}
created() {
this.getTableData();
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>
\ No newline at end of file
......@@ -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;
......
<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
<template style="">
<!--
<template>
<div class="amap-page-container">
<el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo">
<el-amap-marker v-for="marker in markers":key="i" :position="marker.position"></el-amap-marker>
</el-amap> -->
<div class="pie" style="width:480px;margin-left: 10px;margin-top: 20px;">
<div class="pie-div">
<div style="width:420px;height: 30px;text-align: center;">
<span style="font-size: 25px;color: #fff;">企业注册</span>
</div>
<div style="width: 180px;float: left;margin-left: 20px;">
<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">/20</span>
<p slot="legend-caption">GOOD JOB</p>
</vue-ellipse-progress>
</div>
<div style="width: 180px;float: right;margin-left: 20px;">
<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">/20</span>
<p slot="legend-caption">GOOD JOB</p>
</vue-ellipse-progress>
</div>
</div>
<div id="pie2" style="width:450px;height: 300px;">
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main2" style="width:450px;height:270px;"></div>
</div>
<div class="div-table" style="width:480px;height: 350px;">
<el-table
:data="tableData"
height="250"
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>
<!-- <div class="toolbar">
<button @click="getMap()">get map</button>
</div> -->
<!-- </div>
</template>
<style>
.amap-page-container {
height: 400px;
}
</style> -->
<!-- <script>
</template>
import VueAMap from 'vue-amap';
<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';
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";
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  // 高德的keye
  key: 'cb087c0fb3b8bc56a4af064630495bb9',
  uiVersion: '1.0.11' ,// 版本号
  // 插件集合
import VueEllipseProgress from 'vue-ellipse-progress';
// Vue.prototype.$echarts = echarts;
Vue.use(VueEllipseProgress);
  plugin: ['AMap.Geocoder','AMap.Autocomplete','AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.Geolocation','AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
export default {
data() {
  // 高德 sdk 版本,默认为 1.4.4
  v: '1.4.4'
});
// import { AMapManager } from 'vue-amap';
// import { AMap } from 'vue-amap';
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'
}]
zoom: 15,
center: [117.148118, 36.660223],
markers: [
{
position: [117.148118, 36.660223],
events: {
click: () => {
alert('click marker');
},
dragend: (e) => {
console.log('---event---: dragend')
this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
}
},
created(){
visible: true,
draggable: false,
template: '<span>1</span>',
}
],
events: {
init: (o) => {
console.log(o.getCenter())
console.log(this.$refs.map.$$getInstance())
o.getCity(result => {
console.log(result)
})
},
mounted(){
this.drawPieChart();
'moveend': () => {
},
methods:{
deleteRow(index, rows) {
rows.splice(index, 1);
'zoomchange': () => {
},
//初始化数据
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;
'click': (e) => {
let {lng,lat} = e.lnglat;
self.lng = lng;
self.lat = lat;
console.log(self.lng,self.lat)
let points = [self.lng,self.lat]
this.getAddress(points)
let marker = {
position: [self.lng, self.lat]
};
if (!this.markers.length) return;
this.markers.splice(this.markers.length - 1, 1);
this.markers.push(marker);
}
myChart2.setOption({
xAxis: {
data: getData2,
},
series:[{
data: getData1,
}]
})
}
});
// 绘制图表
myChart2.setOption({
title: {
text: '企业危险源数量统计',//主标题
color: '#fff',
// subtext: '柱状图',
textStyle: {
color: "#fff",
getAddress (points) {
let geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" })
geocoder.getAddress(points, (status, result) => {
if (status === 'complete' && result.regeocode) {
this.address = result.regeocode.formattedAddress
console.log(this.address)
}
})
},
tooltip: {},
legend: {
data:['危险源'],
textStyle: { //图例文字的样式
color: '#fff',
plugin: ['ToolBar', {
pName: 'MapType',
defaultType: 0,
events: {
init(o) {
console.log(o);
}
},
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
},
});
}
}],
texts: [
{
position: [121.5273285, 31.21515044],
text: 'hello world',
offset: [0, 0],
events: {
click: () => {
alert('click text');
}
}
</script>
<style>
.el-main .el-tabs .el-tabs__content{
/* height: 100%; */
padding: 0px !important;
}
.pie-div{
width: 425px;
height: 180px;
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: #02285a;
color: #fff;
border: 1px solid #8ec5fc;
]
}
.div-table .el-table tr >th {
border: 1px solid #8ec5fc;
},
methods: {
getMap() {
console.log(AMapManager._componentMap);
// gaode map instance
console.log(AMapManager._map);
alert('click text');
}
.div-table .el-table tr:hover >td {
background-color: #2c5794 !important;
/* color: #fff; */
}
</style>
\ No newline at end of file
};
</script> -->
\ 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