Skip to content

X
xt-whp
Commit bf02740d authored by yaqizhang's avatar yaqizhang
Browse files
Options

行唐汇聚信息统计样式优化

parent 384a3b77
Hide whitespace changes
Inline Side-by-side
Showing with 38 additions and 36 deletions
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue
View file @ bf02740d
...@@ -25,48 +25,48 @@ ...@@ -25,48 +25,48 @@
<QyMapone></QyMapone> <QyMapone></QyMapone>
</div> </div>
<div class="markBox"> <div class="markBox">
<div class="markbox-div" ref="qyzc" style="margin-top: 70px;"> <div @click="mapqiye" class="markbox-div" ref="qyzc" style="margin-top: 100px;">
<div class="markbox-click" ref="qyimg" @click="mapqiye" style="width: 30%;height: 100%;float: left;text-align: right;"> <div class="markbox-click" ref="qyimg" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="15px" src="@/assets/mark/markqy.png" /> <img width="27px" src="@/assets/mark/markqy.png" />
</div> </div>
<div class="markbox-span" ref="zqyzc" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;"> <div class="markbox-span" ref="zqyzc" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>企业注册<p></p>2</span> <span>企业注册<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{tjNumberObj.enterpriseRegNum}}</span></span>
</div> </div>
</div> </div>
<div class="markbox-div" ref="wxy"> <div @click="mapwxy" class="markbox-div" ref="wxy">
<div @click="mapwxy" class="markbox-click" ref="wxyimg" style="width: 30%;height: 100%;float: left;text-align: right;"> <div class="markbox-click" ref="wxyimg" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="20px" src="@/assets/mark/weixianyuan.png" /> <img width="35px" src="@/assets/mark/weixianyuan.png" style="margin-top: 20px;"/>
</div> </div>
<div class="markbox-span" ref="zwxy" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;"> <div class="markbox-span" ref="zwxy" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>危险源<p></p>2</span> <span>危险源<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{tjNumberObj.dangerNum}}</span></span>
</div> </div>
</div> </div>
<div class="markbox-div" ref="jk"> <div @click="mapshipin" class="markbox-div" ref="jk">
<div @click="mapshipin" class="markbox-click" ref="shipinimg" style="width: 30%;height: 100%;float: left;text-align: right;"> <div class="markbox-click" ref="shipinimg" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="20px" src="@/assets/mark/jiankong.png" /> <img width="32px" src="@/assets/mark/jiankong.png" />
</div> </div>
<div class="markbox-span" ref="zjk" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;"> <div class="markbox-span" ref="zjk" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>监控监测点<p></p>2</span> <span>监控监测点<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{tjNumberObj.cameraNum}}</span></span>
</div> </div>
</div> </div>
<div class="markbox-div" ref="wh"> <div class="markbox-div" ref="wh">
<div ref="whimg" class="markbox-click" style="width: 30%;height: 100%;float: left;text-align: right;"> <div ref="whimg" class="markbox-click" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="20px" src="@/assets/mark/weihaichangsuo.png" /> <img width="32px" src="@/assets/mark/weihaichangsuo.png" />
</div> </div>
<div class="markbox-span" ref="zwh" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;"> <div class="markbox-span" ref="zwh" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>职业危害场所<p></p>2</span> <span>职业危害场所<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">0</span></span>
</div> </div>
</div> </div>
<div class="markbox-div" ref="yh"> <div @click="yinhuan" class="markbox-div" ref="yh">
<div @click="yinhuan" class="markbox-click" ref="yhimg" style="width: 30%;height: 100%;float: left;text-align: right;"> <div class="markbox-click" ref="yhimg" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="20px" src="@/assets/mark/yinhuan.png" /> <img width="30px" src="@/assets/mark/yinhuan.png" />
</div> </div>
<div class="markbox-span" ref="zyh" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;"> <div class="markbox-span" ref="zyh" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>隐患<p></p>2</span> <span>隐患<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{tjNumberObj.troubleNum}}</span></span>
</div> </div>
</div> </div>
...@@ -868,12 +868,11 @@ ...@@ -868,12 +868,11 @@
.markBox { .markBox {
z-index: 30; z-index: 30;
width: 185px; width: 185px;
height: 700px; height: calc(100vh - 230px);
background: url('../../assets/z3.png') 100% 100%; background: url('../../assets/z3.png') 100% 100%;
background-repeat: no-repeat; position: absolute;
position: fixed; top: -67px;
top: 70px; right: 10px;
right: 20px;
} }
.markBox .markbox-div { .markBox .markbox-div {
...@@ -894,7 +893,7 @@ ...@@ -894,7 +893,7 @@
} }
.markbox-click img { .markbox-click img {
width: 30px; /* width: 30px; */
margin-top: 17px; margin-top: 17px;
} }
......
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMapone.vue
View file @ bf02740d
...@@ -31,9 +31,9 @@ ...@@ -31,9 +31,9 @@
</div> </div>
<!-- </dv-border-box-1> --> <!-- </dv-border-box-1> -->
<dv-border-box-12> <dv-border-box-12>
<div id="pie2" style="width:450px;height: 350px;padding: 20px 0 0 0;"> <div id="pie2" style="width:450px;height: 330px;padding: 20px 0 0 0;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main2" style="width:450px;height:330px;"></div> <div id="main2" style="width:450px;height:310px;"></div>
</div> </div>
</dv-border-box-12> </dv-border-box-12>
<div class="div-table" style="width:480px;margin-top: 20px;background-color: rgb(0, 0, 0,0);position: fixed;bottom: 0;right: 0;margin-right: 20px;"> <div class="div-table" style="width:480px;margin-top: 20px;background-color: rgb(0, 0, 0,0);position: fixed;bottom: 0;right: 0;margin-right: 20px;">
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<el-table-column prop="alarmTime" label="预警时间"></el-table-column> <el-table-column prop="alarmTime" label="预警时间"></el-table-column>
</el-table> </el-table>
</div> </div>
<div id="pie3" style="width:450px;height: 350px;margin-left: 20px;margin-top: 15px;"> <div id="pie3" style="width:450px;height: 350px;margin-left: 20px;margin-top: 35px;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main3" style="width:450px;height:330px;"></div> <div id="main3" style="width:450px;height:330px;"></div>
</div> </div>
...@@ -203,7 +203,11 @@ export default { ...@@ -203,7 +203,11 @@ export default {
textStyle: { //图例文字的样式 textStyle: { //图例文字的样式
color: '#fff', color: '#fff',
} }
}, },
grid: {
bottom:'7%',
left: 80,
},
xAxis: { xAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
...@@ -232,6 +236,13 @@ export default { ...@@ -232,6 +236,13 @@ export default {
inverse: true, //倒叙 inverse: true, //倒叙
axisLabel:{ axisLabel:{
show: true, show: true,
formatter:function(value){
var texts=value;
if(texts.length>5){ // 具体多少字就看自己了
texts=texts.substr(0,5)+'...';
}
return texts;
},
rich: { rich: {
flag: { flag: {
fontSize: 25, fontSize: 25,
...@@ -309,14 +320,6 @@ export default { ...@@ -309,14 +320,6 @@ export default {
} }
} }
}, },
// toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
legend: { legend: {
data: ['隐患', '风险'], data: ['隐患', '风险'],
textStyle: { //图例文字的样式 textStyle: { //图例文字的样式
......
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