index.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <div>
  3. <!-- 系统集成统计页面 -->
  4. <div class="contain-block" style="width:calc(30% - 15px);margin-right:15px;min-width:385px;">
  5. <span class="contain-title-leftblock">
  6. <span class="iconfont icon-juxing"></span>
  7. 系统集成统计</span>
  8. <div class="contain-data">
  9. <integrateStatistics ref="chart" style="height: calc(100% - 5px);" :key="refresh"></integrateStatistics>
  10. </div>
  11. </div>
  12. <!-- 表号功能号总览页面 -->
  13. <div class="contain-block meterFunc">
  14. <span class="contain-title-leftblock">
  15. <span class="iconfont icon-juxing"></span>
  16. 表号功能号总览</span>
  17. <div class="contain-data">
  18. <tabFunNumOverview ref="table" :key="refresh" @reloadData="reloadData()"></tabFunNumOverview>
  19. </div>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. import { mapGetters } from 'vuex'
  25. import integrateStatistics from '@/components/point/report/integrateStatistics'
  26. import tabFunNumOverview from '@/components/point/report/tabFunNumOverview'
  27. export default {
  28. components: {
  29. integrateStatistics,
  30. tabFunNumOverview
  31. },
  32. computed: {
  33. ...mapGetters('layout', ['projectId']),
  34. },
  35. data() {
  36. return {
  37. refresh: ''//刷新组件
  38. }
  39. },
  40. methods: {
  41. //子组件中的新建完成后刷新
  42. reloadData() {
  43. this.refresh = new Date().getTime();
  44. }
  45. },
  46. watch: {
  47. //监听项目变化
  48. projectId() {
  49. this.refresh = new Date().getTime();
  50. }
  51. }
  52. }
  53. </script>
  54. <style lang="less" scoped>
  55. .contain-block {
  56. float: left;
  57. height: 100%;
  58. background: white;
  59. width: 70%;
  60. }
  61. .contain-title-leftblock {
  62. height: 30px;
  63. line-height: 30px;
  64. /*border-left: 8px solid black;*/
  65. display: inline-block;
  66. margin: 8px 0;
  67. font-weight: 600;
  68. padding-left: 8px;
  69. cursor: default;
  70. }
  71. .contain-data {
  72. overflow: auto;
  73. height: calc(100% - 46px);
  74. }
  75. @media screen and (max-width: 1600px){
  76. .meterFunc{
  77. width:calc(100% - 400px);
  78. }
  79. }
  80. </style>