Skip to content

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

大屏样式

parent 70805ff8
Show whitespace changes
Inline Side-by-side
Showing with 242 additions and 206 deletions
dcit-hcsystem-hcsystem-master/src/utils/directive.js 0 → 100644
View file @ 89e2fa50
import Vue from 'vue'
// v-drag: 拖拽
Vue.directive('drag', {
bind(el, binding, vnode, oldVnode) {
//el即为当前元素
el.style.cursor = 'move'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = el.currentStyle || window.getComputedStyle(el, null)
el.onmousedown = (e) => {
//获取鼠标按下位置
const disX = e.clientX
const disY = e.clientY
// 获取当前元素的定位信息
// 获取到的值带px 正则匹配替换
let styL, styT
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
// +的作用是将字符串转为数字
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
} else {
styL = +sty.left.replace(/\px/g, '')
styT = +sty.top.replace(/\px/g, '')
}
document.onmousemove = function(e) {
// 通过事件委托，计算移动的距离
const l = e.clientX - disX
const t = e.clientY - disY
// 移动当前元素
el.style.left = `${l + styL}px`
el.style.top = `${t + styT}px`
}
//鼠标弹起，移除相应事件
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
// v-dragWidth: 标签宽度拖大 拖小
Vue.directive('dragWidth', {
bind(el, binding, vnode, oldVnode) {
el.style.cursor = 'crosshair'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = el.currentStyle || window.getComputedStyle(el, null)
el.onmousedown = (e) => {
const disX = e.clientX
// 获取到的值带px 正则匹配替换
let styW
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (sty.left.includes('%')) {
styW = +document.body.clientWidth * (+sty.width.replace(/\%/g, '') / 100)
} else {
styW = +sty.width.replace(/\px/g, '')
}
document.onmousemove = function(e) {
e.preventDefault() // 移动时禁用默认事件
// 通过事件委托，计算移动的距离
const l = e.clientX - disX
el.style.width = `${styW + l}px`
}
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
\ No newline at end of file
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue
View file @ 89e2fa50
<template> <template>
<div class="gis"> <div class="gis">
<div id="mapbox" @click="mapbox"> <div id="mapbox" @click="mapbox">
<!-- <Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search> -->
<!-- <DrawTool :MAP="MAP" v-if="mapLoadDone"></DrawTool> -->
<!-- <div style="width:200px;height:250px;" class="show-box" > -->
<div style="position:absolute;left:500px;top:10px"> <div style="position:absolute;left:500px;top:10px">
<button @click="Mutil.tianSlA()" class="map-botton">卫星地图</button> <button @click="Mutil.tianSlA()" class="map-botton">卫星地图</button>
<button @click="Mutil.tianSlB()" class="map-botton">全景地图</button> <button @click="Mutil.tianSlB()" class="map-botton">全景地图</button>
<!-- <button @click="Mutil.tianSlC()" class="map-botton">切换3</button> -->
</div> </div>
<div v-show="isShowVideo" style="display: none;position:absolute;left:1000px;top:10px;z-index: 2;background-color: #0BD30B;width: 400px;height: 300px;"> <div v-show="isShowVideo" v-drag style="display: none;position:absolute;left:1000px;top:10px;z-index: 30;padding: 10px; background-color: #fff;width: 400px;height: 300px;border-radius: 5px;border: 1px solid #000;">
<div style="width: 100%;height: 30px;">
<span @click="closeVideo" style="float: right;margin-right: 10px;font-size: 1.5rem;"class="el-icon-close"></span>
</div>
<div style="width: 100%;height: 35px;text-align: center;font-size: 1rem;font-weight: 900;">
<span>{{deviceVideo.deviceName}}</span>
</div>
<div id="div_video"></div> <div id="div_video"></div>
</div> </div>
</div>
<!-- <div class="markBox">
<ul>
<li><img width="10px" src="@/assets/mark/markqy.png" /> 企业图例</li>
</ul>
</div> -->
<!-- <div class="BoxWrap">
<div class="horn">
<div class="lt"></div>
<div class="rt"></div>
<div class="rb"></div>
<div class="lb"></div>
</div>
</div> -->
</div>
<div style=""> <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;"> <div style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.8);position: absolute;top: 0;left: 10px;float: left;">
<QyMapone></QyMapone> <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>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;">
<div id="main1" style="width:480px;height:250px;"></div>
</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> -->
<!-- <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.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>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/weixianyuan.png" /> 危险源 <span>{{tjNumberObj.dangerNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/jiankong.png" /> 监控监测点<span>{{tjNumberObj.cameraNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/weihaichangsuo.png" /> 职业危害场所<span>2</span></li></div>
</ul>
<ul>
<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 class="markBox"> <div class="markBox">
<div class="markbox-div"> <div class="markbox-div">
<el-tooltip :disabled="disabled" content="企业注册" placement="left" effect="light"> <el-tooltip content="企业注册" placement="left" effect="light">
<div class="markbox-click" @click="mapqiye"> <div class="markbox-click" ref="qyimg" @click="mapqiye" style="position: relative;">
<img width="15px" src="@/assets/mark/markqy.png" /> <img width="15px" style="margin-top: 10px;" src="@/assets/mark/markqy.png" />
<img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0">
</div> </div>
</el-tooltip> </el-tooltip>
...@@ -79,9 +37,10 @@ ...@@ -79,9 +37,10 @@
<span>{{tjNumberObj.enterpriseRegNum}}</span> <span>{{tjNumberObj.enterpriseRegNum}}</span>
</div> </div>
<div class="markbox-div"> <div class="markbox-div">
<el-tooltip :disabled="disabled" content="危险源" placement="left" effect="light"> <el-tooltip content="危险源" placement="left" effect="light">
<div @click="mapwxy"> <div @click="mapwxy" ref="wxyimg" style="position: relative;">
<img width="20px" src="@/assets/mark/weixianyuan.png" /> <img width="20px" style="margin-top: 10px;" src="@/assets/mark/weixianyuan.png" />
<img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0">
</div> </div>
</el-tooltip> </el-tooltip>
...@@ -90,9 +49,10 @@ ...@@ -90,9 +49,10 @@
<span>{{tjNumberObj.dangerNum}}</span> <span>{{tjNumberObj.dangerNum}}</span>
</div> </div>
<div class="markbox-div"> <div class="markbox-div">
<el-tooltip :disabled="disabled" content="监控监测点" placement="left" effect="light"> <el-tooltip content="监控监测点" placement="left" effect="light">
<div @click="mapshipin"> <div @click="mapshipin" ref="shipinimg" style="position: relative;">
<img width="20px" src="@/assets/mark/jiankong.png" /> <img width="20px" style="margin-top: 10px;" src="@/assets/mark/jiankong.png" />
<img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0">
</div> </div>
</el-tooltip> </el-tooltip>
...@@ -101,8 +61,10 @@ ...@@ -101,8 +61,10 @@
<span>{{tjNumberObj.cameraNum}}</span> <span>{{tjNumberObj.cameraNum}}</span>
</div> </div>
<div class="markbox-div"> <div class="markbox-div">
<el-tooltip :disabled="disabled" content="职业危害场所" placement="left" effect="light"> <el-tooltip content="职业危害场所" placement="left" effect="light">
<img width="20px" src="@/assets/mark/weihaichangsuo.png" /> <div @click="mapweihai" ref="whimg" style="position: relative;">
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/weihaichangsuo.png" />
<!-- <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0"> -->
</div> </div>
</el-tooltip> </el-tooltip>
...@@ -111,9 +73,10 @@ ...@@ -111,9 +73,10 @@
<span>2</span> <span>2</span>
</div> </div>
<div class="markbox-div"> <div class="markbox-div">
<el-tooltip :disabled="disabled" content="隐患" placement="left" effect="light"> <el-tooltip content="隐患" placement="left" effect="light">
<div> <div @click="mapyinhuan" ref="yhimg" style="position: relative;">
<img width="20px" src="@/assets/mark/yinhuan.png" /> <img width="20px" style="margin-top: 10px;" src="@/assets/mark/yinhuan.png" />
<!-- <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0"> -->
</div> </div>
</el-tooltip> </el-tooltip>
...@@ -133,6 +96,7 @@ import { ...@@ -133,6 +96,7 @@ import {
Provide Provide
} from "vue-property-decorator"; } from "vue-property-decorator";
import METHOD from "@/utils/methods"; import METHOD from "@/utils/methods";
import "@/utils/directive.js";
import { import {
Icon Icon
} from "element-ui"; } from "element-ui";
...@@ -140,16 +104,12 @@ import "@/utils/VamapLoad.ts"; ...@@ -140,16 +104,12 @@ import "@/utils/VamapLoad.ts";
import DrawTool from "@/components/drawTool.vue"; import DrawTool from "@/components/drawTool.vue";
import Search from "@/components/search.vue"; import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js"; import Mutil from "@/utils/mapUtil.js";
// 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"; import METHOD from "@/utils/methods";
import QyMaptwo from './qyMaptwo.vue'; import QyMaptwo from './qyMaptwo.vue';
import QyMapone from './qyMapone.vue'; import QyMapone from './qyMapone.vue';
import Demo from '@/views/Enterprises/demo.vue'; import Demo from '@/views/Enterprises/demo.vue';
import vueDrag from 'vue-dragging'
Vue.use(vueDrag)
@Component({ @Component({
components: { components: {
DrawTool, DrawTool,
...@@ -198,9 +158,12 @@ export default class GIS extends Vue { ...@@ -198,9 +158,12 @@ export default class GIS extends Vue {
@Provide() mouseTool: any; //测量工具 @Provide() mouseTool: any; //测量工具
@Provide() toolVisble: boolean = false; @Provide() toolVisble: boolean = false;
@Provide() tjNumberObj: any = {}; @Provide() tjNumberObj: any = {};
@Provide() qiyeVisble: boolean = false; @Provide() deviceVideo: any = {};
@Provide() wxyVisble: boolean = false; @Provide() qiyeVisble: boolean = true;
@Provide() shipinVisble: boolean = false; @Provide() wxyVisble: boolean = true;
@Provide() shipinVisble: boolean = true;
@Provide() weihaiVisble: boolean = true;
@Provide() yinhuanVisble: boolean = true;
getMapData() { getMapData() {
let that = this; let that = this;
...@@ -307,6 +270,7 @@ export default class GIS extends Vue { ...@@ -307,6 +270,7 @@ export default class GIS extends Vue {
} }
); );
} }
getshipinWindowInfo(deviceId: string) { getshipinWindowInfo(deviceId: string) {
let that = this; let that = this;
this.closeVideo(); this.closeVideo();
...@@ -315,6 +279,7 @@ export default class GIS extends Vue { ...@@ -315,6 +279,7 @@ export default class GIS extends Vue {
`/safetyDeviceInfo/getSafetyDeviceInfoById/${deviceId}`, `/safetyDeviceInfo/getSafetyDeviceInfoById/${deviceId}`,
function (res: any) { function (res: any) {
if (res.code == 0) { if (res.code == 0) {
that.deviceVideo = res.data;
let device = res.data; let device = res.data;
that.isShowVideo=true; that.isShowVideo=true;
that.player.play('http://27.128.189.137:18000/flv/hls/stream_88_0.flv' , 1); that.player.play('http://27.128.189.137:18000/flv/hls/stream_88_0.flv' , 1);
...@@ -443,6 +408,7 @@ export default class GIS extends Vue { ...@@ -443,6 +408,7 @@ export default class GIS extends Vue {
} }
}); });
} }
/* 搜索 */ /* 搜索 */
onSearchResult(pois: any) { onSearchResult(pois: any) {
let latSum = 0; let latSum = 0;
...@@ -480,9 +446,10 @@ export default class GIS extends Vue { ...@@ -480,9 +446,10 @@ export default class GIS extends Vue {
this.getMapData(); this.getMapData();
} }
mounted() { mounted() {
let that = this; let that = this;
that.player = new WasmPlayer(null, "div_video", null, {Height: true}); that.player = new WasmPlayer(null, "div_video", null);
that.mapLoadDone = true; that.mapLoadDone = true;
that.Mutil = new Mutil("mapbox"); that.Mutil = new Mutil("mapbox");
that.MAP = that.Mutil.MAP; that.MAP = that.Mutil.MAP;
...@@ -507,13 +474,17 @@ export default class GIS extends Vue { ...@@ -507,13 +474,17 @@ export default class GIS extends Vue {
this.getStatiData(); this.getStatiData();
this.Mutil.getBoundaries("石家庄"); this.Mutil.getBoundaries("石家庄");
} }
mapqiye(){ mapqiye(){
if(this.qiyeVisble){ if(this.qiyeVisble){
this.Mutil.visibleMarks(false,"qiye"); this.Mutil.visibleMarks(false,"qiye");
this.qiyeVisble=false; this.qiyeVisble=false;
this.$refs.qyimg.lastChild.style.display = "none";
}else{ }else{
this.Mutil.visibleMarks(true,"qiye"); this.Mutil.visibleMarks(true,"qiye");
this.qiyeVisble=true; this.qiyeVisble=true;
this.$refs.qyimg.lastChild.style.display = "block";
} }
} }
...@@ -525,18 +496,36 @@ export default class GIS extends Vue { ...@@ -525,18 +496,36 @@ export default class GIS extends Vue {
if(this.wxyVisble){ if(this.wxyVisble){
this.Mutil.visibleMarks(false,"wxy"); this.Mutil.visibleMarks(false,"wxy");
this.wxyVisble=false; this.wxyVisble=false;
this.$refs.wxyimg.lastChild.style.display = "none";
}else{ }else{
this.Mutil.visibleMarks(true,"wxy"); this.Mutil.visibleMarks(true,"wxy");
this.wxyVisble=true; this.wxyVisble=true;
this.$refs.wxyimg.lastChild.style.display = "block";
} }
} }
mapshipin(){ mapshipin(){
if(this.shipinVisble){ if(this.shipinVisble){
this.Mutil.visibleMarks(false,"shipin"); this.Mutil.visibleMarks(false,"shipin");
this.shipinVisble=false; this.shipinVisble=false;
this.$refs.shipinimg.lastChild.style.display = "none";
}else{ }else{
this.Mutil.visibleMarks(true,"shipin"); this.Mutil.visibleMarks(true,"shipin");
this.shipinVisble=true; this.shipinVisble=true;
this.$refs.shipinimg.lastChild.style.display = "block";
}
}
mapweihai(){
if(this){
this.$refs.whimg.lastChild.style.display = "none";
}else{
this.$refs.whimg.lastChild.style.display = "block";
}
}
mapyinhuan(){
if(this){
this.$refs.yhimg.lastChild.style.display = "none";
}else{
this.$refs.yhimg.lastChild.style.display = "block";
} }
} }
getStatiData() { getStatiData() {
...@@ -583,7 +572,6 @@ export default class GIS extends Vue { ...@@ -583,7 +572,6 @@ export default class GIS extends Vue {
} }
if (res.code == 0 && res.data.cameraList.length > 0) { if (res.code == 0 && res.data.cameraList.length > 0) {
let shipinmapData = res.data.cameraList; let shipinmapData = res.data.cameraList;
console.log(shipinmapData,"shipin")
let shipinlatSum = 0; let shipinlatSum = 0;
let shipinlngSum = 0; let shipinlngSum = 0;
shipinmapData.forEach((ele: any, index: any) => { shipinmapData.forEach((ele: any, index: any) => {
...@@ -635,10 +623,17 @@ export default class GIS extends Vue { ...@@ -635,10 +623,17 @@ export default class GIS extends Vue {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
/* .div-isShowVideo{
width: 200px;
height: 350px;
} */
/* .div-isShowVideo .divspan{
width: 100%;
height: 20px;
} */
.markBox { .markBox {
z-index: 30; z-index: 30;
width:150px; width:120px;
height:250px; height:250px;
background-color: rgba(2, 40, 90, 0.5); background-color: rgba(2, 40, 90, 0.5);
position: fixed; position: fixed;
...@@ -650,8 +645,8 @@ export default class GIS extends Vue { ...@@ -650,8 +645,8 @@ export default class GIS extends Vue {
width: 50%; width: 50%;
height: 50px; height: 50px;
text-align: center; text-align: center;
background: url(selected.png) right top no-repeat !important; /* background: url(selected.png) right top no-repeat !important;
background-size: 16px !important; background-size: 16px !important; */
} }
.markBox .markbox-span{ .markBox .markbox-span{
float: right; float: right;
...@@ -665,7 +660,7 @@ export default class GIS extends Vue { ...@@ -665,7 +660,7 @@ export default class GIS extends Vue {
} }
.markBox div img{ .markBox div img{
width: 25px; width: 25px;
margin-top: 10px; /* margin-top: 10px; */
} }
.show-box { .show-box {
position: absolute !important; position: absolute !important;
......
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMapone.vue
View file @ 89e2fa50
...@@ -3,60 +3,30 @@ ...@@ -3,60 +3,30 @@
<div class="pie" style="width:480px;margin-left: 10px;margin-top: 20px;"> <div class="pie" style="width:480px;margin-left: 10px;margin-top: 20px;">
<!-- <dv-border-box-1> --> <!-- <dv-border-box-1> -->
<div class="pie-div"> <div class="pie-div">
<div style="width:480px;height: 40px;text-align: center;"> <div style="width:100%;height: 30px;text-align: center;">
<span style="font-size: 20px; font-weight: 900; color: #fff;">企业注册</span> <span style="font-size: 20px; font-weight: 900; color: #fff;">企业注册</span>
</div> </div>
<div style="width: 180px;float: left;margin-left: 50px;"> <div style="width: 50%;height: 180px;float: left;text-align: center;">
<vue-ellipse-progress <div class="qiyezc">
:progress="50" <img src="@/assets/mark/qiyezc.png" alt="" style="width: 180px;height: 180px;">
:angle="-90" <div style="position: absolute;width: 100%; height: 100%;top: 0;text-align: center;color: #fff;font-size: 1.2rem;font-weight: 500;">
color="blue" <p>注册数量</p>
emptyColor="#8ec5fc" <span id="span1" style="font-size: 1.5rem;">{{$data.enterpriseRegNum}}个</span>
: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>
<div style="width: 180px;float: right;margin-right: -30px;">
<vue-ellipse-progress </div>
:progress="50"
:angle="-90" </div>
color="blue" <div style="width: 50%;height: 180px;float: right;text-align: center;">
emptyColor="#8ec5fc" <div class="qiyesh">
:size="150" <img src="@/assets/mark/qiyesh.png" alt="" style="width: 180px;height: 180px;">
:thickness="10" <div style="position: absolute;width: 100%; height: 100%;top: 0;text-align: center;color: #fff;font-size: 1.2rem;font-weight: 500;">
emptyThickness="5%" <p>审核数量</p>
lineMode="in 10" <span id="span2" style="font-size: 1.5rem;" >{{$data.enterpriseCheckIngNum}}个</span>
:legend="true" </div>
:legendValue="10"
legendClass="legend-custom-style" </div>
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>
</div> </div>
<!-- </dv-border-box-1> --> <!-- </dv-border-box-1> -->
...@@ -68,29 +38,15 @@ ...@@ -68,29 +38,15 @@
</dv-border-box-12> </dv-border-box-12>
<div class="div-table" style="width:480px;height: 380px;margin-top: 20px;"> <div class="div-table" style="width:480px;height: 380px;margin-top: 20px;">
<div style="width: 100%;height: 40px;text-align: center;font-size: 18px; line-height: 40px;color: #fff;font-weight: 900;">预警信息</div> <div style="width: 100%;height: 40px;text-align: center;font-size: 18px; line-height: 40px;color: #fff;font-weight: 900;">预警信息</div>
<el-table <el-table :data="$data.tableData" stripe height="220" border :header-cell-style="{background:'#02285a',color:'#fff',}">
:data="tableData" <el-table-column prop="unitName" label="企业名称" width="110"></el-table-column>
height="220" <el-table-column prop="alarmInfo" label="预警信息" width="110">
border <template slot-scope="scope">
:header-cell-style="{background:'#02285a',color:'#fff',}"> <font class="dg">{{scope.row.alarmInfo}}</font>
<el-table-column </template>
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-column>
<el-table-column prop="deviceName" label="设备名称" width="100"></el-table-column>
<el-table-column prop="alarmTime" label="预警时间"></el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
...@@ -141,47 +97,49 @@ import VueEllipseProgress from 'vue-ellipse-progress'; ...@@ -141,47 +97,49 @@ import VueEllipseProgress from 'vue-ellipse-progress';
Vue.use(VueEllipseProgress); Vue.use(VueEllipseProgress);
export default { export default {
data() { data(){
return { return{
tableData: [{ tableData:[],
date: '测试瓷砖厂', enterpriseRegNum:"",
name: '压力过大', enterpriseCheckIngNum:""
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(){ created(){
this.getTableData();
}, },
mounted(){ mounted(){
this.drawPieChart(); this.drawPieChart();
this.getStatiData()
}, },
methods:{ methods:{
getTableData() {
let that = this;
that.loading = true;
METHOD.axiosPost(
that,
`/alarmInfo/getAlarmInfoList`,{},
function(res) {
if (res.code == 0) {
that.$data.tableData = res.data.pageData;
}
});
},
getStatiData() {
let that = this;
METHOD.axiosPost(
that,
`/dataStatistics/managerDataStatistics`,
{ cityId: "", countyId: "", provinceId: "" },
function (res) {
if (res.code == 0) {
console.log(res,"res")
that.$data.enterpriseRegNum = res.data.enterpriseRegNum;
that.$data.enterpriseCheckIngNum = res.data.enterpriseCheckIngNum;
}
}
)
},
deleteRow(index, rows) { deleteRow(index, rows) {
rows.splice(index, 1); rows.splice(index, 1);
}, },
...@@ -259,6 +217,23 @@ export default { ...@@ -259,6 +217,23 @@ export default {
} }
</script> </script>
<style> <style>
.pie-div{
width: 100%;
height: 210px;
}
.qiyezc{
width: 100%;
height: 100%;
position: relative;
}
.qiyesh{
width: 100%;
height: 100%;
position: relative;
}
.pie-div p{
margin-top: 55px;
}
.pie #pie2 { .pie #pie2 {
/* border: 1px #000000 solid; */ /* border: 1px #000000 solid; */
margin-left: 20px; margin-left: 20px;
...@@ -268,20 +243,16 @@ export default { ...@@ -268,20 +243,16 @@ export default {
/* height: 100%; */ /* height: 100%; */
padding: 0px !important; 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 { .div-table .el-table tr >td {
background-color: #0b356d; background-color: #0b356d !important;
color: #fff; color: #fff;
border: 1px solid #8ec5fc; border: 1px solid #8ec5fc;
height: 50px; height: 50px;
padding: 4px 0 !important; padding: 4px 0 !important;
} }
.el-table th, .el-table tr {
background-color: #0b356d !important;
}
.div-table .el-table tr >th { .div-table .el-table tr >th {
border: 1px solid #8ec5fc; border: 1px solid #8ec5fc;
} }
......
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