From 6565e619523f045ba3e5e15a5bf3ea3ccbb33ba2 Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期四, 28 九月 2023 10:26:01 +0800 Subject: [PATCH] 如果工艺参数是空,或者报错,弹框提示工艺参数错误的提示而不是新任务的弹框 --- src/views/visualization.vue | 1607 +++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 1,117 insertions(+), 490 deletions(-) diff --git a/src/views/visualization.vue b/src/views/visualization.vue index e02f673..7dc5a4a 100644 --- a/src/views/visualization.vue +++ b/src/views/visualization.vue @@ -1,353 +1,479 @@ <template> - <div class="home"> - <template v-if="Object.keys(taskData).length > 0 && taskData.Procedure.ID"> + <div class="home" ref="homeRef"> + <!-- v-if="Tasks&&Tasks.length>0" --> + <template > <div class="left"> <p class="title"> + <template v-if="Number(ChannelAmount)>1"> + <span + class="font set-title" + style="float: left; margin-right: 15px;" + @click="cutClick(1)" + > + <img style="width:32px;" v-if="activeName == 1" src="../../public/one-blue.png" /> + <span v-else> + <img style="width:32px;" src="../../public/one.png" /> + </span> + </span> + <span class="font set-title" style="float: left;margin-right: 15px;" @click="cutClick(2)"> + <img style="width:32px;" v-if="activeName == 2" src="../../public/two-blue.png" /> + <img style="width:32px;" v-else src="../../public/two.png" /> + </span> + <span + class="font set-title" + style="float: left;" + @click="cutClick(3)" + > + <img style="width:32px;" v-if="activeName == 3" src="../../public/right-blue.png" /> + <span v-else> + <img style="width:32px;" src="../../public/right.png" /> + </span> + </span> + </template> 鐢熶骇绠$悊鐪嬫澘 <span class="font el-icon-setting set-title" style="float: right" @click="setUrl" ></span> + <span + style="float: right;margin-right:20px;font-size:28px;line-height:25px;" + @click="taskClick" + > + <el-badge :value="TaskCount" :class="(TaskCount==0||isTipShow)?'item color_666':'item color_fff'"> + <i class="el-icon-chat-dot-round" /> + </el-badge> + </span> </p> - <div class="statelist"> - <span class="title-item" - >宸ュ崟缂栧彿: - <span class="color_4efefa">{{ - taskData.Order.workOrderId || "" - }}</span> - </span> - <span class="title-item" - >褰撳墠宸ュ簭: - <span class="color_4efefa">{{ - taskData.Procedure.procedure.procedureName || "" - }}</span> - </span> - <span class="title-item" - >鍚庨亾宸ュ簭: - <span class="color_4efefa"> - {{ - taskData.Procedure.procedure.nextProcedureName || "--" - }} - </span> - </span> - <span class="title-item" - >宸ヤ綔浜烘暟: - <span class="color_4efefa"> - <span - v-if=" - taskData.Procedure.procedure && - taskData.Procedure.procedure.workers - " - >{{ taskData.Procedure.procedure.workers.length }}</span - > - <span v-else>0</span> - 浜� - </span> - </span> - </div> - <div class="content"> - <div class="content_left"> - <div class="content-top"> - <div class="small_title">褰撳墠瀹屾垚</div> - <div class="content_leftBttom"> - <dl> - <dd style="font-size: 26px; font-weight: 600"> - {{ finishNumber }}{{ taskData.Order.unit }} - </dd> - </dl> - </div> - </div> - <div class="content-top"> - <div class="small_title">姝e搧鐢熶骇</div> - <div class="content_leftBttom"> - <dl> - <dd style="font-size: 26px; font-weight: 600"> - {{ taskData.Order.amount || 0 }}{{ taskData.Order.unit }} - </dd> - </dl> - </div> - </div> + <div + :class="(activeName == 1||activeName == 3) ? 'active-one' : 'active-two'" + v-for="(taskData, index) in Tasks" + :key="index" + > + <template v-if="taskData"> + <div class="gong-date"> + 宸ュ簭杩愯鏃堕棿锛歿{ getFormatTime(taskData.Procedure.startTime) }} </div> - <div class="content_right"> - <el-descriptions :column="2" :colon="true"> - <el-descriptions-item label="浜у搧鍚嶇О">{{ - taskData.Order.productName || "" - }}</el-descriptions-item> - <el-descriptions-item label="鏁伴噺" - >{{ taskData.Order.amount || 0 - }}{{ taskData.Order.unit }}</el-descriptions-item - > - <el-descriptions-item label="浜よ揣鏃ユ湡">{{ - taskData.Order.deliverDate || "" - }}</el-descriptions-item> - <el-descriptions-item label="宸ユ椂"> - {{ taskData.Procedure.procedure.workHours || "" }} - </el-descriptions-item> - <el-descriptions-item label="璧锋鏃堕棿" - >{{ formatDate(taskData.Order.startTime) || "" }} - - - {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item - > - <el-descriptions-item label="璐х墿鎻忚堪">{{ - taskData.Order.orderAttr || "" - }}</el-descriptions-item> - <el-descriptions-item label="瀹㈡埛鍚嶇О">{{ - taskData.Order.customer || "" - }}</el-descriptions-item> - <el-descriptions-item label="鍙傛暟瑕佹眰">{{ - taskData.Order.parameter || "" - }}</el-descriptions-item> - </el-descriptions> - <el-descriptions :column="1" :colon="true"> - <el-descriptions-item label="瀹屾垚搴�" style="width: 100%"> - <!--:text-format="format" --> - <el-progress - define-back-color="#133EAF" - color="#09E5ED" - :text-inside="true" - :stroke-width="30" - :percentage="finishPercent" - ></el-progress> - </el-descriptions-item> - <!-- <el-descriptions-item label="鍚堟牸鐜�" style="width: 100%"> + <div class="statelist"> + <span class="title-item" + >宸ュ崟缂栧彿: + <span class="color_4efefa">{{ + taskData.Order.workOrderId || "--" + }}</span> + </span> + <span class="title-item" + >褰撳墠宸ュ簭: + <span class="color_4efefa">{{ + taskData.Procedure.procedure.procedureName || "--" + }}</span> + </span> + <span class="title-item" + >鍚庨亾宸ュ簭: + <span class="color_4efefa"> + {{ taskData.Procedure.procedure.nextProcedureName || "--" }} + </span> + </span> + <!-- <span class="title-item" + >宸ヤ綔浜烘暟: + <span class="color_4efefa"> + <span + v-if=" + taskData.Procedure.procedure && + taskData.Procedure.procedure.workers + " + >{{ taskData.Procedure.procedure.workers.length }}</span + > + <span v-else>0</span> + 浜� + </span> + </span> --> + </div> + <div class="gongx"> + <el-steps v-if="taskData.AllProcedures" :active="taskData.CurrentProcedureIndex?taskData.CurrentProcedureIndex:0" finish-status="success" class="steps"> + <el-step icon="" :title="item" v-for="(item,index) in taskData.AllProcedures" :key="index"></el-step> + </el-steps> + </div> + <div class="content"> + <div class="content_left"> + <div class="content-top"> + <div class="small_title">鍔犲伐鏁�</div> + <div class="content_leftBttom"> + <dl> + <dd + style="font-size: 35px; font-weight: 600" + class="color_green" + > + {{ taskData.finishNumber }}{{ taskData.Order.unit }} + </dd> + </dl> + </div> + </div> + <div class="content-top"> + <div class="small_title">鐩爣鏁�</div> + <div class="content_leftBttom"> + <dl> + <dd + style="font-size: 35px; font-weight: 600" + class="color_green" + > + {{ taskData.Order.amount || 0 }}{{ taskData.Order.unit }} + </dd> + </dl> + </div> + </div> + </div> + <div class="content_right"> + <el-descriptions :column="(activeName == 1||activeName == 3) ? 2 : 1" :colon="true"> + <el-descriptions-item label="浜у搧鍚嶇О">{{ + taskData.Order.productName || "" + }}</el-descriptions-item> + <el-descriptions-item label="鏁伴噺" + >{{ taskData.Order.amount || 0 + }}{{ taskData.Order.unit }}</el-descriptions-item + > + <el-descriptions-item label="浜よ揣鏃ユ湡">{{ + taskData.Order.deliverDate || "" + }}</el-descriptions-item> + <el-descriptions-item label="宸ユ椂"> + {{ taskData.Procedure.procedure.workHours || "" }} + </el-descriptions-item> + <el-descriptions-item label="璁″垝鏃堕棿" + >{{ formatDate(taskData.Order.startTime) || "" }} + - + {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item + > + <el-descriptions-item label="璐х墿鎻忚堪">{{ + taskData.Order.orderAttr || "" + }}</el-descriptions-item> + <el-descriptions-item label="瀹㈡埛鍚嶇О">{{ + taskData.Order.customer || "" + }}</el-descriptions-item> + <el-descriptions-item label="鍙傛暟瑕佹眰">{{ + taskData.Order.parameter || "" + }}</el-descriptions-item> + </el-descriptions> + <el-descriptions :column="1" :colon="true"> + <el-descriptions-item label="瀹屾垚搴�" style="width: 100%"> + <!--:text-format="format" --> <el-progress - define-back-color="#007101" - color="#00CC66" + define-back-color="#132f6e" + color="#00cc66" + text-color="#fff" :text-inside="true" :stroke-width="30" - :percentage="passrate" + :percentage=" + (taskData.Order && taskData.finishNumber != 0) + ? parseInt( + (taskData.finishNumber / taskData.Order.amount) * + 100 + )>100?100:parseInt( + (taskData.finishNumber / taskData.Order.amount) * + 100 + ): 0 + " ></el-progress> - </el-descriptions-item> --> - </el-descriptions> - </div> - </div> - <div class="bottom"> - <div class="bottom_list"> - <div class="bottom-title">杈撳叆璧勬簮</div> - <el-carousel - direction="vertical" - height="calc(100% - 0px)" - :interval="500" - class="card-box" - ref="cardBox1" - v-if=" - taskData.Procedure.procedure && - taskData.Procedure.procedure.inputMaterials - " - > - <el-carousel-item - :key="index" - v-for="(item, index) in inputMaterials" - > - <div class="card" :key="index2" v-for="(list, index2) in item"> - <div class="card_content"> - <div class="card_contentLeft">{{ list.materialId }}</div> - </div> - <div class="card_top"> - <div> - <!-- 璁惧12<i - style="font-size: 14px" - class="el-icon-right font-arrow-20" - ></i> - 璁惧13 --> - {{ list.materialName }} - </div> - </div> - <div class="card_top2"> - <div style="line-height: 45px; text-align: center"> - {{ list.amount }} {{ list.unit }} - </div> - <!-- <span class="card-top-r-t">鐢熶骇瀹屾垚</span> - <span class="card-top-r-b">12鏈�28鏃� 08:24</span> --> - </div> - </div> - </el-carousel-item> - </el-carousel> - <el-button type="primary" class="color_f70f83"> - <i class="el-icon-phone-outline" />鐗╂枡鍛煎彨</el-button - > - </div> - <i class="el-icon-arrow-right font-arrow-20 color_4efefa"></i> - <div class="bottom_list"> - <div class="bottom-title"> - 褰撳墠宸ュ簭:{{ taskData.Procedure.procedure.procedureName || "" }} - </div> - <el-carousel - direction="vertical" - height="calc(100% - 0px)" - :interval="500" - class="card-box" - ref="cardBox2" - v-if="taskData.Procedure.procedure && procedureList" - > - <el-carousel-item - :key="index" - v-for="(item, index) in procedureList" - > - <div class="card" :key="index2" v-for="(list, index2) in item"> - <template v-if="list.name == '宸ュ簭'"> - <div class="card_content"> - <div class="card_contentLeft color_blue"> - {{ list.deviceName }} - <!-- <span style="float: right">6m/s</span> --> - </div> - </div> - <div class="card_top-3"> - <span class="card-top-r-t" - >瀹屾垚杩涘害锛歿{ finishPercent || 0 }}</span - > - <span class="card-top-r-b"> - <el-progress - define-back-color="#133EAF" - color="#09E5ED" - :text-inside="true" - :stroke-width="10" - :percentage="finishPercent" - :show-text="false" - ></el-progress> - </span> - </div> - <div class="card_top-2"> - <div style="line-height: 45px; text-align: center"> - 鐢熶骇涓� - </div> - <!-- <span class="card-top-r-t">瀹屾垚杩涘害锛�50%</span> - <span class="card-top-r-b">12鏈�28鏃� 08:24</span> --> - </div> - </template> - <template v-else> - <!-- <div class="card_content"> - - </div> --> - <div class="card_top-4"> - <div>宸ヨ壓缂栧彿锛歿{ list.number }}</div> - <div - style=" - font-size: 14px; - color: #cfcfcf; - line-height: 20px; - " - > - 宸ヨ壓鐨勫叿浣撲俊鎭鐐瑰嚮鎺у埗鏌ョ湅锛� - </div> - </div> - </template> - </div> - </el-carousel-item> - </el-carousel> - - <p style="font-size: 22px; margin-left: 12px; margin-top: 50px"></p> - <div class="right-small-btn"> - <el-button type="primary"> 鎵撳嵃</el-button> - <el-popover - placement="top-end" - width="160" - class="button-finish" - v-model="finishShow" - trigger="click" - > - <p>璇风‘璁ゆ槸鍚﹀凡瀹屾垚璇ョ敓浜т换鍔�?</p> - <div style="text-align: right; margin: 0"> - <el-button size="mini" @click="finishShow = false"> - 鍙栨秷</el-button - > - <el-button type="primary" size="mini" @click="finishClick"> - 纭畾</el-button - > - </div> - <el-button type="primary" slot="reference"> 瀹屾垚</el-button> - </el-popover> + </el-descriptions-item> + <!-- <el-descriptions-item label="鍚堟牸鐜�" style="width: 100%"> + <el-progress + define-back-color="#007101" + color="#00CC66" + text-color="#fff" + :text-inside="true" + :stroke-width="30" + :percentage="passrate" + ></el-progress> + </el-descriptions-item> --> + </el-descriptions> </div> </div> - <i class="el-icon-arrow-right font-arrow-20 color_4efefa"></i> - <div class="bottom_list"> - <div class="bottom-title"> - <span>杈撳嚭璧勬簮</span> - </div> - <el-carousel - direction="vertical" - height="calc(100% - 0px)" - :interval="500" - ref="cardBox3" - class="card-box" - v-if=" - taskData.Procedure.procedure && - taskData.Procedure.procedure.outputMaterials - " - > - <el-carousel-item - :key="index" - v-for="(item, index) in outputMaterials" + <div class="bottom"> + <div class="bottom_list"> + <div class="bottom-title">杈撳叆璧勬簮</div> + <el-carousel + direction="vertical" + height="calc(100% - 0px)" + :interval="500" + class="card-box" + :ref="'cardBox1&' + index" + v-if=" + taskData.Procedure.procedure && + taskData.Procedure.procedure.inputMaterials + " > - <div - class="card-box" - :key="index2" - v-for="(list, index2) in item" + <el-carousel-item + :key="index" + v-for="(item, index) in taskData.inputMaterials" > - <div class="card"> + <div + class="card" + :key="index2" + v-for="(list, index2) in item" + > <div class="card_content"> - <div class="card_contentLeft">{{ list.materialId }}</div> - </div> - <div class="card_top"> - <div> - {{ list.materialName }} - <!-- 璁惧12<i - style="font-size: 14px" - class="el-icon-right font-arrow-20" - ></i> - 璁惧13 --> + <div class="card_contentLeft font_dian"> + <el-popover + width="200" + :content="list.materialId" + placement="top-start" + trigger="click" + > + <span slot="reference">{{ list.materialId }}</span> + </el-popover> </div> </div> - <div class="card_top2"> + <div class="card-top-input-out-l"> + <div class="font_dian"> + <!-- 璁惧12<i + style="font-size: 14px" + class="el-icon-right font-arrow-20" + ></i> + 璁惧13 --> + <el-popover + width="200" + :content="list.materialName" + placement="top-start" + trigger="click" + > + <span slot="reference">{{ list.materialName }}</span> + </el-popover> + </div> + </div> + <div class="card-top-input-out-r"> <div style="line-height: 45px; text-align: center"> {{ list.amount }} {{ list.unit }} </div> <!-- <span class="card-top-r-t">鐢熶骇瀹屾垚</span> - <span class="card-top-r-b">12鏈�28鏃� 08:24</span> --> + <span class="card-top-r-b">12鏈�28鏃� 08:24</span> --> </div> - <!-- <div class="card-info-box">棰勮10鍒嗛挓閫佽揪</div> --> </div> - <!-- <div class="card"> - <div class="card_content"> - <div class="card_contentLeft color_green"> - 鍖呭彿:G22122304 100鍚� + </el-carousel-item> + </el-carousel> + <el-button type="primary" class="color_f70f83 bottom-box-btn"> + <i class="el-icon-phone-outline" />鐗╂枡鍛煎彨</el-button + > + </div> + <i class="el-icon-arrow-right font-arrow-20 color_318583"></i> + <div class="bottom_list"> + <div class="bottom-title"> + 褰撳墠宸ュ簭:{{ taskData.Procedure.procedure.procedureName || "" }} + </div> + <el-carousel + direction="vertical" + height="calc(100% - 0px)" + :interval="500" + class="card-box" + :ref="'cardBox2&' + index" + v-if="taskData.Procedure.procedure && taskData.procedureList" + > + <el-carousel-item + :key="index" + v-for="(item, index) in taskData.procedureList" + > + <div + class="card" + :key="index2" + v-for="(list, index2) in item" + > + <template v-if="list.name == '宸ュ簭'"> + <div class="card_content"> + <div class="card_contentLeft color_blue font_dian"> + <!-- {{ list.deviceName }} --> + <el-popover + width="200" + :content="list.deviceName" + placement="top-start" + trigger="click" + > + <span slot="reference">{{ list.deviceName }}</span> + </el-popover> + <!-- <span style="float: right">6m/s</span> --> + </div> + </div> + <div class="card_top-3"> + <span class="card-top-r-t" + >瀹屾垚杩涘害锛歿{ + taskData.Order && taskData.finishNumber != 0 + ? parseInt( + (taskData.finishNumber / + taskData.Order.amount) * + 100 + ) + : 0 + }}</span + > + <span class="card-top-r-b"> + <el-progress + define-back-color="#132f6e" + color="#00cc66" + text-color="#fff" + :text-inside="true" + :stroke-width="10" + :percentage=" + (taskData.Order && taskData.finishNumber != 0) + ? parseInt( + (taskData.finishNumber / + taskData.Order.amount) * + 100 + )>100?100:parseInt( + (taskData.finishNumber / + taskData.Order.amount) * + 100 + ) + : 0 + " + :show-text="false" + ></el-progress> + </span> + </div> + <div class="card_top-2"> + <div style="line-height: 45px; text-align: center"> + {{ taskData.Procedure.Status==3?'鐢熶骇瀹屾垚':'鐢熶骇涓�' }} + </div> + <!-- <span class="card-top-r-t">瀹屾垚杩涘害锛�50%</span> + <span class="card-top-r-b">12鏈�28鏃� 08:24</span> --> + </div> + </template> + <template v-else> + <!-- <div class="card_content"> + + </div> --> + <div :class="(activeName==1||activeName == 3)?'card_top-4 font_size_20px':'card_top-4'"> + <div>宸ヨ壓缂栧彿锛�<div >{{ list.number }}</div></div> + <!-- <div + style=" + font-size: 14px; + color: #cfcfcf; + line-height: 20px; + " + > + 宸ヨ壓鐨勫叿浣撲俊鎭鐐瑰嚮鎺у埗鏌ョ湅锛� + </div> --> + </div> + </template> + </div> + </el-carousel-item> + </el-carousel> + + <p + style="font-size: 22px; margin-left: 12px; margin-top: 50px" + ></p> + <div class="right-small-btn bottom-box-btn"> + <el-button type="primary"> 鎵撳嵃</el-button> + <el-button v-if="taskData.Procedure.Status==3" type="primary" class="huise"> 瀹屾垚</el-button> + <el-popover + v-else + placement="top-end" + width="160" + class="button-finish" + v-model="finishShow['finishShow&'+index]" + trigger="click" + > + <p><i class="el-icon-error" style="color:red;margin-right:5px;"/>璇风‘璁ゆ槸鍚﹀凡瀹屾垚璇ョ敓浜т换鍔�?</p> + <div style="text-align: right; margin: 0"> + <el-button size="mini" @click="finishShow['finishShow&'+index] = false"> + 鍙栨秷</el-button + > + <el-button + type="primary" + size="mini" + class="color_f70f83" + @click="finishClick(index, taskData)" + > + 纭畾</el-button + > + </div> + <el-button type="primary" slot="reference"> 瀹屾垚</el-button> + </el-popover> + </div> + </div> + <i class="el-icon-arrow-right font-arrow-20 color_318583"></i> + <div class="bottom_list"> + <div class="bottom-title"> + <span>杈撳嚭璧勬簮</span> + </div> + <el-carousel + direction="vertical" + height="calc(100% - 0px)" + :interval="500" + :ref="'cardBox3&' + index" + class="card-box" + v-if=" + taskData.Procedure.procedure && + taskData.Procedure.procedure.outputMaterials + " + > + <el-carousel-item + :key="index" + v-for="(item, index) in taskData.outputMaterials" + > + <div + class="card-box" + :key="index2" + v-for="(list, index2) in item" + > + <div class="card"> + <div class="card_content"> + <div class="card_contentLeft font_dian"> + <el-popover + width="200" + :content="list.materialId" + placement="top-start" + trigger="click" + > + <span slot="reference">{{ list.materialId }}</span> + </el-popover> + </div> + </div> + <div class="card-top-input-out-l"> + <div class="font_dian"> + <el-popover + width="200" + :content="list.materialName" + placement="top-start" + trigger="click" + > + <span slot="reference">{{ list.materialName }}</span> + </el-popover> + </div> + </div> + <div class="card-top-input-out-r"> + <div style="line-height: 45px; text-align: center"> + {{ list.amount }} {{ list.unit }} + </div> </div> </div> - <div class="card_top"> - <div> - 璁惧12<i - style="font-size: 14px" - class="el-icon-right font-arrow-20" - ></i> - 璁惧13 - </div> - </div> - <div class="card_top-2"> - <span class="card-top-r-t">鐢熶骇瀹屾垚</span> - <span class="card-top-r-b">12鏈�28鏃� 08:24</span> - </div> - </div> --> - </div> - </el-carousel-item> - </el-carousel> - <el-button type="primary" class="color_f70f83"> - <i class="el-icon-phone-outline" />杩愯緭鍛煎彨</el-button - > + </div> + </el-carousel-item> + </el-carousel> + <el-button type="primary" class="color_f70f83 bottom-box-btn"> + <i class="el-icon-phone-outline" />杩愯緭鍛煎彨</el-button + > + </div> </div> + </template> + <!-- 2涓换鍔$殑鏃跺�欙紝绗簩涓换鍔′负绌虹殑鏃跺�欐樉绀� --> + <template + v-if="activeName == 2 &&(!taskData||Object.keys(taskData).length==0)" + > + + <el-empty description="鏆傛棤浠诲姟..."></el-empty> + </template> </div> + <template v-if="!Tasks||Tasks.length==0"> + <el-empty description="鏆傛棤浠诲姟..."></el-empty> + </template> </div> <div class="right"> <div class="right_top"> <div class="right-top-l">浣滀笟鐘舵��</div> <div class="time"> <dl> - <dd><span style="font-size: 32px">{{ formatDate3() }}</span></dd> <dd> - <span style="font-size: 12px; " - >{{ formatDate2() }}</span - > + <span style="font-size: 32px">{{ formatTime3 }}</span> + </dd> + <dd> + <span style="font-size: 12px">{{ formatTime2 }}</span> <!--margin-right: 10px <span style="font-size: 14px">鏄熸湡鍥�</span> --> </dd> </dl> @@ -355,23 +481,38 @@ </div> <div class="right-top-m"> 璁惧鐘舵��: - <span style="position: relative" - >姝e父 - <span class="yuandian"></span> + <!-- 1鏂紑2鐢熶骇3寰呮満 --> + <span style="position: relative" v-if="plcStatus" > + <el-popover + v-if="plcStatus == 1&&plcNotConnected" + width="180" + :content="plcNotConnected" + placement="top-end" + trigger="click" + > + <span slot="reference"> + <img src="../../public/duan.png" /> + 鏂紑 + </span> + </el-popover> + <span v-else> + <img v-if="plcStatus == 1&&!plcNotConnected" src="../../public/duan.png" /> + <img v-else src="../../public/lian.png" /> + <!-- <span class="yuandian"></span> --> + {{ plcStatus==1?'鏂紑':(plcStatus==2?'鐢熶骇涓�':'寰呮満') }} + </span> </span> </div> <div class="right-top-m-btn"> - <el-button type="primary" @click="controlClick"> 鎺у埗</el-button> + <!-- <el-button type="primary" @click="controlClick"> 鎺у埗</el-button> --> </div> <div class="right_dutyLst"> <div class="right-small-title">褰撳墠鍊肩彮</div> - <div - class="right-person-box" - v-if="taskData.Procedure.procedure.workers" - > + + <div class="right-person-box" v-if="workers && workers.length > 0"> <dl class="right-small-person" - v-for="(item, index) in taskData.Procedure.procedure.workers" + v-for="(item, index) in workers" :key="index" > <dt> @@ -388,9 +529,12 @@ style="font-size: 20px; font-weight: 600; margin-right: 10px" >{{ item.workerName || "" }}</span > - <span>{{ item.phoneNum || "" }}</span> + <!-- <span>{{ item.phoneNum || "" }}</span> --> + <span class="color_yellow"><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /></span> </dl> + </div> + <!-- <div style=" width: 100%; @@ -405,7 +549,7 @@ </div> --> </div> <div class="right_base"> - <div class="right-small-title" style="line-height: 40px">鐭ヨ瘑搴�</div> + <div class="right-small-title" style="line-height: 40px;margin-top:20px;">鐭ヨ瘑搴�</div> <Knowledge /> <div class="right-base-btn call"> <el-button type="primary" @@ -415,12 +559,16 @@ </div> </div> </template> - <template v-else> + <!-- --> + <!-- <template v-else> <div class="home-img-box"> <div class="bg-title"> <img src="../../public/bg-title.png" /> <span class="bg-title-span">璁惧瀹炴椂鐢熶骇鐪嬫澘</span> - <div class="bg-date"><span>{{ formatDate3() }}</span><br/>{{formatDate2()}}</div> + <div class="bg-date"> + <span>{{ formatTime3 }}</span + ><br />{{ formatTime2 }} + </div> <span class="font el-icon-setting set-title bg-set" @click="setUrl" @@ -430,15 +578,33 @@ <img src="../../public/yuan.png" /> <div class="btn-img"> <div class="font_size_16" style="line-height: 5; margin-top: 18%"> - 鏆傛棤浠诲姟锛屼紤鎭竴涓嬪惂... + <span v-if="showCountDown" + >璺濈浠诲姟寮�濮嬫椂闂达細 + <span class="color_red">{{ countDownHour }}</span + >鏃� <span class="color_red">{{ countDownMinute }}</span + >鍒�</span + > + <span v-else>鏆傛棤浠诲姟锛屼紤鎭竴涓嬪惂...</span> </div> <el-button type="primary" @click="reloadPage">鍒锋柊浠诲姟</el-button> </div> </div> </div> - </template> + + </template> --> <!-- 鎺у埗鐨勫脊妗� --> - <AddControl ref="control" :id="taskData.Procedure.ID" /> + <AddControl ref="control" :Arr="Arr" /> + <!-- 鎺у埗鐨勫脊妗� --> + <AddIssue + ref="control" + :Arr="Arr" + :ArrError="ArrError" + :safeProduce="safeProduce" + :taskData="taskData" + :Order="taskData.Order" + @getSetProductNumber="getTaskInfo" + @isTip="isTip" + /> </div> </template> @@ -450,28 +616,71 @@ saveMiniDict, startTask, getProgress, + countdown, + getTaskUnStarted, } from "@/api/home/index"; // 浜х嚎 import Card from "@/components/Card.vue"; import Knowledge from "../components/Knowledge.vue"; import AddControl from "../components/AddControl.vue"; +import AddIssue from "../components/AddIssue.vue"; export default { components: { Card, Knowledge, AddControl, + AddIssue, }, data() { return { + activeName: 1, progress: 70, //杩涘害 passrate: 30, //鍚堟牸鐜� production: 25, //鐢熶骇涓� - finishNumber: 0, - finishPercent: 0, + formatTime2: "", + formatTime3: "", // 鍙充晶瀹屾垚 - finishShow: false, - inputMaterials: [], - outputMaterials: [], - procedureList: [], + finishShow:{}, + workers:[], + TasksCopy:[], + Tasks: [ + { + Order: { + amount: "", + customer: "", + deliverDate: "", + endTime: "", + orderAttr: [], + orderId: "", + parameter: "", + productId: "", + productName: "", + startTime: "", + unit: "", + }, + Procedure: { + id: 1, + procedure: { + deviceId: "", + endTime: "", + inputMaterials: [ + { + amount: 1, + materialId: 1, + materialName: 1, + }, + ], + outputMaterials: [], + procedureId: "", + procedureName: "", + startTime: "", + workHours: "", + }, + }, + inputMaterials: [], + outputMaterials: [], + procedureList: [], + }, + ], taskData: { Order: { amount: "", @@ -513,6 +722,23 @@ }, }, }, + totalNumber: 0, + showCountDown: false, + countDownHour: 0, + countDownMinute: 0, + Arr: [], + ArrError:'', + // 璁板綍瀹氭椂鍣ㄧ姸鎬� + procInfoTimer: null, + cutdownTimer: null, + TaskCount:0, + plcStatus:0, + isTipShow:false, + // isFinsh:0, + safeProduce:'', + // 璁惧鏂紑鐨勫師鍥� + plcNotConnected:'', + ChannelAmount:0, }; }, mounted() { @@ -521,26 +747,73 @@ // this.passrate = this.getRandomNumber(1, 100); // this.production = this.getRandomNumber(1, 100); // }, 3000); - this.getTaskInfo(); + this.getDate3(); + this.getDate2(); setInterval(() => { - this.getProgressInfo(); - }, 60000); + this.getDate3(); + this.getDate2(); + }, 5000); + this.getTaskInfo(); }, - + watch:{ + // isFinsh(){ + // if(this.isFinsh==this.Tasks.length){ + // this.getStartArr() + // } + // } + }, methods: { - reloadPage() { - window.location.reload(); + taskClick(){ + if(this.TaskCount>0){ + this.getStartArr() + this.$refs.control.islook=true + }else{ + this.$message({ + message:'鐩墠娌℃湁浠诲姟锛�', + type: 'error', + duration: 3 * 1000 + }) + } }, - getProgressInfo() { - getProgress().then((res) => { + isTip(val){ + this.isTipShow=val + }, + cutClick(val) { + this.activeName = val; + if(this.activeName==2){ + this.Tasks=this.TasksCopy.slice(0,2) + if(this.Tasks.length<2){ + this.Tasks.push(null) + } + }else if(this.activeName==1){ + this.Tasks=this.TasksCopy.slice(0,1) + }else if(this.activeName==3){ + this.Tasks=this.TasksCopy.slice(1) + } + }, + reloadPage() { + // window.location.reload(); + this.getTaskInfo(); + }, + getcountdown() { + countdown().then((res) => { if (res.code == 200) { - this.finishNumber = res.data.finishNumber ? res.data.finishNumber : 0; - this.finishPercent = res.data.finishPercent - ? res.data.finishPercent + this.showCountDown = res.data.ShowCountDown + ? res.data.ShowCountDown + : false; + this.countDownHour = res.data.CountDownHour + ? res.data.CountDownHour : 0; + this.countDownMinute = res.data.CountDownMinute + ? res.data.CountDownMinute + : 0; + if(this.countDownHour==0&& this.countDownMinute==0){ + this.getTaskInfo(); + } } }); }, + getDateObj(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace( @@ -573,127 +846,268 @@ formatDate(value) { if (value) { const now = value ? new Date(value * 1000) : new Date(); - let time = this.getDateObj(now, "yyyy-MM-dd hh:mm:ss"); + let time = this.getDateObj(now, "MM-dd hh:mm"); return time; } else { return ""; } }, - formatDate3() { - const now = new Date(); - let time = this.getDateObj(now, "hh:mm"); + // 鏍煎紡鍖栨椂闂� ==> yyyy-mm-dd + formatDate2(value) { + if (value) { + const now = value ? new Date(value * 1000) : new Date(); + let time = this.getDateObj(now, "yyyy/MM/dd hh:mm:ss"); return time; - }, - formatDate2(){ - const now = new Date(); - let time = this.getDateObj(now, "yyyy骞碝M鏈坉d鏃�"); - return time; - }, - setInterCard(value, name) { - let height = 200; - let num = 1; - if (this.$refs[name]) { - height = this.$refs[name].$el.offsetHeight; - num = Math.floor(height / 80); + } else { + return ""; } - let inputMaterials = JSON.parse( - JSON.stringify(this.taskData.Procedure.procedure[value]) - ); - let newDataList = []; - let current = 0; - // let num=4; - if (inputMaterials && inputMaterials.length > 0) { - for (let i = 0; i <= inputMaterials.length - 1; i++) { - if (i % num !== 0 || i === 0) { - if (!newDataList[current]) { + }, + getDate3() { + let now = new Date(); + this.formatTime3 = this.getDateObj(now, "hh:mm"); + }, + getDate2() { + let now = new Date(); + this.formatTime2 = this.getDateObj(now, "yyyy骞碝M鏈坉d鏃�"); + }, + getFormatTime(date){ + const getCha=()=>{ + let now=new Date().getTime() + let String=now-date*1000; + let seconds=Math.floor(String/1000) + let minutes=Math.floor(seconds/60) + + let days=Math.floor(String/1000/60/60/24) + let hours=Math.floor(minutes/60)-days*24 + let m=minutes-days*24*60-hours*60 + return days+'澶�'+hours+'鏃�'+m+'鍒�' + } + let d= getCha() + setInterval(() => { + d= getCha(); + }, 6000); + return d; + }, + setInterCard(value, name, i) { + if (this.TasksCopy[i].Procedure.procedure[value]!=null) { + let height = 200; + let num = 3; + // if (this.$refs[name]) { + // height = this.$refs[name].$el?this.$refs[name].$el.offsetHeight:200; + // num = Math.floor(height / 80); + // } + height = this.$refs['homeRef']?(this.$refs['homeRef'].offsetHeight-470-90-20):200; + if(this.activeName==2){ + height=height-610-90-20 + } + num = Math.floor(height / 80); + let inputMaterials = JSON.parse( + JSON.stringify(this.TasksCopy[i].Procedure.procedure[value]) + ); + let newDataList = []; + let current = 0; + // let num=4; + if (inputMaterials && inputMaterials.length > 0) { + for (let i = 0; i <= inputMaterials.length - 1; i++) { + if (i % num !== 0 || i === 0) { + if (!newDataList[current]) { + newDataList[current] = []; + newDataList[current].push(inputMaterials[i]); + } else { + newDataList[current].push(inputMaterials[i]); + } + } else { + current++; newDataList[current] = []; newDataList[current].push(inputMaterials[i]); - } else { - newDataList[current].push(inputMaterials[i]); } - } else { - current++; - newDataList[current] = []; - newDataList[current].push(inputMaterials[i]); } } + this.TasksCopy[i][value] = [...newDataList]; } - this[value] = [...newDataList]; - console.log(this.inputMaterials, "inputMaterials"); }, getTaskInfo() { - this.taskData = { + let object = { Order: {}, Procedure: { procedure: { inputMaterials: [], outputMaterials: [], workers: [] }, }, + inputMaterials: [], + outputMaterials: [ + // [ + // { + // materialId:11111, + // materialName:'272澶у鍟婃斁鍋囦簡鍗¤壈鑻﹀鏂楀瀮鍦惧彂蹇�掑瀮鍦惧弽棣堟潵寰楀強鍏嬮殕', + // amount:100, + // unit:'浠�' + // } + // ] + ], + procedureList: [ + // [ + // { + // name:"宸ュ簭", + // deviceName:'1111dhafjdhajkhf jkdahjkf鎵撴硶鍗冲彲鎵撻枊閺堟帴鑲痉鍩哄晩鐪嬩締jdad澶ч浜笢鍗¤�佸徃鏈虹暘绐犲�掕嚰寮�浜嗘埧閲戦樋濂庣鍗佸叚灞婂弽棣堟媺寰锋柉鍩簁鎵撳崱鏈洪樋鐝傞檮浠舵墦寮�浜嗙偣鍑婚樋閲屽崱鍑忚偉鐨勫崱鎷夎兌寮�浜嗘埧澶ц涓婂厠闅唂k鍟﹀ぇ瀹堕槻绌洪浄閬旀暩鎿氱湅i' + // }, + // ] + ], }; - getTaskInfo().then((res) => { - if (res.code == 200) { - this.taskData = res.data - ? res.data - : { - Order: {}, - Procedure: { - procedure: { - inputMaterials: [], - outputMaterials: [], - workers: [], - }, - }, - }; - this.taskData.Procedure.procedure.workers = this.taskData.Procedure - .procedure.workers - ? this.taskData.Procedure.procedure.workers - : []; - this.procedureList.push([ - { - name: "宸ュ簭", - ...this.taskData.Procedure.procedure, - }, - ]); - if (this.taskData.Procedure.ID) { - startTask({ id: this.taskData.Procedure.ID }).then((res) => { - if (res.code == 200) { - // res.data.number - this.procedureList[0].push({ - number: res.data.number, - name: "宸ヨ壓", - }); - } - }); + this.Tasks = []; + this.TasksCopy=[] + getTaskInfo({taskMode:2}).then((res) => { + if (res.code == 200&&res.data) { + let arr=[] + if(res.data.Tasks){ + arr.sort(function(a,b){ + return (a.Channel - b.Channel) + }) } - console.log(this.procedureList, "===1111procedureList"); - // setTimeout(() => { - this.setInterCard("inputMaterials", "cardBox1"); - // this.setInterCard('procedureList','cardBox2') - this.setInterCard("outputMaterials", "cardBox3"); - // }, 5000); + this.activeName=1; + this.TasksCopy = res.data.Tasks ? res.data.Tasks : []; + this.safeProduce=res.data.Prompt.safeProduce?res.data.Prompt.safeProduce:'' + this.plcNotConnected=res.data.Prompt.plcNotConnected?res.data.Prompt.plcNotConnected:'' + this.ChannelAmount=res.data.ChannelAmount?res.data.ChannelAmount:1 + // if(this.ChannelAmount>1 &&this.TasksCopy.length<2){ + // this.TasksCopy.push(object) + // } + this.TaskCount=res.data.TaskCount?res.data.TaskCount:0 + + if (this.TasksCopy.length == 0&&this.TaskCount==0) { + if (this.activeName == 1||this.activeName == 3) { + this.TasksCopy.push(object); + } else { + this.TasksCopy.push(object); + this.TasksCopy.push(object); + } + } + this.workers=res.data.workers?res.data.workers:[] + for (let i in this.TasksCopy) { + this.TasksCopy[i].procedureList = []; + this.TasksCopy[i].inputMaterials = []; + this.TasksCopy[i].outputMaterials = []; + this.TasksCopy[i].finishNumber = 0; + this.finishShow['finishShow&'+i]=false + this.TasksCopy[i].Procedure.procedure.workers = this.TasksCopy[i].Procedure + .procedure.workers + ? this.TasksCopy[i].Procedure.procedure.workers + : []; + + this.TasksCopy[i].procedureList.push([ + { + name: "宸ュ簭", + ...this.TasksCopy[i].Procedure.procedure, + }, + ]); + + if (this.TasksCopy[i].Procedure.ID) { + startTask({ id: this.TasksCopy[i].Procedure.ID }).then((res) => { + if (res.code == 200) { + // res.data.number + this.TasksCopy[i].procedureList[0].push({ + number: res.data.Number, + }); + // this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : [] + // this.isFinsh=Number(i)+1 + } + }); + } + this.setInterCard("inputMaterials", "cardBox1&" + i, i); + this.setInterCard("outputMaterials", "cardBox3&" + i, i); + } + this.getStartArr() + this.getProgressInfo(); + if (!this.procInfoTimer) { + this.procInfoTimer = setInterval(() => { + this.getProgressInfo(); + }, 3000); + } } + // if (res.code != 200 || this.TasksCopy.length == 0) { + // this.getcountdown(); + // // 鎺у埗閲嶆柊璇锋眰getTaskInfo, 鍙紑鍚竴涓畾鏃跺櫒 + // if (!this.cutdownTimer) { + // this.cutdownTimer = setInterval(() => { + // this.getcountdown(); + // }, 60000); + // } + // } + this.cutClick(1) }); + // this.TasksCopy.push(object) + // this.TasksCopy.push(object) + }, + getStartArr(){ + // for (let i in this.TasksCopy) { + // if (this.TasksCopy[i].Procedure.Status==1) { + // this.Arr = this.TasksCopy[i].Arr ?this.TasksCopy[i].Arr: []; + // // this.taskData=this.TasksCopy[i]; + // break; + // } + // } + getTaskInfo({taskMode:1}).then(res=>{ + if(res.code==200){ + this.taskData=res.data.Tasks?res.data.Tasks[0]:{}; + this.ArrError='' + if (this.taskData.Procedure.ID) { + startTask({ id: this.taskData.Procedure.ID }).then((res) => { + if (res.code == 200) { + this.Arr =res.data.Params ? res.data.Params : [] + }else{ + this.ArrError=res.msg; + } + }); + } + } + }) + }, + getProgressInfo() { + for (let i in this.TasksCopy){ + if(this.TasksCopy[i].Procedure.ID){ + getProgress({ + channel: Number(i), + procedureId: this.TasksCopy[i].Procedure.ID, + }).then((res) => { + if (res.code == 200) { + this.TasksCopy[i].finishNumber = res.data.finishNumber + ? res.data.finishNumber + : 0; + this.plcStatus=res.data.plcStatus?res.data.plcStatus:0 + } + }); + } + } + }, // 璁剧疆 setUrl() { - const { href } = this.$router.resolve({ + // const { href } = this.$router.resolve({ + // path: "/set", + // }); + // window.open(href, "_blank"); + this.$router.push({ path: "/set", }); - window.open(href, "_blank"); }, // 鍙充晶鎺у埗 controlClick() { - if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID) { - this.$refs.control.islook = true; + if (this.Tasks.length > 0) { + for(let i in this.Tasks){ + if(this.Tasks[i].Procedure.Status==1){ + this.$refs.control.islook = true; + break; + } + } } else { this.$message.error("褰撳墠璁惧娌℃湁宸ュ簭锛�"); } }, // 鍙充晶瀹屾垚 - finishClick() { - if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID) { - finishTask({ id: this.taskData.Procedure.ID }).then((res) => { + finishClick(i, taskData) { + if (Object.keys(taskData).length > 0 && taskData.Procedure.ID) { + finishTask({ id: taskData.Procedure.ID }).then((res) => { if (res.code == 200) { - this.finishShow = false; + this.finishShow['finishShow&'+i] = false; this.getTaskInfo(); this.$message.success("鎿嶄綔鎴愬姛锛�"); } @@ -713,8 +1127,147 @@ </script> <style lang="scss"> -.set-title{ - cursor:pointer; +.tooltip-width-200{ + width:200px; + line-height:1.3!important; +} +.el-popover{ + background:#12234a!important; + color:#fff!important; + border-color: #09e5ed !important; + + .popper__arrow::after{ + border-top-color:#09e5ed !important; + } +} +.color_yellow{ + color:yellow; +} +.color_318583{ + color:#318583; +} +.el-empty{ + height:calc(100% - 190px); + .el-empty__description p{ + font-size:16px!important; + color:#fff!important; + } +} + +.active-one { + width: 100%; + height: calc(100% - 100px); + .statelist { + height: 50px; + } + .small_title { + margin-bottom: 20px; + } + .content { + height: 300px; + } + .bottom { + height: calc(100% - 470px); + } + .font_size_20px{ + font-size:20px!important; + } +} +.active-two { + width: calc(50% - 10px); + height: calc(100% - 100px); + float: left; + padding-left: 10px; + &:nth-of-type(1) { + padding-right: 10px; + padding-left: 0px; + box-sizing: border-box; + border-right: 1px solid #eee; + } + + .small_title { + margin-bottom: 30px; + } + .statelist { + height: 60px; + .title-item{ + font-size:14px!important; + } + } + .title-item > span { + display: block; + line-height: 20px; + } + .content { + height: 430px; + + .content-top { + height: calc(50% - 30px) !important; + padding-top: 20px !important; + } + .el-descriptions__body { + font-size: 16px !important; + } + } + .bottom { + height: calc(100% - 610px); + } + .bottom_list .bottom-title { + font-size: 16px; + } +} +.gong-date{ + width:100%; + height:20px; + line-height:20px; + margin-bottom:10px; + font-size:16px; +} +.gongx{ + width:100%; + height:50px; + overflow-x:auto; + // overflow-y:hidden; + margin-top:-5px; + .steps{ + height:100%; + .el-step__icon{ + width:16px; + height:16px; + } + .el-step__title{ + line-height:25px; + font-size:14px; + } + } + + .el-step{ + .el-step__icon{ + background:#00cc66; + } + .is-wait{ + .el-step__icon{ + background:#fff; + } + } + } + .el-step__head.is-process{ + color: #00cc66 !important; + border-color:#00cc66; + } + .el-step__title.is-process{ + color: #00cc66 !important; + } + .el-step__head.is-wait{ + color:#fff; + border-color:#fff; + } + .el-step__title.is-wait{ + color:#fff; + } +} +.set-title { + cursor: pointer; } .home-img-box { width: calc(100% - 40px); @@ -731,39 +1284,38 @@ } .bg-title-span { position: absolute; - width: 400px; - height: 100px; - line-height: 100px; + width: 30%; + height: 4rem; + line-height: 2.4; font-size: 26px; font-weight: 700; text-align: center; - left: 39%; - top: 5%; + left: 36%; + top: 1.5rem; display: inline-block; } - .bg-set{ - position:absolute; - right:10%; - height: 100px; - line-height: 100px; + .bg-set { + position: absolute; + right: 10%; + height: 4rem; + line-height: 2.4; font-size: 40px; font-weight: 700; - top: 5%; + top: 1rem; } - .bg-date{ - position:absolute; - left:3%; + .bg-date { + position: absolute; + left: 3%; height: 100px; line-height: 30px; font-size: 16px; top: 15%; - span{ + span { font-size: 35px; - font-weight: 700; - line-height: 20px; + font-weight: 700; + line-height: 20px; } } - } .yuan { width: 40%; @@ -780,7 +1332,7 @@ margin: 0 auto; text-align: center; position: absolute; - top: 21%; + top: 9rem; } } } @@ -788,10 +1340,11 @@ font-size: 30px; font-weight: 700; } -.el-button--primary { - border: 0; - font-weight: 700 !important; - font-size: 16px !important; +.color_666{ + color:#666!important; +} +.color_fff{ + color:#fff!important; } .color_4efefa { color: #4efefa; @@ -803,7 +1356,10 @@ background: #33ccff !important; } .color_green { - background: #00cc66 !important; + color: #00cc66 !important; +} +.color_red { + background: red !important; } .color_organge { background: #f76c0f !important; @@ -816,16 +1372,16 @@ position: relative; padding: 10px; width: 30%; - height: 100%; + height: calc(100% - 20px); border-radius: 6px; background: rgb(22 72 173); // float:left; .bottom-title { font-weight: 600; - font-size: 22px; + font-size: 20px; height: 30px; line-height: 30px; - margin-bottom: 30px; + margin-bottom: 5px; .el-button--primary { color: #fff; float: right; @@ -866,15 +1422,26 @@ } .card-box { width: 100%; - height: calc(100% - 50px - 50px); - // overflow:auto; + height: calc(100% - 50px - 40px); // height:300px; + .el-carousel__container{ + overflow-y:auto; + } + .el-carousel__item{ + // height:auto; + min-height:160px; + } + } + .bottom-box-btn{ + width:calc(100% - 20px); + position:absolute; + bottom:10px; + left:10px; } } .small_title { - font-size: 24px; - margin-bottom: 10px; + font-size: 20px; } .right-small-btn { margin-top: 10px; @@ -903,6 +1470,15 @@ border: 0; } } + .huise{ + width: 46%; + float: right; + } + .huise.el-button--primary { + background: #CCE8E8; + color: #AAAAAA; + border: 0; + } } .home { width: 100%; @@ -921,23 +1497,27 @@ .title { font-size: 30px; font-weight: 600; - + height:40px; + margin:10px 0 30px; text-align: center; + .el-badge__content, .el-progress.is-exception .el-progress-bar__inner{ + background-color:green; + } } .statelist { width: 100%; - margin: 0 auto; - height: 50px; + margin: 0 auto 10px; flex-wrap: nowrap; align-content: center; justify-content: space-around; align-items: center; + overflow:hidden; .title-item { - width: calc(25% - 50px); + width: calc((100% - 50px)/3); float: left; margin-right: 10px; - padding: 15px 20px; + padding: 10px 5px; text-align: center; border-radius: 4px; display: inline-block; @@ -951,8 +1531,7 @@ } .content { width: 100%; - height: 240px; - margin: 30px 0px; + margin: 0px 0px 20px; overflow: hidden; .content_left { width: 24%; @@ -961,8 +1540,8 @@ // padding:2%; .content-top { background: rgb(22 72 173); - height: calc(50% - 30px); - padding-top: 20px; + height: calc(50% - 20px); + padding-top: 10px; text-align: center; line-height: 30px; border-radius: 6px; @@ -994,6 +1573,9 @@ background: rgb(22 72 173); border-radius: 6px; // background: #233b9e; + .el-descriptions-row{ + height:45px; + } .el-descriptions__body { background: transparent; font-size: 18px; @@ -1002,7 +1584,7 @@ width: 100%; margin: 10px 0px; // background: #233b9e; - color: #fff; + color: #ffff99; .el-descriptions--small { width: 100%; // margin: 50px 50px; @@ -1016,7 +1598,6 @@ .bottom { width: 100%; - height: calc(100% - 500px); display: flex; flex-wrap: nowrap; align-content: center; @@ -1031,18 +1612,31 @@ // border: 1px solid #ccc; background: #6b83ff; border-radius: 5px; - margin-top: 20px; + margin-top: 10px; color: #333; position: relative; - .card_top-2, + .font_dian{ + -webkit-box-orient:vertical; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; + } + .card_top-2{ + width:35%; + } + .card-top-input-out-r, .card_top-3 { - width: 50%; + width:65%; + } + .card_top-2,.card-top-input-out-r, + .card_top-3 { height: 45px; border-radius: 5px; background: #6b83ff; - font-size: 12px; + font-size: 13px; color: #fff; float: left; + font-weight: 700; .card-top-r-t { width: 100%; text-align: center; @@ -1076,7 +1670,7 @@ } } - .card_top, + .card_top,.card-top-input-out-l, .card_top-4 { width: 50%; height: 45px; @@ -1085,10 +1679,8 @@ color: #fff; font-size: 12px; line-height: 45px; - float: left; - > div { - margin-left: 12px; + padding-left: 12px; position: relative; p { position: absolute; @@ -1098,15 +1690,32 @@ } } } + .card_top{ + float: left; + } + .card-top-input-out-l{ + float:left; + width:65%; + line-height:20px; + vertical-align: middle; + display:flex; + justify-content:space-around; + align-items:center; + } + .card-top-input-out-r{ + width:35%; + } .card_top-4 { width: calc(100% - 20px); - padding: 0 10px; - height: 70px; - - line-height: 40px; + padding: 10px 10px; color: #fff; background: rgb(19, 35, 90); - font-size: 20px; + font-size: 14px; + height:50px; + line-height: 25px; + >div{ + margin-left:0px; + } } .card-info-box { position: absolute; @@ -1133,6 +1742,7 @@ border-radius: 5px 5px 0 0; background: rgb(19, 35, 90); } + .card_contentRight { width: 100%; @@ -1191,9 +1801,19 @@ line-height: 50px; font-weight: 700; font-size: 18px; - padding: 0 4%; + padding: 0 3%; overflow-x: hidden; - margin-left: -4%; + margin-left: -3%; + span{ + display:inline-block; + img{ + width:23px; + vertical-align: middle; + // float:left; + display:inline-block; + } + } + .yuandian { width: 25px; height: 25px; @@ -1218,14 +1838,16 @@ } } .right_dutyLst { - width: calc(100% - 20px); - height: 270px; + width: calc(106% - 20px); + // height: 270px; + height: 370px; border-radius: 4px; line-height: 30px; overflow: hidden; - // background: #00cc66; + background: #4565c9; margin-top: 10px; padding: 5px 10px; + margin-left:-3%; position: relative; .right-small-title { width: auto; @@ -1237,7 +1859,7 @@ } .right-person-box { width: 100%; - height: calc(100% - 40px); + height: calc(100% - 60px); overflow: auto; margin-top: -10px; } @@ -1267,7 +1889,7 @@ } .right_base { width: 100%; - height: calc(100% - 520px); + height: calc(100% - 580px); min-height: 200px; // overflow-y:auto; position: relative; @@ -1304,4 +1926,9 @@ } } } +.el-button--primary { + border: 0; + font-weight: 700 !important; + font-size: 16px; +} </style> -- Gitblit v1.8.0