dataorigin.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <template>
  2. <div class="saga-fill">
  3. <div class="mess-view">
  4. <el-tooltip class="item" effect="dark" :content="renderData.tips" placement="bottom-start">
  5. <i class="el-icon-info"><span>{{renderData.title}}</span></i>
  6. </el-tooltip>
  7. </div>
  8. <div class="doughnut-view">
  9. <report-doughnut v-if="renderData.needCountO || renderData.needCountT" type="type" width="200" height="200" :sum="renderData.sum"
  10. :name="renderData.title" :renderData="echartsData" :id="id" :text="renderData.text">
  11. </report-doughnut>
  12. </div>
  13. <slot></slot>
  14. </div>
  15. </template>
  16. <script>
  17. import reportDoughnut from "@/components/echarts/reportDoughnut"
  18. export default {
  19. name: "dataOrgin",
  20. components: {
  21. reportDoughnut
  22. },
  23. props: {
  24. id: {
  25. type: String,
  26. default: function createRandomId() {
  27. return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
  28. }
  29. },
  30. renderData: {
  31. type: Object,
  32. default: function () {
  33. return {
  34. }
  35. }
  36. }
  37. },
  38. data() {
  39. return {
  40. echartsData: []
  41. }
  42. },
  43. created() {
  44. this.changeData()
  45. },
  46. mounted() { },
  47. methods: {
  48. changeData() {
  49. this.echartsData = [
  50. {
  51. name: this.renderData.contentValueO + this.renderData.needCountO,
  52. value: this.renderData.needCountO
  53. },
  54. {
  55. name: this.renderData.contentValueT + this.renderData.needCountT,
  56. value: this.renderData.needCountT
  57. },
  58. ]
  59. }
  60. },
  61. watch: {
  62. renderData: {
  63. deep: true,
  64. handler: function () {
  65. this.changeData()
  66. }
  67. }
  68. }
  69. }
  70. </script>
  71. <style lang="less" scoped>
  72. .mess-view {
  73. box-sizing: border-box;
  74. border-bottom: 1px solid #ddd;
  75. padding: 10px 20px 10px 15px;
  76. .saga-title {
  77. font-size: 14px;
  78. color: #333;
  79. font-weight: 600;
  80. line-height: 14px;
  81. }
  82. i {
  83. span {
  84. padding-left: 6px;
  85. }
  86. }
  87. }
  88. .saga-fill {
  89. width: 345px;
  90. // height: 220px;
  91. .doughnut-view {
  92. height: 165px;
  93. width: 100%;
  94. padding: 0 5px;
  95. box-sizing: border-box;
  96. }
  97. }
  98. </style>