123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- <template>
- <div class="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>
- </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>
- </div>
- <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 {
- }
- }
- }
- },
- 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()
- }
- }
- }
- }
- </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;
- }
- i {
- span {
- padding-left: 6px;
- }
- }
- }
- .saga-fill {
- width: 345px;
- // height: 220px;
- .doughnut-view {
- height: 165px;
- width: 100%;
- padding: 0 5px;
- box-sizing: border-box;
- }
- }
- </style>
|