Skip to content

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

大屏样式

parent 70805ff8
Expand all Hide 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/qyMapone.vue
View file @ 89e2fa50
......@@ -3,60 +3,30 @@
<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;">
<div style="width:100%;height: 30px;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 style="width: 50%;height: 180px;float: left;text-align: center;">
<div class="qiyezc">
<img src="@/assets/mark/qiyezc.png" alt="" style="width: 180px;height: 180px;">
<div style="position: absolute;width: 100%; height: 100%;top: 0;text-align: center;color: #fff;font-size: 1.2rem;font-weight: 500;">
<p>注册数量</p>
<span id="span1" style="font-size: 1.5rem;">{{$data.enterpriseRegNum}}个</span>
</div>
</div>
</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 style="width: 50%;height: 180px;float: right;text-align: center;">
<div class="qiyesh">
<img src="@/assets/mark/qiyesh.png" alt="" style="width: 180px;height: 180px;">
<div style="position: absolute;width: 100%; height: 100%;top: 0;text-align: center;color: #fff;font-size: 1.2rem;font-weight: 500;">
<p>审核数量</p>
<span id="span2" style="font-size: 1.5rem;" >{{$data.enterpriseCheckIngNum}}个</span>
</div>
</div>
</div>
</div>
<!-- </dv-border-box-1> -->
......@@ -68,30 +38,16 @@
</dv-border-box-12>
<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>
<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>
<el-table :data="$data.tableData" stripe height="220" border :header-cell-style="{background:'#02285a',color:'#fff',}">
<el-table-column prop="unitName" label="企业名称" width="110"></el-table-column>
<el-table-column prop="alarmInfo" label="预警信息" width="110">
<template slot-scope="scope">
<font class="dg">{{scope.row.alarmInfo}}</font>
</template>
</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>
</div>
</div>
......@@ -141,50 +97,52 @@ import VueEllipseProgress from 'vue-ellipse-progress';
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'
}]
}
},
data(){
return{
tableData:[],
enterpriseRegNum:"",
enterpriseCheckIngNum:""
}
},
created(){
this.getTableData();
},
mounted(){
this.drawPieChart();
this.getStatiData()
},
methods:{
deleteRow(index, rows) {
rows.splice(index, 1);
},
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) {
rows.splice(index, 1);
},
//初始化数据
drawPieChart(){
// 基于准备好的dom，初始化echarts实例
......@@ -259,6 +217,23 @@ export default {
}
</script>
<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 {
/* border: 1px #000000 solid; */
margin-left: 20px;
......@@ -268,20 +243,16 @@ export default {
/* 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;
background-color: #0b356d !important;
color: #fff;
border: 1px solid #8ec5fc;
height: 50px;
padding: 4px 0 !important;
}
.el-table th, .el-table tr {
background-color: #0b356d !important;
}
.div-table .el-table tr >th {
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