cjfx_fsdtj.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. <template>
  2. <div class="cjfx_fsdtj">
  3. <NavHeader />
  4. <bread-crumb />
  5. <div class="w-1200px m-auto flex flex-row justify-between">
  6. <div class="w-188px">
  7. <leftSider :activeIndex="activeIndex" @parentClick="parentClick"/>
  8. </div>
  9. <div class="w-1012px p-4 blueBg">
  10. <div class="flex items-center">
  11. <el-select class="mr-10px" v-model="normal_subject" placeholder="请选择学科" size="large">
  12. <el-option label="全部" value="0" />
  13. <el-option v-for="item in subject_list" :key="item.value" :label="item.label" :value="item.value" />
  14. </el-select>
  15. <el-select class="mr-10px" v-model="normal_classroom" placeholder="请选择班级" size="large">
  16. <el-option label="全部" value="0" />
  17. <el-option v-for="item in classroom_list" :key="item.value" :label="item.label" :value="item.value" />
  18. </el-select>
  19. <el-select class="mr-10px" v-model="normal_school" placeholder="请选择学校" size="large">
  20. <el-option label="全部" value="0" />
  21. <el-option v-for="item in school_list" :key="item.value" :label="item.label" :value="item.value" />
  22. </el-select>
  23. </div>
  24. <div class="flex justify-between mt-4 exportBtn">
  25. <div>
  26. <el-button color="#003eee" type="primary" size="large">导出</el-button>
  27. </div>
  28. </div>
  29. <div class="h-450px mt-20px overflow-x-auto echartData" id="echartData"></div>
  30. <div class="w-980px h-auto tableList">
  31. <div class="h-50px rounded flex flex-nowrap tableList_title">
  32. <div class="w-11/12 bg-opacity-0 singleT"></div>
  33. <div class="w-11/12 singleT" v-for="(item,index) in classArr" :key="index">{{item}}</div>
  34. </div>
  35. <div class="h-auto flex flex-nowrap tableList_content" v-for="(item,index) in classBaseInfoArr" :key="index">
  36. <div class="w-11/12 h-60px rounded mt-2px singleTSec singleTSecDif" >{{ item.period }}</div>
  37. <div class="w-11/12 h-60px mt-2px singleTSec " v-for="(secItem,index) in item.detailNum">{{ secItem }}</div>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. <commonFooter />
  43. </div>
  44. </template>
  45. <route lang="json">
  46. {
  47. "meta": {
  48. "title": "考试分析",
  49. "breadcrumb": true
  50. }
  51. }
  52. </route>
  53. <script lang="ts" setup>
  54. import {normalSchool_list,normalSubject_list,normalClassroom_list,cjfx_pjflcfx_list } from './api';
  55. import * as echarts from 'echarts';
  56. import { useRouter } from "vue-router";
  57. const router = useRouter();
  58. let normal_subject = $ref("");
  59. let normal_classroom = $ref("");
  60. let normal_school = $ref("");
  61. let subject_list = [{
  62. value: '1',
  63. label: '语文'
  64. }, {
  65. value: '2',
  66. label: '数学'
  67. }]
  68. let classroom_list = [{
  69. value: '1',
  70. label: '英语'
  71. }, {
  72. value: '2',
  73. label: '体育'
  74. }, {
  75. value: '3',
  76. label: '音乐'
  77. }
  78. ];
  79. let school_list = [{
  80. value: '1',
  81. label: '学校1'
  82. }, {
  83. value: '2',
  84. label: '学校2'
  85. }]
  86. const activeIndex =ref('1-3');
  87. const parentClick = (val) => {
  88. activeIndex.value = val;
  89. }
  90. let echartData = {
  91. xAxis_data: ['[0-10]', '[10-20]', '[20-30]', '[30-40]', '[40-50]', '[50-60]', '[60-70]'],
  92. series_data:[120,200,200,150,80,70,110,130]
  93. }
  94. onMounted(() => {
  95. initChart()
  96. })
  97. const initChart = () => {
  98. var myChart = echarts.init(document.getElementById('echartData'));
  99. myChart.setOption({
  100. title: {
  101. text: '人数',
  102. },
  103. grid: {
  104. left: '3%',
  105. right: '4%',
  106. bottom: '3%',
  107. containLabel: true
  108. },
  109. xAxis: {
  110. data: echartData.xAxis_data
  111. },
  112. yAxis: {
  113. type: 'value',
  114. axisTick: {
  115. show: false
  116. },
  117. },
  118. series: [
  119. {
  120. type: 'bar',
  121. barWidth: '40',
  122. itemStyle: {
  123. normal: {
  124. barBorderRadius: [20, 20, 0, 0],
  125. color: '#6897FF',
  126. label: {
  127. show: true, //开启显示
  128. position: 'top', //在上方显示
  129. textStyle: { //数值样式
  130. color: 'black',
  131. fontSize: 16
  132. }
  133. }
  134. }
  135. },
  136. data: echartData.series_data,
  137. }
  138. ]
  139. });
  140. }
  141. let classArr = [
  142. "初一(1)班",
  143. "初一(2)班",
  144. "初一(3)班",
  145. "初一(4)班",
  146. "初一(5)班",
  147. "初一(6)班",
  148. "初一(7)班",
  149. "初一(8)班",
  150. "初一(9)班",
  151. ];
  152. let classBaseInfoArr = [
  153. {
  154. period: "[0-10]",
  155. detailNum:["13","13","13","13","13","13","13","13","13"]
  156. },
  157. {
  158. period: "[10-20]",
  159. detailNum:["13","13","13","13","13","13","13","13","13"]
  160. },
  161. {
  162. period: "[20-30]",
  163. detailNum:["13","13","13","13","13","13","13","13","13"]
  164. },
  165. {
  166. period: "[30-40]",
  167. detailNum:["13","13","13","13","13","13","13","13","13"]
  168. }
  169. ];
  170. </script>
  171. <style lang="scss" scoped>
  172. ::v-deep .el-sub-menu__title {
  173. background: #003eee;
  174. color: #fff;
  175. }
  176. ::v-deep .el-table__header thead tr th {
  177. background: #003eee !important;
  178. color: #fff;
  179. height: 50px;
  180. line-height: 50px;
  181. font-weight: normal;
  182. }
  183. ::v-deep .el-table__header thead tr th:first-child {
  184. border-top-left-radius: 9px;
  185. }
  186. ::v-deep .el-table__body tbody .el-table__row td {
  187. background-color: transparent;
  188. }
  189. ::v-deep .el-dialog__footer {
  190. text-align: center;
  191. }
  192. .blueBg {
  193. background: #F1F7FF;
  194. }
  195. .whiteBG {
  196. background: #fff;
  197. }
  198. .singlepart {
  199. background-color: rgba($color: #ffffff, $alpha: 0.2);
  200. color: #fff;
  201. }
  202. .tableList {
  203. overflow-x: scroll;
  204. }
  205. .tableList_title {
  206. font-size: 14px;
  207. color: #fff;
  208. }
  209. .singleT {
  210. flex: 1;
  211. font-size: 14px;
  212. line-height: 50px;
  213. // width: fit-content;
  214. text-align: center;
  215. background: #003eee;
  216. }
  217. .singleT:first-child{
  218. background-color: transparent!important;
  219. }
  220. .singleD {
  221. flex: 1;
  222. }
  223. .singleTSec {
  224. width: fit-content;
  225. flex: 1;
  226. line-height: 60px;
  227. text-align: center;
  228. }
  229. .singleTSecDif{
  230. color: #fff;
  231. background-color: #6897FF;
  232. }
  233. </style>