index.vue 1.8 KB

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