|
@@ -197,11 +197,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box-bottom">
|
|
|
- <div class="circle">
|
|
|
+ <div class="circle canvas-circle">
|
|
|
<canvas
|
|
|
:id="'canvas_' + item.type"
|
|
|
- width="150"
|
|
|
- height="150"
|
|
|
></canvas>
|
|
|
</div>
|
|
|
<div class="msg">
|
|
@@ -287,6 +285,7 @@ export default {
|
|
|
{ id: "1007", name: "燃气系统" },
|
|
|
{ id: "1008", name: "土建装饰" },
|
|
|
],
|
|
|
+ canvasCircle:0 , //圆的半径
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
@@ -303,7 +302,10 @@ export default {
|
|
|
: moment().format("YYYY")
|
|
|
).then((res) => {
|
|
|
const TYPE = statisticItem.type; // 类型
|
|
|
- const circle = new SCircle(`canvas_${TYPE}`);
|
|
|
+ const circle = new SCircle(`canvas_${TYPE}`,this.canvasCircle*0.8);
|
|
|
+ let circle_basename = null;
|
|
|
+ statisticItem.type == 1 ? circle_basename = "本月总任务" :circle_basename = "本年总任务"
|
|
|
+ circle.baseName = circle_basename
|
|
|
// 总数
|
|
|
let total = 0;
|
|
|
// 即将预期
|
|
@@ -497,6 +499,18 @@ export default {
|
|
|
getRightstatic() {
|
|
|
// 对右侧数据做遍历
|
|
|
this.statisticsList.forEach((statisticItem) => {
|
|
|
+ const TYPE = statisticItem.type; // 类型
|
|
|
+ const Dom = document.getElementById(`canvas_${TYPE}`);
|
|
|
+ const BoxDom = document.getElementsByClassName('canvas-circle')[0];
|
|
|
+ this.canvasCircle = 0
|
|
|
+ if(BoxDom.offsetHeight>BoxDom.offsetWidth){
|
|
|
+ this.canvasCircle = BoxDom.offsetWidth / 2;
|
|
|
+ }else{
|
|
|
+ this.canvasCircle = BoxDom.offsetHeight / 2;
|
|
|
+ }
|
|
|
+ // 设置Dom得width\height
|
|
|
+ Dom.height = this.canvasCircle*2;
|
|
|
+ Dom.width = this.canvasCircle*2;
|
|
|
this.projectStatistics(
|
|
|
statisticItem.type,
|
|
|
statisticItem.system,
|
|
@@ -504,8 +518,10 @@ export default {
|
|
|
? moment().format("YYYYMM")
|
|
|
: moment().format("YYYY")
|
|
|
).then((res) => {
|
|
|
- const TYPE = statisticItem.type; // 类型
|
|
|
- const circle = new SCircle(`canvas_${TYPE}`);
|
|
|
+ let circle_basename = null
|
|
|
+ statisticItem.type == 1 ? circle_basename = "本月总任务" :circle_basename = "本年总任务"
|
|
|
+ const circle = new SCircle(`canvas_${TYPE}`,this.canvasCircle*0.8);
|
|
|
+ circle.baseName = circle_basename
|
|
|
// 总数
|
|
|
let total = 0;
|
|
|
// 即将预期
|
|
@@ -926,7 +942,7 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
.box {
|
|
|
width: 100%;
|
|
|
- height: ~"calc(33% - 16px)";
|
|
|
+ height: ~"calc((100% - 16px) / 3)";
|
|
|
background: radial-gradient(#20284f 20%, transparent 20%) 0 0;
|
|
|
background-color: transparent;
|
|
|
background-size: 8px 8px;
|
|
@@ -950,14 +966,18 @@ export default {
|
|
|
// padding-top: 36px;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
+ position: relative;
|
|
|
+ align-items: center;
|
|
|
+ height:calc(100% - 52px);
|
|
|
.circle {
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
+ width: 140px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
.msg {
|
|
|
flex: 1;
|
|
|
- margin-top: 10px;
|
|
|
- padding: 30px 0 0 30px;
|
|
|
+ padding: 0 0 0 30px;
|
|
|
box-sizing: border-box;
|
|
|
.msg-item:nth-of-type(1) {
|
|
|
display: flex;
|