12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095 |
- <template>
- <v-scale-screen width="2200" height="1080">
- <div class="task_screen_cotainer" >
- <div class="task_header">
- 历史态势
- </div>
- <div class="tag" @click="jumpToCurrent">
- 当前态势
- <!-- <el-button @click="jumpToCurrent">当前态势</el-button>-->
- </div>
- <div class="content_cotainer">
- <div class="task_base_info_table">
- <div class="task_outer_cotnainer">
- <div class="task_number_box">
- <div class="task_num_left_style">
- <el-image
- style="width: 45px; height: 45px;margin-right:20px;"
- :src="require('../assets/img/taskNum.png')"
- fit="contain"
- >
- </el-image>
- 任务数
- </div>
- <div class="taskNumber_style">
- {{ taskList.length }}
- </div>
- </div>
- <div class="task_list_container">
- <div class="map_more_box">
- <div class="task_list_header" style="font-size:16px; margin: 0 24px 8px 0; white-space: nowrap;">
- <el-image
- style="width: 30px; height: 22px; margin-right:6px;"
- :src="require('../assets/img/rightIcon.svg')"
- fit="contain"
- >
- </el-image>
- 全部任务
- </div>
- </div>
- <div class="select_lsit_box">
- <el-date-picker
- v-model="currentYear"
- style="width:100%;"
- type="datetimerange"
- placeholder="请选择"
- value-format="yyyy-MM-dd HH:mm:ss"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- </div>
- <div class="search_box">
- <div class="select_lsit_box">
- <el-select
- v-model="systemTaskId"
- placeholder="切换系统名称"
- style="width:55%; margin-right:10px;"
- clearable
- filterable
- >
- <el-option
- v-for="item in systemOption"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- <el-select
- v-model="unitTaskValue"
- placeholder="切换单位名称"
- style="width:55%;"
- clearable
- filterable
- >
- <el-option
- v-for="item in unitOption"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- <div class="search_button" @click="conditionalSearch()">
- 查询
- </div>
- </div>
- </div>
- <div v-if="taskList.length" class="task_scroll_box">
- <template v-for="(item,index) in taskList">
- <div class="task_item_container" :key="index">
- <div class="task_item_left">
- <div class="left_point"></div>
- <div class="left_line"></div>
- <div v-if="index == taskList.length-1 " class="left_point"></div>
- </div>
- <div class="task_content_right">
- <div class="task_content_header">状态:{{ item.status || '-' }}</div>
- <div class="task_content_description">
- <div class="file_icon">
- <el-image
- style="width: 14px; height: 13px; margin-right:8px; margin-top:4px;"
- :src="require('../assets/img/fileIcon.svg')"
- fit="contain"
- >
- </el-image>
- </div>
- <div class="task_content_box">
- <div class="grade_box">
- <div class="name_task_participantName">
- <div class="task_name">{{ item.taskName || '-' }}</div>
- <div class="task_participantName">
- 组织人员:{{ item.organizers && item.organizers.join(',') || '-' }}
- </div>
- </div>
- <div class="grade_item">
- {{ item.syntheticTaskScore }}
- </div>
- </div>
- <div class="task_date_box">
- <div class="task_data">
- <div class="date_between">
- <span> {{ item.startTime || '-' }} </span>
- 至
- <span> {{ item.endTime || '-' }} </span>
- </div>
- </div>
- <div class="view_more" @click="viewMore(item)">
- 查看详情
- </div>
- <div class="view_more" @click="viewTaskSituation(item)">
- 查看态势
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- </div>
- <div class="noTaskData" v-else>
- 暂无任务
- </div>
- </div>
- </div>
- </div>
- <div class="center_chart_cotainer" id="taskItem">
- <div class="task_detail_cotainer">
- <div class="header_line_style">
- <div class="headerTitle"></div>
- </div>
- <div class="task_name_header">「{{ currentTaskName }}」历史态势</div>
- <!-- 任务屏幕 -->
- <div class="task_item_header">
- <!-- <el-select-->
- <!-- v-model="wholeOutTaskId"-->
- <!-- placeholder="「切换任务」"-->
- <!-- style="width:270px;"-->
- <!-- @change="changeTask"-->
- <!-- filterable-->
- <!-- >-->
- <!-- <el-option-->
- <!-- v-for="item in taskOPtion"-->
- <!-- :key="item.value"-->
- <!-- :label="item.label"-->
- <!-- :value="item.value"-->
- <!-- >-->
- <!-- </el-option>-->
- <!-- </el-select>-->
- <el-image
- v-if="false"
- @click="showMoreInfo('more')"
- class="showLessStyle"
- style="width: 30px; height: 22px; margin-right:6px; margin-left: 10px;"
- :src="require('../assets/img/small.svg')"
- fit="contain"
- >
- </el-image>
- <el-image
- @click="showMoreInfo('less')"
- :src="require('../assets/img/iconMore.svg')"
- fit="contain"
- class="showLessStyle"
- style="width: 30px; height: 22px; margin-right:6px; margin-left: 10px;"
- >
- </el-image>
- </div>
- <div class="task_header_top">
- <div class="subject_task_item">
- <div class="task_outer_cotnainer_status">
- <div class="map_more_box">
- <div class="task_list_header" style="font-size:16px; margin: 0 24px 8px 0; white-space: nowrap; ">
- <el-image
- style="width: 30px; height: 22px; margin-right:6px;"
- :src="require('../assets/img/rightIcon.svg')"
- fit="contain"
- >
- </el-image>
- 课目分布
- </div>
- <!-- <div class="select_lsit_box">-->
- <!-- <el-select-->
- <!-- v-model="systemSubjectId"-->
- <!-- placeholder="切换系统名称"-->
- <!-- style="width:55%; margin-right:5px;"-->
- <!-- @change="changeTaskAndSystem"-->
- <!-- clearable-->
- <!-- filterable-->
- <!-- >-->
- <!-- <el-option-->
- <!-- v-for="item in systemOption"-->
- <!-- :key="item.value"-->
- <!-- :label="item.label"-->
- <!-- :value="item.value"-->
- <!-- >-->
- <!-- </el-option>-->
- <!-- </el-select>-->
- <!-- <el-select-->
- <!-- v-model="unitSubjectValue"-->
- <!-- placeholder="切换单位名称"-->
- <!-- style="width:55%;"-->
- <!-- clearable-->
- <!-- @change="changeTaskAndUnit"-->
- <!-- filterable-->
- <!-- >-->
- <!-- <el-option-->
- <!-- v-for="item in unitOption"-->
- <!-- :key="item.value"-->
- <!-- :label="item.label"-->
- <!-- :value="item.value"-->
- <!-- >-->
- <!-- </el-option>-->
- <!-- </el-select>-->
- <!-- </div>-->
- </div>
- <div class="subject_list_container" id="subjectList">
- <template v-for="(item,index) in subjectDatas">
- <div class="subject_list_item" :key="index">
- <div class="subject_list_header">
- <div>
- <div class="subject_list_name">
- {{ item.subjectName ||'-' }}
- </div>
- <div class="SubjectNumber_style" style="color: #F1D73A;">
- {{ item.overallScore || '-' }}
- </div>
- <div class="orgainzers">
- 参与人员:{{ item.participatingPeople && item.participatingPeople.join(',') || '-' }}
- </div>
- </div>
- <el-image
- style="width: 36px; height: 36px; "
- :src="subjectMap[item.status]"
- fit="contain"
- >
- </el-image>
- </div>
- <div class="system_task_style">
- <div>参加系统:{{ item.participatingSystems && item.participatingSystems.join(',') || '-'}}</div>
- <div
- v-if="item.status=='已完成'"
- class="view_table_style"
- @click="viewManData(item)">
- 表格查看
- </div>
- </div>
- </div>
- </template>
- </div>
- </div>
- </div>
- <div class="unit_map_box">
- <div class="map_more_box" style="align-items: flex-start;">
- <div class="task_list_header" style="font-size:16px; margin-bottom: 10px;">
- <el-image
- style="width: 30px; height: 22px; margin-right:6px;"
- :src="require('../assets/img/rightIcon.svg')"
- fit="contain"
- >
- </el-image>
- 单位维度统计
- </div>
- <el-select
- v-model="unitSubGradeValue"
- placeholder="切换单位名称"
- style="width:43%;"
- @change="changeunitSubGrade"
- filterable
- >
- <el-option
- v-for="item in unitOptionForTask"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </div>
- <div class="num_subject_box_new">
- <div style="margin-bottom:20px;">
- <div style="font-size:12px;">成绩统计</div>
- <div>
- <el-row type="flex" justify="end" style="margin-top: -20px;margin-right: -20px;">
- <el-pagination
- small
- :pager-count="4"
- :total="this.danweiweidu.length"
- :current-page="this.danweiweidu.currentPage"
- :page-size="this.danweiweidu.pageSize"
- :page-sizes="[5,10,15,20]"
- layout="total, prev, pager, next, sizes"
- @current-change="onCurrentPageChange_grade"
- @size-change="onPageSizeChange_grade" >
- <!-- @prev-click="previousPage"-->
- <!-- @next-click="nextPage"-->
- </el-pagination>
- </el-row>
- </div>
- <div
- id="subjectGradeStatistics"
- style=" left:5px; width:430px; height:180px; "
- :style="{ top: participantScoreFlag ? '-15px' : '2px' }"
- ></div>
- </div>
- <div style="position: relative;">
- <div style="font-size:12px;" class="new_style_grade">成绩分布</div>
- <div id="subjectGradeDistribute" style="height: 160px; width:430px; bottom: 55px; position: relative; left:5px;"></div>
- </div>
- </div>
- </div>
- <div class="commandMonitoring">
- <div class="task_outer_cotnainer_status">
- <div class="map_more_box">
- <div class="task_list_header" style="font-size:16px; margin-bottom:8px;">
- <el-image
- style="width: 30px; height: 22px; margin-right:6px;"
- :src="require('../assets/img/rightIcon.svg')"
- fit="contain"
- >
- </el-image>
- 指令监控
- </div>
- </div>
- <div class="subject_list_container_int" id="moninter">
- <div class="task_other_cotainer_scrool">
- <myscrollBoard
- :key="updatekey"
- :config="scrollTableConfig"
- style="width:100%; height:100%"
- />
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="task_header_footer">
- <div class="subject_task_item">
- <div class="task_outer_cotnainer_status">
- <div class="map_more_box" style="align-items: flex-start; margin-bottom:18px;">
- <div class="task_list_header" style="font-size:16px; margin-bottom: 10px;">
- <el-image
- style="width: 30px; height: 22px; margin-right:6px;"
- :src="require('../assets/img/rightIcon.svg')"
- fit="contain"
- >
- </el-image>
- 任务评估结果
- </div>
- </div>
- <div class="num_subject_box">
- <div class="num_subject_left">
- <div class="subject_number_box" style="margin-bottom:24px;">
- <div class="subject_num_left_style">
- <el-image
- style="width: 45px; height: 45px;margin-right:10px;"
- :src="require('../assets/img/subjectNum.png')"
- fit="contain"
- >
- </el-image>
- 课目数
- </div>
- <div class="SubjectNumber_style">
- {{ subjectNumbers }}
- </div>
- </div>
- <div class="subject_number_box">
- <div class="subject_num_left_style" >
- <el-image
- style="width: 45px; height: 45px;margin-right:1px;"
- :src="require('../assets/img/taksGrade.png')"
- fit="contain"
- >
- </el-image>
- 任务分数
- </div>
- <div class="SubjectNumber_style" style="color: #F1D73A;">
- {{ currentTaskGrade || '-' }}
- </div>
- </div>
- </div>
- <div class="num_subject_right">
- <div class="subject_status_precent">课目状态占比</div>
- <div id="subjectStatus" style="height: 170px; width:220px; left:18px; right:0px; top:8px; "></div>
- </div>
- </div>
- <div class="num_subject_box" v-if="false">
- <div>
- <div
- id="subjectGradeStatistics"
- style="width:230px; height: 180px;"
- :style="{ bottom: participantScoreFlag ? '15px' : '0' }"
- ></div>
- </div>
- <div>
- <div id="subjectGradeDistribute" style="height: 180px; width:230px; bottom: 0px; position: relative; left:10px;"></div>
- </div>
- </div>
- </div>
- </div>
- <div class="unit_map_box">
- <div class="map_more_box" style="align-items: flex-start;">
- <div class="task_list_header" style="font-size:16px; margin-bottom: 10px;">
- <el-image
- style="width: 30px; height: 22px; margin-right:6px;"
- :src="require('../assets/img/rightIcon.svg')"
- fit="contain"
- >
- </el-image>
- 系统维度统计
- </div>
- <el-select
- v-model="systemSubGradeValue"
- placeholder="切换系统名称"
- style="width:43%;"
- @change="changeSystemSubGrade"
- filterable
- >
- <el-option
- v-for="item in systemOptionForTask"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </div>
- <div class="num_subject_box_new">
- <div style="margin-bottom:20px;">
- <div style="font-size:12px;">成绩统计</div>
- <div
- id="subjectGradeStatistics"
- style=" left:5px; width:430px; height:180px; "
- :style="{ top: participantScoreFlag ? '-15px' : '2px' }"
- ></div>
- </div>
- <div style="position: relative;">
- <div style="font-size:12px;" class="new_style_grade">成绩分布</div>
- <div id="subjectGradeDistribute" style="height: 160px; width:430px; bottom: 55px; position: relative; left:5px;"></div>
- </div>
- </div>
- </div>
- <div class="commandMonitoring">
- <div class="task_outer_cotnainer_status">
- <div class="map_more_box">
- <div class="task_list_header" style="font-size:16px; margin-bottom:8px;">
- <el-image
- style="width: 30px; height: 22px; margin-right:6px;"
- :src="require('../assets/img/rightIcon.svg')"
- fit="contain"
- >
- </el-image>
- 单位分布
- </div>
- <!-- <el-image-->
- <!-- @click="showFull('chart-earth')"-->
- <!-- style="width: 20px; height: 20px; margin-right:6px; margin-top: -10px;"-->
- <!-- :src="require('../assets/img/iconMore.svg')"-->
- <!-- fit="contain"-->
- <!-- class="moreBtn_style"-->
- <!-- >-->
- <!-- </el-image>-->
- </div>
- <!-- <div v-if="!echartMapFlag" id="mapData" style="height:260px; width:100%; top:-20px;"></div>
- <div v-if="echartMapFlag" class="tempalte_no_data" style="height:86%;"> 暂无数据</div> -->
- <div id="chart-earth" style="height:260px; width:100%; top:-20px;"></div>
- <div class="center_no_data" v-if="false">
- <el-image
- style="width: 100px; height: 100px; margin-right:6px;"
- :src="require('../assets/img/build.png')"
- fit="contain"
- >
- </el-image>
- <div>系统正在建设中,敬请期待~</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="task_footer_chart">
- <div class="chart_item_box_foooter" style="margin-right:10px;">
- <div class="inner_info_table_status">
- <div class="task_outer_cotnainer_status">
- <div class="task_list_header" style="font-size:16px;">
- <el-image
- style="width: 30px; height: 22px; margin-right:6px;"
- :src="require('../assets/img/rightIcon.svg')"
- fit="contain"
- >
- </el-image>
- 任务分数统计
- </div>
- </div>
- <div id="gradeStatistics" style="height: 240px; width:100%; margin-top:-60px; "></div>
- </div>
- </div>
- <div class="chart_item_box_foooter">
- <div class="inner_info_table_status">
- <div class="task_outer_cotnainer_status">
- <div class="task_list_header" style="font-size:16px;">
- <el-image
- style="width: 30px; height: 22px; margin-right:6px;"
- :src="require('../assets/img/rightIcon.svg')"
- fit="contain"
- >
- </el-image>
- 任务分数分布
- </div>
- </div>
- <div id="gradeDistribute" style="height: 240px; width:100%; margin-top:-60px;"></div>
- </div>
- </div>
- </div>
- </div>
- <div class="task_chart_cotainer">
- <div class="chart_item_box">
- <div class="inner_info_table_status" v-if="!taskStatusFlag">
- <div class="task_outer_cotnainer_status">
- <div class="task_list_header" style="font-size:16px;">
- <el-image
- style="width: 30px; height: 22px; margin-right:6px;"
- :src="require('../assets/img/rightIcon.svg')"
- fit="contain"
- >
- </el-image>
- 任务状态占比
- </div>
- </div>
- <div id="taskStatus" style="height:280px; width:314px; top:-50px;"></div>
- </div>
- <div v-if="taskStatusFlag" class="tempalte_no_data">暂无数据</div>
- </div>
- <div class="chart_item_box">
- <div class="inner_info_table_precent" >
- <div class="task_outer_cotnainer_status">
- <div class="task_list_header" style="font-size:16px;">
- <el-image
- style="width: 30px; height: 22px; margin-right:6px;"
- :src="require('../assets/img/rightIcon.svg')"
- fit="contain"
- >
- </el-image>
- {{this.unitTaskValue == '' ? getName(this.unitOption, this.unitFinshedValue) : getName(this.unitOption, this.unitTaskValue)}} 单位任务完成率
- </div>
- </div>
- <div v-if="!completionRate" id="taskPrecent" style="height:200px; width:310px; margin-top:-5px; right: 0px; "></div>
- <div v-if="completionRate" class="tempalte_no_data" style="height:200px; width:310px; margin-top:-10px; right: 0px; ">
- 暂无数据
- </div>
- <!-- <el-select-->
- <!-- v-model="unitFinshedValue"-->
- <!-- placeholder="「此处为单位名称」"-->
- <!-- style="margin-top:20px; width:270px;"-->
- <!-- filterable-->
- <!-- @change="changeUnit"-->
- <!-- >-->
- <!-- <el-option-->
- <!-- v-for="item in unitOption"-->
- <!-- :key="item.value"-->
- <!-- :label="item.label"-->
- <!-- :value="item.value"-->
- <!-- >-->
- <!-- </el-option>-->
- <!-- </el-select>-->
- </div>
- </div>
- <div class="chart_item_box" style="margin-bottom:0;">
- <div class="inner_info_table_precent" >
- <div class="task_outer_cotnainer_status">
- <div class="task_list_header" style="font-size:16px;">
- <el-image
- style="width: 30px; height: 22px; margin-right:6px;"
- :src="require('../assets/img/rightIcon.svg')"
- fit="contain"
- >
- </el-image>
- {{this.systemTaskId == '' ? getName(this.systemOption, this.systemFinshedValue) : getName(this.systemOption, this.systemTaskId)}} 系统任务完成率
- </div>
- </div>
- <div v-if="!systemcompletionRate" id="taskPrecentSystem" style="height:200px; width:310px; margin-top:-5px; "></div>
- <div v-if="systemcompletionRate" class="tempalte_no_data" style="height:200px; width:310px; margin-top:-10px; ">暂无数据</div>
- <!-- <el-select-->
- <!-- v-model="systemFinshedValue"-->
- <!-- placeholder="「此处为系统名称」"-->
- <!-- style="margin-top:20px; width:270px;"-->
- <!-- filterable-->
- <!-- @change="changeSystem"-->
- <!-- >-->
- <!-- <el-option-->
- <!-- v-for="item in systemOption"-->
- <!-- :key="item.value"-->
- <!-- :label="item.label"-->
- <!-- :value="item.value"-->
- <!-- >-->
- <!-- </el-option>-->
- <!-- </el-select>-->
- </div>
- </div>
- </div>
- <!-- 任务详情弹窗 -->
- <el-dialog
- title=""
- :show-close="false"
- :destroy-on-close="true"
- :visible.sync="dialogVisible"
- :width=" dialogType ==1 ? '650px' : '650px'"
- top="10%"
- >
- <div>
- <div class="task_detail_dialog">
- <div class="header_line_style"></div>
- <div class="task_dialog_box" v-if="dialogType==1">
- <div class="grade_box">
- <div class="name_task_participantName" style="margin-bottom:12px;">
- <div class="task_dialog_name">{{ subjectItem.taskName || '-' }}</div>
- <div class="task_dialog_particpater">
- 组织人员:{{ subjectItem.organizers && subjectItem.organizers.length && subjectItem.organizers.join(',') || '-' }}
- </div>
- </div>
- <div class="grade_item" style="margin-top:10px;">
- {{ subjectItem.syntheticTaskScore }}
- </div>
- </div>
- <div class="task_date_status">
- <div class="date_task_dialog">{{ subjectItem.startTime || '-' }} 至 {{ subjectItem.endTime || '-' }} </div>
- <div class="status_task_dialog">任务状态:{{ subjectItem.status }}</div>
- </div>
- <div class="subject_dialog_container">
- <template v-for="(item,index) in subjectItem.subjects">
- <div :key="index" style="margin-bottom: 8px;">
- <div class="subject_item_header" @click="item.moreFlag=!item.moreFlag">
- <div class="subject_name">{{ item.subjectName || '-' }}</div>
- <div class="subject_icon">
- <el-image
- style="width: 12px; height: 12px; margin-left:8px; margin-top:3px;"
- :src="item.moreFlag ? require('../assets/img/more.svg') : require('../assets/img/less.svg') "
- fit="cover"
- >
- </el-image>
- </div>
- </div>
- <div v-if="!item.moreFlag" class="suvject_item_container">
- <div class="subject_child_item" style="padding-left:0; margin-bottom:4px;">· {{ item.subjectName }}</div>
- <div class="subject_child_item"> 课目名称:{{ item.subjectName }}</div>
- <div class="subject_child_item"> 参加人员:{{ item.participatingPeople.join(',') || '-' }}</div>
- <div class="subject_child_item"> 参加系统:{{ item.participatingSystems.join(',') || '-' }}</div>
- <div class="subject_child_item"> 参加单位:{{ item.participatingUnits.join(',') || '-' }}</div>
- <div class="subject_child_item" v-if="false">
- 课目附件:
- <span class="download_file" stlye="color:#6CFCDB;">下载附件</span>
- </div>
- </div>
- </div>
- </template>
- </div>
- </div>
- <div class="task_dialog_box_other" v-if="dialogType==2">
- <el-table
- :data="pagedData"
- :header-cell-style="changeHeaderCellStyle"
- :cell-style="changeCellStyle"
- stripe
- :border="true"
- >
- <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="getTableIndex" />
- <el-table-column align="center" property="participantName" label="姓名" max-width="350"></el-table-column>
- <el-table-column align="center" property="score" label="成绩" max-width="300"></el-table-column>
- </el-table>
- <el-row type="flex" justify="end" style="margin-top: 10px;">
- <el-pagination
- :total="this.gridData2.length"
- :current-page="this.gridData2.currentPage"
- :page-size="this.gridData2.pageSize"
- :page-sizes="[5,10,15, 20]"
- layout="total, prev, pager, next, sizes"
- @current-change="onCurrentPageChange"
- @size-change="onPageSizeChange">
- </el-pagination>
- </el-row>
- <operation-space v-if="showOperationSpace" :flow-instance="currentFlowInstance" @close="onOperationSpaceClose"></operation-space>
- </div>
- <div class="dialog_footer_box">
- <div class="view_more" @click="dialogVisible=false" style="color:#fff; padding: 3px 30px ;">
- 关闭
- </div>
- </div>
- </div>
- </div>
- </el-dialog>
- </div>
- </div>
- </v-scale-screen>
- </template>
- <script>
- import * as echarts from 'echarts';
- import myFlylineChartEnhanced from '../components/my-flyline-chart-enhanced/index'
- import myscrollBoard from '../components/myscroll-board/src/main'
- import sacleBox from '../components/sacle-box/index'
- import { request } from '../utils/request';
- var uploadedDataURL = require('../../public/json/taiyuan.json')
- import './situationScreen.css'
- import Videojs from "video.js"; // 引入Videojs
- import 'echarts-gl';
- export default {
- components:{
- myFlylineChartEnhanced,
- sacleBox,
- myscrollBoard,
- },
- data() {
- return {
- danweiweidu:{
- data: [],
- length:0,
- danwei_name:[],
- danwei_grade:[],
- currentPage:1,
- totalPage:0,
- pageSize:15,
- paged:true,
- },
- showOperationSpace: false,
- currentFlowInstance: undefined,
- systemTaskId:'',
- unitTaskValue:'',
- systemFinshedValue:'',
- unitFinshedValue:'',
- wholeOutTaskId:'',
- systemSubjectId:'',
- unitSubjectValue:'',
- subjectItem:{},
- moreFlag:true,
- dialogVisible:false,
- taskList:[],
- websocket: null, //建立的连接
- websocketOrder: null, //建立的连接
- updatekey:'1',
- myChart:'',
- myChart1:'',
- myChart2:'',
- myChart3:'',
- myChart4:'',
- myChart5:'',
- myChart6:'',
- myChart7:'',
- myChart8:'',
- myChart9:'',
- scrollTableConfig:{
- header: ['课目名称', '指令分类', '特情注入', '指令内容', '模训系统', '时间'],
- waitTime:1500,
- data: [],
- columnWidth: [80],
- oddRowBGC:'#072347',
- evenRowBGC:'#021736'
- },
- taiYuanMapData:{
- "小店区": [112.564273, 37.817974],
- "迎泽区": [112.558851, 37.855804],
- "杏花岭区": [112.560743, 37.879291],
- "尖草坪区": [112.487122, 37.939893],
- "万柏林区": [112.522258, 37.862653],
- "晋源区": [112.477849, 37.715619],
- "清徐县": [112.357961, 37.60729],
- "阳曲县": [112.673818, 38.058797],
- "娄烦县": [111.793798, 38.066035],
- "古交市": [112.174353, 37.908534],
- },
- taiYuanDatas:[],
- unitValue:'',
- unitOptions:[],
- dialogType:1,
- subjectDatas:[],
- subjectMap:{
- '待执行':require('../assets/img/waite.png'),
- '执行中':require('../assets/img/doing.png'),
- '已完成':require('../assets/img/finshed.png') ,
- },
- instructList:[],
- unitOption:[],
- unitOptionForTask:[],
- systemOption:[],
- systemOptionForTask:[],
- currrentSystem:'',
- currentUnit:'',
- taskOPtion:[],
- currentTaskName:'',
- currentTaskGrade:'',
- subjectNumbers:'',
- unitSubGradeValue:'',
- systemSubGradeValue:'',
- gridData:[],
- gridData2:{
- data: [],
- length:0,
- currentPage:1,
- pageSize:10,
- paged:true,
- },
- dataSrc:'https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8?BR=single',
- completionRate:false,
- systemcompletionRate:false,
- taskStatusFlag: false,
- echartMapFlag:false,
- participantScoreFlag:true,
- playerList:[],
- updatekeyOther:'1',
- currentYear:'',
- }
- },
- computed:{
- pagedData() { // 动态计算当前页的数据
- const start = (this.gridData2.currentPage - 1) * this.gridData2.pageSize
- const end = start + this.gridData2.pageSize
- if(this.gridData2.data!=null){
- console.log("hhhh1: ",start+"---"+end )
- console.log("hhhh2: ",this.gridData2.data )
- console.log("hhhh3: ",this.gridData2.data.slice(start, end) )
- return this.gridData2.data.slice(start, end)
- }else{
- return null
- }
- }
- },
- methods:{
- /**
- * 获取每一行的index信息
- * @param {Integer} index 表格在本页位置
- */
- getTableIndex (index) {
- let a
- console.log("参数: "+this.gridData2.paged+" "+this.gridData2.pageSize+" "+index)
- a=((this.gridData2.currentPage - 1) * this.gridData2.pageSize + (index + 1))
- console.log(".....a "+a)
- return a;
- },
- onCurrentPageChange (newCurrentPage) {
- console.log("1: ",newCurrentPage )
- console.log("2: ",this.gridData2.pageSize )
- console.log("3: ",this.oldPage)
- this.loadTableDataImpl2(newCurrentPage, this.gridData2.pageSize).then(() => {//数据加载成功
- this.gridData2.currentPage = newCurrentPage;
- this.oldPage = this.gridData2.currentPage-1
- console.log("4: ",newCurrentPage)
- console.log("5: ",this.gridData2.currentPage)
- console.log("6: ",this.oldPage)
- if(this.gridData2.data.length <= newCurrentPage*this.gridData2.pageSize ){
- this.gridData2.paged=true
- }else{
- this.gridData2.paged=false
- }
- }).catch(() => {//数据加载失败
- this.gridData2.currentPage = this.oldPage;
- console.log("7: ",this.oldPage)
- console.log("8: ",this.gridData2.currentPage)
- });
- },
- /**
- * 表格分页每页显示数量变化
- * @param {Integer} newPageSize 变化后的每页显示数量
- */
- onPageSizeChange (newPageSize) {
- console.log("hhhh2: ",newPageSize )
- this.gridData2.pageSize = newPageSize;
- this.gridData2.currentPage = 1
- this.loadTableDataImpl2(1, newPageSize).then(() => {
- this.oldPage = this.gridData2.currentPage;
- this.oldPageSize = this.gridData2.pageSize;
- }).catch(e => {
- this.gridData2.currentPage = this.oldPage;
- this.gridData2.pageSize = this.oldPageSize;
- });
- },
- /**
- * 获取表格数据
- * @param {Integer} pageNum 当前分页
- * @param {Integer} pageSize 每页数量
- * @param {Boolean} reload 是否重新获取数据
- */
- loadTableDataImpl2 (pageNum, pageSize, reload = false) {
- console.log("11: ",pageNum+"---"+pageSize+"---"+reload)
- // 判断是否需要重新加载数据
- if (reload || !this.gridData2.data || this.gridData2.data.length === 0) {
- // 调用后端接口或其他数据来源获取数据
- // 这里省略具体实现
- // 模拟一个返回结果的 Promise 对象
- const mockData = new Promise(resolve => {
- const data = [];
- for (let i = 1; i <= pageSize; i++) {
- data.push({
- id: pageNum * pageSize + i,
- name: `任务${pageNum * pageSize + i}`,
- status: Math.floor(Math.random() * 4)
- });
- }
- resolve(data);
- });
- // 返回 Promise 对象,以便分页组件可以在数据加载完成后进行下一步处理。
- return mockData.then(data => {
- // 更新任务列表数据
- this.gridData2.data = data;
- // 返回新的任务列表数据
- return this.gridData2.data.slice((pageNum - 1) * pageSize, pageNum * pageSize);
- });
- } else {// 直接返回已有的任务列表数据
- return Promise.resolve(this.gridData2.data.slice((pageNum - 1) * pageSize, pageNum * pageSize));
- }
- },
- refreshFormAllInstance (reloadData = false) {
- if (reloadData) {
- this.renwuliebiao.refreshTable(true, 1);
- } else {
- this.renwuliebiao.refreshTable();
- }
- if (!this.isInit) {
- // 初始化下拉数据
- }
- this.isInit = true;
- },
- onOperationSpaceClose () {
- this.showOperationSpace = false;
- this.currentFlowInstance = null;
- this.refreshFormAllInstance()
- },
- jumpToCurrent() {
- this.$router.push("/mainScreen")
- },
- getEarth(){
- // 获取DOM容器
- const chartContainer = document.getElementById('chart-earth');
- // 初始化ECharts图表
- this.myChart = echarts.init(chartContainer);
- var datas = [];
- console.log('this.taiyuanMapDatas :>> ', this.taiyuanMapData);
- for (let item in this.taiYuanMapData){
- var array = this.taiYuanMapData[item]
- let data = {
- value:[array[0],array[1],0],
- name:item
- }
- console.log('data :>> ', data);
- datas.push(data)
- }
- console.log('datas :>> ', datas);
- // 设置图表的配置项和数据
- const option = {
- backgroundColor: '#000',
- globe: {
- // zoom3D: 1000000000, // 调整为合适的初始缩放级别
- baseTexture: require('../assets/img/earth.jpg'),
- heightTexture: require('../assets/img/bathymetry_bw_composite_4k.jpg'),
- displacementScale: 0.1,
- shading: 'lambert',
- environment: require('../assets/img/starfield.jpg'),
- viewControl: {
- distance: 1, // 地球与相机之间的距离
- targetCoord: [112.548879, 37.87059], // 设置地球的目标位置为太原市的经纬度
- autoRotate: false, // 自动旋转地球
- },
- light: {
- ambient: {
- intensity: 0.1
- },
- main: {
- intensity: 1.5
- }
- },
- layers: [
- {
- type: 'blend',
- blendTo: 'emission',
- texture: require('../assets/img/night.jpg')
- },
- {
- type: 'overlay',
- texture: require('../assets/img/clouds.png'),
- shading: 'lambert',
- distance: 5
- }
- ]
- },
- toolbox: {
- feature: {
- // dataZoom: { yAxisIndex: 'none' }, // 数据区域缩放
- restore: { show: true }, // 重置
- saveAsImage: { show: true }, // 导出图片
- myFull: { // 全屏
- show: true,
- title: '全屏',
- icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
- onclick: (e) => {// 全屏查看
- const element = document.getElementById('chart-earth');
- if (element.requestFullScreen) {
- // HTML W3C 提议
- console.log(1)
- element.requestFullScreen()
- } else if (element.msRequestFullscreen) {
- // IE11
- console.log(2)
- element.msRequestFullScreen()
- } else if (element.webkitRequestFullScreen) {
- // Webkit (works in Safari5.1 and Chrome 15)
- console.log(3)
- element.webkitRequestFullScreen()
- } else if (element.mozRequestFullScreen) {
- // Firefox (works in nightly)
- console.log(4)
- element.mozRequestFullScreen()
- }
- // 退出全屏
- if (element.requestFullScreen) {
- document.exitFullscreen()
- } else if (element.msRequestFullScreen) {
- document.msExitFullscreen()
- } else if (element.webkitRequestFullScreen) {
- document.webkitCancelFullScreen()
- } else if (element.mozRequestFullScreen) {
- document.mozCancelFullScreen()
- }
- }
- }
- },
- },
- // xAxis: {
- // type: 'value',
- // min: 'dataMin',
- // max: 'dataMax',
- // splitLine: {
- // show: true
- // }
- // },
- // yAxis: {
- // type: 'value',
- // min: 'dataMin',
- // max: 'dataMax',
- // splitLine: {
- // show: true
- // }
- // },
- // dataZoom: [
- // {
- // type: 'slider',
- // show: true,
- // xAxisIndex: [0],
- // yAxisIndex: [0],
- // start: 0,
- // end: 100
- // },
- //
- // {
- // type: 'inside',
- // show: true,
- // xAxisIndex: [0],
- // yAxisIndex: [0],
- // start: 0,
- // end: 100
- // },
- // ],
- series: [ {
- type: 'scatter3D',
- symbolSize: 10,
- coordinateSystem: 'globe',
- data: datas,
- itemStyle: {
- color: 'red' // 设置标记点的颜色
- },
- label: {
- show: true,
- formatter: '{b}', // 设置标记点的文本显示为数据的名称
- position: 'top'
- }
- }]
- };
- // echarts.chart.map._mapDataMap下能看到x,y以及基础basescale的设置信息,画的时候是适应你的节点的高宽,而不是去适应浏览器。适应浏览器是页面你定义的dom节点去做的。
- // this.myChart.map._map;
- // 使用配置项和数据显示图表
- this.myChart.setOption(option);
- window.onresize = this.myChart.resize;
- },
- // 获取单位名称
- getName(list, id) {
- var tmp = list.find(k => k["value"] == id)
- return tmp["label"]
- },
- // 表格样式修改
- changeHeaderCellStyle(row,column, rowIndex, columnIndex){
- if(row.columnIndex === 0){
- return 'background: #004279 ; color:#fff;'; // 修改的样式
- }else {
- return 'background: #004279 ;color:#fff; ';
- }
- },
- changeCellStyle(row,column, rowIndex, columnIndex){
- if(row.columnIndex === 0){
- return 'background: #0A427C ; color:#fff;'; // 修改的样式
- }else {
- return 'background: #0A427C ; color:#fff;';
- }
- },
- viewMore(item){
- this.dialogType=1
- console.log('ckx debug item', item )
- if(!item.subjects){
- return this.$message.warning('暂无课目信息')
- }
- item.subjects.forEach((childItem)=>{
- childItem.moreFlag=true
- })
- this.subjectItem= JSON.parse(JSON.stringify(item))
- this.dialogVisible=true
- },
- // 查看任务态势
- viewTaskSituation(item) {
- console.log("查看态势1",this.wholeOutTaskId)
- this.wholeOutTaskId = item.taskId;
- console.log("查看态势2",this.wholeOutTaskId)
- this.changeTask()
- },
- // 地图
- initechartsMap(){
- if(this.myChart1 !=null && this.myChart1 != "" && this.myChart1 != undefined){
- this.myChart1.dispose();
- }
- this.myChart1 = echarts.init(document.getElementById('mapData'),'dark');
- console.log("100",this)
- echarts.registerMap('taiyuan', uploadedDataURL);
- var chinaGeoCoordMap = this.taiYuanMapData
- var chinaDatas = this.taiYuanDatas
- var convertData = function(data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var dataItem = data[i];
- var fromCoord = chinaGeoCoordMap[dataItem[0].name];
- var toCoord = [chinaDatas[0][0].longitude, chinaDatas[0][0].dimension];
- if (fromCoord && toCoord) {
- res.push([{
- coord: fromCoord,
- value: dataItem[0].value,
- }, {
- coord: toCoord,
- }]);
- }
- }
- return res;
- };
- var series = [];
- // console.log('ckx debug chinaDatas ', this.taiYuanDatas, )
- [[chinaDatas[0][0].name, chinaDatas]].forEach(function(item, i) {
- console.log('debug asdfasd',item)
- series.push({
- type: 'lines',
- zlevel: 2,
- effect: {
- show: true,
- period: 4, //箭头指向速度,值越小速度越快
- trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重
- symbol: 'arrow', //箭头图标
- symbolSize: 8, //图标大小
- // color:'#f00' // 箭头的颜色
- },
- lineStyle: {
- normal: {
- width: 1, //尾迹线条宽度
- opacity: 1, //尾迹线条透明度
- curveness: .3, //尾迹线条曲直度
- }
- },
- data: convertData(item[1]),
- }, {
- type: 'effectScatter',
- coordinateSystem: 'geo',
- zlevel: 2,
- rippleEffect: { //涟漪特效
- period: 4, //动画时间,值越小速度越快
- brushType: 'stroke', //波纹绘制方式 stroke, fill
- scale: 8, //波纹圆环最大限制,值越大波纹越大,
- // color:'#f00', // 波动的颜色
- },
- label: {
- normal: {
- show: true,
- position: 'right', //显示位置
- offset: [5, 0], //偏移设置
- formatter: function(params) { //圆环显示文字
- // return params.data.name;
- return '';
- },
- fontSize: 13,
- color:'#DC1861',
- },
- emphasis: {
- show: true
- }
- },
- symbol: 'circle',
- symbolSize: function(val) {
- return 5 + val[2] * 5; //圆环大小
- },
- itemStyle: {
- normal: {
- show: false,
- color: '#f00'
- }
- },
- data: item[1].map(function(dataItem) {
- console.log('ckx debug dataItem ', dataItem )
- return {
- name: dataItem[0].name,
- value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
- participatingSubjects: dataItem[0].participatingSubjects
- };
- }),
- tooltip: {
- trigger: 'item',
- backgroundColor: '#041937',
- textStyle: {
- color: "white" //设置文字颜色
- },
- borderColor: '#FFFFCC',
- showDelay: 0,
- hideDelay: 0,
- enterable: false,
- transitionDuration: 0,
- extraCssText: 'z-index:100',
- formatter: function(params, ticket, callback) {
- console.log('ckx debug params', params,ticket )
- //根据业务自己拓展要显示的内容
- var res = "";
- var name = params.name;
- var value = params.value[params.seriesIndex + 1];
- if(name){
- res = `
- <div style="background:#041937;;">
- <div style='color:#fff;'>单位名称:${name} </div>
- <div style='color:#fff; margin-top:4px;'>参与课目名称: ${params.data.participatingSubjects} </div>
- </div>
- `
- return res;
- }else {
- return ''
- }
- },
- show:true,
- },
- },
- //被攻击点
- {
- type: 'scatter',
- coordinateSystem: 'geo',
- zlevel: 2,
- rippleEffect: {
- period: 4,
- brushType: 'stroke',
- scale: 4
- },
- label: {
- normal: {
- show: false,
- position: 'right',
- color: 'red',
- formatter: '{b}',
- textStyle: {
- color: "red"
- }
- },
- emphasis: {
- show: false,
- color: "#f60"
- }
- },
- showSymbol: false,
- symbol: 'pin',
- symbolSize: 0,
- data: [{
- name: item[0],
- value: chinaGeoCoordMap[item[0]].concat([10]),
- }],
- }
- );
- });
- let option = {
- tooltip: {
- show:false,
- },
- backgroundColor: "transparent",
- visualMap: { //图例值控制
- show: false,
- },
- geo: {
- map: 'taiyuan',
- zoom: 1,
- label: {
- normal: {
- show: true,
- position: 'right',
- textStyle: {
- color: "#fff",
- fontSize: 10
- }
- },
- emphasis: {
- show: true,
- color:'#fff'
- }
- },
- roam: false, //是否允许缩放
- itemStyle: {
- normal: {
- color: '#153295', //地图背景色
- borderColor: '#516a89', //省市边界线00fcff 516a89
- borderWidth: 1
- },
- emphasis: {
- color: '#0068FB' //悬浮背景
- }
- }
- },
- series: series
- };
- if(option){
- console.log('111',option)
- // console.log('222',this.myChart1.get())
- console.log('112',this)
- this.myChart1.setOption(option)
- }
- let that =this
- window.addEventListener('resize',function () {//执行
- console.log('cuowu');
- that.myChart1.resize();
- })
- },
- conditionalSearch() {
- this.getTaskList()
- this.getItemUnits()
- this.getItemSystem()
- },
- // 获取任务列表
- async getTaskList(){
- let params={}
- if (this.currentYear !== null) {
- params["startTime"] = this.currentYear[0];
- params["endTime"] = this.currentYear[1];
- }
- if (this.unitTaskValue !== null) {
- params["unitId"] = this.unitTaskValue;
- }
- if (this.systemTaskId !== null) {
- params["systemId"] = this.systemTaskId;
- }
- const res = await request('/dt_screen/rest/v2/task/listHistoricTask/', 'post', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('获取任务列表', data);
- this.taskList= data
- this.taskOPtion = data.map((item)=>{
- return {
- label: item.taskName,
- value: item.taskId
- }
- })
- this.wholeOutTaskId=data[0].taskId
- this.currentTaskName= data[0].taskName
- this.currentTaskGrade= data[0].syntheticTaskScore
- // 获取地图的信息
- if(data.length){
- // 获取任务的单位列表
- this.getUnitListByTaskId(data[0].taskId)
- // 获取任务的系统列表
- this.getSystemListByTaskId(data[0].taskId)
- // 获取地图的信息
- this.getMapDetail(data[0].taskId)
- // 获取任务的课目信息
- this.getSubjectList(data[0].taskId)
- // 获取任务的指令信息
- this.getinstructList(data[0].taskId)
- // 获取一个任务的课目数量
- // this.getTaskSubjectNum(data[0].taskId)
- // 获取某一个任务的全部课目状态占比
- // this.getAllSubjectDetail(data[0].taskId)
- // // 获取某个任务下单位参与与课目人员的的成绩统计
- // this.getUnitSubjectPeopleScore(data[0].taskId,this.unitSubGradeValue)
- // // 获取某个任务下单位参与与课目人员的的成绩分布
- // this.getUnitSubjectPeopleDistribution(data[0].taskId,this.unitSubGradeValue)
- // 获取全部任务成绩统计
- this.getAllTaskScore()
- // 获取全部任务成绩分布
- this.getAllTaskDistribution()
- // 建立指令websocket 链接
- this.initInstructWebsoket()
- }
- } else {
- this.$message.error(errorMessage)
- }
- },
- // 获取任务单位列表
- async getUnitListByTaskId(taskId) {
- let params={}
- if (taskId !== null) {
- params["taskId"] = taskId
- const res = await request('/dt_screen/rest/v2/task/listUnit/', 'post', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log("sgw debug", data);
- this.unitOptionForTask = data.map((item)=>{
- return {
- label:item.unitName,
- value: item.unitId
- }
- })
- this.unitSubGradeValue = this.unitOptionForTask[0].value
- // 获取某个任务下单位参与与课目人员的的成绩统计
- this.getUnitSubjectPeopleScore(this.wholeOutTaskId,this.unitSubGradeValue)
- // 获取某个任务下单位参与与课目人员的的成绩分布
- this.getUnitSubjectPeopleDistribution(this.wholeOutTaskId,this.unitSubGradeValue)
- }
- }
- },
- // 获取任务系统列表
- async getSystemListByTaskId(taskId) {
- let params={}
- if (taskId !== null) {
- params["taskId"] = taskId
- const res = await request('/dt_screen/rest/v2/task/listSystem/', 'post', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log("sgw debug", data);
- this.systemOptionForTask = data.map((item)=>{
- return {
- label:item.systemName,
- value: item.systemId
- }
- })
- this.systemSubGradeValue = this.systemOptionForTask[0].value
- }
- }
- },
- // 切换任务
- changeTask(){
- this.systemSubjectId=''
- this.unitSubjectValue=''
- this.currentTaskName = this.taskOPtion.find( item => item.value== this.wholeOutTaskId ).label
- this.currentTaskGrade = this.taskList.find( item=> item.taskId==this.wholeOutTaskId).syntheticTaskScore
- this.getUnitListByTaskId(this.wholeOutTaskId)
- // 获取任务的系统列表
- this.getSystemListByTaskId(this.wholeOutTaskId)
- // 获取地图的信息
- this.getMapDetail(this.wholeOutTaskId)
- // 获取任务的课目信息
- this.getSubjectList(this.wholeOutTaskId)
- // 获取任务的指令信息
- this.getinstructList(this.wholeOutTaskId)
- // 获取一个任务的课目数量
- // this.getTaskSubjectNum(this.wholeOutTaskId)
- // 获取某一个任务的全部课目状态占比
- // this.getAllSubjectDetail(this.wholeOutTaskId)
- // 获取某个任务下单位参与与课目人员的的成绩统计
- this.getUnitSubjectPeopleScore(this.wholeOutTaskId,this.unitSubGradeValue)
- // 获取某个任务下单位参与与课目人员的的成绩分布
- this.getUnitSubjectPeopleDistribution(this.wholeOutTaskId,this.unitSubGradeValue)
- // 建立指令websocket 链接
- this.initInstructWebsoket()
- console.log('this.taiYuanMapData :>> ', this.taiYuanMapData);
- },
- // 获取任务地图的信息
- async getMapDetail(taskId){
- let params={
- taskId: taskId
- }
- // const res = await request(`/dt_screen/rest/v1/participatingUnit/list/${taskId}`, 'get', params, false)
- const res = await request(`/dt_screen/rest/v2/task/listParticipatingUnit`, 'post', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('获取地图的信息', data);
- if(data.length){
- // this.taiYuanMapData={}
- data.forEach((item)=>{
- // item.participatingSubjects= item.participatingSubjects
- this.taiYuanMapData[item.participantUnitName]=[item.longitude,item.dimension]
- this.taiYuanDatas.push([
- {
- value:0,
- name:item.participantUnitName,
- // participatingSubjects: item.participatingSubjects,
- dimension: item.dimension,
- longitude: item.longitude
- }
- ])
- })
- console.log("666",echarts.version);
- console.log("667",this);
- // this.initechartsMap()
- this.echartMapFlag=false
- }else{
- this.echartMapFlag=true
- }
- } else {
- this.$message.error(errorMessage)
- }
- },
- // 获取一个任务的课目数量
- // async getTaskSubjectNum(taskId){
- // let params={}
- // const res = await request(`/dt_screen/rest/v1/subject/subjectNum/task/${taskId}/`, 'get', params, false)
- // const { errorCode, errorMessage, success,data } = res.data;
- // if (success) {
- // console.log('获取一个任务的课目数量', data);
- // this.subjectNumbers=data
- //
- // } else {
- // this.$message.error(errorMessage)
- // }
- // },
- // 获取任务的课目信息
- async getSubjectList(taskId){
- let params={}
- params["taskId"] = taskId;
- if (this.unitTaskValue !== null) {
- params["unitId"] = this.unitTaskValue;
- }
- if (this.systemTaskId !== null) {
- params["systemId"] = this.systemTaskId;
- }
- const res = await request(`/dt_screen/rest/v2/subject/listByCondition`, 'post', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('获取任务的课目信息', data);
- this.subjectDatas=data
- this.subjectNumbers=data.length
- let statusData1 = {
- name: "待执行",
- value: this.subjectDatas.reduce((acc, obj) => {
- if (obj.status == "待执行") {
- return acc + 1;
- } else {
- return acc;
- }
- }, 0),
- };
- let statusData2 = {
- name: "执行中",
- value: this.subjectDatas.reduce((acc, obj) => {
- if (obj.status == "执行中") {
- return acc + 1;
- } else {
- return acc;
- }
- }, 0),
- };
- let statusData3 = {
- name: "已完成",
- value: this.subjectDatas.reduce((acc, obj) => {
- if (obj.status == "已完成") {
- return acc + 1;
- } else {
- return acc;
- }
- }, 0),
- };
- let allTaskStatusData = [];
- allTaskStatusData.push(statusData1);
- allTaskStatusData.push(statusData2);
- allTaskStatusData.push(statusData3);
- this.initEchartsSubjectStatus(allTaskStatusData)
- } else {
- this.$message.error(errorMessage)
- }
- },
- // 切换单位再结合任务id 获取课目课目列表
- async getUnitSubjectList(taskId,unitId){
- let params={}
- const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/unit/${unitId}`, 'get', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('获取任务的课目信息', data);
- this.subjectDatas=data
- } else {
- this.$message.error(errorMessage)
- }
- },
- // unitSubjectValue ,unitSubjectValue
- changeTaskAndUnit() {
- this.systemSubjectId=''
- if(this.unitSubjectValue){
- this.getUnitSubjectList(this.wholeOutTaskId, this.unitSubjectValue)
- }else {
- this.getSubjectList(this.wholeOutTaskId)
- }
- },
- changeTaskSystem(){
- console.log('ckx debug this.systemTaskId ', this.systemTaskId )
- this.getTaskList()
- },
- changeTaskUnit(){
- console.log('ckx debug this.unitTaskValue ', this.unitTaskValue )
- this.getTaskList()
- },
- // 切换年度
- changeYear(){
- console.log('ckx debug this.currentYear ', this.currentYear )
- this.getTaskList()
- },
- // 切换系统再结合任务id 获取课目课目列表
- async getSystemSubjectList(taskId,systemId){
- let params={}
- const res = await request(`/dt_screen/rest/v1/subject/list/task/${taskId}/system/${systemId}`, 'get', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('获取任务的课目信息', data);
- this.subjectDatas=data
- } else {
- this.$message.error(errorMessage)
- }
- },
- // unitSubjectValue ,unitSubjectValue
- changeTaskAndSystem() {
- this.unitSubjectValue=''
- if(this.systemSubjectId){
- this.getSystemSubjectList(this.wholeOutTaskId, this.systemSubjectId)
- }else {
- this.getSubjectList(this.wholeOutTaskId)
- }
- },
- // 获取任务的指令
- async getinstructList (taskId) {
- let params={}
- const res = await request(`/dt_screen/rest/v2/order/list/${taskId}`, 'get', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('获取任务的指令', data);
- this.instructList=data
- let tempData=[]
- data.forEach((item)=>{
- tempData.push([item.subjectName, item.name, item.situation, item.content, item.system,item.time])
- })
- this.scrollTableConfig.data=tempData
- this.updatekey=new Date().getTime()
- } else {
- this.$message.error(errorMessage)
- }
- },
- // 获取全部单位
- async getAllUnits (){
- let params={}
- const res = await request('/dt_screen/rest/v1/screen/listUnit/', 'get', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('获取全部单位', data);
- // 获取任务数据
- this.getTaskList()
- // 获取全部任务状态占比
- this.getAllTaskDetail()
- // // 获取全部任务成绩统计
- // this.getAllTaskScore()
- // // 获取全部任务成绩分布
- // this.getAllTaskDistribution()
- // this.instructList=data
- // unitId,unitName
- this.unitOption = data.map((item)=>{
- return {
- label:item.unitName,
- value: item.unitId
- }
- })
- this.unitFinshedValue=this.unitOption[0].value
- // this.unitSubGradeValue=this.unitOption[0].value
- this.getItemUnits()
- } else {
- this.$message.error(errorMessage)
- }
- },
- // 切换某一个单位
- changeUnit(){
- console.log('ckx debug this.unitFinshedValue ', this.unitFinshedValue )
- this.getItemUnits()
- },
- // 获取全部系统
- async getAllSystems(){
- let params={}
- const res = await request('/dt_screen/rest/v1/screen/listSystem/', 'get', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('获取全部系统', data);
- this.systemOption = data.map((item)=>{
- return {
- label:item.systemName,
- value: item.systemId
- }
- })
- this.systemFinshedValue=this.systemOption[0].value
- // this.systemSubGradeValue=this.systemOption[0].value
- this.getItemSystem()
- } else {
- this.$message.error(errorMessage)
- }
- },
- // 切换某一个系统
- changeSystem(){
- console.log('ckx debug this.unitFinshedValue ', this.unitFinshedValue )
- this.getItemSystem()
- },
- // 获取全部任务状态占比
- async getAllTaskDetail(){
- let params={}
- const res = await request('/dt_screen/rest/v1/statistics/taskStatus', 'get', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('获取全部任务状态占比', data);
- const { category, value } = data
- let allTaskStatusData=[]
- if(category.length){
- category.forEach((item,index)=>{
- allTaskStatusData.push({
- name: item,
- value: value[index]
- })
- })
- this.initEchartsTaskStatus(allTaskStatusData)
- this.taskStatusFlag=false
- }else {
- this.taskStatusFlag=true
- }
- } else {
- this.$message.error(errorMessage)
- }
- },
- // 切换一个单位查看课目的分数
- changeunitSubGrade(){
- // this.unitSubGradeValue
- // 获取某个任务下单位参与与课目人员的的成绩统计
- this.getUnitSubjectPeopleScore(this.wholeOutTaskId,this.unitSubGradeValue)
- // 获取某个任务下单位参与与课目人员的的成绩分布
- this.getUnitSubjectPeopleDistribution(this.wholeOutTaskId,this.unitSubGradeValue)
- },
- // 切换一个系统查看课目的分数
- changeSystemSubGrade(){
- console.log('ckx debug systemSubGradeValue ', this.systemSubGradeValue )
- // 获取某个任务下单位参与与课目人员的的成绩统计
- this.getSystemSubjectPeopleScore(this.wholeOutTaskId,this.unitSubGradeValue)
- // 获取某个任务下单位参与与课目人员的的成绩分布
- this.getUnitSubjectPeopleDistribution(this.wholeOutTaskId,this.unitSubGradeValue)
- },
- // 获取某一个任务课目状态占比
- // async getAllSubjectDetail(taskId){
- // let params={}
- // const res = await request(`/dt_screen/rest/v1/statistics/${taskId}/subjectStatus`, 'get', params, false)
- // const { errorCode, errorMessage, success,data } = res.data;
- // if (success) {
- // console.log('获取全部任务状态占比', data);
- // const { category, value } = data
- // let allTaskStatusData=[]
- // if(category.length){
- // category.forEach((item,index)=>{
- // allTaskStatusData.push({
- // name: item,
- // value: value[index]
- // })
- // })
- // this.initEchartsSubjectStatus(allTaskStatusData)
- // }
- // } else {
- // this.$message.error(errorMessage)
- // }
- // },
- // 全部任务分数统计
- async getAllTaskScore(){
- let params={}
- params["taskIds"] = this.taskOPtion.map(item => item.value)
- console.log("sgw debug:", params);
- const res = await request('/dt_screen/rest/v2/statistics/taskScore', 'post', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('全部任务分数统计', data);
- const { category, value } = data
- value.forEach(item=>Number(item))
- this.initEchartsgradeStatistics(category, value)
- } else {
- this.$message.error(errorMessage)
- }
- },
- // 获取某个任务下单位参与与课目人员的的成绩统计
- async getUnitSubjectPeopleScore(taskId,unitId){
- let params={}
- const res = await request(`/dt_screen/rest/v1/statistics/${taskId}/unit/${unitId}/participantScore`, 'get', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('全部任务分数统计', data);
- const { category, value } = data
- this.danweiweidu.danwei_name = category
- this.danweiweidu.danwei_grade = value
- value.forEach(item=>Number(item))
- if(category.length){
- this.participantScoreFlag=false
- }else {
- this.participantScoreFlag=true
- }
- this.updatekeyOther=new Date().getTime()
- // console.log("name and grade: ", this.danweiweidu.danwei_name,this.danweiweidu.danwei_grade)
- this.danweiweidu.length=value.length
- this.danweiweidu.totalPage= (value.length)/(this.danweiweidu.pageSize)
- this.danweiweidu.totalPage=Math.ceil(this.danweiweidu.totalPage);
- console.log("数据量,页面数据量,当前页面,页面数",value.length,this.danweiweidu.pageSize,this.danweiweidu.currentPage,this.danweiweidu.totalPage)
- // this.initEchartsSubjectGradeStatistics(category, value)
- this.updateChart();
- } else {
- this.$message.error(errorMessage)
- }
- },
- previousPage() {
- console.log("向前",this.danweiweidu.currentPage)
- if (this.danweiweidu.currentPage > 1) {
- this.danweiweidu.currentPage--;
- this.updateChart();
- }
- },
- nextPage() {
- console.log("向后",this.danweiweidu.currentPage)
- if (this.danweiweidu.currentPage < this.danweiweidu.totalPage) {
- this.danweiweidu.currentPage++;
- this.updateChart();
- }
- },
- updateChart() {
- const start = (this.danweiweidu.currentPage - 1) * this.danweiweidu.pageSize;
- const end = start + this.danweiweidu.pageSize;
- // 获取当前页需要显示的数据
- // const pageData = this.value.slice(start, end);
- const pageData1 = this.danweiweidu.danwei_name.slice(start, end);
- const pageData2 = this.danweiweidu.danwei_grade.slice(start, end);
- // 更新echarts的data选项,设置为当前页的数据
- console.log("数据",pageData1, pageData2)
- this.initEchartsSubjectGradeStatistics(pageData1, pageData2)
- },
- onCurrentPageChange_grade (newCurrentPage) {
- this.danweiweidu.currentPage=newCurrentPage
- console.log("1: ",newCurrentPage )//当前页面
- console.log("2: ",this.danweiweidu.pageSize )
- console.log("3: ",this.oldPage)
- this.updateChart()
- },
- /**
- * 表格分页每页显示数量变化
- * @param {Integer} newPageSize 变化后的每页显示数量
- */
- onPageSizeChange_grade (newPageSize) {
- console.log("hhhh2: ",newPageSize )
- this.danweiweidu.pageSize = newPageSize;
- this.danweiweidu.currentPage = 1
- this.updateChart()
- },
- // 获取全部任务分布
- async getAllTaskDistribution(){
- let params={}
- params["taskIds"] = this.taskOPtion.map(item => item.value)
- const res = await request('/dt_screen/rest/v2/statistics/taskScore/distribution', 'post', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('获取全部任务成绩分布', data);
- const { category, value } = data
- let alldistributionData=[]
- if(category.length){
- category.forEach((item,index)=>{
- alldistributionData.push({
- name: item,
- value: value[index]
- })
- })
- this.initEchartsgradeDistribute(alldistributionData)
- }
- } else {
- this.$message.error(errorMessage)
- }
- },
- // 获取某个任务下单位参与与课目人员的的成绩分布
- async getUnitSubjectPeopleDistribution(taskId,unitId){
- let params={}
- const res = await request(`/dt_screen/rest/v1/statistics/${taskId}/unit/${unitId}/participantScore/distribution`, 'get', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('获取某个任务下单位参与与课目人员的的成绩分布', data);
- const { category, value } = data
- let alldistributionData=[]
- if(category.length){
- category.forEach((item,index)=>{
- alldistributionData.push({
- name: item,
- value: value[index]
- })
- })
- this.initEchartsSubjectgradeDistribute(alldistributionData)
- }
- } else {
- this.$message.error(errorMessage)
- }
- },
- // 获取某一个单位的任务完成率
- async getItemUnits(){
- let params={}
- if (this.currentYear !== null) {
- params["startTime"] = this.currentYear[0];
- params["endTime"] = this.currentYear[1];
- }
- if (this.unitTaskValue !== '') {
- console.log("sgw debug conditionUnit", this.unitTaskValue);
- params["unitId"] = this.unitTaskValue;
- } else {
- console.log("sgw debug selectUnit", this.unitFinshedValue);
- params["unitId"] = this.unitFinshedValue
- }
- const res = await request(`/dt_screen/rest/v2/statistics/unit/completionRate`, 'post', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('获取某一个单位的任务完成率', data);
- const { category, value } = data
- let alldistributionData=[]
- if (category != null) {
- if(category.length){
- category.forEach((item,index)=>{
- alldistributionData.push({
- name: item,
- value: value[index]
- })
- })
- let precentData='无数据'
- let isFinshedIndex = category.findIndex( item => item=='已完成')
- if(isFinshedIndex != -1){
- let isFinshedData = value[isFinshedIndex]
- var totalData = value.reduce(function(a, b) {
- return Number(a) + Number(b);
- });
- if(totalData==0){
- precentData='无数据'
- }else {
- precentData= Number((Number(isFinshedData)/ Number(totalData))*100)
- precentData= precentData % 10 ==0 ? precentData +'%' : Number(precentData).toFixed(1)+'%'
- }
- }
- this.initEchartsTaskPrecent(alldistributionData,precentData)
- this.completionRate=false
- }else {
- this.completionRate=true
- }
- } else {
- this.completionRate = true;
- }
- } else {
- this.$message.error(errorMessage)
- }
- },
- // 获取某一个系统的任务完成率
- async getItemSystem(){
- let params={}
- if (this.currentYear !== null) {
- params["startTime"] = this.currentYear[0];
- params["endTime"] = this.currentYear[1];
- }
- if (this.systemTaskId !== '') {
- params["systemId"] = this.systemTaskId;
- } else {
- params["systemId"] = this.systemFinshedValue
- }
- const res = await request(`/dt_screen/rest/v2/statistics/system/completionRate`, 'post', params, false)
- const { errorCode, errorMessage, success,data } = res.data;
- if (success) {
- console.log('获取某一个系统的任务完成率', data);
- const { category, value } = data
- let alldistributionData=[]
- if(category.length){
- category.forEach((item,index)=>{
- alldistributionData.push({
- name: item,
- value: value[index]
- })
- })
- let precentData='无数据'
- let isFinshedIndex = category.findIndex( item => item=='已完成')
- if(isFinshedIndex != -1){
- let isFinshedData = value[isFinshedIndex]
- var totalData = value.reduce(function(a, b) {
- return Number(a) + Number(b);
- });
- if(totalData==0){
- precentData='无数据'
- }else {
- precentData= Number((Number(isFinshedData)/ Number(totalData))*100)
- precentData= precentData % 10 ==0 ? precentData +'%' : Number(precentData).toFixed(1)+'%'
- }
- }
- this.initEchartsTaskPreSystem(alldistributionData,precentData)
- this.systemcompletionRate=false
- }else {
- this.systemcompletionRate=true
- }
- } else {
- this.$message.error(errorMessage)
- }
- },
- // 全部任务状态占比
- initEchartsTaskStatus(allTaskStatusData){
- if(this.myChart2 !=null && this.myChart2 != "" && this.myChart2 != undefined){
- this.myChart2.dispose();
- }
- this.myChart2 = echarts.init(document.getElementById('taskStatus'));
- var option = {
- tooltip: {
- trigger: "item",
- confine: true,
- textStyle: {
- fontSize: 11 // 字体大小
- },
- },
- legend: {//显示图例
- show: true,
- y:'92%',
- itemHeight: 10,
- itemWidth: 10,
- textStyle:{
- fontSize: 12,//字体大小
- color: '#37D3F3'//字体颜色
- },
- },
- grid: {
- top:'160',
- left: '0',
- right: '0',
- bottom:'-20',
- containLabel: true
- },
- series: [
- {
- name: '任务状态占比',
- type: 'pie',
- radius: [0, 70],
- center: ['50%', '50%'],
- label: {
- normal: {
- fontSize: 14,
- color:'#fff',
- fontFamily:'YouSheBiaoTiHei',
- formatter: (params) => {
- // console.log(params);
- //只有“直接访问”使用大标签,其他都使用小标签
- return params.data.name
- },
- },
- },
- itemStyle: {
- borderRadius: 8,
- normal: {
- color: function (colors) {
- var colorList = [
- '#377FE3',
- '#47D2F4',
- '#0BBC84',
- ];
- return colorList[colors.dataIndex];
- }
- },
- },
- data: allTaskStatusData,
- }
- ]
- };
- this.myChart2.setOption(option);
- let that =this
- window.addEventListener('resize',function () {//执行
- that.myChart2.resize();
- })
- },
- // 单位任务完成率
- initEchartsTaskPrecent(alldistributionData,precent){
- if(this.myChart3 !=null && this.myChart3 != "" && this.myChart3 != undefined){
- this.myChart3.dispose();
- }
- this.myChart3 = echarts.init(document.getElementById('taskPrecent'));
- var data1 = alldistributionData
- var colorList = ['#296DE0','#47D2F4','#08B389'];
- var option = {
- title: {
- text: '',
- top: '39%',
- textAlign: 'center',
- left: '50%',
- textStyle: {
- color: '#fff',
- fontSize: 14,
- fontWeight: '600',
- },
- subtext: precent,
- subtextStyle: {
- color: '#fff',
- fontSize: 18,
- fontWeight: '400',
- fontFamily: 'YouSheBiaoTiHei'
- },
- },
- grid: {
- top:'80',
- left: '0',
- right: '0',
- bottom:'0',
- containLabel: true
- },
- tooltip: {
- trigger: "item",
- confine: true,
- textStyle: {
- fontSize: 11 // 字体大小
- },
- },
- legend: {
- show: true,
- // x:'78%',
- y:'92%',
- itemHeight: 10,
- itemWidth: 10,
- textStyle:{
- fontSize: 12,//字体大小
- color: '#37D3F3',//字体颜色
- marginTop:'14px'
- },
- // orient: 'vertical',
- },
- series: [
- {
- type: 'pie',
- center: ['50%', '50%'],
- radius: ['42%', '80%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center',
- },
- itemStyle: {
- normal: {
- color: function (params) {
- return colorList[params.dataIndex];
- },
- },
- },
- labelLine: {
- show: false,
- },
- data: data1,
- },
- ],
- };
- this.myChart3.setOption(option);
- let that =this
- window.addEventListener('resize',function () {//执行
- that.myChart3.resize();
- })
- },
- // 系统任务完成率
- initEchartsTaskPreSystem(alldistributionData,precentData){
- if(this.myChart4 !=null && this.myChart4 != "" && this.myChart4 != undefined){
- this.myChart4.dispose();
- }
- if(document.getElementById('taskPrecentSystem')){
- this.myChart4 = echarts.init(document.getElementById('taskPrecentSystem'));
- }
- var data1 = alldistributionData
- var colorList = ['#296DE0','#47D2F4','#08B389'];
- var option = {
- title: {
- text: '',
- top: '39%',
- textAlign: 'center',
- left: '50%',
- textStyle: {
- color: '#fff',
- fontSize: 14,
- fontWeight: '600',
- },
- subtext: precentData,
- subtextStyle: {
- color: '#fff',
- fontSize: 18,
- fontWeight: '400',
- fontFamily: 'YouSheBiaoTiHei'
- },
- },
- grid: {
- top:'80',
- left: '0',
- right: '0',
- bottom:'0',
- containLabel: true
- },
- tooltip: {
- trigger: "item",
- confine: true,
- textStyle: {
- fontSize: 11 // 字体大小
- },
- },
- legend: {
- show: true,
- y:'92%',
- itemHeight: 10,
- itemWidth: 10,
- textStyle:{
- fontSize: 12,//字体大小
- color: '#37D3F3',//字体颜色
- marginBottom:'12px'
- },
- // orient: 'vertical',
- },
- series: [
- {
- type: 'pie',
- center: ['50%', '50%'],
- radius: ['43%', '80%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center',
- },
- itemStyle: {
- normal: {
- color: function (params) {
- return colorList[params.dataIndex];
- },
- },
- },
- labelLine: {
- show: false,
- },
- data: data1,
- },
- ],
- };
- this.myChart4.setOption(option);
- let that =this
- window.addEventListener('resize',function () {//执行
- that.myChart4.resize();
- })
- },
- // 全部任务分数分布
- initEchartsgradeDistribute(chartData){
- if(this.myChart5 !=null && this.myChart5 != "" && this.myChart5 != undefined){
- this.myChart5.dispose();
- }
- this.myChart5 = echarts.init(document.getElementById('gradeDistribute'));
- var option = {
- xAxis: {
- type: 'category',
- splitLine: {
- show:false
- },
- axisLine: {
- // 改变x轴颜色
- show: true,
- lineStyle: {
- color: "#AEE6FC",
- }
- },
- axisLabel: {
- // 改变x轴字体颜色和大小
- show: true,
- textStyle: {
- color: 'AEE6FC',
- fontSize: 12,
- },
- },
- },
- grid: {
- top:'70',
- left: '5',
- right: '15',
- bottom:'20',
- containLabel: true
- },
- yAxis: {
- type: 'value',
- splitLine: {
- show:false
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: "#AEE6FC",
- }
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: "#AEE6FC",
- fontSize:12
- }
- },
- minInterval:1
- },
- series: [
- {
- symbolSize: (params) => {
- let markSize = Math.sqrt(params[1]) * 3;
- markSize = markSize < 12 ? 12 : markSize;
- return markSize;
- },
- symbol: 'circle',
- data: ((data) => {
- var arr = [];
- data.forEach((items) => {
- var itemName = items.name;
- var itemValue = items.value;
- var itemStyle = 15;
- var itemTitle = items.title;
- arr.push([itemName, itemValue, itemStyle, itemTitle]);
- });
- return arr;
- })(chartData),
- type: 'scatter',
- itemStyle: {
- normal: {
- color: '#FFF8A5',
- },
- },
- },
- ]
- };
- this.myChart5.setOption(option);
- let that =this
- window.addEventListener('resize',function () {//执行
- console.log('ckx debug that.myChart5 ', )
- that.myChart5.resize();
- })
- },
- // 获取某个任务下单位参与与课目人员的的成绩分布
- initEchartsSubjectgradeDistribute(chartData){
- if(this.myChart9 !=null && this.myChart9 != "" && this.myChart9 != undefined){
- this.myChart9.dispose();
- }
- this.myChart9 = echarts.init(document.getElementById('subjectGradeDistribute'));
- var option = {
- xAxis: {
- type: 'category',
- splitLine: {
- show:false
- },
- axisLine: {
- // 改变x轴颜色
- show: true,
- lineStyle: {
- color: "#AEE6FC",
- }
- },
- axisLabel: {
- // 改变x轴字体颜色和大小
- show: true,
- textStyle: {
- color: 'AEE6FC',
- fontSize: 12,
- },
- rotate:'25'
- },
- },
- grid: {
- top:'10',
- left: '15',
- right: '15',
- bottom:'55',
- containLabel: true
- },
- yAxis: {
- type: 'value',
- splitLine: {
- show:false
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: "#AEE6FC",
- }
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: "#AEE6FC",
- fontSize:12
- }
- },
- minInterval:1
- },
- series: [
- {
- symbolSize: (params) => {
- // let markSize = Math.sqrt(params[1]) * 3;
- // markSize = markSize < 12 ? 12 : markSize;
- let markSize = 12;
- return markSize;
- },
- symbol: 'circle',
- data: ((data) => {
- var arr = [];
- data.forEach((items) => {
- var itemName = items.name;
- var itemValue = items.value;
- var itemStyle = 15;
- var itemTitle = items.title;
- arr.push([itemName, itemValue, itemStyle, itemTitle]);
- });
- return arr;
- })(chartData),
- type: 'scatter',
- label: {
- show: true, // 是否显示标签
- formatter: function(params) { // 标签内容的格式化模板
- return params.value[1]; // 数值显示格式示例
- },
- position: 'right', // 标签位置,可以设置为 'top'、'bottom'、'left'、'right' 或具体的像素值
- fontSize: 10, // 标签字体大小
- color: '#55d2c3', // 标签字体颜色
- // backgroundColor: '#fff', // 标签背景色
- // borderColor: '#999', // 标签边框颜色
- // borderWidth: 1, // 标签边框宽度
- // borderRadius: 4 // 标签边框圆角半径
- },
- itemStyle: {
- normal: {
- color: '#FFF8A5',
- },
- },
- },
- ]
- };
- this.myChart9.setOption(option);
- let that =this
- window.addEventListener('resize',function () {//执行
- console.log('ckx debug that.myChart5 ', )
- that.myChart9.resize();
- })
- },
- // 全部任务分数统计
- initEchartsgradeStatistics(category, value){
- if(this.myChart6 !=null && this.myChart6 != "" && this.myChart6 != undefined){
- this.myChart6.dispose();
- }
- this.myChart6 = echarts.init(document.getElementById('gradeStatistics'));
- var option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'none',
- crossStyle: {
- color: '#999'
- }
- },
- textStyle: {
- fontSize: 11 // 字体大小
- },
- confine: true
- },
- grid: {
- top:'70',
- left: '5',
- right: '0',
- bottom:'20',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: category,
- splitLine:{
- show:false
- },
- axisLabel: {//x轴文字的配置
- show: true,
- textStyle: {
- color: "#AEE6FC",
- fontSize:12
- },
- rotate: "15"
- },
- axisLine: { //x轴线的颜色以及宽度
- show: true,
- lineStyle: {
- color: "#AEE6FC",
- }
- },
- },
- yAxis: {
- type: 'value',
- splitLine:{
- show:false
- },
- axisLabel: {//x轴文字的配置
- show: true,
- textStyle: {
- color: "#AEE6FC",
- fontSize:12
- }
- },
- axisLine: { //x轴线的颜色以及宽度
- show: true,
- lineStyle: {
- color: "#AEE6FC",
- }
- },
- minInterval:1
- },
- series: [
- {
- data: value,
- type: 'bar',
- barWidth: 30,
- itemStyle:{
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: '#47F3E7' // 0% 处的颜色
- }, {
- offset: 1, color: '#22E3CA' // 100% 处的颜色
- }],
- global: false // 缺省为 false
- }
- }
- }
- ]
- };
- this.myChart6.setOption(option);
- let that =this
- window.addEventListener('resize',function () {//执行
- that.myChart6.resize();
- that.myChart5.resize();
- })
- },
- // 获取某个任务下单位参与与课目人员的的成绩统计
- initEchartsSubjectGradeStatistics(category, value){
- if(this.myChart8 !=null && this.myChart8 != "" && this.myChart8 != undefined){
- this.myChart8.dispose();
- }
- this.myChart8 = echarts.init(document.getElementById('subjectGradeStatistics'));
- var option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'none',
- crossStyle: {
- color: '#999'
- }
- },
- textStyle: {
- fontSize: 11 // 字体大小
- },
- confine: true
- },
- grid: {
- top:'20',
- left: '5',
- right: '15',
- bottom:'53',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: category,
- splitLine:{
- show:false
- },
- axisLabel: {//x轴文字的配置
- show: true,
- textStyle: {
- color: "#AEE6FC",
- fontSize:8
- },
- rotate:'25'
- },
- axisLine: { //x轴线的颜色以及宽度
- show: true,
- lineStyle: {
- color: "#AEE6FC",
- }
- }
- },
- yAxis: {
- type: 'value',
- splitLine:{
- show:false
- },
- axisLabel: {//x轴文字的配置
- show: true,
- textStyle: {
- color: "#AEE6FC",
- fontSize:10
- }
- },
- axisLine: { //x轴线的颜色以及宽度
- show: true,
- lineStyle: {
- color: "#AEE6FC",
- }
- },
- minInterval:1
- },
- series: [
- {
- data: value,
- type: 'bar',
- barWidth: 14,
- itemStyle:{
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: '#47F3E7' // 0% 处的颜色
- }, {
- offset: 1, color: '#22E3CA' // 100% 处的颜色
- }],
- global: false // 缺省为 false
- }
- }
- }
- ]
- };
- // console.log("11",value.length)
- // console.log("22",option.series[0].barWidth)//14
- // console.log("33",option.xAxis.axisLabel.textStyle.fontSize)//8
- // 修改柱状图的宽度和字体大小
- if(value.length>15){
- option.series[0].barWidth = 12; // 修改柱状图的宽度为20像素
- option.xAxis.axisLabel.textStyle.fontSize = 6; // 修改x轴标签的字体大小为12像素
- }
- // console.log("44",value.length)
- // console.log("55",option.series[0].barWidth)//14
- // console.log("66",option.xAxis.axisLabel.textStyle.fontSize)//8
- this.myChart8.setOption(option);
- let that =this
- window.addEventListener('resize',function () {//执行
- that.myChart8.resize();
- })
- },
- // 某个任务全部课目状态占比
- initEchartsSubjectStatus(allTaskStatusData){
- if(this.myChart7 !=null && this.myChart7 != "" && this.myChart7 != undefined){
- this.myChart7.dispose();
- }
- var data1 = allTaskStatusData
- var colorList = ['#296DE0','#47D2F4','#08B389'];
- this.myChart7 = echarts.init(document.getElementById('subjectStatus'));
- var option = {
- title: {
- text: '',
- top: '39%',
- textAlign: 'center',
- left: '50%',
- textStyle: {
- color: '#fff',
- fontSize: 14,
- fontWeight: '600',
- },
- subtext: '',
- subtextStyle: {
- color: '#fff',
- fontSize: 18,
- fontWeight: '400',
- fontFamily: 'YouSheBiaoTiHei'
- },
- },
- grid: {
- containLabel: true,
- top:'140',
- left: '0',
- right: '0',
- bottom:'-20',
- },
- tooltip: {
- trigger: "item",
- confine: true,
- textStyle: {
- fontSize: 11 // 字体大小
- },
- },
- legend: {
- show: true,
- y:'91%',
- itemHeight: 8,
- itemWidth: 8,
- textStyle:{
- fontSize: 10,//字体大小
- color: '#37D3F3',//字体颜色
- marginTop:'12px'
- },
- },
- series: [
- {
- type: 'pie',
- center: ['50%', '50%'],
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center',
- },
- itemStyle: {
- normal: {
- color: function (params) {
- return colorList[params.dataIndex];
- },
- },
- },
- labelLine: {
- show: false,
- },
- data: data1,
- },
- ],
- };
- this.myChart7.setOption(option);
- let that =this
- window.addEventListener('resize',function () {//执行
- that.myChart7.resize();
- })
- },
- // 建立websocket 链接 任务
- initWebsoket(){
- this.websocket = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/task`);//这里将http替换成ws
- switch (this.websocket.readyState) {
- case 0:
- console.log("正在连接");
- break;
- case 1:
- console.log("已经链接并且可以通讯");
- break;
- case 2:
- console.log("连接正在关闭");
- break;
- case 3:
- console.log("连接已关闭或者没有链接成功");
- break;
- };
- this.websocket.onopen = this.websocketsend;//websoket连接成功
- this.websocket.onmessage =this. websocketonmessage;//websoket收到信息
- this.websocket.onclose = this.websocketclose;//websoket连接关闭
- },
- websocketsend(){
- console.log('ws 连接成功');
- },
- websocketonmessage(msg){
- // 获取全部单位
- this.getAllUnits()
- // 获取全部系统
- this.getAllSystems()
- console.log('收到任务信息',msg);
- },
- websocketclose(){
- console.log('ws 连接关闭');
- this.initWebsoket();//重新建立连接
- },
- initInstructWebsoket(){
- // 指令的ws
- this.websocketOrder = new WebSocket(`ws://${this.$store.state.webSocketIp}:${this.$store.state.webSocketPort}/websocket/order/${this.wholeOutTaskId}`);//这里将http替换成ws
- switch (this.websocketOrder.readyState) {
- case 0:
- console.log("正在连接");
- break;
- case 1:
- console.log("已经链接并且可以通讯");
- break;
- case 2:
- console.log("连接正在关闭");
- break;
- case 3:
- console.log("连接已关闭或者没有链接成功");
- break;
- };
- this.websocketOrder.onopen = this.orderWebsocketsend;//websoket连接成功
- this.websocketOrder.onmessage =this. orderWebsocketonmessage;//websoket收到信息
- this.websocketOrder.onclose = this.orderWebsocketclose;//websoket连接关闭
- },
- orderWebsocketsend(){
- console.log('ws 连接成功');
- },
- orderWebsocketonmessage(msg){
- // 获取任务的指令信息
- this.getinstructList(this.wholeOutTaskId)
- console.log('收到指令信息',msg);
- },
- orderWebsocketclose(){
- console.log('ws 连接关闭');
- this.initInstructWebsoket();//重新建立连接
- },
- // 查看成绩表格
- viewManData(item){
- this.dialogType=2
- this.dialogVisible=true
- console.log('item',item);
- const { subjectScore } = item
- this.gridData=subjectScore
- this.gridData2.data=subjectScore
- this.gridData2.length=this.gridData2.data.length
- },
- // 全屏事件
- showFull(id){
- // 获取想要展示全屏的元素
- let elem = document.querySelector(`#${id}`);
- this.requestFullScreen(elem);
- },
- // 退出全屏
- exitFull(){
- let exitFullScreen =
- document.exitFullScreen ||
- document.mozCancelFullScreen ||
- document.webkitExitFullscreen ||
- document.msExitFullscreen;
- if (exitFullScreen) {
- exitFullScreen.call(document);
- }
- this.updatekey=new Date().getTime()
- },
- // 展开全屏
- requestFullScreen(elem){
- console.log('ckx debug ', )
- // #兼容不同的浏览器
- var requestMethod =
- elem.requestFullScreen ||
- elem.webkitRequestFullScreen ||
- elem.mozRequestFullScreen ||
- elem.msRequestFullScreen;
- if (requestMethod) {
- requestMethod.call(elem);
- } else if (typeof window.ActiveXObject !== "undefined") {
- // #模拟F11 实现全屏
- var wscript = new ActiveXObject("WScript.Shell");
- if (wscript !== null) {
- wscript.SendKeys("{F11}");
- }
- }
- let that =this
- window.addEventListener('resize',function () {//执行
- let isFull = document.mozFullScreen ||
- document.fullScreen ||
- //谷歌浏览器及Webkit内核浏览器
- document.webkitIsFullScreen ||
- document.webkitRequestFullScreen ||
- document.mozRequestFullScreen ||
- document.msFullscreenEnabled
- if (isFull === undefined) {
- that.exitFull()
- }else {
- }
- })
- },
- checkFull() {
- //判断浏览器是否处于全屏状态 (需要考虑兼容问题)
- //火狐浏览器
- let isFull = document.mozFullScreen ||
- document.fullScreen ||
- //谷歌浏览器及Webkit内核浏览器
- document.webkitIsFullScreen ||
- document.webkitRequestFullScreen ||
- document.mozRequestFullScreen ||
- document.msFullscreenEnabled
- if (isFull === undefined) {
- isFull = false
- }
- return isFull;
- },
- showMoreInfo(type){
- if(type=='more'){
- this.$router.push('/situationScreen')
- }else {
- this.$router.push({
- path:"/historicTaskScreen",
- query:{
- key1:this.wholeOutTaskId,
- }
- });
- }
- },
- // 初始化视频
- initVideo(nowPlayVideoUrl,id) {
- let that =this
- // 这些options属性也可直接设置在video标签上,见 muted
- let options = {
- autoplay: true, // 设置自动播放
- controls: true, // 显示播放的控件
- sources: [
- // 注意,如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
- {
- src: nowPlayVideoUrl,
- type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
- }
- ]
- };
- // videojs的第一个参数表示的是,文档中video的id
- const myPlyer= Videojs(id, options, function onPlayerReady() {
- console.log("onPlayerReady 中的this指的是:", this); // 这里的this是指Player,是由Videojs创建出来的实例
- console.log(myPlyer === this); // 这里返回的是true
- });
- this.playerList.push(myPlyer)
- }
- },
- mounted(){
- let that= this
- // 获取全部单位
- this.getAllUnits()
- // 获取全部系统
- this.getAllSystems()
- // 建立任务的weksocket链接
- this.initWebsoket()
- setTimeout(() => {
- this.getEarth();
- }, 3000);
- },
- beforeDestroy() {
- if(this.playerList.length){
- this.playerList.forEach((item)=>{
- item.dispose()
- })
- }
- },
- }
- </script>
|