|
@@ -1,101 +1,120 @@
|
|
|
<template>
|
|
|
- <div class="saga-fill">
|
|
|
+ <div :class="filterClass ? 'saga-fill reset-fill':'saga-fill'">
|
|
|
<div class="mess-view">
|
|
|
<el-tooltip class="item" effect="dark" :content="renderData.tips" placement="bottom-start">
|
|
|
- <i class="el-icon-info"><span>{{renderData.title}}</span></i>
|
|
|
+ <i :class="renderData.title ? 'el-icon-info':''"><span>{{renderData.title}}</span></i>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
<div class="doughnut-view">
|
|
|
- <report-doughnut v-if="renderData.needCountO || renderData.needCountT" type="type" width="200" height="200" :sum="renderData.sum"
|
|
|
- :name="renderData.title" :renderData="echartsData" :id="id" :text="renderData.text">
|
|
|
+ <report-doughnut
|
|
|
+ v-if="renderData.needCountO || renderData.needCountT"
|
|
|
+ type="type"
|
|
|
+ width="200"
|
|
|
+ height="200"
|
|
|
+ :sum="renderData.sum"
|
|
|
+ :name="renderData.title"
|
|
|
+ :renderData="echartsData"
|
|
|
+ :id="id"
|
|
|
+ :text="renderData.text">
|
|
|
</report-doughnut>
|
|
|
</div>
|
|
|
+ <p style="text-align: center">{{renderData.val}}</p>
|
|
|
<slot></slot>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import reportDoughnut from "@/components/echarts/reportDoughnut"
|
|
|
-export default {
|
|
|
- name: "dataOrgin",
|
|
|
- components: {
|
|
|
- reportDoughnut
|
|
|
- },
|
|
|
- props: {
|
|
|
- id: {
|
|
|
- type: String,
|
|
|
- default: function createRandomId() {
|
|
|
- return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
|
|
|
- }
|
|
|
- },
|
|
|
- renderData: {
|
|
|
- type: Object,
|
|
|
- default: function () {
|
|
|
- return {
|
|
|
+ import reportDoughnut from "@/components/echarts/reportDoughnut"
|
|
|
|
|
|
+ export default {
|
|
|
+ name: "dataOrgin",
|
|
|
+ components: {
|
|
|
+ reportDoughnut
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ id: {
|
|
|
+ type: String,
|
|
|
+ default: function createRandomId() {
|
|
|
+ return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
|
|
|
}
|
|
|
+ },
|
|
|
+ renderData: {
|
|
|
+ type: Object,
|
|
|
+ default: function () {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filterClass: String
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ echartsData: []
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- echartsData: []
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.changeData()
|
|
|
- },
|
|
|
- mounted() { },
|
|
|
- methods: {
|
|
|
- changeData() {
|
|
|
- this.echartsData = [
|
|
|
- {
|
|
|
- name: this.renderData.contentValueO + this.renderData.needCountO,
|
|
|
- value: this.renderData.needCountO
|
|
|
- },
|
|
|
- {
|
|
|
- name: this.renderData.contentValueT + this.renderData.needCountT,
|
|
|
- value: this.renderData.needCountT
|
|
|
- },
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- renderData: {
|
|
|
- deep: true,
|
|
|
- handler: function () {
|
|
|
- this.changeData()
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.changeData()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeData() {
|
|
|
+ this.echartsData = [
|
|
|
+ {
|
|
|
+ name: this.renderData.contentValueO + this.renderData.needCountO,
|
|
|
+ value: this.renderData.needCountO
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: this.renderData.contentValueT + this.renderData.needCountT,
|
|
|
+ value: this.renderData.needCountT
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ renderData: {
|
|
|
+ deep: true,
|
|
|
+ handler: function () {
|
|
|
+ this.changeData()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.mess-view {
|
|
|
- box-sizing: border-box;
|
|
|
- border-bottom: 1px solid #ddd;
|
|
|
- padding: 10px 20px 10px 15px;
|
|
|
- .saga-title {
|
|
|
- font-size: 14px;
|
|
|
- color: #333;
|
|
|
- font-weight: 600;
|
|
|
- line-height: 14px;
|
|
|
+
|
|
|
+ .mess-view {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+ padding: 10px 20px 10px 15px;
|
|
|
+
|
|
|
+ .saga-title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ span {
|
|
|
+ padding-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- i {
|
|
|
- span {
|
|
|
- padding-left: 6px;
|
|
|
+
|
|
|
+ .saga-fill {
|
|
|
+ width: 345px;
|
|
|
+ // height: 220px;
|
|
|
+ .doughnut-view {
|
|
|
+ height: 165px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.saga-fill {
|
|
|
- width: 345px;
|
|
|
- // height: 220px;
|
|
|
- .doughnut-view {
|
|
|
- height: 165px;
|
|
|
- width: 100%;
|
|
|
- padding: 0 5px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .reset-fill{
|
|
|
+ background: #fff;
|
|
|
+ width: 353px;
|
|
|
+
|
|
|
}
|
|
|
-}
|
|
|
</style>
|